Tugas Pertemuan 11 PPB - Autentikasi Aplikasi

-
Nama Akmal Sulthon Fathulloh
NRP 5025211047
Kelas PPB - D

Pada pertemuan kali ini, kita diminta untuk membuat autentikasi aplikasi Starbucks. Berikut adalah dokumentasi dan hasil pekerjaan yang telah dibuat.

Deskripsi Aplikasi

Aplikasi Starbucks ini adalah aplikasi seluler Android yang dikembangkan dengan Kotlin dan Jetpack Compose. Tujuan utamanya adalah untuk menangani otentikasi pengguna (login dan registrasi) menggunakan Firebase Phone Authentication, dan untuk menyimpan serta menampilkan data profil pengguna di Firebase Firestore.

Komponen Utama:

  1. Aktivitas Utama (MainActivity.kt): Ini adalah titik masuk aplikasi. Di sini, Firebase diinisialisasi, dan navigasi utama aplikasi (AppNavigation) diatur dalam tema Starbucks (StarbucksTheme). AuthViewModel diinisialisasi dan disediakan untuk komponen UI.
  2. Navigasi Aplikasi (AppNavigation.kt): Menggunakan Jetpack Compose Navigation, aplikasi ini mendefinisikan rute untuk berbagai layar: "login", "register", "otp", dan "home". Rute awal diatur ke "login".
  3. Layar (Screens):
    • SplashScreen.kt: Ini adalah layar pembuka yang menampilkan logo Starbucks. Setelah penundaan 2 detik, secara otomatis akan menavigasi ke layar "login".
    • LoginScreen.kt: Layar ini memungkinkan pengguna untuk masuk menggunakan nomor telepon mereka. Ketika tombol "continue" diklik, sendOtpForLogin dari AuthViewModel dipanggil untuk mengirim OTP, dan kemudian menavigasi ke layar "otp". Ada juga tautan "create here" untuk navigasi ke layar registrasi.
    • RegisterScreen.kt: Pengguna dapat mendaftar dengan memasukkan nama lengkap, tanggal lahir, jenis kelamin, dan nomor telepon. Ketika tombol "Send OTP" diklik, sendOtp dari AuthViewModel dipanggil untuk mengirim OTP dan menyimpan data pengguna sementara, kemudian menavigasi ke layar "otp". Ada juga tautan "log in here" untuk kembali ke layar login.
    • OtpScreen.kt: Di layar ini, pengguna memasukkan kode OTP 6 digit yang diterima. Tombol "Verify" memanggil verifyOtp dari AuthViewModel. Jika verifikasi berhasil, aplikasi menavigasi ke layar "home".
    • HomeScreen.kt: Setelah login berhasil, layar ini menampilkan data pengguna seperti nama lengkap, tanggal lahir, dan jenis kelamin, yang diambil dari Firebase Firestore.
  4. ViewModel (AuthViewModel.kt): Kelas ini bertanggung jawab untuk berinteraksi dengan Firebase Authentication dan Firestore.
    • sendOtpForLogin: Mengirim OTP untuk proses login.
    • sendOtp: Mengirim OTP untuk proses registrasi dan menyimpan data pengguna sementara di ViewModel sampai verifikasi OTP berhasil.
    • verifyOtp: Memverifikasi kode OTP yang dimasukkan pengguna.
    • signInWithCredential: Metode pribadi untuk menyelesaikan proses otentikasi Firebase setelah verifikasi OTP berhasil.
    • saveUserDataToFirestore: Menyimpan data pengguna (nama lengkap, tanggal lahir, jenis kelamin, nomor telepon) ke koleksi "users" di Firebase Firestore setelah otentikasi berhasil.

Struktur Proyek dan Dependensi:

  • Gradle (build.gradle.kts dan libs.versions.toml): File-file ini mengelola dependensi proyek. Dependensi utama meliputi:
    • androidx.compose.*: Untuk membangun UI dengan Jetpack Compose.
    • androidx.navigation:navigation-compose: Untuk navigasi antar composable.
    • com.google.firebase:firebase-bom, firebase-auth-ktx, firebase-firestore-ktx: Untuk Firebase Authentication dan Firestore.
    • com.android.application dan org.jetbrains.kotlin.android, org.jetbrains.kotlin.plugin.compose, com.google.gms.google-services: Plugin Gradle yang diperlukan.
  • Tema (Color.kt, Theme.kt, Type.kt): Mendefinisikan skema warna (Purple80, Purple40, dll.), tema terang/gelap, dan tipografi aplikasi.
  • Sumber Daya (Resources): Berisi gambar seperti logo Starbucks dan aset untuk ikon peluncur, serta file XML untuk string dan tema.
  • Pengujian (ExampleUnitTest.kt, ExampleInstrumentedTest.kt): Menyediakan contoh unit test dan instrumented test.
  • Manifes Android (AndroidManifest.xml): Mendeklarasikan izin INTERNET yang diperlukan dan komponen aplikasi seperti aktivitas.

