Firebase Android Codelab – Erstellen Sie einen freundlichen Chat

1. Übersicht

Bildschirmfoto

Bild: Working Friendly Chat-App.

Willkommen im Friendly Chat-Codelab. In diesem Codelab erfahren Sie, wie Sie mit der Firebase-Plattform eine Chat-App für Android erstellen.

Was Sie lernen werden

  • So verwenden Sie die Firebase-Authentifizierung, um Benutzern die Anmeldung zu ermöglichen.
  • So synchronisieren Sie Daten mithilfe der Firebase-Echtzeitdatenbank.
  • So speichern Sie Binärdateien in Cloud Storage für Firebase.
  • So verwenden Sie die Firebase Local Emulator Suite, um eine Android-App mit Firebase zu entwickeln.

Was du brauchen wirst

  • Neueste Android Studio- Version.
  • Ein Android-Emulator mit Android 5.0+.
  • Node.js Version 10 oder höher (zur Verwendung der Emulator Suite).
  • Java 8 oder höher. Um Java zu installieren, verwenden Sie diese Anweisungen . Um Ihre Version zu überprüfen, führen Sie java -version aus.
  • Vertrautheit mit der Programmiersprache Kotlin.

2. Holen Sie sich den Beispielcode

Klonen Sie das Repository

Klonen Sie das GitHub-Repository über die Befehlszeile:

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

In Android Studio importieren

Wählen Sie in Android Studio Datei > Öffnen und dann das Verzeichnis build-android-start ( android_studio_folder ) aus dem Verzeichnis, in das Sie den Beispielcode heruntergeladen haben.

Sie sollten jetzt das build-android-start Projekt in Android Studio geöffnet haben. Machen Sie sich keine Sorgen, wenn Sie eine Warnung bezüglich einer fehlenden Datei google-services.json sehen. Es wird in einem späteren Schritt hinzugefügt.

Abhängigkeiten prüfen

In diesem Codelab wurden alle benötigten Abhängigkeiten bereits für Sie hinzugefügt, aber es ist wichtig zu verstehen, wie Sie das Firebase SDK zu Ihrer App hinzufügen:

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. Installieren Sie die Firebase-CLI

In diesem Codelab verwenden Sie die Firebase Emulator Suite, um Firebase Auth, die Echtzeitdatenbank und den Cloud-Speicher lokal zu emulieren. Dies bietet eine sichere, schnelle und kostenlose lokale Entwicklungsumgebung zum Erstellen Ihrer App.

Installieren Sie die Firebase-CLI

Zuerst müssen Sie die Firebase-CLI installieren. Wenn Sie macOS oder Linux verwenden, können Sie den folgenden cURL-Befehl ausführen:

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

Wenn Sie Windows verwenden, lesen Sie die Installationsanweisungen , um eine eigenständige Binärdatei zu erhalten oder über npm zu installieren.

Sobald Sie die CLI installiert haben, sollte beim Ausführen von firebase --version eine Version von 9.0.0 oder höher gemeldet werden:

$ firebase --version
9.0.0

Anmeldung

Führen Sie firebase login aus, um die CLI mit Ihrem Google-Konto zu verbinden. Dadurch wird ein neues Browserfenster geöffnet, um den Anmeldevorgang abzuschließen. Stellen Sie sicher, dass Sie dasselbe Konto auswählen, das Sie zuvor beim Erstellen Ihres Firebase-Projekts verwendet haben.

4. Stellen Sie eine Verbindung zur Firebase Emulator Suite her

Starten Sie die Emulatoren

Führen Sie in Ihrem Terminal den folgenden Befehl aus dem Stammverzeichnis Ihres lokalen codelab-friendlychat-android Verzeichnisses aus:

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

Sie sollten einige Protokolle wie dieses sehen. Die Portwerte wurden in der Datei firebase.json definiert, die im geklonten Beispielcode enthalten war.

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

Navigieren Sie in Ihrem Webbrowser zu http://localhost:4000 , um die Benutzeroberfläche der Firebase Emulator Suite anzuzeigen:

