Halaman ini diterjemahkan oleh Cloud Translation API.

Codelab Firebase Android - Membuat Friendly Chat

1. Ringkasan

screenshot

Gambar: Aplikasi Chat yang Cocok untuk Bekerja.

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

Yang akan Anda pelajari

Cara menggunakan Firebase Authentication untuk mengizinkan pengguna login.
Cara menyinkronkan 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.

Yang Anda butuhkan

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

2. Mendapatkan kode contoh

Membuat cloning repositori

Buat clone repositori GitHub dari command line:

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

Mengimpor ke Android Studio

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

Sekarang Anda akan membuka project build-android-start di Android Studio. Jika Anda melihat peringatan tentang file google-services.json yang tidak ada, jangan khawatir. Nama tersebut akan ditambahkan di langkah berikutnya.

Memeriksa dependensi

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

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
}

app/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. Menginstal Firebase CLI

Dalam codelab ini, Anda akan menggunakan Firebase Emulator Suite untuk mengemulasi Firebase Auth, Realtime Database, dan Cloud Storage secara lokal. Hal ini menyediakan lingkungan pengembangan lokal yang aman, cepat, dan tanpa biaya untuk mem-build aplikasi Anda.

Menginstal Firebase CLI

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

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

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

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

$ firebase --version
9.0.0

Login

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

4. Menghubungkan ke Firebase Emulator Suite

Memulai emulator

Di terminal, 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 yang di-clone.

$ 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.

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

Beranda UI Emulator Suite

Biarkan perintah emulators:start berjalan untuk codelab lainnya.

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. Menjalankan aplikasi awal

Menambahkan google-services.json

Agar aplikasi Android dapat terhubung ke Firebase, Anda harus menambahkan file google-services.json di dalam folder app project Android. Untuk tujuan codelab ini, kami telah menyediakan file JSON tiruan yang akan 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 project Firebase dan Aplikasi Android Firebase yang sebenarnya sehingga Anda dapat mengganti file JSON tiruan ini dengan konfigurasi Anda sendiri.

Menjalankan aplikasi

Setelah mengimpor project ke Android Studio dan menambahkan file JSON konfigurasi Firebase, Anda siap menjalankan aplikasi untuk pertama kalinya.

Mulai Android Emulator.
Di Android Studio, klik Run ( ) di toolbar.

Aplikasi akan diluncurkan di Android Emulator Anda. Pada tahap ini, Anda akan melihat daftar pesan kosong, dan mengirim serta menerima pesan tidak akan berfungsi. Pada langkah berikutnya di codelab ini, Anda akan mengautentikasi pengguna agar mereka dapat menggunakan Friendly Chat.

6. Aktifkan Autentikasi

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

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

Memeriksa pengguna saat ini

Pertama, tambahkan variabel instance berikut ke class MainActivity.kt:

MainActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

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

MainActivity.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
}

Kita juga ingin memeriksa apakah pengguna login selama onStart():

MainActivity.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 menampilkan informasi yang sesuai tentang pengguna Firebase yang saat ini diautentikasi:

MainActivity.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 logout:

MainActivity.kt

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

Sekarang kita memiliki semua logika yang diperlukan untuk mengarahkan pengguna ke layar login jika diperlukan. Selanjutnya, kita perlu menerapkan layar login untuk mengautentikasi pengguna dengan benar.

Buka file SignInActivity.kt. Di sini, tombol Login sederhana digunakan untuk memulai autentikasi. Di bagian ini, Anda akan menggunakan FirebaseUI untuk menerapkan logika login.

Tambahkan variabel instance Auth di class SignInActivity di bagian komentar // Firebase instance variables:

SignInActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

Kemudian, edit metode onCreate() untuk melakukan inisialisasi Firebase dengan cara yang sama seperti yang Anda lakukan di MainActivity:

SignInActivity.kt

// Initialize FirebaseAuth
auth = Firebase.auth

Tambahkan kolom 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 login 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 login. Jika hasil login 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)
        }
    }
}

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

Menguji pekerjaan Anda

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

Setelah login, buka UI Firebase Emulator Suite di browser, lalu klik tab Authentication untuk melihat akun pengguna yang pertama kali login ini.

7. Membaca pesan

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

Mengimpor contoh pesan

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

Sekarang Anda akan memiliki beberapa pesan di node messages database.

Membaca data

Menyinkronkan pesan

Di bagian ini, kita akan menambahkan kode yang menyinkronkan pesan yang baru ditambahkan ke UI aplikasi dengan:

Melakukan inisialisasi Firebase Realtime Database dan menambahkan pemroses 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 class MainActivity:

MainActivity.kt

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

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

MainActivity.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 class FriendlyMessageAdapter.kt, terapkan metode bind() dalam class 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 yang berupa gambar, jadi terapkan juga metode bind() dalam class 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 hentikan pemrosesan update dari Firebase Realtime Database. Perbarui metode onPause() dan onResume() di MainActivity seperti yang ditunjukkan di bawah:

