Laboratorium Firebase na Androida — buduj przyjazny czat

1. Przegląd

zrzut ekranu

Obraz: Przyjazna dla pracy aplikacja do czatowania.

Witamy w laboratorium programowania Friendly Chat. Podczas tych zajęć z programowania dowiesz się, jak używać platformy Firebase do tworzenia aplikacji do czatowania na Androida.

Czego się dowiesz

  • Jak korzystać z uwierzytelniania Firebase, aby umożliwić użytkownikom logowanie się.
  • Jak synchronizować dane za pomocą bazy danych Firebase Realtime.
  • Jak przechowywać pliki binarne w Cloud Storage dla Firebase.
  • Jak używać pakietu Firebase Local Emulator Suite do tworzenia aplikacji na Androida za pomocą Firebase.

Co będziesz potrzebował

  • Najnowsza wersja Androida Studio .
  • Emulator Androida z Androidem 5.0+.
  • Node.js w wersji 10 lub wyższej (aby korzystać z pakietu Emulator).
  • Java 8 lub nowsza. Aby zainstalować Javę, skorzystaj z poniższych instrukcji ; aby sprawdzić swoją wersję, uruchom java -version .
  • Znajomość języka programowania Kotlin.

2. Pobierz przykładowy kod

Sklonuj repozytorium

Sklonuj repozytorium GitHub z wiersza poleceń:

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

Zaimportuj do Android Studio

W Android Studio wybierz opcję Plik > Otwórz , a następnie wybierz katalog build-android-start ( folder_studio_android ) z katalogu, z którego pobrałeś przykładowy kod.

Powinieneś teraz mieć otwarty projekt build-android-start w Android Studio. Jeśli zobaczysz ostrzeżenie o braku pliku google-services.json , nie martw się. Zostanie dodany w późniejszym kroku.

Sprawdź zależności

W tym ćwiczeniu z programowania wszystkie potrzebne zależności zostały już dodane, ale ważne jest, aby zrozumieć, jak dodać pakiet SDK Firebase do swojej aplikacji:

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. Zainstaluj interfejs wiersza polecenia Firebase

Podczas tych zajęć z programowania będziesz używać pakietu Firebase Emulator Suite do lokalnej emulacji Firebase Auth, bazy danych czasu rzeczywistego i przechowywania w chmurze. Zapewnia to bezpieczne, szybkie i bezpłatne lokalne środowisko programistyczne do tworzenia aplikacji.

Zainstaluj interfejs wiersza polecenia Firebase

Najpierw musisz zainstalować Firebase CLI . Jeśli używasz systemu macOS lub Linux, możesz uruchomić następujące polecenie cURL:

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

Jeśli używasz systemu Windows, przeczytaj instrukcje instalacji , aby uzyskać samodzielny plik binarny lub zainstalować przez npm .

Po zainstalowaniu interfejsu CLI uruchomienie firebase --version powinno zgłosić wersję 9.0.0 lub wyższą:

$ firebase --version
9.0.0

Zaloguj sie

Uruchom firebase login , aby połączyć interfejs CLI ze swoim kontem Google. Spowoduje to otwarcie nowego okna przeglądarki w celu zakończenia procesu logowania. Pamiętaj, aby wybrać to samo konto, którego użyłeś wcześniej podczas tworzenia projektu Firebase.

4. Połącz się z pakietem emulatorów Firebase

Uruchom emulatory

W terminalu uruchom następującą komendę z katalogu głównego lokalnego katalogu codelab-friendlychat-android :

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

Powinieneś zobaczyć kilka takich dzienników. Wartości portów zostały zdefiniowane w pliku firebase.json , który został zawarty w sklonowanym przykładowym kodzie.

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

Przejdź do http://localhost:4000 w przeglądarce internetowej, aby wyświetlić interfejs użytkownika Firebase Emulator Suite:

Strona główna interfejsu użytkownika pakietu emulatora

Pozostaw polecenie emulators:start uruchomione do końca zajęć z programowania.

Połącz swoją aplikację

W Android Studio otwórz MainActivity.kt , a następnie dodaj następujący kod w metodzie 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. Uruchom aplikację startową

Dodaj plik google-services.json

Aby Twoja aplikacja na Androida mogła połączyć się z Firebase, musisz dodać plik google-services.json do folderu app swojego projektu na Androida. Na potrzeby tego ćwiczenia z programowania udostępniliśmy próbny plik JSON, który umożliwi połączenie z pakietem emulatorów Firebase.

