Firebase Android Codelab - Erstellen Sie einen freundlichen Chat

Bildschirmfoto

Bild: Working Friendly Chat-App.

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

Was du lernst

  • So verwenden Sie Firebase Authentication, um Benutzern die Anmeldung zu ermöglichen.
  • So synchronisieren Sie Daten mit der Firebase Realtime Database.
  • So speichern Sie Binärdateien in Cloud Storage für Firebase.
  • So verwenden Sie die Firebase Local Emulator Suite zum Entwickeln einer Android-App mit Firebase.

Was du brauchen wirst

  • Android Studio Version 4.2 und höher.
  • Ein Android - Emulator mit Android 5.0 und höher.
  • Java 7 oder höher. So installieren Sie Java diese verwenden Anweisungen ; Ihre Version, laufen zu überprüfen java -version .
  • Vertrautheit mit der Programmiersprache Kotlin.

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

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

Sie sollen nun das build-android-start - Projekt geöffnet in Android Studio. Wenn Sie eine Warnung über eine siehe google-services.json Datei fehlt, keine Sorge. 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

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

Um das laufen Firebase Emulator Suite , müssen Sie die Installation und Verwendung Firebase CLI .

CLI . installieren

Option 1 - Installation mit npm

Wenn auf Ihrem Computer bereits Node.js und npm installiert sind, können Sie die CLI mit dem folgenden Befehl installieren:

npm install -g firebase-tools@latest

Option 2 – Standalone-Binärdatei installieren

Wenn Sie nicht Node.js / npm haben oder Sie neu in App - Entwicklung, können Sie die CLI als eigenständige binäre installieren nach den hier Anweisungen für Ihre Plattform .

Installation prüfen

Sobald Sie die Firebase CLI installiert haben, führen Sie den folgenden Befehl ein, um sicherzustellen , haben Sie die Version 9.11.0 oder höher:

firebase --version

Starten Sie die Emulatoren

In Ihrem Terminal, führen Sie den folgenden Befehl aus dem Stamm Ihrer lokalen codelab-friendlychat-android - Verzeichnis:

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

Sie sollten einige Protokolle wie diese sehen. Die Port - Werte wurden in der definierten firebase.json - Datei, die in dem klonierten 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 zu http: // localhost: 4000 in Ihrem Web - Browser die Firebase Emulator Suite UI anzuzeigen:

Emulator Suite-UI-Startseite

Lassen Sie die emulators:start läuft für den Rest des Codelab.

Verbinde deine App

In Android Studio, offener MainActivity.kt , dann fügen Sie den folgenden Code innerhalb der onCreate Methode:

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

google-services.json hinzufügen

Damit Ihre Android App Firebase zu verbinden, müssen Sie eine hinzufügen google-services.json Datei im app - Ordner Ihres Android - Projekt. Für dieses Codelab haben wir eine simulierte JSON-Datei bereitgestellt, mit der Sie eine Verbindung zur Firebase Emulator Suite herstellen können.

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

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 in Android Studio importiert und eine JSON-Konfigurationsdatei für Firebase hinzugefügt haben, können Sie die App zum ersten Mal ausführen.

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

Die App sollte auf Ihrem Android-Emulator starten. An dieser Stelle sollten Sie eine leere Nachrichtenliste sehen 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.

Diese App verwendet die Firebase Realtime Database, um alle Chatnachrichten 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 die 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.

Nach aktuellem Benutzer suchen

Zuerst fügen Sie die folgende Instanzvariable der MainActivity.kt Klasse:

MainActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

Lassen Sie sich nun ändern MainActivity die Benutzer auf den Anmeldebildschirm zu senden , wenn sie die App öffnen und nicht authentifizieren sind. Fügen Sie die folgende auf die onCreate() Verfahren nach der binding an die Ansicht angebracht ist:

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 wollen auch , wenn der Benutzer lesen während unterzeichnet 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
    }
}

Dann implementieren die getUserPhotoUrl() und getUserName() Methoden , um die entsprechenden Informationen über die aktuell authentifizierten Benutzer Firebase zurückkehren:

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
}

Dann implementieren die signOut() Methode , um die Zeichen aus Taste zu handhaben :

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 senden. 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 zu initiieren. 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 // Firebase instance variables Kommentar:

SignInActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

Dann bearbeiten die onCreate() Methode Firebase in der gleichen Art und Weise zu initialisieren Sie tat MainActivity :

SignInActivity.kt

// Initialize FirebaseAuth
auth = Firebase.auth

Fügen Sie ein ActivityResultLauncher Feld SignInActivity :

SignInActivity.kt

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

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

Als nächstes bearbeitet die onStart() Methode , um die FirebaseUI Zeichen in Fluss zum Auftakt:

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 die onSignInResult Methode , um die Zeichen in Folge zu behandeln. Wenn das Ergebnis der signin erfolgreich war, weiterhin 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)
        }
    }
}

Das ist es! Sie haben die Authentifizierung mit FirebaseUI in nur wenigen Methodenaufrufen implementiert und müssen keine serverseitige Konfiguration verwalten.

