Firebase Android Codelab - Bangun Obrolan Ramah

1. Ikhtisar

Gambar: Aplikasi Obrolan Ramah Kerja.

Selamat datang di codelab Obrolan Ramah. Dalam codelab ini, Anda akan mempelajari cara menggunakan platform Firebase untuk membuat aplikasi chat di Android.

Apa yang akan Anda pelajari

• Cara menggunakan Firebase Authentication untuk mengizinkan pengguna login.
• Cara sinkronisasi data menggunakan Firebase Realtime Database.
• Cara menyimpan file biner di Cloud Storage for Firebase.
• Cara menggunakan Firebase Local Emulator Suite untuk mengembangkan aplikasi Android dengan Firebase.

Apa yang Anda perlukan

• Versi Android Studio terbaru.
• Emulator Android dengan Android 5.0+.
• Node.js versi 10 atau lebih tinggi (untuk menggunakan Emulator Suite).
• Java 8 atau lebih tinggi. Untuk menginstal Java gunakan petunjuk ini; untuk memeriksa versi Anda, jalankan java -version .
• Familiar dengan bahasa pemrograman Kotlin.

2. Dapatkan kode contoh

Kloning repositori

Kloning repositori GitHub dari baris perintah:

$ git clone https://github.com/firebase/codelab-friendlychat-android

Repositori "friendlychat-android" berisi dua direktori:

• build-android-start —Kode awal yang Anda buat di codelab ini.
• build-android —Kode lengkap untuk aplikasi contoh yang telah selesai.

Catatan : Jika Anda ingin menjalankan aplikasi yang sudah selesai, Anda harus membuat proyek Firebase di Firebase console, bersama dengan Aplikasi Android Firebase yang memiliki nama paket dan SHA1 aplikasi Anda. Untuk informasi selengkapnya, lihat Langkah #10 codelab ini.

Impor ke Android Studio

Di Android Studio, pilih File > Open , lalu pilih direktori build-android-start ( ) dari direktori tempat Anda mengunduh kode contoh.

Anda sekarang seharusnya sudah membuka proyek build-android-start di Android Studio. Jika Anda melihat peringatan tentang file google-services.json yang hilang, jangan khawatir. Itu akan ditambahkan di langkah selanjutnya.

Periksa dependensi

Dalam codelab ini, semua dependensi yang Anda perlukan telah ditambahkan, namun penting untuk memahami cara menambahkan Firebase SDK ke aplikasi Anda:

build.gradle.kts

plugins {
    id("com.android.application") version "8.0.0" apply false
    id("com.android.library") version "8.0.0" apply false
    id("org.jetbrains.kotlin.android") version "1.8.20" apply false

    // The google-services plugin is required to parse the google-services.json file
    id("com.google.gms.google-services") version "4.3.15" apply false
}

aplikasi/build.gradle.kts

plugins {
    id("com.android.application")
    id("kotlin-android")
    id("com.google.gms.google-services")
}

android {
    // ...
}

dependencies {
    // ...

    // Google Sign In SDK
    implementation("com.google.android.gms:play-services-auth:20.5.0")

    // Firebase SDK
    implementation(platform("com.google.firebase:firebase-bom:32.0.0"))
    implementation("com.google.firebase:firebase-database-ktx")
    implementation("com.google.firebase:firebase-storage-ktx")
    implementation("com.google.firebase:firebase-auth-ktx")

    // Firebase UI Library
    implementation("com.firebaseui:firebase-ui-auth:8.0.2")
    implementation("com.firebaseui:firebase-ui-database:8.0.2")
}

3. Instal Firebase CLI

Dalam codelab ini Anda akan menggunakan Firebase Emulator Suite untuk mengemulasikan Firebase Auth, Realtime Database, dan Cloud Storage secara lokal. Hal ini memberikan lingkungan pengembangan lokal yang aman, cepat, dan tanpa biaya untuk membangun aplikasi Anda.

Instal Firebase CLI

Pertama, Anda perlu menginstal Firebase CLI . Jika Anda menggunakan macOS atau Linux, Anda dapat menjalankan perintah cURL berikut:

