Membangun aplikasi Android dengan Firebase dan Jetpack Compose

1. Pengantar

Terakhir Diperbarui: 16-11-2022

Mem-build aplikasi Android dengan Firebase dan Jetpack Compose

Dalam codelab ini, Anda akan mem-build aplikasi Android bernama Make It So. UI aplikasi ini sepenuhnya dibuat dengan Jetpack Compose, yang merupakan toolkit modern Android untuk mem-build UI native - intuitif dan memerlukan lebih sedikit kode daripada menulis file .xml dan mengikatnya ke Aktivitas, Fragment, atau View.

Langkah pertama untuk memahami seberapa baik Firebase dan Jetpack Compose bekerja sama adalah memahami arsitektur Android modern. Arsitektur yang baik membuat sistem mudah dipahami, mudah dikembangkan, dan mudah dikelola, karena membuat cara komponen diatur dan berkomunikasi satu sama lain menjadi sangat jelas. Di dunia Android, arsitektur yang direkomendasikan disebut Model - View - ViewModel. Model mewakili lapisan yang mengakses Data dalam aplikasi. View adalah lapisan UI dan tidak boleh mengetahui apa pun tentang logika bisnis. Selain itu, ViewModel adalah tempat logika bisnis diterapkan, yang terkadang mengharuskan ViewModel memanggil lapisan Model.

Sebaiknya baca artikel ini untuk memahami cara Model - View - ViewModel diterapkan ke aplikasi Android yang dibuat dengan Jetpack Compose, karena akan membuat codebase lebih mudah dipahami dan langkah berikutnya lebih mudah diselesaikan.

Hal yang akan Anda build

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

Anda akan menambahkan beberapa fitur yang tidak ada di aplikasi ini:

• Mengautentikasi pengguna dengan email dan sandi
• Menambahkan pemroses ke koleksi Firestore dan membuat UI bereaksi terhadap perubahan
• Menambahkan trace kustom untuk memantau performa kode tertentu di aplikasi
• Membuat tombol fitur menggunakan Remote Config dan menggunakan peluncuran bertahap untuk meluncurkannya

Hal yang akan Anda pelajari

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

Hal yang akan Anda perlukan

• Android Studio Flamingo+
• Android Emulator dengan API 21 atau yang lebih baru
• Pemahaman tentang bahasa pemrograman Kotlin

2. Mendapatkan aplikasi contoh dan menyiapkan Firebase

Mendapatkan kode aplikasi contoh

Buat clone repositori GitHub dari command line:

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

Catatan: Cabang main berisi dua folder: start dan final. Anda akan menggunakan folder start untuk menyelesaikan langkah-langkah dalam codelab ini. Jika ingin menjalankan aplikasi yang sudah selesai, Anda harus menggunakan folder final.

Membuat project Firebase

Hal pertama yang perlu Anda lakukan adalah membuka Firebase console dan membuat project Firebase dengan mengklik tombol "+ Tambahkan project", seperti yang dapat Anda lihat di bawah:

Ikuti langkah-langkah di layar untuk menyelesaikan pembuatan project.

Catatan: Pastikan untuk mengaktifkan Google Analytics saat membuat project. Mengaktifkan Google Analytics akan memberikan opsi penargetan Firebase Remote Config yang diperluas.

Menambahkan aplikasi Android ke project Firebase

Di project Firebase, Anda dapat mendaftarkan berbagai aplikasi: untuk Android, iOS, Web, Flutter, dan Unity.

Pilih opsi Android, seperti yang Anda lihat di sini:

Lalu, 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 Download google-services.json untuk mendownload file konfigurasi dan menyimpannya di direktori make-it-so-android/app.
4. Klik Berikutnya. Karena Firebase SDK sudah disertakan dalam file build.gradle di project contoh, klik Berikutnya untuk melanjutkan ke Langkah berikutnya.
5. Klik Lanjutkan ke konsol untuk menyelesaikan.

Agar aplikasi Make it So berfungsi dengan benar, ada dua hal yang perlu Anda lakukan di Konsol sebelum beralih ke kode: aktifkan penyedia autentikasi dan buat database Firestore.

Menyiapkan Autentikasi

Pertama, mari kita aktifkan Autentikasi agar pengguna dapat login ke aplikasi:

1. Dari menu Build, pilih Authentication, lalu klik Get Started.
2. Dari kartu Metode login, pilih Email/Sandi, lalu aktifkan.
3. Selanjutnya, klik Tambahkan penyedia baru, lalu pilih dan aktifkan Anonim.

Menyiapkan Cloud Firestore

