Bangun aplikasi Android dengan Firebase dan Jetpack Compose

1. Perkenalan

Terakhir Diperbarui: 16-11-2022

Membangun aplikasi Android dengan Firebase dan Jetpack Compose

Dalam codelab ini, Anda akan mem-build aplikasi Android bernama Make It So . UI aplikasi ini seluruhnya dibuat dengan Jetpack Compose , yang merupakan toolkit modern Android untuk membuat UI asli - intuitif dan memerlukan lebih sedikit kode dibandingkan menulis file .xml dan mengikatnya ke Aktivitas, Fragmen, atau Tampilan.

Langkah pertama untuk memahami seberapa baik Firebase dan Jetpack Compose bekerja sama adalah dengan memahami arsitektur Android modern. Arsitektur yang baik membuat sistem mudah dipahami, mudah dikembangkan, dan dipelihara karena memperjelas bagaimana komponen-komponen diorganisasikan dan berkomunikasi satu sama lain. Di dunia Android, arsitektur yang direkomendasikan disebut Model - View - ViewModel . Model mewakili lapisan yang mengakses Data dalam aplikasi. Tampilan adalah lapisan UI dan tidak mengetahui apa pun tentang logika bisnis. Dan ViewModel adalah tempat logika bisnis diterapkan, yang terkadang memerlukan ViewModel untuk memanggil lapisan Model .

Kami sangat menyarankan membaca artikel ini untuk memahami bagaimana Model - View - ViewModel diterapkan pada aplikasi Android yang dibuat dengan Jetpack Compose, karena ini akan membuat basis kode lebih mudah dipahami dan langkah selanjutnya lebih mudah diselesaikan.

Apa yang akan Anda bangun

Make It So adalah aplikasi daftar tugas sederhana yang memungkinkan pengguna untuk menambah dan mengedit tugas, menambahkan tanda, prioritas dan tanggal jatuh tempo, dan menandai tugas sebagai selesai. Gambar di bawah menunjukkan dua halaman utama aplikasi ini: halaman pembuatan tugas dan halaman utama dengan daftar tugas yang dibuat.

Jadikan layar Jadi Tambahkan TugasJadikan Jadi Layar Utama

Anda akan menambahkan beberapa fitur yang hilang di aplikasi ini:

  • Otentikasi pengguna dengan email dan kata sandi
  • Tambahkan pendengar ke koleksi Firestore dan buat UI bereaksi terhadap perubahan
  • Tambahkan jejak khusus untuk memantau kinerja kode tertentu di aplikasi
  • Buat peralihan fitur menggunakan Remote Config dan gunakan peluncuran bertahap untuk meluncurkannya

Apa yang akan Anda pelajari

  • Cara menggunakan Firebase Authentication, Performance Monitoring, Remote Config dan Cloud Firestore dalam aplikasi Android modern
  • Cara membuat Firebase API sesuai dengan arsitektur MVVM
  • Cara mencerminkan perubahan yang dilakukan dengan Firebase API di UI Compose

Apa yang Anda perlukan

2. Dapatkan aplikasi contoh dan siapkan Firebase

Dapatkan kode aplikasi contoh

Kloning repositori GitHub dari baris perintah:

git clone https://github.com/FirebaseExtended/make-it-so-android.git

Siapkan Firebase

Hal pertama yang perlu Anda lakukan adalah pergi ke Firebase console dan membuat proyek Firebase dengan mengklik tombol "+ Tambahkan proyek", seperti yang Anda lihat di bawah:

Konsol Firebase

Ikuti langkah-langkah di layar untuk menyelesaikan pembuatan proyek.

Di dalam setiap proyek Firebase, Anda dapat membuat aplikasi berbeda: untuk Android, iOS, Web, Flutter, dan Unity. Pilih opsi Android, seperti yang Anda lihat di sini:

Ikhtisar Proyek Firebase

Kemudian ikuti langkah-langkah berikut:

  1. Masukkan com.example.makeitso sebagai nama paket dan, secara opsional, masukkan nama panggilan. Untuk codelab ini, Anda tidak perlu menambahkan sertifikat penandatanganan debug.
  2. Klik Berikutnya untuk mendaftarkan aplikasi Anda dan mengakses file konfigurasi Firebase.
  3. Klik Unduh google-services.json untuk mengunduh file konfigurasi Anda dan menyimpannya di direktori make-it-so-android/app .
  4. Klik Berikutnya . Karena Firebase SDK sudah disertakan dalam file build.gradle di proyek contoh, klik Berikutnya untuk melompat ke Langkah berikutnya .
  5. Klik Lanjutkan ke konsol untuk menyelesaikan.