curl -sL https://firebase.tools | bash

Jika Anda menggunakan Windows, baca petunjuk instalasi untuk mendapatkan biner mandiri atau menginstal melalui npm .

Setelah Anda menginstal CLI, menjalankan firebase --version akan melaporkan versi 9.0.0 atau lebih tinggi:

$ firebase --version
9.0.0

Gabung

Jalankan firebase login untuk menghubungkan CLI ke akun Google Anda. Ini akan membuka jendela browser baru untuk menyelesaikan proses login. Pastikan untuk memilih akun yang sama dengan yang Anda gunakan saat membuat proyek Firebase sebelumnya.

4. Hubungkan ke Firebase Emulator Suite

Mulai emulator

Di terminal Anda, jalankan perintah berikut dari root direktori codelab-friendlychat-android lokal Anda:

firebase emulators:start --project=demo-friendlychat-android

Anda akan melihat beberapa log seperti ini. Nilai port ditentukan dalam file firebase.json , yang disertakan dalam kode contoh kloning.

$ firebase emulators:start --project=demo-friendlychat-android
i  emulators: Starting emulators: auth, database, storage
i  emulators: Detected demo project ID "demo-friendlychat-android", emulated services will use a demo configuration and attempts to access non-emulated services for this project will fail.
i  database: Database Emulator logging to database-debug.log
i  ui: Emulator UI logging to ui-debug.log

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://localhost:4000                │
└─────────────────────────────────────────────────────────────┘

┌────────────────┬────────────────┬────────────────────────────────┐
│ Emulator       │ Host:Port      │ View in Emulator UI            │
├────────────────┼────────────────┼────────────────────────────────┤
│ Authentication │ localhost:9099 │ http://localhost:4000/auth     │
├────────────────┼────────────────┼────────────────────────────────┤
│ Database       │ localhost:9000 │ http://localhost:4000/database │
├────────────────┼────────────────┼────────────────────────────────┤
│ Storage        │ localhost:9199 │ http://localhost:4000/storage  │
└────────────────┴────────────────┴────────────────────────────────┘
  Emulator Hub running at localhost:4400
  Other reserved ports: 4500

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.

Navigasikan ke http://localhost:4000 di browser web Anda untuk melihat UI Firebase Emulator Suite:

Biarkan perintah emulators:start berjalan selama sisa codelab.

Hubungkan aplikasi Anda

Di Android Studio, buka MainActivity.kt , lalu tambahkan kode berikut di dalam metode onCreate :

// When running in debug mode, connect to the Firebase Emulator Suite.
// "10.0.2.2" is a special IP address which allows the Android Emulator
// to connect to "localhost" on the host computer. The port values (9xxx)
// must match the values defined in the firebase.json file.
if (BuildConfig.DEBUG) {
    Firebase.database.useEmulator("10.0.2.2", 9000)
    Firebase.auth.useEmulator("10.0.2.2", 9099)
    Firebase.storage.useEmulator("10.0.2.2", 9199)
}

5. Jalankan aplikasi starter

Tambahkan google-services.json

Agar aplikasi Android Anda terhubung ke Firebase, Anda harus menambahkan file google-services.json di dalam folder app proyek Android Anda. Untuk keperluan codelab ini, kami telah menyediakan file JSON tiruan yang memungkinkan Anda terhubung ke Firebase Emulator Suite.

Salin file mock-google-services.json ke folder build-android-start/app sebagai google-services.json :

cp mock-google-services.json build-android-start/app/google-services.json

Pada langkah terakhir codelab ini, Anda akan mempelajari cara membuat proyek Firebase nyata dan Aplikasi Android Firebase sehingga Anda dapat mengganti file JSON tiruan ini dengan konfigurasi Anda sendiri.

Jalankan aplikasi

Kini setelah Anda mengimpor proyek ke Android Studio dan menambahkan file JSON konfigurasi Firebase, Anda siap menjalankan aplikasi untuk pertama kalinya.

