Aplikasi Android: Sign Up dengan OTP & Login

Aplikasi Android: Sign Up dengan OTP & Login

Deskripsi Proyek

Aplikasi ini merupakan implementasi autentikasi pengguna di Android menggunakan Jetpack Compose dan Navigation Component. Terdapat dua fitur utama:

  • Sign Up (Pendaftaran) dengan verifikasi kode OTP
  • Login untuk pengguna yang sudah terdaftar

Alur Navigasi

Navigasi antar layar dikelola menggunakan sealed class Screen dan NavHost. Berikut daftar layarnya:

  1. LayarMuat: Halaman splash screen
  2. LamanDepan: Tampilan awal dengan tombol "Masuk" dan "Daftar"
  3. Masuk: Form login pengguna
  4. Daftar: Form pendaftaran
  5. OTP: Verifikasi kode OTP (4 digit)
  6. Aplikasi: Tampilan utama setelah berhasil login


Struktur Navigasi Kode

sealed class Screen(val route: String) {
    data object LayarMuat : Screen("layarmuat")
    data object LamanDepan : Screen("lamandepan")
    data object Masuk : Screen("masuk")
    data object Daftar : Screen("daftar")
    data object OTP : Screen("otp")
    data object Aplikasi : Screen("aplikasi")
}

Navigasi antar layar diatur dalam fungsi Navigasi() menggunakan NavHost.

Penjelasan Setiap Layar

  • LayarMuat: Layar loading awal yang akan berpindah otomatis ke LamanDepan
  • LamanDepan: Menyediakan tombol navigasi ke layar Masuk atau Daftar
  • LamanMasuk: Autentikasi pengguna menggunakan email dan password, kemudian navigasi ke Aplikasi
  • LamanDaftar: Input data pendaftaran, setelah submit akan diarahkan ke OTP
  • LamanOTP: Verifikasi OTP dari email. Jika berhasil, akan diarahkan ke Masuk
  • LamanAplikasi: Layar utama aplikasi setelah login berhasil, dilengkapi tombol logout

Fitur Tambahan

  • Validasi input 4 digit OTP
  • Tombol verifikasi hanya aktif jika input valid
  • Pop-up navigasi untuk mencegah kembali ke halaman sebelumnya setelah sukses

Kesimpulan

Aplikasi ini memberikan pengalaman registrasi dan login yang aman dan mudah menggunakan OTP. Pendekatan ini cocok untuk aplikasi modern yang membutuhkan verifikasi email atau nomor telepon.

https://github.com/Arkandrvesh/PPB


VIDIO : 



Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat aplikasi Hello Android

Gambar
Proyek Hello Android - Jetpack Compose Proyek ini adalah contoh aplikasi Android paling dasar menggunakan Jetpack Compose . Tujuannya adalah untuk menampilkan tulisan sederhana yaitu Hello Android di layar perangkat. Struktur Proyek MainActivity.kt → Tempat kode utama yang menjalankan UI Theme.kt → Untuk mengatur tema aplikasi (optional, default saja) AndroidManifest.xml → Mendefinisikan aktivitas awal aplikasi Kode Lengkap MainActivity package com.example.helloandroid import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.material3.Text import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.runtime.Composable import androidx.compose.ui.tooling.preview.Preview import com.example.helloandroid.ui.theme.HelloAndroidTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInst...
Baca selengkapnya

Aplikasi Dessert Clicker (Activity dan Intent)

Gambar
Dessert Clicker App dengan Jetpack Compose Dessert Clicker adalah aplikasi Android sederhana berbasis Jetpack Compose yang menampilkan gambar dessert dan menghitung total pendapatan berdasarkan jumlah dessert yang telah diklik oleh pengguna. Aplikasi ini cocok digunakan untuk mempelajari konsep dasar Jetpack Compose seperti state management, layout, serta pemisahan concerns menggunakan Composable functions . 1. Struktur Proyek MainActivity.kt : Berisi logika utama aplikasi dan lifecycle logging. Datasource.kt : Menyediakan daftar dessert sebagai data statis. Dessert.kt : Data model yang merepresentasikan setiap dessert. ui.theme : Berisi file Theme.kt dan Color.kt untuk pengaturan tema Material3. 2. Tampilan Aplikasi Tampilan menunjukkan sebuah dessert di atas meja dan dua informasi penting: Desserts sold: Jumlah dessert yang telah dijual (klik oleh user). Total Revenue: Total pendapatan berdasarkan harga setiap dessert yang dijual. 3. Penjelasan Ko...
Baca selengkapnya

Aplikasi Woof (Material Design)

Gambar
Aplikasi Woof - Jetpack Compose Showcase Aplikasi Woof adalah aplikasi berbasis Android yang dibuat menggunakan Jetpack Compose dan Material 3 . Aplikasi ini dirancang untuk menampilkan daftar anjing (dog list) lengkap dengan nama, umur, gambar, dan hobi mereka. Cocok digunakan sebagai proyek pembelajaran UI deklaratif dengan animasi dan tema. 🛠️ Teknologi yang Digunakan Jetpack Compose (UI deklaratif modern) Material 3 untuk desain UI Kotlin sebagai bahasa pemrograman Android Studio sebagai lingkungan pengembangan 📱 Tampilan Aplikasi Setiap item dalam daftar menampilkan informasi berikut: 📷 Foto Anjing (berbentuk bulat) 🐶 Nama anjing dan usia 🔽 Tombol expand/collapse untuk menampilkan deskripsi hobi 📂 Struktur File com.example.woof │ ├── data │ └── Dog.kt (model data anjing) │ └── DogData.kt (data dummy anjing) │ ├── ui.theme │ └── Theme.kt (pengaturan tema Material 3) │ └── Color.kt, Type.kt, Shape.kt │ ├── MainAct...
Baca selengkapnya