Selanjutnya, siapkan Firestore. Anda akan menggunakan Firestore untuk menyimpan tugas pengguna yang login. Setiap pengguna akan mendapatkan dokumen mereka sendiri dalam koleksi database.

1. Di panel kiri Firebase console, luaskan Build, lalu pilih Firestore database.
2. Klik Create database.
3. Biarkan Database ID ditetapkan ke (default).
4. Pilih lokasi untuk database Anda, lalu klik Berikutnya.
   Untuk aplikasi yang sebenarnya, Anda harus memilih lokasi yang dekat dengan pengguna.
5. Klik Mulai dalam mode pengujian. Baca pernyataan penyangkalan tentang aturan keamanan.
   Pada langkah berikutnya di bagian ini, Anda akan menambahkan Aturan Keamanan untuk mengamankan data. Jangan mendistribusikan atau mengekspos aplikasi ke publik tanpa menambahkan Aturan Keamanan untuk database Anda.
6. Klik Buat.

Mari kita luangkan waktu untuk membuat Aturan Keamanan yang andal ke database Firestore.

1. Buka dasbor Firestore, lalu buka tab Rules.
2. Perbarui Aturan Keamanan agar terlihat 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 menyatakan bahwa setiap pengguna aplikasi yang login 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.

Menjalankan aplikasi

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

Catatan: Selama pengembangan aplikasi atau mencoba Firebase, sebaiknya gunakan Firebase Local Emulator Suite. Namun, codelab ini menggunakan Firebase Performance Monitoring dan Firebase Remote Config yang belum didukung oleh emulator, sehingga Anda harus menjalankan aplikasi ini terhadap project Firebase yang Anda buat di atas.

3. Firebase Authentication

Fitur mana yang akan Anda tambahkan?

Dalam status aplikasi contoh Make It So saat ini, pengguna dapat mulai menggunakan aplikasi tanpa harus login terlebih dahulu. Fitur ini menggunakan autentikasi anonim untuk mencapainya. Namun, akun anonim tidak mengizinkan pengguna mengakses data mereka di perangkat lain atau bahkan di sesi mendatang. Meskipun autentikasi anonim berguna untuk orientasi yang cukup sering terjadi, Anda harus selalu memberikan opsi bagi pengguna untuk beralih ke bentuk login yang berbeda. Dengan mempertimbangkan 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 mengetik email dan sandi, Anda harus meminta kredensial email ke Firebase Authentication API, lalu menautkan kredensial baru ke akun anonim. Buka file AccountServiceImpl.kt di Android Studio dan perbarui fungsi linkAccount agar terlihat seperti berikut:

model/service/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 linkAccount layanan di dalam blok launchCatching dari fungsi onSignUpClick:

screens/sign_up/SignUpViewModel.kt

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

Pertama, kode ini akan mencoba melakukan autentikasi, dan jika panggilan berhasil, kode ini akan melanjutkan ke layar berikutnya (SettingsScreen). Saat Anda mengeksekusi panggilan ini di dalam blok launchCatching, jika terjadi error pada baris pertama, pengecualian akan tertangkap dan ditangani, dan baris kedua tidak akan dijangkau sama sekali.

Segera setelah SettingsScreen dibuka lagi, Anda harus memastikan bahwa opsi untuk Login dan Buat akun tidak ada lagi, karena sekarang pengguna sudah diautentikasi. Untuk melakukannya, mari kita buat SettingsViewModel memproses 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:

screens/settings/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:

screens/settings/SettingsScreen.kt

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

Sekarang, setiap kali pengguna berubah, SettingsScreen akan merekomposisi dirinya sendiri untuk menampilkan opsi sesuai dengan status autentikasi baru pengguna.

Saatnya menguji!

Jalankan Make it So dan buka setelan dengan mengklik ikon roda gigi di sudut kanan atas layar. Dari sana, klik opsi buat akun:

Ketik email yang valid dan sandi yang kuat untuk membuat akun Anda. Tindakan ini akan berhasil dan Anda akan dialihkan ke halaman setelan, tempat Anda akan melihat dua opsi baru: untuk logout dan menghapus akun Anda. Anda dapat memeriksa akun baru yang dibuat di dasbor Authentication di Firebase console dengan mengklik tab Users.

4. Cloud Firestore

Fitur mana yang akan Anda tambahkan?

Untuk Cloud Firestore, Anda akan menambahkan pemroses ke koleksi Firestore yang menyimpan dokumen yang mewakili tugas yang ditampilkan di Make it So. Setelah menambahkan pemroses 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/service/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 pemroses ke koleksi tugas berdasarkan user.id. Setiap tugas diwakili oleh dokumen dalam koleksi bernama tasks, dan setiap dokumen memiliki kolom bernama userId. Perhatikan bahwa Flow baru akan ditampilkan jika status currentUser berubah (misalnya, dengan logout).

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