Catatan: Agar aplikasi Anda dapat berkomunikasi dengan Firebase Emulator Suite, aplikasi harus berjalan di Android Emulator, bukan perangkat Android sebenarnya. Ini akan memungkinkan aplikasi berkomunikasi dengan Firebase Emulator Suite di localhost . Pastikan definisi Perangkat Virtual yang dipilih menjalankan layanan Play Store.

1. Mulai Emulator Android Anda.
2. Di Android Studio, klik Jalankan ( ) di bilah alat.

Aplikasi harus diluncurkan di Emulator Android Anda. Pada tahap ini, Anda akan melihat daftar pesan kosong, dan pengiriman serta penerimaan pesan tidak akan berfungsi. Pada langkah berikutnya dalam codelab ini, Anda akan mengautentikasi pengguna sehingga mereka dapat menggunakan Friendly Chat.

6. Aktifkan Otentikasi

Aplikasi ini akan menggunakan Firebase Realtime Database untuk menyimpan semua pesan chat. Namun, sebelum kita menambahkan data, kita harus memastikan bahwa aplikasi tersebut aman dan hanya pengguna terautentikasi yang dapat mengirim pesan. Pada langkah ini, kita akan mengaktifkan Firebase Authentication dan mengonfigurasi Aturan Keamanan Realtime Database.

Tambahkan fungsionalitas masuk dasar

Selanjutnya kita akan menambahkan beberapa kode dasar Firebase Authentication ke aplikasi untuk mendeteksi pengguna dan menerapkan layar login.

Periksa pengguna saat ini

Pertama-tama tambahkan variabel instan berikut ke kelas MainActivity.kt :

Aktivitas Utama.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

Sekarang mari kita ubah MainActivity untuk mengarahkan pengguna ke layar masuk setiap kali mereka membuka aplikasi dan tidak diautentikasi. Tambahkan kode berikut ke metode onCreate() setelah binding dilampirkan ke tampilan:

Aktivitas Utama.kt

// Initialize Firebase Auth and check if the user is signed in
auth = Firebase.auth
if (auth.currentUser == null) {
    // Not signed in, launch the Sign In activity
    startActivity(Intent(this, SignInActivity::class.java))
    finish()
    return
}

Kami juga ingin memeriksa apakah pengguna masuk selama onStart() :

Aktivitas Utama.kt

public override fun onStart() {
    super.onStart()
    // Check if user is signed in.
    if (auth.currentUser == null) {
        // Not signed in, launch the Sign In activity
        startActivity(Intent(this, SignInActivity::class.java))
        finish()
        return
    }
}

Kemudian terapkan metode getUserPhotoUrl() dan getUserName() untuk mengembalikan informasi yang sesuai tentang pengguna Firebase yang saat ini diautentikasi:

Aktivitas Utama.kt

private fun getPhotoUrl(): String? {
    val user = auth.currentUser
    return user?.photoUrl?.toString()
}

private fun getUserName(): String? {
    val user = auth.currentUser
    return if (user != null) {
        user.displayName
    } else ANONYMOUS
}

Kemudian terapkan metode signOut() untuk menangani tombol keluar:

Aktivitas Utama.kt

private fun signOut() {
    AuthUI.getInstance().signOut()
    startActivity(Intent(this, SignInActivity::class.java))
    finish()
}

Sekarang kami memiliki semua logika untuk mengarahkan pengguna ke layar masuk bila diperlukan. Selanjutnya kita perlu menerapkan layar masuk untuk mengautentikasi pengguna dengan benar.

Terapkan layar Masuk

Buka file SignInActivity.kt . Di sini tombol Masuk sederhana digunakan untuk memulai otentikasi. Di bagian ini, Anda akan menggunakan FirebaseUI untuk mengimplementasikan logika login.

Tambahkan variabel instance Auth di kelas SignInActivity di bawah komentar // Firebase instance variables :

SignInActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

Lalu, edit metode onCreate() untuk menginisialisasi Firebase dengan cara yang sama seperti yang Anda lakukan di MainActivity :

SignInActivity.kt

// Initialize FirebaseAuth
auth = Firebase.auth

Tambahkan bidang ActivityResultLauncher ke SignInActivity :