Startseite der Emulator Suite-Benutzeroberfläche

Lassen Sie den emulators:start für den Rest des Codelabs ausgeführt.

Verbinden Sie Ihre App

Öffnen Sie in Android Studio MainActivity.kt und fügen Sie dann den folgenden Code in die onCreate Methode ein:

// 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. Führen Sie die Starter-App aus

Fügen Sie google-services.json hinzu

Damit Ihre Android-App eine Verbindung zu Firebase herstellen kann, müssen Sie eine google-services.json Datei im app Ordner Ihres Android-Projekts hinzufügen. Für die Zwecke dieses Codelabs haben wir eine simulierte JSON-Datei bereitgestellt, die Ihnen die Verbindung mit der Firebase Emulator Suite ermöglicht.

Kopieren Sie die Datei mock-google-services.json als google-services.json in den Ordner build-android-start/app :

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

Im letzten Schritt dieses Codelabs erfahren Sie, wie Sie ein echtes Firebase-Projekt und eine Firebase-Android-App erstellen, damit Sie diese simulierte JSON-Datei durch Ihre eigene Konfiguration ersetzen können.

Führen Sie die App aus

Nachdem Sie das Projekt nun in Android Studio importiert und eine Firebase-Konfigurations-JSON-Datei hinzugefügt haben, können Sie die App zum ersten Mal ausführen.

  1. Starten Sie Ihren Android-Emulator.
  2. Klicken Sie in Android Studio auf Ausführen ( ausführen ) in der Symbolleiste.

Die App sollte auf Ihrem Android-Emulator gestartet werden. Zu diesem Zeitpunkt sollte eine leere Nachrichtenliste angezeigt werden und das Senden und Empfangen von Nachrichten funktioniert nicht. Im nächsten Schritt dieses Codelabs authentifizieren Sie Benutzer, damit sie Friendly Chat verwenden können.

6. Aktivieren Sie die Authentifizierung

Diese App verwendet die Firebase-Echtzeitdatenbank, um alle Chat-Nachrichten zu speichern. Bevor wir jedoch Daten hinzufügen, sollten wir sicherstellen, dass die App sicher ist und nur authentifizierte Benutzer Nachrichten posten können. In diesem Schritt aktivieren wir die Firebase-Authentifizierung und konfigurieren Echtzeit-Datenbanksicherheitsregeln.

Fügen Sie grundlegende Anmeldefunktionen hinzu

Als Nächstes fügen wir der App einen grundlegenden Firebase-Authentifizierungscode hinzu, um Benutzer zu erkennen und einen Anmeldebildschirm zu implementieren.

Suchen Sie nach dem aktuellen Benutzer

Fügen Sie zunächst die folgende Instanzvariable zur Klasse MainActivity.kt hinzu:

MainActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

Jetzt ändern wir MainActivity so, dass der Benutzer immer dann zum Anmeldebildschirm weitergeleitet wird, wenn er die App öffnet und nicht authentifiziert ist. Fügen Sie der onCreate() Methode Folgendes hinzu , nachdem die binding an die Ansicht angehängt wurde:

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
}

Wir möchten auch überprüfen, ob der Benutzer während onStart() angemeldet ist:

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

Implementieren Sie dann die Methoden getUserPhotoUrl() und getUserName() , um die entsprechenden Informationen über den aktuell authentifizierten Firebase-Benutzer zurückzugeben:

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
}

Implementieren Sie dann die Methode signOut() , um die Abmeldeschaltfläche zu verarbeiten:

MainActivity.kt

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

Jetzt verfügen wir über die gesamte Logik, um den Benutzer bei Bedarf zum Anmeldebildschirm zu leiten. Als nächstes müssen wir den Anmeldebildschirm implementieren, um Benutzer ordnungsgemäß zu authentifizieren.

Implementieren Sie den Anmeldebildschirm

Öffnen Sie die Datei SignInActivity.kt . Hier wird eine einfache Anmeldeschaltfläche verwendet, um die Authentifizierung einzuleiten. In diesem Abschnitt verwenden Sie FirebaseUI, um die Logik für die Anmeldung zu implementieren.