MainActivity.kt

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

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

Menguji pesan sinkronisasi

Klik Run ( ).
Di UI Emulator Suite, kembali ke tab Realtime Database, lalu tambahkan pesan baru secara manual. Pastikan pesan muncul di aplikasi Android Anda:

Selamat, Anda baru saja menambahkan database real-time ke aplikasi.

8. Mengirim Pesan

Mengimplementasikan 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 kolom pesan, dan mengirim pesan ke database. Metode push() menambahkan ID yang dibuat secara otomatis ke jalur objek yang didorong. ID ini bersifat berurutan yang memastikan bahwa pesan baru akan ditambahkan ke bagian akhir daftar.

Perbarui pemroses klik tombol kirim di metode onCreate() di class MainActivity. Kode ini sudah berada di bagian bawah metode onCreate(). Perbarui isi onClick() agar cocok dengan kode di bawah:

MainActivity.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("")
}

Mengimplementasikan 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
Menulis pesan gambar sementara ke Realtime Database
Mulai mengupload gambar yang dipilih
Memperbarui URL pesan gambar ke URL gambar yang diupload, setelah upload selesai

Pilih Gambar

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

Menangani pemilihan gambar dan menulis pesan sementara

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

MainActivity.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)
                    })
}

Mengupload gambar dan memperbarui pesan

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

MainActivity.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
            )
        }
}

Menguji pengiriman pesan

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

9. Selamat!

Anda baru saja mem-build aplikasi chat real-time menggunakan Firebase.

Yang telah Anda pelajari

Firebase Authentication
Firebase Realtime Database
Cloud Storage for Firebase

Selanjutnya, coba gunakan hal-hal yang telah Anda pelajari dalam codelab ini untuk menambahkan Firebase ke aplikasi Android Anda sendiri. Untuk mempelajari Firebase lebih lanjut, buka firebase.google.com.

Jika Anda ingin mempelajari cara menyiapkan project Firebase sungguhan dan menggunakan resource Firebase sungguhan (bukan project demo dan hanya resource yang diemulasi), lanjutkan ke langkah berikutnya.

Catatan: Bahkan setelah Anda menyiapkan project Firebase sungguhan dan terutama saat Anda mulai mem-build aplikasi sungguhan, sebaiknya gunakan Firebase Local Emulator Suite untuk pengembangan dan pengujian.

10. Opsional: Membuat dan menyiapkan project Firebase

Pada langkah ini, Anda akan membuat project Firebase sungguhan dan Aplikasi Android Firebase untuk digunakan dengan codelab ini. Anda juga akan menambahkan konfigurasi Firebase khusus aplikasi ke aplikasi. Terakhir, Anda akan menyiapkan resource Firebase yang sebenarnya untuk digunakan dengan aplikasi.

Membuat project Firebase

Di browser, buka Firebase console.
Pilih Tambahkan project.
Pilih atau masukkan nama project. Anda dapat menggunakan nama apa pun yang Anda inginkan.
Anda tidak memerlukan Google Analytics untuk codelab ini, sehingga Anda dapat melewati pengaktifannya untuk project Anda.
Klik Buat Project. Jika project Anda sudah siap, klik Lanjutkan.

Mengupgrade paket harga Firebase Anda

Untuk menggunakan Cloud Storage for Firebase, project Firebase Anda harus menggunakan paket harga bayar sesuai pemakaian (Blaze), yang berarti project tersebut ditautkan ke akun Penagihan Cloud.

Akun Penagihan Cloud memerlukan metode pembayaran, seperti kartu kredit.
Jika Anda baru menggunakan Firebase dan Google Cloud, periksa apakah Anda memenuhi syarat untuk mendapatkan kredit sebesar$300 dan akun Penagihan Cloud Uji Coba Gratis.
Jika Anda melakukan codelab ini sebagai bagian dari acara, tanyakan kepada penyelenggara apakah ada kredit Cloud yang tersedia.

Untuk mengupgrade project Anda ke paket Blaze, ikuti langkah-langkah berikut:

Di Firebase console, pilih upgrade your plan.
Pilih paket Blaze. Ikuti petunjuk di layar untuk menautkan akun Penagihan Cloud ke project Anda.
Jika perlu membuat akun Penagihan Cloud sebagai bagian dari upgrade ini, Anda mungkin perlu kembali ke alur upgrade di Firebase console untuk menyelesaikan upgrade.

Menambahkan Firebase ke project Android Anda

Sebelum memulai langkah ini, dapatkan hash SHA1 aplikasi Anda. Jalankan perintah berikut dari direktori build-android-start lokal 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 output seperti di atas. Baris yang penting adalah hash SHA1. Jika Anda tidak dapat menemukan hash SHA1, lihat halaman ini untuk mengetahui informasi selengkapnya.

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