screens/tasks/TasksViewModel.kt

val tasks = storageService.tasks

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

screens/tasks/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:

screens/tasks/TasksScreen.kt

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

Saatnya menguji!

Untuk menguji apakah tugas berfungsi, tambahkan tugas baru menggunakan aplikasi (dengan mengklik tombol tambahkan di pojok kanan bawah layar). Setelah Anda selesai membuat tugas, tugas tersebut akan muncul di koleksi Firestore di Firestore Console. Jika Anda login ke Make it So di perangkat lain dengan akun yang sama, Anda dapat mengedit item daftar tugas dan melihatnya diperbarui di semua perangkat secara real time.

5. Performance Monitoring

Fitur mana yang akan Anda tambahkan?

Performa adalah hal yang sangat penting untuk diperhatikan karena pengguna sangat mungkin berhenti menggunakan aplikasi Anda jika performanya tidak baik dan mereka menghabiskan terlalu banyak waktu untuk menyelesaikan tugas sederhana menggunakan aplikasi tersebut. Itulah sebabnya terkadang ada baiknya untuk mengumpulkan beberapa metrik tentang perjalanan tertentu yang dilakukan pengguna di aplikasi Anda. Untuk membantu Anda melakukannya, Firebase Performance Monitoring menawarkan pelacakan kustom. Ikuti langkah-langkah berikutnya untuk menambahkan rekaman aktivitas kustom dan mengukur performa di berbagai bagian kode di Make it So.

Saatnya membuat kode.

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

model/service/Performance.kt

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

Anda dapat memilih bagian codebase yang menurut Anda penting untuk diukur dan menambahkan trace kustom ke dalamnya. Berikut adalah contoh penambahan rekaman aktivitas kustom ke fungsi linkAccount yang Anda lihat sebelumnya (di AccountServiceImpl.kt) dalam codelab ini:

model/service/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 rekaman aktivitas kustom ke aplikasi Make it So dan lanjutkan ke bagian berikutnya untuk menguji apakah aplikasi berfungsi seperti yang diharapkan.

Saatnya menguji!

Setelah selesai menambahkan rekaman aktivitas kustom, jalankan aplikasi dan pastikan untuk menggunakan fitur yang ingin diukur beberapa kali. Kemudian, buka Firebase console dan buka dasbor Performa. Di bagian bawah layar, Anda akan menemukan tiga tab: Permintaan jaringan, Pelacakan kustom, dan Rendering layar.

Buka tab Custom traces dan pastikan trace yang Anda tambahkan di codebase ditampilkan di sana, dan Anda dapat melihat berapa lama waktu yang biasanya diperlukan untuk mengeksekusi potongan kode ini.

6. Remote Config

Fitur mana yang akan Anda tambahkan?

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

Saatnya membuat kode.

Hal pertama yang perlu Anda lakukan adalah membuat konfigurasi di Firebase console. Untuk melakukannya, Anda harus membuka dasbor Remote Config dan mengklik tombol Add parameter. Isi kolom sesuai dengan gambar di bawah ini:

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

model/service/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 terbaru akan tersedia di semua layar sejak awal. Pengalaman pengguna tidak akan baik jika Anda mengubah UI atau perilaku aplikasi nanti, saat pengguna sedang melakukan sesuatu.

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

screens/tasks/TasksViewModel.kt

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

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

screens/tasks/TasksScreen.kt

val options by viewModel.options

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

TaskItem adalah composable function lain yang mendeklarasikan tampilan UI satu tugas. Selain itu, setiap tugas memiliki menu dengan opsi yang ditampilkan saat pengguna mengklik ikon tiga titik di bagian akhirnya.

Saatnya 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 mengklik ikon tiga titik;
• Jika true, Anda akan melihat tiga opsi saat mengklik ikon tiga titik;

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

7. Selamat

Selamat, Anda telah berhasil mem-build aplikasi Android dengan Firebase dan Jetpack Compose.

Anda telah 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

• Mem-build aplikasi Android dengan Firebase dan Compose
• Menambahkan Firebase Authentication ke aplikasi Jetpack Compose
• Menambahkan Cloud Firestore ke aplikasi Jetpack Compose
• Menambahkan Coroutine dan Flow ke aplikasi Android yang di-build dengan Firebase dan Compose
• Menambahkan Firebase Performance Monitoring ke aplikasi Jetpack Compose
• Menambahkan Firebase Remote Config ke aplikasi Jetpack Compose

Dokumen referensi

• Firebase Authentication
• Cloud Firestore
• Performance Monitoring
• Remote Config