Fügen Sie eine Auth-Instanzvariable in der SignInActivity Klasse unter dem Kommentar // Firebase instance variables hinzu:

SignInActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

Bearbeiten Sie dann die Methode onCreate() , um Firebase auf die gleiche Weise zu initialisieren, wie Sie es in MainActivity getan haben:

SignInActivity.kt

// Initialize FirebaseAuth
auth = Firebase.auth

Fügen Sie SignInActivity ein ActivityResultLauncher Feld hinzu:

SignInActivity.kt

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

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

Bearbeiten Sie als Nächstes die Methode onStart() , um den Anmeldevorgang bei FirebaseUI zu starten:

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

Als nächstes implementieren Sie die Methode onSignInResult , um das Anmeldeergebnis zu verarbeiten. Wenn das Ergebnis der Anmeldung erfolgreich war, fahren Sie mit MainActivity fort:

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

Das ist es! Sie haben die Authentifizierung mit FirebaseUI in nur wenigen Methodenaufrufen implementiert, ohne dass Sie eine serverseitige Konfiguration verwalten müssen.

Testen Sie Ihre Arbeit

Führen Sie die App auf Ihrem Android-Emulator aus. Sie sollten sofort zum Anmeldebildschirm weitergeleitet werden. Tippen Sie auf die Schaltfläche „Mit E-Mail anmelden“ und erstellen Sie dann ein Konto. Wenn alles korrekt implementiert ist, sollten Sie zum Nachrichtenbildschirm weitergeleitet werden.

Öffnen Sie nach der Anmeldung die Firebase Emulator Suite-Benutzeroberfläche in Ihrem Browser und klicken Sie dann auf die Registerkarte „Authentifizierung“ , um dieses zuerst angemeldete Benutzerkonto anzuzeigen.

7. Nachrichten lesen

In diesem Schritt fügen wir Funktionen zum Lesen und Anzeigen von in der Echtzeitdatenbank gespeicherten Nachrichten hinzu.

Beispielnachrichten importieren

  1. Wählen Sie in der Firebase Emulator Suite-Benutzeroberfläche die Registerkarte „Echtzeitdatenbank“ aus.
  2. Ziehen Sie die Datei initial_messages.json per Drag-and-Drop aus Ihrer lokalen Kopie des Codelab-Repositorys in den Daten-Viewer.

Sie sollten nun einige Nachrichten unter dem messages der Datenbank haben.

Daten lesen

Nachrichten synchronisieren

In diesem Abschnitt fügen wir Code hinzu, der neu hinzugefügte Nachrichten mit der App-Benutzeroberfläche synchronisiert, indem wir:

  • Initialisieren Sie die Firebase-Echtzeitdatenbank und fügen Sie einen Listener hinzu, um an den Daten vorgenommene Änderungen zu verarbeiten.
  • Der RecyclerView Adapter wird aktualisiert, sodass neue Meldungen angezeigt werden.
  • Hinzufügen der Datenbankinstanzvariablen mit Ihren anderen Firebase-Instanzvariablen in der MainActivity Klasse:

MainActivity.kt

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

Ändern Sie die onCreate() -Methode Ihrer MainActivity unter dem Kommentar // Initialize Realtime Database and FirebaseRecyclerAdapter mit dem unten definierten Code. Dieser Code fügt alle vorhandenen Nachrichten aus der Echtzeitdatenbank hinzu und wartet dann auf neue untergeordnete Einträge unter dem messages in Ihrer Firebase-Echtzeitdatenbank. Es fügt der Benutzeroberfläche für jede Nachricht ein neues Element hinzu:

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

Als nächstes implementieren Sie in der Klasse FriendlyMessageAdapter.kt die Methode bind() innerhalb der inneren Klasse 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)
        }
    }
    ...
}

Wir müssen auch Nachrichten anzeigen, die Bilder sind, also implementieren Sie auch die Methode bind() innerhalb der inneren Klasse 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)
        }
    }
}

