Firebase Laboratorium kodowania na Androida — twórz przyjazny czat

1. Przegląd

zrzut ekranu

Obraz: Działająca przyjazna aplikacja do czatu.

Witamy w laboratorium kodowania przyjaznego czatu. W tym laboratorium kodowania dowiesz się, jak używać platformy Firebase do tworzenia aplikacji do czatu na Androida.

Czego się nauczysz

  • Jak używać uwierzytelniania Firebase, aby umożliwić użytkownikom logowanie.
  • Jak synchronizować dane za pomocą bazy danych czasu rzeczywistego Firebase.
  • 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 Android Studio .
  • Emulator Androida z Androidem 5.0+.
  • Node.js w wersji 10 lub nowszej (aby korzystać z pakietu emulatorów).
  • Java 8 lub nowsza. Aby zainstalować Javę, skorzystaj z tych 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 Plik > Otwórz , a następnie wybierz katalog build-android-start ( android_studio_folder ) z katalogu, do którego pobrałeś przykładowy kod.

Projekt build-android-start powinien być teraz otwarty 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 laboratorium kodowania wszystkie zależności, których będziesz potrzebować, zostały już dodane, ale ważne jest, aby zrozumieć, jak dodać pakiet Firebase SDK 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

W tym laboratorium kodowania użyjesz pakietu Firebase Emulator Suite do lokalnej emulacji uwierzytelniania Firebase, 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 CLI uruchomienie firebase --version powinno zgłosić wersję 9.0.0 lub nowszą:

$ firebase --version
9.0.0

Zaloguj sie

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

4. Połącz się z Firebase Emulator Suite

Uruchom emulatory

W swoim terminalu uruchom następujące polecenie z katalogu głównego lokalnego codelab-friendlychat-android :

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

Powinieneś zobaczyć takie logi. 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 adresu http://localhost:4000 w przeglądarce internetowej, aby wyświetlić interfejs Firebase Emulator Suite UI:

Strona główna interfejsu użytkownika pakietu emulatorów

Pozostaw uruchomione polecenie emulators:start przez resztę laboratorium kodu.

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 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 laboratorium kodowania udostępniliśmy próbny plik JSON, który umożliwi połączenie z pakietem Firebase Emulator Suite.

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 tego laboratorium kodowania 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, po zaimportowaniu projektu do Android Studio i dodaniu pliku 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 twoim 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 tego laboratorium kodowania uwierzytelnisz użytkowników, aby mogli korzystać z Przyjaznego czatu.

6. Włącz uwierzytelnianie

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

Dodaj podstawową funkcję logowania

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

Sprawdź aktualnego 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 wysłać użytkownika do ekranu logowania za każdym razem, gdy otwiera aplikację i nie jest uwierzytelniony. Dodaj następujące elementy 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 również 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() aby obsłużyć przycisk wylogowania:

MainActivity.kt

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

Teraz mamy całą logikę, aby w razie potrzeby wysł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 do zainicjowania uwierzytelnienia służy prosty przycisk logowania. W tej sekcji użyjesz interfejsu 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 edytuj 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 wynik logowania się powiódł, 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 swoim emulatorze Androida. Powinieneś natychmiast przejść do ekranu logowania. Stuknij przycisk Zaloguj się przez e-mail , a następnie utwórz konto. Jeśli wszystko zostało poprawnie zaimplementowane, powinieneś zostać przekierowany do ekranu wiadomości.

Po zalogowaniu się otwórz w przeglądarce interfejs Firebase Emulator Suite, a następnie kliknij kartę Uwierzytelnianie , aby wyświetlić 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 UI 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 bazy danych.

Odczyt danych

Synchronizuj wiadomości

W tej sekcji dodamy kod, który synchronizuje 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świetlenia nowych komunikatów.
  • Dodanie zmiennych instancji Database z innymi zmiennymi instancji Firebase w klasie MainActivity :

MainActivity.kt

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

Zmodyfikuj metodę onCreate() swojego 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 również wyświetlać wiadomości, które są obrazami, więc zaimplementuj również metodę bind() w wewnętrznej klasie 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)
        }
    }
}

Wreszcie, z powrotem w MainActivity , zacznij i zatrzymaj nasłuchiwanie aktualizacji z 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 użytkownika Emulator Suite wróć do karty Baza danych czasu rzeczywistego , a następnie ręcznie dodaj nową wiadomość. Potwierdź, że wiadomość 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 przekazuje wiadomość do bazy danych. Metoda push() dodaje automatycznie wygenerowany identyfikator do ścieżki wysyłanego obiektu. Te identyfikatory są sekwencyjne, co gwarantuje, że nowe wiadomości będą dodawane na końcu listy.