Teste deine Arbeit

Führen Sie die App auf Ihrem Android-Emulator aus. Sie sollten sofort zum Anmeldebildschirm weitergeleitet werden. Tippen Sie auf die Anmeldung mit E - Mail - Taste und dann ein Konto erstellen. Wenn alles richtig implementiert ist, sollten Sie zum Nachrichtenbildschirm weitergeleitet werden.

Nach der Anmeldung in, öffnen Sie die Firebase Emulator Suite UI in Ihrem Browser, dann auf die Registerkarte Authentifizierung klicken , um diesen ersten angemeldeten Nutzer - Account zu sehen.

In diesem Schritt werden wir Funktionen zum Lesen und Anzeigen von Nachrichten hinzufügen, die in der Echtzeitdatenbank gespeichert sind.

Beispielnachrichten importieren

  1. In der Firebase Emulator Suite UI, wählen Sie die Registerkarte Datenbank in Echtzeit.
  2. Ziehen Sie die initial_messages.json Datei von Ihrer lokalen Kopie des Codelab Repository in den Daten - Viewer.

Sie sollten jetzt ein paar Nachrichten unter dem haben messages - Knoten der Datenbank.

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 der Firebase Realtime Database und Hinzufügen eines Listeners, um Änderungen an den Daten zu verarbeiten.
  • Aktualisieren des RecyclerView Adapter so neue Nachrichten angezeigt werden.
  • Das Hinzufügen der Datenbankinstanzvariablen mit dem anderen Firebase Instanzvariablen in der MainActivity Klasse:

MainActivity.kt

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

Ändern Sie bitte Ihre MainActivity des onCreate() Methode unter dem Kommentar // Initialize Realtime Database and FirebaseRecyclerAdapter - // Initialize Realtime Database and FirebaseRecyclerAdapter mit dem Code unten definiert. Dieser Code fügt alle vorhandenen Nachrichten von Realtime - Datenbank und hört dann für neue Kind Einträge unter dem messages - Pfad 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 wird in der FriendlyMessageAdapter.kt Klasse implementieren die bind() Methode 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 auf dem Display - Meldungen , die Bilder sind, so auch die Umsetzung bind() Methode in 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)
        }
    }
}

Schließlich zurück in MainActivity , Start und Stopp für Updates von Firebase Realtime - Datenbank zu hören. Aktualisieren der onPause() und onResume() Verfahren in MainActivity wie unten dargestellt:

MainActivity.kt

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

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

Synchronisierung von Nachrichten testen

  1. Klicken Sie auf Ausführen (ausführen ).
  2. In der Emulator Suite UI, kehren Sie zur Registerkarte Datenbank in Echtzeit, dann eine neue Nachricht manuell hinzufügen. Bestätigen Sie, dass die Nachricht in Ihrer Android-App angezeigt wird:

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

Versenden von Textnachrichten implementieren

In diesem Abschnitt fügen Sie App-Benutzern die Möglichkeit hinzu, Textnachrichten zu senden. Der Code - Snippet unten Streams für Click - Ereignisse auf dem Senden - Button, erstellt ein neues FriendlyMessage Objekt mit dem Inhalt des Nachrichtenfeldes, und schiebt die Nachricht an die Datenbank. Die push() Methode fügt eine automatisch generierte ID auf dem Pfad des Objekts geschoben. Diese IDs sind sequentiell, wodurch sichergestellt wird, dass die neuen Nachrichten am Ende der Liste hinzugefügt werden.

Aktualisieren Sie den Klick - Listener der Sendetaste im onCreate() Methode in der MainActivity Klasse. Dieser Code befindet sich an der Unterseite des onCreate() Methode bereits. Aktualisieren Sie die onClick() Körper , den Code entsprechen unter:

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
  • Bildauswahl bearbeiten
  • Schreiben Sie eine temporäre Bildnachricht in die Echtzeitdatenbank
  • Beginnen Sie mit dem Hochladen des ausgewählten Bildes
  • Aktualisieren Sie die Bildnachrichten-URL auf die des hochgeladenen Bildes, sobald der Upload abgeschlossen ist

Bild auswählen

Um Bilder hinzuzufügen, verwendet dieses Codelab Cloud Storage for Firebase. Cloud Storage ist ein guter Ort, um die Binärdaten Ihrer App zu speichern.

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

Sobald der Benutzer ein Bild ausgewählt hat, die Bildauswahl Intent wird gestartet. Dies ist bereits in dem Code am Ende der implementierten onCreate() Methode. Wenn Sie fertig ruft er die MainActivity ‚s onImageSelected() Methode. Mit dem folgenden Code-Snippet 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 . Es wird in genannt onImageSelected() zu initiieren , das Hochladen des ausgewählten Bildes. 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
            )
        }
}

Senden von Nachrichten testen

  1. Klicken Sie in Android Studio auf dasausführen Run - Taste.
  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.

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 verwenden, um Firebase zu Ihrer eigenen Android-App hinzuzufügen! Weitere Informationen über Firebase, besuchen firebase.google.com .