Zurück in MainActivity starten und stoppen Sie schließlich die Überwachung auf Aktualisierungen von der Firebase Realtime Database. Aktualisieren Sie die Methoden onPause() und onResume() in MainActivity wie unten gezeigt:

MainActivity.kt

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

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

Testen Sie die Synchronisierung von Nachrichten

  1. Klicken Sie auf Ausführen ( ausführen ).
  2. Kehren Sie in der Emulator Suite-Benutzeroberfläche zur Registerkarte „Echtzeitdatenbank“ zurück und fügen Sie dann manuell eine neue Nachricht hinzu. Vergewissern Sie sich, dass die Meldung in Ihrer Android-App angezeigt wird:

Herzlichen Glückwunsch, Sie haben Ihrer App gerade eine Echtzeitdatenbank hinzugefügt!

8. Nachrichten senden

Implementieren Sie den Versand von Textnachrichten

In diesem Abschnitt fügen Sie App-Benutzern die Möglichkeit hinzu, Textnachrichten zu senden. Der folgende Codeausschnitt wartet auf Klickereignisse auf der Schaltfläche „Senden“, erstellt ein neues FriendlyMessage Objekt mit dem Inhalt des Nachrichtenfelds und sendet die Nachricht an die Datenbank. Die push() Methode fügt dem Pfad des gepushten Objekts eine automatisch generierte ID hinzu. Diese IDs sind sequentiell, wodurch sichergestellt wird, dass die neuen Nachrichten am Ende der Liste hinzugefügt werden.

Aktualisieren Sie den Klick-Listener der Sendeschaltfläche in der onCreate() -Methode in der MainActivity Klasse. Dieser Code befindet sich bereits am Ende der onCreate() Methode. Aktualisieren Sie den onClick() Körper so, dass er mit dem folgenden Code übereinstimmt:

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

Implementieren Sie das Senden von Bildnachrichten

In diesem Abschnitt fügen Sie App-Benutzern die Möglichkeit hinzu, Bildnachrichten zu senden. Das Erstellen einer Bildnachricht erfolgt mit diesen Schritten:

  • Bild auswählen
  • Behandeln Sie die Bildauswahl
  • Schreiben Sie eine temporäre Bildnachricht in die Echtzeitdatenbank
  • Beginnen Sie mit dem Hochladen des ausgewählten Bildes
  • Aktualisieren Sie die URL der Bildnachricht auf die des hochgeladenen Bildes, sobald der Upload abgeschlossen ist

Bild auswählen

Zum Hinzufügen von Bildern verwendet dieses Codelab Cloud Storage für Firebase. Cloud Storage ist ein guter Ort zum Speichern der Binärdaten Ihrer App.

Behandeln Sie die Bildauswahl und schreiben Sie eine temporäre Nachricht

Sobald der Benutzer ein Bild ausgewählt hat, wird der Bildauswahl- Intent gestartet. Dies ist bereits im Code am Ende der onCreate() -Methode implementiert. Wenn es fertig ist, ruft es die Methode onImageSelected() von MainActivity auf. Mithilfe des folgenden Codeausschnitts schreiben Sie eine Nachricht mit einer temporären Bild-URL an die Datenbank, die angibt, dass das Bild hochgeladen wird.

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

Bild hochladen und Nachricht aktualisieren

Fügen Sie die Methode putImageInStorage() zu MainActivity hinzu. Es wird in onImageSelected() aufgerufen, um den Upload des ausgewählten Bildes zu initiieren. Sobald der Upload abgeschlossen ist, aktualisieren Sie die Nachricht, um das entsprechende Bild zu verwenden.

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

Testen Sie das Versenden von Nachrichten

  1. Klicken Sie in Android Studio auf ausführen Schaltfläche „Ausführen“ .
  2. Geben Sie in Ihrem Android-Emulator eine Nachricht ein und tippen Sie dann auf die Schaltfläche „Senden“. Die neue Nachricht sollte in der App-Benutzeroberfläche und in der Firebase Emulator Suite-Benutzeroberfläche sichtbar sein.
  3. Tippen Sie im Android-Emulator auf das „+“-Bild, um ein Bild von Ihrem Gerät auszuwählen. Die neue Nachricht sollte zuerst mit einem Platzhalterbild und dann mit dem ausgewählten Bild sichtbar sein, sobald der Bild-Upload abgeschlossen ist. Die neue Nachricht sollte auch in der Emulator Suite-Benutzeroberfläche sichtbar sein, insbesondere als Objekt auf der Registerkarte „Echtzeitdatenbank“ und als Blob auf der Registerkarte „Speicher“.