Agar aplikasi Make it So berfungsi dengan baik, ada dua hal yang perlu Anda lakukan di Konsol sebelum beralih ke kode: mengaktifkan penyedia autentikasi dan membuat database Firestore. Pertama, aktifkan Otentikasi agar pengguna dapat masuk ke aplikasi:

  1. Dari menu Build , pilih Autentikasi , lalu klik Memulai .
  2. Dari kartu Metode masuk , pilih Email/Kata Sandi , dan aktifkan.
  3. Selanjutnya, klik Tambahkan penyedia baru dan pilih dan aktifkan Anonim .

Selanjutnya, siapkan Firestore. Anda akan menggunakan Firestore untuk menyimpan tugas pengguna yang masuk. Setiap pengguna akan mendapatkan dokumennya sendiri dalam kumpulan database.

  1. Dari menu Build , pilih Firestore , lalu klik Create database .
  2. Tetap aktifkan Mulai dalam mode produksi dan klik Berikutnya .
  3. Saat diminta, pilih lokasi penyimpanan data Cloud Firestore Anda. Saat mengembangkan aplikasi produksi, Anda ingin aplikasi ini berada di wilayah yang dekat dengan sebagian besar pengguna Anda dan memiliki kesamaan dengan layanan Firebase lainnya, seperti Functions. Untuk codelab ini, Anda dapat mempertahankan region default atau memilih region yang paling dekat dengan Anda.
  4. Klik Aktifkan untuk menyediakan database Firestore Anda.

Mari luangkan waktu sejenak untuk membuat Aturan Keamanan yang kuat pada database Firestore. Buka dasbor Firestore dan buka tab Aturan . Kemudian perbarui Aturan Keamanan menjadi seperti ini:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow create: if request.auth != null;
      allow read, update, delete: if request.auth != null && resource.data.userId == request.auth.uid;
    }
  }
}

Aturan ini pada dasarnya mengatakan bahwa setiap pengguna aplikasi yang masuk dapat membuat dokumen untuk dirinya sendiri dalam koleksi apa pun. Kemudian, setelah dibuat, hanya pengguna yang membuat dokumen tersebut yang dapat melihat, memperbarui, atau menghapus dokumen tersebut.

Jalankan aplikasi

Sekarang Anda siap menjalankan aplikasi! Buka folder make-it-so-android/start di Android Studio dan jalankan aplikasinya (dapat dilakukan menggunakan Android Emulator atau perangkat Android asli).

3. Otentikasi Firebase

Fitur mana yang akan Anda tambahkan?

Dalam keadaan aplikasi contoh Make It So saat ini, pengguna dapat mulai menggunakan aplikasi tanpa harus masuk terlebih dahulu. Ia menggunakan otentikasi anonim untuk mencapai hal ini. Namun, akun anonim tidak mengizinkan pengguna mengakses datanya di perangkat lain atau bahkan di sesi mendatang. Meskipun autentikasi anonim berguna untuk orientasi awal, Anda harus selalu memberikan opsi bagi pengguna untuk beralih ke bentuk masuk yang berbeda. Dengan mengingat hal ini, dalam codelab ini, Anda akan menambahkan autentikasi email dan sandi ke aplikasi Make It So.

Saatnya membuat kode!

Segera setelah pengguna membuat akun, dengan mengetikkan email dan kata sandi, Anda perlu meminta kredensial email dari Firebase Authentication API, lalu menautkan kredensial baru tersebut ke akun anonim. Buka file AccountServiceImpl.kt di Android Studio dan perbarui fungsi linkAccount sehingga terlihat seperti berikut:

model/layanan/impl/AccountServiceImpl.kt

override suspend fun linkAccount(email: String, password: String) {
    val credential = EmailAuthProvider.getCredential(email, password)
    auth.currentUser!!.linkWithCredential(credential).await()
}