SignInActivity.kt

// ADD THIS
private val signIn: ActivityResultLauncher<Intent> =
        registerForActivityResult(FirebaseAuthUIActivityResultContract(), this::onSignInResult)

override fun onCreate(savedInstanceState: Bundle?) {
    // ...
}

Selanjutnya, edit metode onStart() untuk memulai alur masuk FirebaseUI:

SignInActivity.kt

public override fun onStart() {
    super.onStart()

    // If there is no signed in user, launch FirebaseUI
    // Otherwise head to MainActivity
    if (Firebase.auth.currentUser == null) {
        // Sign in with FirebaseUI, see docs for more details:
        // https://firebase.google.com/docs/auth/android/firebaseui
        val signInIntent = AuthUI.getInstance()
                .createSignInIntentBuilder()
                .setLogo(R.mipmap.ic_launcher)
                .setAvailableProviders(listOf(
                        AuthUI.IdpConfig.EmailBuilder().build(),
                        AuthUI.IdpConfig.GoogleBuilder().build(),
                ))
                .build()

        signIn.launch(signInIntent)
    } else {
        goToMainActivity()
    }
}

Selanjutnya, terapkan metode onSignInResult untuk menangani hasil masuk. Jika hasil signin berhasil, lanjutkan ke MainActivity :

SignInActivity.kt

private fun onSignInResult(result: FirebaseAuthUIAuthenticationResult) {
    if (result.resultCode == RESULT_OK) {
        Log.d(TAG, "Sign in successful!")
        goToMainActivity()
    } else {
        Toast.makeText(
                this,
                "There was an error signing in",
                Toast.LENGTH_LONG).show()

        val response = result.idpResponse
        if (response == null) {
            Log.w(TAG, "Sign in canceled")
        } else {
            Log.w(TAG, "Sign in error", response.error)
        }
    }
}

Itu dia! Anda telah menerapkan autentikasi dengan FirebaseUI hanya dalam beberapa panggilan metode dan tanpa perlu mengelola konfigurasi sisi server apa pun.

Uji pekerjaan Anda

Jalankan aplikasi di Emulator Android Anda. Anda akan segera diarahkan ke layar masuk. Ketuk tombol Masuk dengan email , lalu buat akun. Jika semuanya diterapkan dengan benar, Anda akan diarahkan ke layar pesan.

Catatan: Masuk dengan Google belum akan berfungsi karena Anda belum mendaftarkan aplikasi Anda ke Firebase. Anda akan memiliki kesempatan untuk melakukan hal ini di akhir codelab.

Setelah masuk, buka UI Firebase Emulator Suite di browser Anda, lalu klik tab Autentikasi untuk melihat akun pengguna pertama yang masuk ini.

7. Baca pesan

Pada langkah ini, kami akan menambahkan fungsionalitas untuk membaca dan menampilkan pesan yang disimpan di Realtime Database.

Impor pesan sampel

1. Di UI Firebase Emulator Suite, pilih tab Realtime Database .
2. Tarik dan lepas file initial_messages.json dari salinan lokal repositori codelab Anda ke penampil data.

Anda sekarang seharusnya memiliki beberapa pesan di bawah node messages database.

Membaca data

Sinkronkan pesan

Di bagian ini kami menambahkan kode yang menyinkronkan pesan yang baru ditambahkan ke UI aplikasi dengan:

• Menginisialisasi Firebase Realtime Database dan menambahkan pendengar untuk menangani perubahan yang dilakukan pada data.
• Memperbarui adaptor RecyclerView sehingga pesan baru akan ditampilkan.
• Menambahkan variabel instance Database dengan variabel instance Firebase lainnya di kelas MainActivity :

Aktivitas Utama.kt

// Firebase instance variables
// ...
private lateinit var db: FirebaseDatabase
private lateinit var adapter: FriendlyMessageAdapter

Ubah metode onCreate() MainActivity Anda di bawah komentar // Initialize Realtime Database and FirebaseRecyclerAdapter dengan kode yang ditentukan di bawah. Kode ini menambahkan semua pesan yang ada dari Realtime Database dan kemudian memproses entri turunan baru di jalur messages di Firebase Realtime Database Anda. Itu menambahkan elemen baru ke UI untuk setiap pesan:

Aktivitas Utama.kt

// Initialize Realtime Database
db = Firebase.database
val messagesRef = db.reference.child(MESSAGES_CHILD)

// The FirebaseRecyclerAdapter class and options come from the FirebaseUI library
// See: https://github.com/firebase/FirebaseUI-Android
val options = FirebaseRecyclerOptions.Builder<FriendlyMessage>()
    .setQuery(messagesRef, FriendlyMessage::class.java)
    .build()
adapter = FriendlyMessageAdapter(options, getUserName())
binding.progressBar.visibility = ProgressBar.INVISIBLE
manager = LinearLayoutManager(this)
manager.stackFromEnd = true
binding.messageRecyclerView.layoutManager = manager
binding.messageRecyclerView.adapter = adapter

// Scroll down when a new message arrives
// See MyScrollToBottomObserver for details
adapter.registerAdapterDataObserver(
    MyScrollToBottomObserver(binding.messageRecyclerView, adapter, manager)
)

Selanjutnya di kelas FriendlyMessageAdapter.kt implementasikan metode bind() di dalam kelas dalam MessageViewHolder() :

FriendlyMessageAdapter.kt

inner class MessageViewHolder(private val binding: MessageBinding) : ViewHolder(binding.root) {
    fun bind(item: FriendlyMessage) {
        binding.messageTextView.text = item.text
        setTextColor(item.name, binding.messageTextView)

        binding.messengerTextView.text = if (item.name == null) ANONYMOUS else item.name
        if (item.photoUrl != null) {
            loadImageIntoView(binding.messengerImageView, item.photoUrl!!)
        } else {
            binding.messengerImageView.setImageResource(R.drawable.ic_account_circle_black_36dp)
        }
    }
    ...
}

Kita juga perlu menampilkan pesan berupa gambar, jadi terapkan juga metode bind() di dalam kelas dalam ImageMessageViewHolder() :

FriendlyMessageAdapter.kt

inner class ImageMessageViewHolder(private val binding: ImageMessageBinding) :
    ViewHolder(binding.root) {
    fun bind(item: FriendlyMessage) {
        loadImageIntoView(binding.messageImageView, item.imageUrl!!)

        binding.messengerTextView.text = if (item.name == null) ANONYMOUS else item.name
        if (item.photoUrl != null) {
            loadImageIntoView(binding.messengerImageView, item.photoUrl!!)
        } else {
            binding.messengerImageView.setImageResource(R.drawable.ic_account_circle_black_36dp)
        }
    }
}

Terakhir, kembali ke MainActivity , mulai dan berhenti mendengarkan pembaruan dari Firebase Realtime Database. Perbarui metode onPause() dan onResume() di MainActivity seperti yang ditunjukkan di bawah ini:

Aktivitas Utama.kt

public override fun onPause() {
    adapter.stopListening()
    super.onPause()
}

public override fun onResume() {
    super.onResume()
    adapter.startListening()
}

Uji sinkronisasi pesan

1. Klik Jalankan ( ).
2. Di UI Emulator Suite, kembali ke tab Realtime Database , lalu tambahkan pesan baru secara manual. Konfirmasikan bahwa pesan tersebut muncul di aplikasi Android Anda:

Selamat, Anda baru saja menambahkan database realtime ke aplikasi Anda!

8. Kirim Pesan

Menerapkan pengiriman pesan teks

Di bagian ini, Anda akan menambahkan kemampuan bagi pengguna aplikasi untuk mengirim pesan teks. Cuplikan kode di bawah ini memproses peristiwa klik pada tombol kirim, membuat objek FriendlyMessage baru dengan konten bidang pesan, dan memasukkan pesan ke database. Metode push() menambahkan ID yang dibuat secara otomatis ke jalur objek yang didorong. ID ini berurutan yang memastikan bahwa pesan baru akan ditambahkan ke akhir daftar.