9. Herzlichen Glückwunsch!

Sie haben gerade eine Echtzeit-Chat-Anwendung mit Firebase erstellt!

Was du gelernt hast

  • Firebase-Authentifizierung
  • Firebase-Echtzeitdatenbank
  • Cloud-Speicher für Firebase

Versuchen Sie als Nächstes, das, was Sie in diesem Codelab gelernt haben, zu nutzen, um Firebase zu Ihrer eigenen Android-App hinzuzufügen! Weitere Informationen zu Firebase finden Sie unter firebase.google.com .

Wenn Sie erfahren möchten, wie Sie ein echtes Firebase-Projekt einrichten und echte Firebase-Ressourcen verwenden (anstelle eines Demoprojekts und nur emulierter Ressourcen), fahren Sie mit dem nächsten Schritt fort.

Hinweis: Auch nachdem Sie ein echtes Firebase-Projekt eingerichtet haben und insbesondere wenn Sie mit der Erstellung einer echten App beginnen, empfehlen wir die Verwendung der Firebase Local Emulator Suite für Entwicklung und Tests.

10. Optional: Erstellen und richten Sie ein Firebase-Projekt ein

In diesem Schritt erstellen Sie ein echtes Firebase-Projekt und eine Firebase-Android-App zur Verwendung mit diesem Codelab. Außerdem fügen Sie Ihrer App Ihre app-spezifische Firebase-Konfiguration hinzu. Und schließlich richten Sie echte Firebase-Ressourcen ein, die Sie mit Ihrer App verwenden können.

Erstellen Sie ein Firebase-Projekt

  1. Gehen Sie in Ihrem Browser zur Firebase-Konsole .
  2. Wählen Sie Projekt hinzufügen .
  3. Wählen Sie einen Projektnamen aus oder geben Sie ihn ein. Sie können einen beliebigen Namen verwenden.
  4. Sie benötigen für dieses Codelab kein Google Analytics, daher können Sie die Aktivierung für Ihr Projekt überspringen.
  5. Klicken Sie auf Projekt erstellen . Wenn Ihr Projekt fertig ist, klicken Sie auf Weiter .

Fügen Sie Firebase zu Ihrem Android-Projekt hinzu

Bevor Sie mit diesem Schritt beginnen, besorgen Sie sich den SHA1-Hash Ihrer App. Führen Sie den folgenden Befehl in Ihrem lokalen build-android-start um den SHA1 Ihres Debug-Schlüssels zu ermitteln:

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

Sie sollten eine Ausgabe wie oben sehen. Die wichtige Zeile ist der SHA1 Hash. Wenn Sie Ihren SHA1-Hash nicht finden können, finden Sie auf dieser Seite weitere Informationen.

Gehen Sie zurück zur Firebase-Konsole und befolgen Sie diese Schritte, um Ihr Android-Projekt bei Ihrem Firebase-Projekt zu registrieren:

  1. Klicken Sie im Übersichtsbildschirm Ihres neuen Projekts auf das Android-Symbol, um den Einrichtungsworkflow zu starten: Android-App hinzufügen
  2. Geben Sie im nächsten Bildschirm com.google.firebase.codelab.friendlychat als Paketnamen für Ihre App ein.
  3. Klicken Sie auf App registrieren und dann auf google-services.json herunterladen , um Ihre Firebase-Konfigurationsdatei herunterzuladen.
  4. Kopieren Sie die Datei google-services.json in das app Verzeichnis Ihres Android-Projekts.
  5. Überspringen Sie die nächsten Schritte, die im Setup-Workflow der Konsole angezeigt werden (sie wurden bereits im Projekt build-android-start für Sie erledigt).
  6. Stellen Sie sicher, dass alle Abhängigkeiten für Ihre App verfügbar sind, indem Sie Ihr Projekt mit Gradle-Dateien synchronisieren. Wählen Sie in der Android Studio-Symbolleiste Datei > Projekt mit Gradle-Dateien synchronisieren aus. Möglicherweise müssen Sie auch „Build/Clean Project“ und „Build/Rebuild Project“ ausführen, damit die Konfigurationsänderungen wirksam werden.