Skopiuj plik mock-google-services.json do folderu build-android-start/app jako google-services.json :

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

W ostatnim kroku tych ćwiczeń z programowania dowiesz się, jak utworzyć prawdziwy projekt Firebase i aplikację Firebase na Androida, aby móc zastąpić ten próbny plik JSON własną konfiguracją.

Uruchom aplikację

Teraz, gdy zaimportowałeś projekt do Android Studio i dodałeś plik JSON konfiguracji Firebase, możesz uruchomić aplikację po raz pierwszy.

  1. Uruchom emulator Androida.
  2. W Android Studio kliknij Uruchom ( wykonać ) na pasku narzędzi.

Aplikacja powinna uruchomić się na emulatorze Androida. W tym momencie powinieneś zobaczyć pustą listę wiadomości, a wysyłanie i odbieranie wiadomości nie będzie działać. W następnym kroku tych ćwiczeń z programowania uwierzytelnisz użytkowników, aby mogli korzystać z Przyjaznego Czatu.

6. Włącz uwierzytelnianie

Ta aplikacja będzie korzystać z bazy danych Firebase Realtime Database do przechowywania wszystkich wiadomości czatu. Zanim jednak dodamy dane, powinniśmy upewnić się, że aplikacja jest bezpieczna i że tylko uwierzytelnieni użytkownicy mogą zamieszczać wiadomości. W tym kroku włączymy uwierzytelnianie Firebase i skonfigurujemy reguły bezpieczeństwa bazy danych w czasie rzeczywistym.

Dodaj podstawową funkcjonalność logowania

Następnie dodamy do aplikacji podstawowy kod uwierzytelniający Firebase, aby wykryć użytkowników i zaimplementować ekran logowania.

Sprawdź bieżącego użytkownika

Najpierw dodaj następującą zmienną instancji do klasy MainActivity.kt :

MainActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

Teraz zmodyfikujmy MainActivity , aby wysyłał użytkownika do ekranu logowania za każdym razem, gdy otworzy aplikację i nie zostanie uwierzytelniony. Dodaj następujące polecenie do metody onCreate() po dołączeniu binding do widoku:

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
}

Chcemy także sprawdzić, czy użytkownik jest zalogowany podczas 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
    }
}

Następnie zaimplementuj metody getUserPhotoUrl() i getUserName() , aby zwrócić odpowiednie informacje o aktualnie uwierzytelnionym użytkowniku Firebase:

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
}

Następnie zaimplementuj metodęsignOut signOut() do obsługi przycisku wylogowania:

MainActivity.kt

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

Teraz mamy już całą logikę, która w razie potrzeby odsyła użytkownika do ekranu logowania. Następnie musimy zaimplementować ekran logowania, aby poprawnie uwierzytelniać użytkowników.

Zaimplementuj ekran logowania

Otwórz plik SignInActivity.kt . W tym przypadku prosty przycisk Zaloguj służy do inicjowania uwierzytelniania. W tej sekcji użyjesz FirebaseUI do zaimplementowania logiki logowania.

Dodaj zmienną instancji Auth w klasie SignInActivity pod komentarzem // Firebase instance variables :

SignInActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

Następnie edytuj metodę onCreate() , aby zainicjować Firebase w taki sam sposób, jak w MainActivity :

SignInActivity.kt

// Initialize FirebaseAuth
auth = Firebase.auth

Dodaj pole ActivityResultLauncher do SignInActivity :

SignInActivity.kt

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

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

Następnie zmodyfikuj metodę onStart() , aby uruchomić proces logowania 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()
    }
}

Następnie zaimplementuj metodę onSignInResult , aby obsłużyć wynik logowania. Jeśli logowanie przebiegło pomyślnie, przejdź do 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)
        }
    }
}

Otóż ​​to! Zaimplementowałeś uwierzytelnianie za pomocą FirebaseUI w zaledwie kilku wywołaniach metod i bez konieczności zarządzania jakąkolwiek konfiguracją po stronie serwera.

Przetestuj swoją pracę

Uruchom aplikację na emulatorze Androida. Powinieneś natychmiast zostać przekierowany do ekranu logowania. Stuknij przycisk Zaloguj się za pomocą adresu e-mail , a następnie utwórz konto. Jeśli wszystko zostało poprawnie zaimplementowane, powinieneś zostać odesłany do ekranu wiadomości.

