Laboratorium Firebase na Androida – twórz przyjazny czat

1. Przegląd

zrzut ekranu

Obraz: Działająca przyjazna aplikacja czatu.

Witamy w szkoleniu z 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 wersja wersji 4.2 lub nowszej.
  • Android Emulator z Androidem 5.0+.
  • Java 7 lub nowsza. Aby zainstalować Java użyć tych instrukcji ; Aby sprawdzić 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 polecenie Plik> Otwórz, a następnie wybierz build-android-start katalog ( android_studio_folder ) z katalogu, do którego pobrano przykładowy kod.

Powinieneś teraz mieć build-android-start projektu open Android Studio. Jeśli pojawi się ostrzeżenie o w google-services.json brakuje pliku, 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:4.1.2'

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

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:19.0.0'

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

3. Zainstaluj Firebase CLI

W celu uruchomienia Firebase Emulator Suite , trzeba zainstalować i używać Firebase CLI .

Zainstaluj CLI

Opcja 1 - Zainstaluj za pomocą npm

Jeśli masz już zainstalowane Node.js i npm na swoim komputerze, możesz zainstalować CLI za pomocą następującego polecenia:

npm install -g firebase-tools@latest

Opcja 2 - Zainstaluj samodzielny plik binarny

Jeśli nie masz node.js / NPM lub jesteś nowym do rozwoju aplikacji, można zainstalować CLI jako binarna autonomicznego w następstwie instrukcje dla swojej platformy tutaj .

Sprawdź instalację

Gdy masz zainstalowany Firebase CLI, uruchom następujące polecenie, aby upewnić się, że w wersji 9.11.0 lub wyższej:

firebase --version

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

Uruchom emulatory

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

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

Powinieneś zobaczyć takie logi. Wartości portowe zostały określone w firebase.json pliku, który został zawarty w sklonowanego przykładowy kod.

$ 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 swojej przeglądarce internetowej, aby zobaczyć Firebase Emulator Suite UI:

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

Pozostawić emulators:start biegu polecenia dla reszty codelab.

Połącz swoją aplikację

W Android Studio otwarte MainActivity.kt , a następnie dodaj następujący kod wewnątrz onCreate metody:

// 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 Android aplikacji do łączenia się Firebase, należy dodać google-services.json plik wewnątrz app folderze projektu Android. 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 mock-google-services.json plik do build-android-start/app folderze co 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 przycisk 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 dodać następującą zmienną instancji do MainActivity.kt klasy:

MainActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

Teraz zmieńmy MainActivity wysłać użytkownikowi na ekranie logowania, gdy tylko otworzy aplikację i są Nieuwierzytelniona. Dodanie następuje z onCreate() sposobu po binding jest przyłączone do widzenia:

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, aby sprawdzić, czy użytkownik jest zalogowany w trakcie 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 wdrożyć getUserPhotoUrl() i getUserName() metody, aby przywrócić odpowiednie informacje o aktualnie uwierzytelnionego Firebase użytkownika:

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 wdrożyć signOut() metody do obsługi przycisku na znak:

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 SignInActivity klasie pod // Firebase instance variables komentarz:

SignInActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

Następnie edytujemy onCreate() metoda, aby zainicjować Firebase w taki sam sposób, w jaki zrobił w MainActivity :

SignInActivity.kt

// Initialize FirebaseAuth
auth = Firebase.auth

Dodaj ActivityResultLauncher pole do SignInActivity :

SignInActivity.kt

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

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

Następnie Edycja onStart() metoda skopać znak FirebaseUI przepływu:

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 wdrożyć onSignInResult metody radzenia sobie znak w wyniku. Jeśli wynik signin było udane, nadal 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. Dotknij Zaloguj się za pomocą przycisku e-mail, a następnie utworzyć konto. Jeśli wszystko zostało poprawnie zaimplementowane, powinieneś przejść do ekranu wiadomości.

Po zalogowaniu się, otwórz Firebase Emulator Suite UI w przeglądarce, a następnie kliknij kartę Uwierzytelnianie, aby zobaczyć ten pierwszy zalogowanych konta 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 Firebase Emulator Suite UI, wybierz zakładkę Aktualizacje bazy danych.
  2. Przeciągnij i upuść initial_messages.json plik z lokalnej kopii repozytorium codelab do przeglądarki danych.

Powinieneś mieć teraz kilka wiadomości w ramach messages węzła 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.
  • Aktualizacja RecyclerView adapter więc nowe wiadomości będą wyświetlane.
  • Dodawanie zmiennych instancji bazy danych z innymi Firebase zmiennych instancji w MainActivity klasie:

MainActivity.kt

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

Modyfikować swoją główną działalność w onCreate() metodę pod komentarzem // Initialize Realtime Database and FirebaseRecyclerAdapter z kodem określonym poniżej. Ten kod dodaje wszystkie istniejące wiadomości z Realtime Database, a następnie nasłuchuje nowych wpisach dziecko w messages ścieżki w bazie danych Firebase Realtime. 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)
)