Wenn Sie erfahren möchten , wie eine echte Firebase Projekt einzurichten und zu verwenden echte Firebase Ressourcen (anstelle eines Demo - Projekt und emuliert Ressourcen nur), weiter mit dem nächsten Schritt.

Hinweis: Auch wenn Sie ein echtes Projekt Firebase eingerichtet und vor allem , wenn Sie eine echte App Bau zu beginnen, empfehlen wir , die Firebase Local Emulator Suite für die Entwicklung und das Testen verwenden.

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. In Ihrem Browser finden Sie auf der Firebase Konsole .
  2. Wählen Sie Add - Projekt.
  3. Wählen Sie einen Projektnamen aus oder geben Sie ihn ein. Sie können einen beliebigen Namen verwenden.
  4. Sie benötigen Google Analytics für dieses Codelab nicht, sodass Sie die Aktivierung für Ihr Projekt überspringen können.
  5. Klicken Sie auf Projekt erstellen. Wenn Sie Ihr Projekt fertig ist, klicken Sie auf Weiter.

Firebase zu Ihrem Android-Projekt hinzufügen

Bevor Sie mit diesem Schritt beginnen, rufen Sie den SHA1-Hash Ihrer App ab. Führen Sie den folgenden Befehl von Ihrem lokalen build-android-start des SHA1 Ihrer Debug - Taste , um zu bestimmen:

./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 die obige sehen. Die wichtige Linie ist der SHA1 - Hash. Wenn Sie nicht in der Lage sind , Ihre SHA1 - Hash zu finden, finden Sie diese Seite für weitere Informationen.

Kehren Sie zur Firebase-Konsole zurück und führen Sie diese Schritte aus, 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. Auf dem nächsten Bildschirm, geben Sie com.google.firebase.codelab.friendlychat als Paketnamen für Ihre Anwendung.
  3. Klicken Sie auf Registrieren App, dann herunterladen Google-services.json klicken , um Ihre Firebase Konfigurationsdatei herunterladen.
  4. Kopieren Sie die google-services.json - Datei in das app - Verzeichnis Ihres Android - Projekt.
  5. Überspringen Sie die nächsten Schritte in der Konsole des Setup - Workflow gezeigt (sie haben bereits für Sie in der getan worden build-android-start - Projekt).
  6. Stellen Sie sicher, dass alle Abhängigkeiten für Ihre App verfügbar sind, indem Sie Ihr Projekt mit Gradle-Dateien synchronisieren. Von dem Android Studio Symbolleiste, wählen Sie Datei> Sync Projekt mit Gradle Dateien.

Firebase-Authentifizierung konfigurieren

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

  1. In der Firebase Konsole Wählen Authentifizierung von dem linksseitigen Navigationsbereich.
  2. Wählen Sie das Anmelde-Verfahren Registerkarte.
  3. Klicken Sie auf E - Mail / Passwort, dann den Schalter in aktiviert (blau).
  4. Klicken Sie auf Google, dann den Schalter in aktiviert (blau) und eine Projekt - Unterstützung E - Mail festgelegt.

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.

Echtzeit-Datenbank konfigurieren

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. In der Firebase - Konsole , wählen Sie Realtime - Datenbank von der linken Seite Navigationsleiste.
  2. Klicken Sie auf Datenbank Erstellen Sie eine neue Datenbank für Realtime - Instanz zu erstellen. Wählen Sie bei Aufforderung die us-central1 Region, klicken Sie auf Weiter.
  3. Wenn es um Sicherheitsregeln aufgefordert, gesperrten Modus wählt, dann auf Aktivieren.
  4. Sobald die Datenbankinstanz erstellt wurde, wählen Sie die Registerkarte Regeln, aktualisieren Sie die Konfiguration von Regeln mit dem folgenden:
     {
       "rules": {
         "messages": {
           ".read": "auth.uid != null",
           ".write": "auth.uid != null"
         }
       }
     }
    

Weitere Informationen darüber , wie Sicherheit Regeln Arbeit (einschließlich Dokumentation auf der „Auth“ Variable) finden Sie in der Echtzeit - Datenbank - Sicherheitsdokumentation .

Cloud Storage für Firebase konfigurieren

  1. In der Firebase - Konsole , wählen Sie Speicher aus der linken Navigationsleiste.
  2. Klicken Sie auf Erste Schritte Cloud Storage für Ihr Projekt zu ermöglichen.
  3. Befolgen Sie die Schritte im Dialogfeld, um Ihren Bucket mit den vorgeschlagenen Standardeinstellungen einzurichten.

Mit Firebase-Ressourcen verbinden

In einem frühen Schritt dieses Codelab, kann du die folgenden zu MainActivity.kt . 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 auf Ihr neues Echtfirebase - Projekt und seine echten Firebase Ressourcen zu verbinden, können Sie entweder diesen Block entfernen oder Ihre App im Release - Modus laufen , so dass BuildConfig.DEBUG ist false .