PPB - Authentication

-

Pada pertemuan kali ini saya diberi tugas untuk membuat sebuah Aplikasi Autentikasi Registrasi dengan menggunakan OTP. Untuk implementasinya adalah seperti berikut ini

Aplikasi ini mengikuti proses registrasi dan login dengan verifikasi OTP sebagai berikut:

LoginScreen.kt

  • Tampilan awal saat aplikasi dibuka.

  • User bisa login atau menekan tombol "Daftar Akun Baru" untuk masuk ke proses registrasi.

RegisterScreen.kt

  • Form pendaftaran berisi: Email, Password, Konfirmasi Password, Nomor HP, dan checkbox persetujuan.

  • Setelah validasi, data dikirim ke MainActivity, lalu OTP digenerate dan dikirim.

OTPVerificationScreen

  • Menampilkan input 6 digit OTP yang dikirim ke nomor HP.

  • Verifikasi OTP secara otomatis ketika 6 digit sudah dimasukkan.

  • Jika OTP valid → lanjut ke pengisian data diri (PersonalDataScreen).

PersonalDataScreen

  • Form data diri: Nama Lengkap, Tanggal Lahir, Provinsi, Kota.

  • Setelah data valid, user dianggap terdaftar dan terverifikasi.

WelcomeScreen

  • Halaman sambutan setelah registrasi atau login berhasil.

  • Menampilkan nama dan data user + manfaat menjadi member Starbucks.

  • Tombol “Mulai Berbelanja” untuk kembali ke login atau lanjut ke fitur utama.

MainActivity

File utama yang menyimpan state dan alur navigasi antar screen.

  • OTPApp() menyimpan semua state (registerData, personalData, user, dll).

  • Mengatur flow antar screen:

    • Login → Register → OTP → Personal Data → Welcome

    • Welcome → Login lagi bila diperlukan

DataModels

Berisi:

  • RegisterData, PersonalData, User: menyimpan data dari form.

  • AppScreen: untuk menyimpan nama-nama halaman.

  • IndonesiaData: daftar provinsi dan kota.

UIComponents

Komponen UI yang dapat digunakan ulang:

  • StarbucksTextField, StarbucksButton, StarbucksOutlinedButton

  • OTPInputField: custom input untuk OTP

  • StarbucksHeader dan StarbucksLogo: header dan logo

Berikut adalah Tampilan dari aplikasi tersebut



Berikut adalah demo dari aplikasi yang saya buat

Dan berikut adalah github codenya : arilimata/PPB-Auth


Komentar

Posting Komentar

Postingan populer dari blog ini

PPB - Membuat Aplikasi Sederhana dengan Jetpack Compose

-
Gambar
     Dalam pertemuan kedua ini, saya diberi tugas untuk membuat sebuah aplikasi sederhana menggunakan Android Studio. Aplikasi tersebut dibuat berdasarkan langkah - langkah dari  Jetpack Compose basics . Berikut adalah hasil pengerjaan saya : 1. Membuat Project Baru Disini saya membuat project baru menggunakan Empty Acticity . 2. Membuat Hello Android Menggunakan Compose 3. Membuat button, row, dan column 4. Membuat state pada button 5. State Hoisting 6. Membuat List dan Membuat State Persist 7. Membuat Animasi 8. Styling dan menambahkan Icon 9. Modifikaisi terhadap style Font dan Theme Color Video Presentasi Link Source Code :  GitHub Terima Kasih 🙏
Baca selengkapnya

PPB - Infografis Teknologi Perangkat Bergerak

-
Gambar
Pada pertemuan hari ini saya mendapatkan tugas untuk membuat sebuah Infografis mengenai perkembangan Teknologi Perangkat Bergerak. Berikut adalah hasil infografis mengenai Teknologi Perangkat Bergerak Pada 1973, Martin Cooper yang saat itu bekerja sebagai engineer Motorola berhasil menemukan telepon portabel dan berhasil melakukan panggilan suara.  Memasuki tahun 1990-an, bisa dikatakan sebagai era di mana industri ponsel berkembang sangat pesat. Di tahun 1991, sudah mulai muncul teknologi GSM (Global System for Mobile Communication). Melansir dari Android Authority, kemunculan GSM membuat seluruh dunia mengadopsi teknologi tersebut ke dalam ponsel. Sebagian pengguna juga mulai membeli kartu SIM. Nah, pada tahun 1994, Nokia merilis Nokia 2010, ponsel yang memiliki keypad numerik dan huruf untuk memasukkan teks.  Pada 1999, Nokia meluncurkan ponsel dengan model “pisang”, alias punya bodi yang melengkung menyerupai buah pisang. Sementara itu, Motorola juga merilis ponsel barunya...
Baca selengkapnya

PPB - Membuat Aplikasi Kalkulator

-
Gambar
 Dalam pertemuan kali ini saya berlatih untuk membuat sebuah kalkulator sederhana. Saya membuat sebuah kalkulator berdasarkan sumber referensi  berikut . Lalu ini adalah hasil akhir dari pengerjaan saya Lalu untuk modifikasinya saya menambahkan beberapa fitur berikut ini : Suhu (Temperature) : Mengkonversi suhu dari Celcius ke Fahrenheit. Panjang (Length) : Mengkonversi panjang dari meter ke kilometer. Mata Uang (Currency) : Mengkonversi nilai dari IDR ke USD (perkiraan). Umur (Age) : Menghitung usia berdasarkan tahun lahir. Kecepatan (Speed) : Mengkonversi kecepatan dari m/s ke km/h. Area & Keliling (Area & Perimeter) : Menghitung area dan keliling lingkaran berdasarkan jari-jari. Berikut adalah tampilan dari hasil modifikasi Berikut adalah video demonstrasai dari aplikasi saya Link Github :  arilimata/PPB-Calculator
Baca selengkapnya