Po zalogowaniu się otwórz interfejs Firebase Emulator Suite w przeglądarce, a następnie kliknij kartę Uwierzytelnianie , aby zobaczyć konto pierwszego zalogowanego użytkownika.

7. Czytaj wiadomości

W tym kroku dodamy funkcjonalność umożliwiającą odczytywanie i wyświetlanie wiadomości przechowywanych w Bazie Danych Czasu Rzeczywistego.

Importuj przykładowe wiadomości

  1. W interfejsie Firebase Emulator Suite wybierz kartę Baza danych czasu rzeczywistego .
  2. Przeciągnij i upuść plik initial_messages.json z lokalnej kopii repozytorium codelab do przeglądarki danych.

Powinieneś teraz mieć kilka wiadomości w węźle messages w bazie danych.

Przeczytaj dane

Synchronizuj wiadomości

W tej sekcji dodajemy kod synchronizujący nowo dodane wiadomości z interfejsem aplikacji poprzez:

  • Inicjowanie bazy danych czasu rzeczywistego Firebase i dodanie odbiornika do obsługi zmian wprowadzonych w danych.
  • Aktualizowanie adaptera RecyclerView w celu wyświetlania nowych komunikatów.
  • Dodanie zmiennych instancji Database do innych zmiennych instancji Firebase w klasie MainActivity :

MainActivity.kt

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

Zmodyfikuj metodę onCreate() swojej MainActivity pod komentarzem // Initialize Realtime Database and FirebaseRecyclerAdapter za pomocą kodu zdefiniowanego poniżej. Ten kod dodaje wszystkie istniejące wiadomości z bazy danych czasu rzeczywistego, a następnie nasłuchuje nowych wpisów podrzędnych w ścieżce messages w bazie danych czasu rzeczywistego Firebase. Dodaje nowy element do interfejsu użytkownika dla każdej wiadomości:

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)
)

Następnie w klasie FriendlyMessageAdapter.kt zaimplementuj metodę bind() w klasie wewnętrznej 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)
        }
    }
    ...
}

Musimy także wyświetlać komunikaty będące obrazami, więc zaimplementuj także metodę bind() w klasie wewnętrznej 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)
        }
    }
}

Na koniec wróć do MainActivity i rozpocznij i zatrzymaj nasłuchiwanie aktualizacji z bazy danych Firebase Realtime Database. Zaktualizuj metody onPause() i onResume() w MainActivity , jak pokazano poniżej:

MainActivity.kt

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

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

Przetestuj synchronizację wiadomości

  1. Kliknij Uruchom ( wykonać ).
  2. W interfejsie Emulator Suite wróć do karty Baza danych czasu rzeczywistego , a następnie ręcznie dodaj nową wiadomość. Upewnij się, że komunikat pojawia się w Twojej aplikacji na Androida:

Gratulacje, właśnie dodałeś bazę danych czasu rzeczywistego do swojej aplikacji!

8. Wysyłaj wiadomości

Zaimplementuj wysyłanie wiadomości tekstowych

W tej sekcji dodasz możliwość wysyłania wiadomości tekstowych przez użytkowników aplikacji. Poniższy fragment kodu nasłuchuje zdarzeń kliknięcia przycisku wysyłania, tworzy nowy obiekt FriendlyMessage z zawartością pola wiadomości i wypycha wiadomość do bazy danych. Metoda push() dodaje automatycznie wygenerowany identyfikator do ścieżki wypchniętego obiektu. Identyfikatory te mają charakter sekwencyjny, co gwarantuje, że nowe wiadomości będą dodawane na końcu listy.

Zaktualizuj detektor kliknięcia przycisku wysyłania w metodzie onCreate() w klasie MainActivity . Ten kod znajduje się już na końcu metody onCreate() . Zaktualizuj treść onClick() , aby pasowała do poniższego kodu:

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

Zaimplementuj wysyłanie wiadomości obrazkowych

W tej sekcji dodasz możliwość wysyłania wiadomości graficznych przez użytkowników aplikacji. Tworzenie komunikatu graficznego odbywa się w następujących krokach:

  • Wybierz obraz
  • Obsługuj wybór obrazu
  • Zapisz tymczasową wiadomość obrazkową w bazie danych czasu rzeczywistego
  • Rozpocznij przesyłanie wybranego obrazu
  • Po zakończeniu przesyłania zaktualizuj adres URL wiadomości obrazkowej do adresu przesłanego obrazu

Wybierz obraz