Perbarui pemroses klik tombol kirim dalam metode onCreate() di kelas MainActivity . Kode ini sudah ada di bagian bawah metode onCreate() . Perbarui isi onClick() agar sesuai dengan kode di bawah ini:

Aktivitas Utama.kt

// Disable the send button when there's no text in the input field
// See MyButtonObserver for details
binding.messageEditText.addTextChangedListener(MyButtonObserver(binding.sendButton))

// When the send button is clicked, send a text message
binding.sendButton.setOnClickListener {
    val friendlyMessage = FriendlyMessage(
        binding.messageEditText.text.toString(),
        getUserName(),
        getPhotoUrl(),
        null /* no image */
    )
    db.reference.child(MESSAGES_CHILD).push().setValue(friendlyMessage)
    binding.messageEditText.setText("")
}

Menerapkan pengiriman pesan gambar

Di bagian ini, Anda akan menambahkan kemampuan bagi pengguna aplikasi untuk mengirim pesan gambar. Membuat pesan gambar dilakukan dengan langkah-langkah berikut:

• Pilih gambar
• Menangani pemilihan gambar
• Tulis pesan gambar sementara ke Realtime Database
• Mulailah mengunggah gambar yang dipilih
• Perbarui URL pesan gambar ke URL gambar yang diunggah, setelah pengunggahan selesai

Pilih gambar

Untuk menambahkan gambar, codelab ini menggunakan Cloud Storage for Firebase. Cloud Storage adalah tempat yang baik untuk menyimpan data biner aplikasi Anda.

Tangani pemilihan gambar dan tulis pesan sementara

Setelah pengguna memilih gambar, Intent pemilihan gambar diluncurkan. Ini sudah diterapkan dalam kode di akhir metode onCreate() . Setelah selesai, ia akan memanggil metode onImageSelected() MainActivity . Dengan menggunakan cuplikan kode di bawah ini, Anda akan menulis pesan dengan url gambar sementara ke database yang menunjukkan gambar sedang diunggah.

Aktivitas Utama.kt

private fun onImageSelected(uri: Uri) {
    Log.d(TAG, "Uri: $uri")
    val user = auth.currentUser
    val tempMessage = FriendlyMessage(null, getUserName(), getPhotoUrl(), LOADING_IMAGE_URL)
    db.reference
            .child(MESSAGES_CHILD)
            .push()
            .setValue(
                    tempMessage,
                    DatabaseReference.CompletionListener { databaseError, databaseReference ->
                        if (databaseError != null) {
                            Log.w(
                                    TAG, "Unable to write message to database.",
                                    databaseError.toException()
                            )
                            return@CompletionListener
                        }

                        // Build a StorageReference and then upload the file
                        val key = databaseReference.key
                        val storageReference = Firebase.storage
                                .getReference(user!!.uid)
                                .child(key!!)
                                .child(uri.lastPathSegment!!)
                        putImageInStorage(storageReference, uri, key)
                    })
}

Unggah gambar dan perbarui pesan

Tambahkan metode putImageInStorage() ke MainActivity . Ini dipanggil di onImageSelected() untuk memulai pengunggahan gambar yang dipilih. Setelah pengunggahan selesai, Anda akan memperbarui pesan untuk menggunakan gambar yang sesuai.

Aktivitas Utama.kt

private fun putImageInStorage(storageReference: StorageReference, uri: Uri, key: String?) {
    // First upload the image to Cloud Storage
    storageReference.putFile(uri)
        .addOnSuccessListener(
            this
        ) { taskSnapshot -> // After the image loads, get a public downloadUrl for the image
            // and add it to the message.
            taskSnapshot.metadata!!.reference!!.downloadUrl
                .addOnSuccessListener { uri ->
                    val friendlyMessage =
                        FriendlyMessage(null, getUserName(), getPhotoUrl(), uri.toString())
                    db.reference
                        .child(MESSAGES_CHILD)
                        .child(key!!)
                        .setValue(friendlyMessage)
                }
        }
        .addOnFailureListener(this) { e ->
            Log.w(
                TAG,
                "Image upload task was unsuccessful.",
                e
            )
        }
}