Sekarang buka SignUpViewModel.kt dan panggil fungsi layanan linkAccount di dalam blok launchCatching dari fungsi onSignUpClick :

layar/sign_up/SignUpViewModel.kt

launchCatching {
    accountService.linkAccount(email, password)
    openAndPopUp(SETTINGS_SCREEN, SIGN_UP_SCREEN)
}

Pertama-tama ia mencoba mengautentikasi, dan jika panggilan berhasil, ia melanjutkan ke layar berikutnya ( SettingsScreen ). Saat Anda menjalankan panggilan ini di dalam blok launchCatching , jika kesalahan terjadi pada baris pertama, pengecualian akan ditangkap dan ditangani, dan baris kedua tidak akan tercapai sama sekali.

Segera setelah SettingsScreen dibuka kembali, Anda perlu memastikan bahwa opsi Masuk dan Buat akun sudah hilang, karena sekarang pengguna sudah diautentikasi. Untuk melakukannya, mari buat SettingsViewModel mendengarkan status pengguna saat ini (tersedia di AccountService.kt ), untuk memeriksa apakah akun tersebut anonim atau tidak. Untuk melakukannya, perbarui uiState di SettingsViewModel.kt agar terlihat seperti berikut:

layar/pengaturan/SettingsViewModel.kt

val uiState = accountService.currentUser.map {
    SettingsUiState(it.isAnonymous)
}

Hal terakhir yang perlu Anda lakukan adalah memperbarui uiState di SettingsScreen.kt untuk mengumpulkan status yang dikeluarkan oleh SettingsViewModel :

layar/pengaturan/PengaturanLayar.kt

val uiState by viewModel.uiState.collectAsState(
    initial = SettingsUiState(false)
)

Sekarang setiap kali pengguna berganti, SettingsScreen akan menyusun ulang dirinya sendiri untuk menampilkan opsi sesuai dengan status autentikasi baru pengguna.

Saatnya untuk menguji!

Jalankan Jadikan Jadi dan navigasikan ke pengaturan dengan mengklik ikon roda gigi di sudut kanan atas layar. Dari sana, klik opsi buat akun:

Jadikan layar pengaturan JadiBuatlah Jadi daftar layar

Ketikkan email yang valid dan kata sandi yang kuat untuk membuat akun Anda. Ini akan berfungsi dan Anda akan diarahkan ke halaman pengaturan, di mana Anda akan melihat dua opsi baru: keluar dan menghapus akun Anda. Anda dapat memeriksa akun baru yang dibuat di dasbor Autentikasi di Firebase console dengan mengklik tab Pengguna.

4. Penyimpanan Awan Api

Fitur mana yang akan Anda tambahkan?

Untuk Cloud Firestore, Anda akan menambahkan pendengar ke koleksi Firestore yang menyimpan dokumen yang mewakili tugas yang ditampilkan di Make it So . Setelah Anda menambahkan pendengar ini, Anda akan menerima setiap pembaruan yang dilakukan pada koleksi ini.

Saatnya membuat kode!

Perbarui Flow yang tersedia di StorageServiceImpl.kt agar terlihat seperti ini:

model/layanan/impl/StorageServiceImpl.kt

override val tasks: Flow<List<Task>>
    get() =
      auth.currentUser.flatMapLatest { user ->
        firestore.collection(TASK_COLLECTION).whereEqualTo(USER_ID_FIELD, user.id).dataObjects()
      }

Kode ini menambahkan pendengar ke kumpulan tugas berdasarkan user.id . Setiap tugas diwakili oleh dokumen dalam koleksi bernama tasks , dan masing-masing tugas memiliki bidang bernama userId . Harap perhatikan bahwa Flow baru akan dikeluarkan jika status currentUser berubah (misalnya dengan keluar).

Sekarang Anda perlu membuat Flow di TasksViewModel.kt mencerminkan hal yang sama seperti di layanan:

layar/tugas/TasksViewModel.kt

val tasks = storageService.tasks

Dan hal terakhir adalah membuat composable function di TasksScreens.kt , yang mewakili UI, menyadari aliran ini dan mengumpulkannya sebagai sebuah negara. Setiap kali status berubah, fungsi composable akan otomatis mengomposisi ulang dirinya sendiri dan menampilkan status terbaru kepada pengguna. Tambahkan ini ke TasksScreen composable function :