Berikut adalah hasil running aplikasi pada Android Virtual Device.

Video Presentasi

Berikut adalah video presentasi demonstrasi aplikasi yang telah saya buat.

Kode Sumber

Kode sumber dapat dilihat pada repositori GitHub berikut.

Referensi

https://kuliahppb.blogspot.com/2024/06/studi-kasus-starbuck.html

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas Pertemuan 2 PPB - Membuat aplikasi sederhana dengan Jetpack Compose

-
Gambar
Nama Akmal Sulthon Fathulloh NRP 5025211047 Kelas PPB - D Pada pertemuan kali ini, kita diminta untuk belajar menggunakan Jetpack Compose dan membuat aplikasi pertama sederhana yang mencetak tulisan "Hello World". Dalam mengerjakan ini, saya mengikuti dokumentasi resmi mengenai Dasar-Dasar Jetpack Compose . Berikut adalah dokumentasi dan hasil aplikasi yang telah dibuat. Memulai Project Compose Baru Untuk memulai project Compose baru, buka Android Studio. Jika baru memulai di jendela Welcome to Android Studio , klik Start a new Android Studio project . Jika sudah membuka project Android Studio, pilih File > New > New Project dari panel menu. Untuk project baru, pilih Empty Activity dari template yang tersedia. Saat memilih template Empty Activity , kode berikut akan dibuat secara otomatis dalam project: Project sudah dikonfigurasi untuk menggunakan Com...
Read more »

Tugas Pertemuan 4 PPB - Membuat aplikasi Dice Roller interaktif

-
Gambar
Nama Akmal Sulthon Fathulloh NRP 5025211047 Kelas PPB - D Pada pertemuan kali ini, kita diminta untuk membuat aplikasi Dice Roller interaktif menggunakan Jetpack Compose. Dalam mengerjakan ini, saya mengacu pada dokumentasi Codelabs Membuat aplikasi Dice Roller interaktif . Berikut adalah dokumentasi dan hasil pekerjaan yang telah dibuat. Restrukturisasi sample code Kita perlu mengubah beberapa sintaks dari sample code untuk membuat tampilan gambar dadu dan tombol untuk melemparnya. Kita akan menyusun fungsi composable untuk mencerminkan arsitektur ini. Hapus fungsi GreetingPreview() dan buat fungsi DiceWithButtonAndImage() dengan anotasi @Composable . Fungsi composable ini mewakili komponen UI tata letak dan juga menampung logika klik tombol dan tampilan gambar. Kemudian, hapus fungsi Greeting(name: String, modifier: Modifier = Modifier) , dan buat fungsi DiceRollerApp() denga...
Read more »

Tugas Pertemuan 3 PPB - Membangun aplikasi sederhana dengan Composable Teks

-
Gambar
Nama Akmal Sulthon Fathulloh NRP 5025211047 Kelas PPB - D Pada pertemuan kali ini, kita diminta untuk belajar menggunakan Jetpack Compose untuk membangun aplikasi Android sederhana yang menampilkan pesan ulang tahun di layar. Dalam mengerjakan ini, saya mengacu pada dokumentasi resmi mengenai Membangun aplikasi sederhana dengan composable teks . Berikut adalah dokumentasi dan hasil aplikasi yang telah dibuat. Menyiapkan aplikasi Happy Birthday Setelah mengikuti langkah-langkah dari dokumentasi codelab, kita akan mendapatkan aplikasi yang menampilkan pesan ulang tahun sederhana. Berikut adalah hasil aplikasi yang telah dibuat. Berikut adalah hasil running aplikasi pada Android Virtual Device. Modifikasi Saya melakukan beberapa modifikasi dan penyesuaian pada kode sebelumnya. Berikut adalah perubahan yang saya lakukan. Menambahkan beberapa komponen baru sep...
Read more »