Aby dodać obrazy, to ćwiczenie z programowania korzysta z Cloud Storage dla Firebase. Cloud Storage to dobre miejsce do przechowywania danych binarnych aplikacji.

Obsługuj wybór obrazu i napisz wiadomość tymczasową

Gdy użytkownik wybierze obraz, zostanie uruchomiona Intent wyboru obrazu. Zostało to już zaimplementowane w kodzie na końcu metody onCreate() . Po zakończeniu wywołuje metodę onImageSelected() MainActivity . Korzystając z poniższego fragmentu kodu, napiszesz do bazy danych wiadomość zawierającą tymczasowy adres URL obrazu, wskazującą, że obraz jest przesyłany.

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

Prześlij obraz i zaktualizuj wiadomość

Dodaj metodę putImageInStorage() do MainActivity . Wywołuje się go w onImageSelected() w celu zainicjowania przesyłania wybranego obrazu. Po zakończeniu przesyłania zaktualizujesz wiadomość, aby użyć odpowiedniego obrazu.

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

Testuj wysyłanie wiadomości

  1. W Android Studio kliknij wykonać Przycisk Uruchom .
  2. W emulatorze Androida wpisz wiadomość, a następnie dotknij przycisku wysyłania. Nowa wiadomość powinna być widoczna w interfejsie aplikacji i interfejsie użytkownika Firebase Emulator Suite.
  3. W emulatorze Androida dotknij obrazu „+”, aby wybrać obraz z urządzenia. Nowa wiadomość powinna być widoczna najpierw z obrazem zastępczym, a następnie z wybranym obrazem po zakończeniu przesyłania obrazu. Nowa wiadomość powinna być również widoczna w interfejsie użytkownika pakietu Emulator Suite, w szczególności jako obiekt na karcie Baza danych czasu rzeczywistego i jako obiekt blob na karcie Magazyn.

9. Gratulacje!

Właśnie stworzyłeś aplikację do czatowania w czasie rzeczywistym przy użyciu Firebase!

Czego się nauczyłeś

  • Uwierzytelnianie Firebase
  • Baza danych czasu rzeczywistego Firebase
  • Magazyn w chmurze dla Firebase

Następnie spróbuj wykorzystać wiedzę zdobytą podczas tych zajęć z programowania, aby dodać Firebase do własnej aplikacji na Androida! Aby dowiedzieć się więcej o Firebase, odwiedź firebase.google.com .

Jeśli chcesz dowiedzieć się, jak skonfigurować prawdziwy projekt Firebase i korzystać z prawdziwych zasobów Firebase (zamiast projektu demonstracyjnego i tylko emulowanych zasobów), przejdź do następnego kroku.

Uwaga: nawet po skonfigurowaniu prawdziwego projektu Firebase, a zwłaszcza gdy zaczniesz tworzyć prawdziwą aplikację, zalecamy korzystanie z pakietu Firebase Local Emulator Suite do programowania i testowania.

10. Opcjonalnie: Utwórz i skonfiguruj projekt Firebase

Na tym etapie utworzysz prawdziwy projekt Firebase i aplikację Firebase na Androida do wykorzystania w tych ćwiczeniach z kodowania. Do swojej aplikacji dodasz także konfigurację Firebase specyficzną dla aplikacji. Na koniec skonfigurujesz prawdziwe zasoby Firebase do użycia w swojej aplikacji.

Utwórz projekt Firebase

  1. W przeglądarce przejdź do konsoli Firebase .
  2. Wybierz opcję Dodaj projekt .
  3. Wybierz lub wprowadź nazwę projektu. Możesz użyć dowolnej nazwy.
  4. Do tych zajęć z programowania nie potrzebujesz Google Analytics, więc możesz pominąć włączanie go w swoim projekcie.
  5. Kliknij opcję Utwórz projekt . Gdy projekt będzie gotowy, kliknij Kontynuuj .

Dodaj Firebase do swojego projektu na Androida

Zanim rozpoczniesz ten krok, pobierz skrót SHA1 swojej aplikacji. Uruchom następującą komendę z lokalnego katalogu build-android-start aby określić SHA1 klucza debugowania:

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

Powinieneś zobaczyć dane wyjściowe takie jak powyżej. Ważną linią jest skrót SHA1 . Jeśli nie możesz znaleźć skrótu SHA1, zobacz tę stronę , aby uzyskać więcej informacji.