layar/tugas/TasksScreen.kt

val tasks = viewModel
    .tasks
    .collectAsStateWithLifecycle(emptyList())

Setelah fungsi composable memiliki akses ke status ini, Anda dapat memperbarui LazyColumn (yang merupakan struktur yang Anda gunakan untuk menampilkan daftar di layar) agar terlihat seperti ini:

layar/tugas/TasksScreen.kt

LazyColumn {
    items(tasks.value, key = { it.id }) { taskItem ->
        TaskItem( [...] )
    }
}

Saatnya untuk menguji!

Untuk menguji apakah ini berhasil, tambahkan tugas baru menggunakan aplikasi (dengan mengklik tombol tambah di sudut kanan bawah layar). Setelah Anda selesai membuat tugas, tugas tersebut akan muncul di koleksi Firestore di Konsol Firestore. Jika Anda masuk ke Jadikan Jadi di perangkat lain dengan akun yang sama, Anda akan dapat mengedit item tugas Anda dan melihatnya diperbarui di semua perangkat secara real-time.

5. Pemantauan Kinerja

Fitur mana yang akan Anda tambahkan?

Performa merupakan hal yang sangat penting untuk diperhatikan karena kemungkinan besar pengguna akan berhenti menggunakan aplikasi Anda jika performanya tidak bagus dan membutuhkan terlalu banyak waktu untuk menyelesaikan tugas sederhana dengan menggunakannya. Itulah sebabnya terkadang mengumpulkan beberapa metrik tentang perjalanan tertentu yang dilakukan pengguna di aplikasi Anda akan berguna. Dan untuk membantu Anda dalam hal tersebut, Firebase Performance Monitoring menawarkan pelacakan khusus . Ikuti langkah berikutnya untuk menambahkan pelacakan khusus dan mengukur kinerja dalam berbagai bagian kode di Make it So .

Saatnya membuat kode!

Jika Anda membuka file Performance.kt , Anda akan melihat fungsi inline bernama trace. Fungsi ini memanggil Performance Monitoring API untuk membuat pelacakan kustom, meneruskan nama pelacakan sebagai parameter. Parameter lain yang Anda lihat adalah blok kode yang ingin Anda pantau. Metrik default yang dikumpulkan untuk setiap pelacakan adalah waktu yang diperlukan untuk berjalan sepenuhnya:

model/layanan/Kinerja.kt

inline fun <T> trace(name: String, block: Trace.() -> T): T = Trace.create(name).trace(block)

Anda dapat memilih bagian basis kode mana yang menurut Anda penting untuk diukur dan menambahkan jejak khusus ke dalamnya. Berikut ini contoh penambahan pelacakan kustom ke fungsi linkAccount yang Anda lihat sebelumnya (di AccountServiceImpl.kt ) dalam codelab ini:

model/layanan/impl/AccountServiceImpl.kt

override suspend fun linkAccount(email: String, password: String): Unit =
  trace(LINK_ACCOUNT_TRACE) {
      val credential = EmailAuthProvider.getCredential(email, password)
      auth.currentUser!!.linkWithCredential(credential).await()
  }

Sekarang giliran Anda! Tambahkan beberapa jejak khusus ke aplikasi Make it So dan lanjutkan ke bagian berikutnya untuk menguji apakah itu berfungsi seperti yang diharapkan.

Saatnya untuk menguji!

Setelah Anda selesai menambahkan jejak khusus, jalankan aplikasi dan pastikan untuk menggunakan fitur yang ingin Anda ukur beberapa kali. Lalu buka Firebase console dan buka dasbor Performance . Di bagian bawah layar, Anda akan menemukan tiga tab: Permintaan jaringan , Jejak khusus , dan Render layar .

Buka tab Jejak khusus dan periksa apakah jejak yang Anda tambahkan dalam basis kode ditampilkan di sana, dan Anda dapat melihat berapa lama waktu yang biasanya diperlukan untuk mengeksekusi potongan kode ini.

6. Konfigurasi Jarak Jauh

Fitur mana yang akan Anda tambahkan?

Ada banyak kasus penggunaan Remote Config, mulai dari mengubah tampilan aplikasi dari jarak jauh hingga mengonfigurasi perilaku berbeda untuk segmen pengguna berbeda. Dalam codelab ini, Anda akan menggunakan Remote Config untuk membuat tombol alih fitur yang akan menampilkan atau menyembunyikan fitur tugas edit baru di aplikasi Make it So.