Dalej w FriendlyMessageAdapter.kt klasie realizacji bind() sposobu w wewnętrznej klasy 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ż do wyświetlania komunikatów, które są obrazy, dlatego też wdrożyć bind() metodę w wewnętrznym klasy 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 , start i przestać słuchać aktualizacje z Firebase Realtime Database. Aktualizuje onPause() i onResume() Methods in 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 przycisk Uruchom (wykonać ).
  2. W emulatorze Suite UI, powrócić do karty w czasie rzeczywistym danych, a następnie ręcznie dodać 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. Fragment kodu poniżej nasłuchuje zdarzeń kliknięcia przycisku nadawania, tworzy nowy FriendlyMessage obiekt z zawartością pola wiadomości i odkłada wiadomość do bazy danych. push() metoda dodaje automatycznie wygenerowany identyfikator ścieżce pchnął obiektu. Te identyfikatory są sekwencyjne, co zapewnia, że ​​nowe wiadomości zostaną dodane na końcu listy.

Zaktualizuj kliknięcia słuchacza przycisku nadawania w onCreate() metody w MainActivity klasie. Kod jest w dolnej części onCreate() sposobu już. Zaktualizuj onClick() ciało pasujące poniższy kod:

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ę za pomocą następujących kroków:

  • 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, wybór obrazu Intent jest uruchomiona. To jest już realizowany w kodzie na koniec onCreate() metody. Po zakończeniu wywołuje MainActivity „s onImageSelected() metody. 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() na MainActivity . Nazywa się onImageSelected() aby rozpocząć 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 kliknijwykonać 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, odwiedź firebase.google.com .

Jeśli chcesz dowiedzieć się, jak skonfigurować prawdziwy projekt Firebase i użyć prawdziwych zasobów Firebase (zamiast projektu demo i tylko emulowane zasobów), przejdź do następnego kroku.

Uwaga: Nawet po skonfigurowaniu prawdziwe Firebase projekt, a zwłaszcza kiedy zacząć budowanie prawdziwej aplikacji, zalecamy użycie Firebase lokalny Emulator Suite dla rozwoju 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 Utwórz projekt. Kiedy projekt jest gotowy, kliknij przycisk 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 build-android-start katalogu określić SHA1 swojego 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ą linia jest SHA1 hash. Jeśli nie jesteś w stanie znaleźć SHA1 hash, 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 kolejnym ekranie wprowadź com.google.firebase.codelab.friendlychat jak nazwa pakietu dla swojej aplikacji.
  3. Kliknij Rejestracja App, a następnie kliknij Pobierz Google-services.json pobieranie Firebase plik konfiguracyjny.
  4. Skopiuj google-services.json plik w app katalogu projektu Android.
  5. Przejdź kolejne etapy pokazane w konfiguracji workflow konsoli (już zostało zrobione dla ciebie w build-android-start projektu).
  6. Upewnij się, że wszystkie zależności są dostępne w Twojej aplikacji, synchronizując projekt z plikami Gradle. Z paska narzędzi Android Studio, wybierz Plik> Synchronizacja projektu z Gradle Files.

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 uwierzytelniania w panelu nawigacyjnym po lewej stronie.
  2. Wybierz logowania w zakładce metody.
  3. Kliknij E-mail / hasło, a następnie przełączyć przełącznik na Enabled (niebieski).
  4. Kliknij Google, a następnie przełączyć przełącznik do włączona (niebieski) i ustawić email 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 bazę danych w czasie rzeczywistym z poziomu panelu nawigacyjnym po lewej stronie.
  2. Kliknij przycisk Utwórz bazę danych, aby utworzyć nową instancję bazy danych w czasie rzeczywistym. Gdy pojawi się monit, wybierz us-central1 region, a następnie kliknij przycisk Dalej.
  3. Gdy pojawi się monit o zasadach bezpieczeństwa, wybierz tryb zablokowany, a następnie kliknij przycisk Włącz.
  4. Gdy instancja baza danych została utworzona, wybierz kartę Reguły, a następnie zaktualizować konfigurację zasad z następujących czynności:
     {
       "rules": {
         "messages": {
           ".read": "auth.uid != null",
           ".write": "auth.uid != null"
         }
       }
     }
    

Aby uzyskać więcej informacji na temat Zasady bezpieczeństwa pracy (w tym dokumentację o zmiennej „auth”), zobacz dokumentację bezpieczeństwa bazy danych w czasie rzeczywistym .

Skonfiguruj Cloud Storage dla Firebase

  1. W konsoli Firebase wybierz Storage z panelu nawigacyjnym po lewej stronie.
  2. Kliknij Rozpocznij, aby umożliwić 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 etapie tej codelab, dodano następujące czynności, aby 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ę do nowego rzeczywistym Firebase projektu i jego rzeczywistych zasobów Firebase, można usunąć ten blok lub uruchomić aplikację w trybie zwolnienia tak, że BuildConfig.DEBUG jest false .