Zaktualizuj detektor kliknięć przycisku wysyłania w metodzie onCreate() w klasie MainActivity . Ten kod znajduje się już na dole 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 graficznych

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

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

Wybierz obraz

Aby dodać obrazy, to laboratorium kodów korzysta z Cloud Storage dla Firebase. Cloud Storage to dobre miejsce do przechowywania danych binarnych Twojej aplikacji.

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

Gdy użytkownik wybierze obraz, uruchamiany jest Intent wyboru obrazu. Jest 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 wiadomość z tymczasowym adresem URL obrazu do bazy danych, wskazującą, że obraz jest ładowany.

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 . Jest wywoływana 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 wprowadź wiadomość, a następnie stuknij przycisk wysyłania. Nowa wiadomość powinna być widoczna w interfejsie aplikacji oraz w interfejsie Firebase Emulator Suite.
  3. W emulatorze Androida stuknij obraz „+”, aby wybrać obraz ze swojego 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 Emulator Suite, w szczególności jako obiekt na karcie Baza danych czasu rzeczywistego i jako obiekt typu blob na karcie Przechowywanie.

9. Gratulacje!

Właśnie zbudowałeś aplikację do czatowania w czasie rzeczywistym za pomocą Firebase!

Czego się nauczyłeś

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

Następnie spróbuj wykorzystać to, czego nauczyłeś się w tym laboratorium kodowania, aby dodać Firebase do własnej aplikacji na Androida! Aby dowiedzieć się więcej o Firebase, odwiedź stronę 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 po rozpoczęciu tworzenia prawdziwej aplikacji, zalecamy korzystanie z pakietu Firebase Local Emulator Suite do programowania i testowania.

10. Opcjonalnie: utwórz i skonfiguruj projekt Firebase

W tym kroku utworzysz prawdziwy projekt Firebase i aplikację Firebase na Androida do użytku z tym laboratorium kodu. Dodasz też do swojej aplikacji konfigurację Firebase specyficzną dla aplikacji. Na koniec skonfigurujesz prawdziwe zasoby Firebase do użytku z Twoją aplikacją.

Utwórz projekt Firebase

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

Dodaj Firebase do swojego projektu na Androida

Zanim rozpoczniesz ten krok, uzyskaj skrót SHA1 swojej aplikacji. Uruchom następujące polecenie 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ć swój 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 Zarejestruj aplikację , a następnie kliknij Pobierz 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 przepływie pracy konfiguracji konsoli (zostały one 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 Plik > Synchronizuj projekt z plikami Gradle . Może być również konieczne uruchomienie Build/Clean Project i Build/Rebuild Project, aby zmiany konfiguracji miały miejsce.

Skonfiguruj uwierzytelnianie Firebase

Zanim Twoja aplikacja będzie mogła uzyskiwać 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 opcję Uwierzytelnianie w panelu nawigacyjnym po lewej stronie.
  2. Wybierz kartę Metoda logowania .
  3. Kliknij E-mail/Hasło , a następnie przełącz przełącznik w położenie włączone (niebieski).
  4. Kliknij Google , a następnie ustaw przełącznik w pozycji włączonej (niebieskiej) i ustaw adres e-mail pomocy technicznej projektu.

Jeśli później w tym laboratorium kodów pojawią się błędy z komunikatem „CONFIGURATION_NOT_FOUND”, wróć do tego kroku i ponownie sprawdź swoją pracę.

Skonfiguruj bazę danych czasu rzeczywistego

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

  1. W konsoli Firebase wybierz opcję Baza danych czasu rzeczywistego z panelu nawigacyjnego po lewej stronie.
  2. Kliknij 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 blokady , a następnie kliknij opcję Włącz .
  4. Po utworzeniu instancji bazy danych wybierz zakładkę Reguły , a następnie zaktualizuj konfigurację reguł o:
     {
   "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 czasu rzeczywistego .

Skonfiguruj Cloud Storage dla Firebase

  1. W konsoli Firebase wybierz 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 laboratorium kodów dodano następujące elementy do MainActivity.kt . Ten blok warunkowy połączył Twój projekt Androida z 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)
}

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