Firebase Laboratorium kodowania na Androida — twórz przyjazny czat

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

1. Przegląd

zrzut ekranu

Obraz: Działająca przyjazna aplikacja czatu.

Witamy w laboratorium kodowania na Przyjaznym Czacie. Podczas tego ćwiczenia z programowania dowiesz się, jak używać platformy Firebase do tworzenia aplikacji czatu na Androida.

Czego się nauczysz

  • Jak korzystać z uwierzytelniania Firebase, aby umożliwić użytkownikom logowanie się.
  • Jak synchronizować dane przy użyciu 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ł

  • Android Studio w wersji 4.2 lub nowszej.
  • Emulator Androida z systemem Android 5.0+.
  • Node.js w wersji 10 lub nowszej (aby użyć 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

Importuj 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 pobrano 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ć Firebase SDK do swojej aplikacji:

build.gradle

buildscript {
    // ...

    dependencies {
        classpath 'com.android.tools.build:gradle:7.2.2'

        // The google-services plugin is required to parse the google-services.json file
        classpath 'com.google.gms:google-services:4.3.13'
    }
}

app/build.gradle

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.2.0'

    // Firebase SDK
    implementation platform('com.google.firebase:firebase-bom:30.3.2')
    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.1'
    implementation 'com.firebaseui:firebase-ui-database:8.0.1'
}

3. Zainstaluj Firebase CLI

W tym ćwiczeniu z programowania użyjesz Firebase Emulator Suite do lokalnej emulacji Firebase Auth, Bazy danych czasu rzeczywistego i Cloud Storage. Zapewnia to bezpieczne, szybkie i bezpłatne lokalne środowisko programistyczne do tworzenia aplikacji.

Zainstaluj Firebase CLI

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ć CLI z kontem Google. Spowoduje to otwarcie nowego okna przeglądarki, aby zakończyć proces 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 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ł dołączony do sklonowanego przykładowego kodu.

$ 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 pakietu emulatorów Firebase:

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

Pozostaw uruchomione polecenie emulators:start przez resztę ćwiczenia 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 google-services.json

Aby Twoja aplikacja na Androida mogła połączyć się z Firebase, musisz dodać plik google-services.json w folderze app projektu Androida. Na potrzeby tego ćwiczenia z programowania udostępniliśmy próbny plik JSON, który pozwoli Ci połączyć się 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 ćwiczenia z programowania dowiesz się, jak utworzyć prawdziwy projekt Firebase i aplikację Firebase na Androida, aby zastąpić ten próbny plik JSON własną konfiguracją.

Uruchom aplikację

Po zaimportowaniu projektu do Android Studio i dodaniu pliku JSON konfiguracji Firebase możesz przystąpić do pierwszego uruchomienia aplikacji.

  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 tego ćwiczenia z programowania będziesz uwierzytelniać 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 czatu. Zanim jednak dodamy dane, powinniśmy upewnić się, że aplikacja jest bezpieczna i tylko uwierzytelnieni użytkownicy mogą publikować wiadomości. W tym kroku włączymy uwierzytelnianie Firebase i skonfigurujemy reguły bezpieczeństwa bazy danych czasu rzeczywistego.

Dodaj podstawową funkcję logowania

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

Sprawdź obecnego 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 otwiera aplikację i jest nieuwierzytelniony. 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 signOut() do obsługi przycisku 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 . Tutaj prosty przycisk logowania 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 Firebase:

SignInActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

Następnie edytuj 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 logowanie się powiodło, 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! Zaimplementowano uwierzytelnianie za pomocą FirebaseUI w zaledwie kilku wywołaniach metod i bez konieczności zarządzania konfiguracją po stronie serwera.

Przetestuj swoją pracę

Uruchom aplikację na 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ś przejść do ekranu wiadomości.

Po zalogowaniu otwórz interfejs Firebase Emulator Suite w przeglądarce, a następnie kliknij kartę Uwierzytelnianie , aby wyświetlić to pierwsze zalogowane konto użytkownika.

7. Przeczytaj wiadomości

W tym kroku dodamy funkcjonalność odczytu i wyświetlania komunikatów przechowywanych w Bazie Danych Czasu Rzeczywistego.

Importuj przykładowe wiadomości

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

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

Przeczytaj dane

Synchronizuj wiadomości

W tej sekcji dodajemy kod, który synchronizuje nowo dodane wiadomości z interfejsem aplikacji poprzez:

  • Inicjowanie bazy danych czasu rzeczywistego Firebase i dodanie detektora do obsługi zmian wprowadzonych w danych.
  • Aktualizuję adapter RecyclerView , aby wyświetlane były nowe wiadomości.
  • Dodawanie zmiennych instancji bazy danych 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() 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 wewnętrznej klasie 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ć komunikaty, 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)
        }
    }
}