Dari layar ringkasan project baru, klik ikon Android untuk meluncurkan alur kerja penyiapan:
Di layar berikutnya, masukkan com.google.firebase.codelab.friendlychat sebagai nama paket untuk aplikasi Anda.
Klik Register App, lalu klik Download google-services.json untuk mendownload file konfigurasi Firebase Anda.
Salin file google-services.json ke direktori app project Android Anda.
Lewati langkah-langkah berikutnya yang ditampilkan di alur kerja penyiapan konsol (langkah-langkah tersebut telah dilakukan untuk Anda di project build-android-start).
Pastikan semua dependensi tersedia untuk aplikasi Anda dengan menyinkronkan project dengan file Gradle. Dari toolbar Android Studio, pilih File > Sync Project with Gradle Files. Anda mungkin juga perlu menjalankan Build/Clean Project dan Build/Rebuild Project agar perubahan konfigurasi dapat dilakukan.

Mengonfigurasi Firebase Authentication

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

Di Firebase console, pilih Authentication dari panel navigasi sebelah kiri.
Pilih tab Metode login.
Klik Email/Sandi, lalu alihkan tombol ke aktif (biru).
Klik Google, lalu alihkan tombol ke aktif (biru) dan tetapkan email dukungan project.

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

Menyiapkan Realtime Database

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.

Di panel kiri Firebase console, luaskan Build, lalu pilih Realtime Database.
Klik Create database.
Pilih lokasi untuk database Anda, lalu klik Berikutnya.
Untuk aplikasi yang sebenarnya, Anda harus memilih lokasi yang dekat dengan pengguna.
Klik Mulai dalam mode pengujian. Baca pernyataan penyangkalan tentang aturan keamanan.
Di langkah berikutnya dalam codelab ini, Anda akan menambahkan Aturan Keamanan untuk mengamankan data. Jangan mendistribusikan atau mengekspos aplikasi ke publik tanpa menambahkan Aturan Keamanan untuk database Anda.
Klik Buat.

Setelah instance database dibuat, pilih tab Rules, lalu perbarui konfigurasi aturan dengan hal 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.

Menyiapkan Cloud Storage for Firebase

Di panel kiri Firebase console, luaskan Build, lalu pilih Storage.
Klik Mulai.
Pilih lokasi untuk bucket Storage default Anda.
Bucket di US-WEST1, US-CENTRAL1, dan US-EAST1 dapat memanfaatkan paket"Selalu Gratis" untuk Google Cloud Storage. Bucket di semua lokasi lainnya mengikuti harga dan penggunaan Google Cloud Storage.
Klik Mulai dalam mode pengujian. Baca pernyataan penyangkalan tentang aturan keamanan.
Di codelab ini, Anda akan menambahkan aturan keamanan untuk mengamankan data. Jangan mendistribusikan atau mengekspos aplikasi ke publik tanpa menambahkan Aturan Keamanan untuk bucket Storage Anda.
Klik Buat.

Menghubungkan ke resource Firebase

Pada langkah sebelumnya di codelab ini, Anda telah menambahkan kode berikut ke MainActivity.kt. Blok kondisional ini menghubungkan project 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 ingin menghubungkan aplikasi ke project Firebase asli baru dan resource Firebase asli-nya, Anda dapat menghapus blok ini atau menjalankan aplikasi dalam mode rilis sehingga BuildConfig.DEBUG adalah false.

Codelab Firebase Android - Membuat Friendly Chat

1. Ringkasan

Yang akan Anda pelajari

Yang Anda butuhkan

2. Mendapatkan kode contoh

Membuat cloning repositori

Mengimpor ke Android Studio

Memeriksa dependensi

3. Menginstal Firebase CLI

Menginstal Firebase CLI

Login

4. Menghubungkan ke Firebase Emulator Suite

Memulai emulator

Hubungkan aplikasi Anda

5. Menjalankan aplikasi awal

Menambahkan google-services.json

Menjalankan aplikasi

6. Aktifkan Autentikasi

Menambahkan fungsi login dasar

Memeriksa pengguna saat ini

Menerapkan layar Login

Menguji pekerjaan Anda

7. Membaca pesan

Mengimpor contoh pesan

Membaca data

Menyinkronkan pesan

MainActivity.kt

Menguji pesan sinkronisasi

8. Mengirim Pesan

Mengimplementasikan pengiriman pesan teks

Mengimplementasikan pengiriman pesan gambar

Pilih Gambar

Menangani pemilihan gambar dan menulis pesan sementara

Mengupload gambar dan memperbarui pesan

MainActivity.kt

Menguji pengiriman pesan

9. Selamat!

Yang telah Anda pelajari

10. Opsional: Membuat dan menyiapkan project Firebase

Membuat project Firebase

Mengupgrade paket harga Firebase Anda

Menambahkan Firebase ke project Android Anda

Mengonfigurasi Firebase Authentication

Menyiapkan Realtime Database

Menyiapkan Cloud Storage for Firebase

Menghubungkan ke resource Firebase