Konfigurieren Sie die Firebase-Authentifizierung

Bevor Ihre App im Namen Ihrer Benutzer auf die Firebase-Authentifizierungs-APIs zugreifen kann, müssen Sie Firebase-Authentifizierung und die Anmeldeanbieter aktivieren, die Sie in Ihrer App verwenden möchten.

  1. Wählen Sie in der Firebase-Konsole im linken Navigationsbereich Authentifizierung aus.
  2. Wählen Sie die Registerkarte Anmeldemethode .
  3. Klicken Sie auf E-Mail/Passwort und stellen Sie den Schalter dann auf „Aktiviert“ (blau).
  4. Klicken Sie auf „Google“ , stellen Sie den Schalter auf „Aktiviert“ (blau) und legen Sie eine E-Mail-Adresse für den Projektsupport fest.

Wenn Sie später in diesem Codelab Fehler mit der Meldung „CONFIGURATION_NOT_FOUND“ erhalten, kehren Sie zu diesem Schritt zurück und überprüfen Sie Ihre Arbeit noch einmal.

Konfigurieren Sie die Echtzeitdatenbank

Die App in diesem Codelab speichert Chatnachrichten in der Firebase Realtime Database. In diesem Abschnitt erstellen wir eine Datenbank und konfigurieren ihre Sicherheit über eine JSON-Konfigurationssprache namens Firebase Security Rules.

  1. Wählen Sie in der Firebase-Konsole im linken Navigationsbereich Echtzeitdatenbank aus.
  2. Klicken Sie auf Datenbank erstellen , um eine neue Echtzeitdatenbankinstanz zu erstellen. Wenn Sie dazu aufgefordert werden, wählen Sie die Region us-central1 aus und klicken Sie dann auf Weiter .
  3. Wenn Sie nach Sicherheitsregeln gefragt werden, wählen Sie den Sperrmodus und klicken Sie dann auf Aktivieren .
  4. Sobald die Datenbankinstanz erstellt wurde, wählen Sie die Registerkarte „Regeln“ und aktualisieren Sie dann die Regelkonfiguration mit Folgendem:
     {
   "rules": {
     "messages": {
       ".read": "auth.uid != null",
       ".write": "auth.uid != null"
     }
   }
 }

Weitere Informationen zur Funktionsweise von Sicherheitsregeln (einschließlich Dokumentation zur Variable „auth“) finden Sie in der Dokumentation zur Echtzeitdatenbanksicherheit .

Konfigurieren Sie Cloud Storage für Firebase

  1. Wählen Sie in der Firebase-Konsole im linken Navigationsbereich „Speicher“ aus.
  2. Klicken Sie auf „Erste Schritte“ , um Cloud Storage für Ihr Projekt zu aktivieren.
  3. Befolgen Sie die Schritte im Dialogfeld, um Ihren Bucket unter Verwendung der vorgeschlagenen Standardeinstellungen einzurichten.

Stellen Sie eine Verbindung zu Firebase-Ressourcen her

In einem früheren Schritt dieses Codelabs haben Sie Folgendes zu MainActivity.kt hinzugefügt. Dieser bedingte Block hat Ihr Android-Projekt mit der Firebase Emulator Suite verbunden.

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

Wenn Sie Ihre App mit Ihrem neuen echten Firebase-Projekt und seinen echten Firebase-Ressourcen verbinden möchten, können Sie entweder diesen Block entfernen oder Ihre App im Release-Modus ausführen, sodass BuildConfig.DEBUG den false hat.