Na koniec wróć do MainActivity , rozpocznij i przestań nasłuchiwać aktualizacji z bazy danych czasu rzeczywistego Firebase. 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 pakietu emulatorów wróć do karty Baza danych czasu rzeczywistego , a następnie ręcznie dodaj nową wiadomość. Potwierdź, że komunikat pojawił się w Twojej aplikacji na Androida:

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

8. Wyślij 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 wypychanego obiektu. Te identyfikatory są sekwencyjne, co zapewnia, że ​​nowe wiadomości zostaną dodane na końcu listy.

Zaktualizuj detektor kliknięć przycisku wysyłania w onCreate() w klasie MainActivity . Ten kod znajduje się już na dole metody onCreate() . Zaktualizuj 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ługa wyboru obrazu
  • Zapisz tymczasową wiadomość z obrazem do Bazy danych czasu rzeczywistego
  • Rozpocznij przesyłanie wybranego obrazu
  • Zaktualizuj adres URL wiadomości o obrazie do adresu przesłanego obrazu po zakończeniu przesyłania

Wybierz obraz

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

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

Gdy użytkownik wybierze obraz, Intent jest cel wyboru obrazu. Jest to już zaimplementowane w kodzie na końcu metody onCreate() . Po zakończeniu wywołuje MainActivity onImageSelected() . Korzystając z poniższego fragmentu kodu, napiszesz wiadomość z tymczasowym adresem URL obrazu do bazy danych, 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 . Jest wywoływana w onImageSelected() , aby zainicjować przesyłanie 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
            )
        }
}

Przetestuj wysyłanie wiadomości

  1. W Android Studio kliknij wykonać Uruchom przycisk.
  2. W emulatorze Androida wpisz 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 dotknij obrazu „+”, aby wybrać obraz z urządzenia. Nowa wiadomość powinna być widoczna najpierw z obrazem zastępczym, a następnie z obrazem wybranym po zakończeniu przesyłania obrazu. Nowa wiadomość powinna być również widoczna w interfejsie użytkownika pakietu emulatorów, w szczególności jako obiekt na karcie Baza danych czasu rzeczywistego oraz jako obiekt BLOB na karcie Magazyn.

9. Gratulacje!

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

Czego się nauczyłeś

  • Uwierzytelnianie Firebase
  • Baza danych czasu rzeczywistego Firebase
  • Cloud Storage dla Firebase

Następnie spróbuj użyć tego, czego nauczyłeś się podczas tego ćwiczenia z programowania, aby dodać Firebase do swojej własnej aplikacji na Androida. Aby dowiedzieć się więcej o Firebase, wejdź na 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 na początku 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 wykorzystania w tym laboratorium. Dodasz też do swojej aplikacji konfigurację Firebase specyficzną dla aplikacji. Na koniec skonfigurujesz prawdziwe zasoby Firebase, których będziesz używać w swojej aplikacji.

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 ćwiczenia z programowania, 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 zaczniesz ten krok, pobierz 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ć wyjście takie jak powyżej. Ważną linią jest skrót SHA1 . Jeśli nie możesz znaleźć swojego 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ę Android, 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 Pobierz plik google-services.json, aby pobrać plik konfiguracyjny Firebase.
  4. Skopiuj plik google-services.json do katalogu app projektu 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 w Twojej aplikacji, synchronizując projekt z plikami Gradle. Na pasku 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 nastąpiły zmiany konfiguracji.

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 Uwierzytelnianie z panelu nawigacyjnego po lewej stronie.
  2. Wybierz kartę Metoda logowania .
  3. Kliknij E-mail/hasło , a następnie przełącz przełącznik na włączony (niebieski).
  4. Kliknij Google , a następnie przełącz przełącznik na włączony (niebieski) i ustaw adres e-mail wsparcia projektu.

Jeśli w dalszej części tego ćwiczenia 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 ćwiczeniu z kodowania 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 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ł w następujący sposób:
     {
   "rules": {
     "messages": {
       ".read": "auth.uid != null",
       ".write": "auth.uid != null"
     }
   }
 }

Aby uzyskać więcej informacji na temat działania reguł zabezpieczeń (w tym dokumentację dotyczącą zmiennej „auth”), zapoznaj się z dokumentacją dotyczącą zabezpieczeń bazy danych czasu rzeczywistego .

Skonfiguruj Cloud Storage dla Firebase

  1. W konsoli Firebase wybierz Pamięć z panelu nawigacyjnego 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 wartości 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 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, rzeczywistym projektem Firebase i jego rzeczywistymi zasobami Firebase, możesz usunąć ten blok lub uruchomić aplikację w trybie wydania, aby BuildConfig.DEBUG false .