Saatnya membuat kode!

Hal pertama yang perlu Anda lakukan adalah membuat konfigurasi di Firebase console. Untuk melakukannya, Anda perlu menavigasi ke dasbor Remote Config dan klik tombol Tambahkan parameter . Isi kolom sesuai gambar di bawah ini:

Remote Config Buat dialog Parameter

Setelah semua kolom terisi, Anda dapat mengklik tombol Simpan lalu Publikasikan . Kini setelah parameter dibuat dan tersedia untuk basis kode, Anda perlu menambahkan kode yang akan mengambil nilai baru ke aplikasi Anda. Buka file ConfigurationServiceImpl.kt dan perbarui implementasi kedua fungsi ini:

model/layanan/impl/ConfigurationServiceImpl.kt

override suspend fun fetchConfiguration(): Boolean {
  return remoteConfig.fetchAndActivate().await()
}

override val isShowTaskEditButtonConfig: Boolean
  get() = remoteConfig[SHOW_TASK_EDIT_BUTTON_KEY].asBoolean()

Fungsi pertama mengambil nilai dari server, dan dipanggil segera setelah aplikasi dimulai, di SplashViewModel.kt . Ini adalah cara terbaik untuk memastikan bahwa nilai terkini akan tersedia di semua layar sejak awal. Ini bukan pengalaman pengguna yang baik jika Anda mengubah UI atau perilaku aplikasi nanti, ketika pengguna sedang melakukan sesuatu!

Fungsi kedua adalah mengembalikan nilai boolean yang dipublikasikan untuk parameter yang baru saja Anda buat di Konsol. Dan Anda harus mengambil informasi ini di TasksViewModel.kt , dengan menambahkan yang berikut ke fungsi loadTaskOptions :

layar/tugas/TasksViewModel.kt

fun loadTaskOptions() {
  val hasEditOption = configurationService.isShowTaskEditButtonConfig
  options.value = TaskActionOption.getOptions(hasEditOption)
}

Anda mengambil nilai pada baris pertama, dan menggunakannya untuk memuat opsi menu untuk item tugas pada baris kedua. Jika nilainya false , berarti menu tidak berisi opsi edit. Sekarang setelah Anda memiliki daftar opsi, Anda perlu membuat UI menampilkannya dengan benar. Saat membuat aplikasi dengan Jetpack Compose, Anda perlu mencari composable function yang mendeklarasikan tampilan UI TasksScreen . Jadi buka file TasksScreen.kt dan perbarui LazyColum untuk menunjuk ke opsi yang tersedia di TasksViewModel.kt :

layar/tugas/TasksScreen.kt

val options by viewModel.options

LazyColumn {
  items(tasks.value, key = { it.id }) { taskItem ->
    TaskItem(
      options = options,
      [...]
    )
  }
}

TaskItem adalah composable function yang mendeklarasikan tampilan UI suatu tugas. Dan setiap tugas memiliki menu dengan opsi yang ditampilkan ketika pengguna mengklik ikon tiga titik di akhir tugas.

Saatnya untuk menguji!

Sekarang Anda siap menjalankan aplikasi! Pastikan nilai yang Anda publikasikan menggunakan Firebase console cocok dengan perilaku aplikasi:

  • Jika false , Anda hanya akan melihat dua opsi saat mengeklik ikon tiga titik;
  • Jika true , Anda akan melihat tiga opsi saat mengklik ikon tiga titik;

Coba ubah nilainya beberapa kali di Konsol dan mulai ulang aplikasi. Begitulah mudahnya meluncurkan fitur baru di aplikasi Anda menggunakan Remote Config!

7. Selamat

Selamat, Anda berhasil membuat aplikasi Android dengan Firebase dan Jetpack Compose!

Anda menambahkan Firebase Authentication, Performance Monitoring, Remote Config, dan Cloud Firestore ke aplikasi Android yang sepenuhnya dibuat dengan Jetpack Compose untuk UI, dan Anda membuatnya sesuai dengan arsitektur MVVM yang direkomendasikan!

Bacaan lebih lanjut

Dokumen referensi