Wróć do konsoli Firebase i wykonaj następujące kroki, aby zarejestrować projekt Androida w projekcie Firebase:

  1. Na ekranie przeglądu nowego projektu kliknij ikonę Androida, aby uruchomić proces konfiguracji: dodaj aplikację na Androida
  2. Na następnym ekranie wpisz com.google.firebase.codelab.friendlychat jako nazwę pakietu swojej aplikacji.
  3. Kliknij opcję Zarejestruj aplikację , a następnie kliknij opcję Pobierz plik google-services.json , aby pobrać plik konfiguracyjny Firebase.
  4. Skopiuj plik google-services.json do katalogu app swojego projektu na Androida.
  5. Pomiń kolejne kroki pokazane w procesie konfiguracji konsoli (zostały już wykonane w projekcie build-android-start ).
  6. Upewnij się, że wszystkie zależności są dostępne dla Twojej aplikacji, synchronizując projekt z plikami Gradle. Z paska narzędzi Android Studio wybierz opcję Plik > Synchronizuj projekt z plikami Gradle . Aby zmiany konfiguracji mogły zostać wprowadzone, może być konieczne uruchomienie opcji Build/Clean Project i Build/Rebuild Project .

Skonfiguruj uwierzytelnianie Firebase

Zanim Twoja aplikacja będzie mogła uzyskać dostęp do interfejsów API uwierzytelniania Firebase w imieniu użytkowników, musisz włączyć uwierzytelnianie Firebase i dostawców logowania, których chcesz używać w swojej aplikacji.

  1. W konsoli Firebase wybierz Uwierzytelnianie w panelu nawigacyjnym po lewej stronie.
  2. Wybierz zakładkę Metoda logowania .
  3. Kliknij opcję E-mail/hasło , a następnie ustaw przełącznik w pozycji włączonej (niebieski).
  4. Kliknij Google , a następnie ustaw przełącznik w pozycji włączonej (niebieski) i ustaw adres e-mail pomocy technicznej projektu.

Jeśli w dalszej części ćwiczeń z kodowania pojawią się błędy z komunikatem „CONFIGURATION_NOT_FOUND”, wróć do tego kroku i dokładnie sprawdź swoją pracę.

Skonfiguruj bazę danych czasu rzeczywistego

Aplikacja w tym laboratorium przechowuje wiadomości czatu w bazie danych Firebase Realtime Database. W tej sekcji utworzymy bazę danych i skonfigurujemy jej zabezpieczenia za pomocą języka konfiguracyjnego JSON o nazwie Firebase Security Rules.

  1. W konsoli Firebase wybierz opcję Baza danych czasu rzeczywistego z panelu nawigacyjnego po lewej stronie.
  2. Kliknij opcję Utwórz bazę danych , aby utworzyć nową instancję bazy danych czasu rzeczywistego. Po wyświetleniu monitu wybierz region us-central1 , a następnie kliknij przycisk Dalej .
  3. Po wyświetleniu monitu o reguły bezpieczeństwa wybierz tryb zablokowany , a następnie kliknij Włącz .
  4. Po utworzeniu instancji bazy danych wybierz zakładkę Reguły , a następnie zaktualizuj konfigurację reguł, dodając:
     {
       "rules": {
         "messages": {
           ".read": "auth.uid != null",
           ".write": "auth.uid != null"
         }
       }
     }
    

Aby uzyskać więcej informacji na temat działania reguł bezpieczeństwa (w tym dokumentację dotyczącą zmiennej „auth”), zobacz dokumentację zabezpieczeń bazy danych Realtime Database .

Skonfiguruj magazyn w chmurze dla Firebase

  1. W konsoli Firebase wybierz opcję Pamięć w panelu nawigacyjnym po lewej stronie.
  2. Kliknij Rozpocznij , aby włączyć Cloud Storage dla swojego projektu.
  3. Postępuj zgodnie z instrukcjami w oknie dialogowym, aby skonfigurować zasobnik, korzystając z sugerowanych ustawień domyślnych.

Połącz się z zasobami Firebase

We wcześniejszym kroku tego ćwiczenia z programowania dodano następujące elementy do MainActivity.kt . Ten blok warunkowy połączył Twój projekt Androida z pakietem emulatorów Firebase.

// 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)
}

Jeśli chcesz połączyć swoją aplikację z nowym prawdziwym projektem Firebase i jego prawdziwymi zasobami Firebase, możesz usunąć ten blok lub uruchomić aplikację w trybie wydania, tak aby BuildConfig.DEBUG miał false .