Uji pengiriman pesan

1. Di Android Studio, klik Tombol Jalankan .
2. Di Emulator Android Anda, masukkan pesan, lalu ketuk tombol kirim. Pesan baru akan terlihat di UI aplikasi dan UI Firebase Emulator Suite.
3. Di Android Emulator, ketuk gambar "+" untuk memilih gambar dari perangkat Anda. Pesan baru harus terlihat terlebih dahulu dengan gambar placeholder, lalu dengan gambar yang dipilih setelah pengunggahan gambar selesai. Pesan baru juga akan terlihat di UI Emulator Suite, khususnya sebagai objek di tab Realtime Database dan sebagai blob di tab Penyimpanan.

9. Selamat!

Anda baru saja membuat aplikasi chat real-time menggunakan Firebase!

Apa yang Anda pelajari

• Otentikasi Firebase
• Basis Data Waktu Nyata Firebase
• Penyimpanan Cloud untuk Firebase

Selanjutnya, coba gunakan apa yang Anda pelajari dalam codelab ini untuk menambahkan Firebase ke aplikasi Android Anda! Untuk mempelajari lebih lanjut tentang Firebase, kunjungi firebase.google.com .

Jika Anda ingin mempelajari cara menyiapkan proyek Firebase yang sebenarnya dan menggunakan sumber daya Firebase yang sebenarnya (bukan proyek demo dan hanya sumber daya yang ditiru), lanjutkan ke langkah berikutnya.

Catatan: Bahkan setelah Anda menyiapkan proyek Firebase yang sebenarnya dan terutama saat Anda mulai membuat aplikasi yang sebenarnya, sebaiknya gunakan Firebase Local Emulator Suite untuk pengembangan dan pengujian.

10. Opsional: Membuat dan menyiapkan proyek Firebase

Pada langkah ini, Anda akan membuat proyek Firebase nyata dan Aplikasi Android Firebase untuk digunakan dengan codelab ini. Anda juga akan menambahkan konfigurasi Firebase khusus aplikasi ke aplikasi Anda. Dan terakhir, Anda akan menyiapkan sumber daya Firebase sebenarnya untuk digunakan dengan aplikasi Anda.

Buat proyek Firebase

1. Di browser Anda, buka Firebase console .
2. Pilih Tambahkan proyek .
3. Pilih atau masukkan nama proyek. Anda dapat menggunakan nama apa pun yang Anda inginkan.
4. Anda tidak memerlukan Google Analytics untuk codelab ini, jadi Anda tidak perlu mengaktifkannya untuk project Anda.
5. Klik Buat Proyek . Ketika proyek Anda sudah siap, klik Lanjutkan .

Tambahkan Firebase ke proyek Android Anda

Sebelum memulai langkah ini, dapatkan hash SHA1 aplikasi Anda. Jalankan perintah berikut dari direktori build-android-start lokal Anda untuk menentukan SHA1 kunci debug Anda:

./gradlew signingReport

Store: /Users/<username>/.android/debug.keystore
Alias: AndroidDebugKey
MD5: A5:88:41:04:8F:06:59:6A:AE:33:76:87:AA:AD:19:23
SHA1: A7:89:F5:06:A8:07:A1:22:EC:90:6A:A6:EA:C3:D4:8B:3A:30:AB:18
SHA-256: 05:A2:2A:35:EE:F2:51:23:72:4D:72:67:A5:6A:8A:58:22:2C:00:A6:AB:F6:45:D5:A1:82:D8:90:A4:69:C8:FE
Valid until: Wednesday, August 10, 2044

Anda akan melihat beberapa keluaran seperti di atas. Baris yang penting adalah hash SHA1 . Jika Anda tidak dapat menemukan hash SHA1 Anda, lihat halaman ini untuk informasi lebih lanjut.

Kembali ke Firebase console, dan ikuti langkah-langkah berikut untuk mendaftarkan proyek Android Anda ke proyek Firebase Anda:

1. Dari layar ikhtisar proyek baru Anda, klik ikon Android untuk meluncurkan alur kerja penyiapan:
2. Di layar berikutnya, masukkan com.google.firebase.codelab.friendlychat sebagai nama paket untuk aplikasi Anda.
3. Klik Daftarkan Aplikasi , lalu klik Unduh google-services.json untuk mengunduh file konfigurasi Firebase Anda.
4. Salin file google-services.json ke direktori app proyek Android Anda.
5. Lewati langkah berikutnya yang ditunjukkan dalam alur kerja penyiapan konsol (langkah tersebut telah dilakukan untuk Anda di proyek build-android-start ).
6. Pastikan semua dependensi tersedia untuk aplikasi Anda dengan menyinkronkan proyek Anda dengan file Gradle. Dari toolbar Android Studio, pilih File > Sync Project with Gradle Files . Anda mungkin juga perlu menjalankan Proyek Build/Clean dan Proyek Build/Rebuild agar perubahan konfigurasi dapat dilakukan.

Konfigurasikan Otentikasi Firebase

Sebelum aplikasi Anda dapat mengakses Firebase Authentication API atas nama pengguna, Anda harus mengaktifkan Firebase Authentication dan penyedia login yang ingin Anda gunakan di aplikasi Anda.

1. Di Firebase console , pilih Autentikasi dari panel navigasi sebelah kiri.
2. Pilih tab Metode masuk .
3. Klik Email/Kata Sandi , lalu alihkan tombol ke diaktifkan (biru).
4. Klik Google , lalu alihkan tombol ke diaktifkan (biru) dan atur email dukungan proyek.

Jika nanti Anda mendapatkan error dalam codelab ini dengan pesan "CONFIGURATION_NOT_FOUND", kembali ke langkah ini dan periksa kembali pekerjaan Anda.

Konfigurasikan Basis Data Waktu Nyata

Aplikasi dalam codelab ini menyimpan pesan chat di Firebase Realtime Database. Di bagian ini, kita akan membuat database dan mengonfigurasi keamanannya melalui bahasa konfigurasi JSON yang disebut Aturan Keamanan Firebase.

1. Di Firebase console , pilih Realtime Database dari panel navigasi sebelah kiri.
2. Klik Buat Database untuk membuat instance Realtime Database baru. Saat diminta, pilih wilayah us-central1 , lalu klik Berikutnya .
3. Saat ditanya tentang aturan keamanan, pilih mode terkunci , lalu klik Aktifkan .
4. Setelah instance database dibuat, pilih tab Rules , lalu perbarui konfigurasi aturan dengan yang berikut:

    {
      "rules": {
        "messages": {
          ".read": "auth.uid != null",
          ".write": "auth.uid != null"
        }
      }
    }
   

Untuk informasi selengkapnya tentang cara kerja Aturan Keamanan (termasuk dokumentasi tentang variabel "auth"), lihat dokumentasi keamanan Realtime Database .

Konfigurasikan Penyimpanan Cloud untuk Firebase

1. Di Firebase console , pilih Penyimpanan dari panel navigasi sebelah kiri.
2. Klik Mulai untuk mengaktifkan Cloud Storage untuk proyek Anda.
3. Ikuti langkah-langkah dalam dialog untuk menyiapkan bucket Anda, menggunakan default yang disarankan.

Hubungkan ke sumber daya Firebase

Pada langkah awal codelab ini, Anda menambahkan kode berikut ke MainActivity.kt . Blok bersyarat ini menghubungkan proyek Android Anda ke Firebase Emulator Suite.

// REMOVE OR DISABLE THIS
if (BuildConfig.DEBUG) {
    Firebase.database.useEmulator("10.0.2.2", 9000)
    Firebase.auth.useEmulator("10.0.2.2", 9099)
    Firebase.storage.useEmulator("10.0.2.2", 9199)
}

Jika Anda ingin menghubungkan aplikasi Anda ke proyek Firebase baru yang sebenarnya dan sumber daya Firebase aslinya , Anda dapat menghapus blok ini atau menjalankan aplikasi Anda dalam mode rilis sehingga BuildConfig.DEBUG bernilai false .