Diese Seite wurde von der Cloud Translation API übersetzt.

Android-App mit Firebase und Jetpack Compose erstellen

1. Einführung

Zuletzt aktualisiert: 16. November 2022

Android-App mit Firebase und Jetpack Compose erstellen

In diesem Codelab erstellen Sie eine Android-App namens Make It So. Die Benutzeroberfläche dieser App wird vollständig mit Jetpack Compose erstellt, dem modernen Toolkit von Android zum Erstellen nativer Benutzeroberflächen .Es ist intuitiv und erfordert weniger Code als das Schreiben von XML-Dateien und das Binden an Aktivitäten, Fragmente oder Ansichten.

Um zu verstehen, wie gut Firebase und Jetpack Compose zusammenarbeiten, müssen Sie zuerst die moderne Android-Architektur kennen. Eine gute Architektur macht das System leicht verständlich, einfach zu entwickeln und zu pflegen, da sie sehr klar zeigt, wie die Komponenten organisiert sind und miteinander kommunizieren. In der Android-Welt wird die empfohlene Architektur als Modell – Ansicht – ViewModel bezeichnet. Das Modell stellt die Schicht dar, die auf Daten in der Anwendung zugreift. Die Darstellung ist die UI-Ebene und sollte nichts über die Geschäftslogik wissen. Im ViewModel wird die Geschäftslogik angewendet. Manchmal muss das ViewModel dazu die Model-Ebene aufrufen.

Wir empfehlen Ihnen dringend, diesen Artikel zu lesen, um zu verstehen, wie Modell – Ansicht – ViewModel auf eine mit Jetpack Compose erstellte Android-App angewendet wird. Dadurch wird die Codebasis leichter verständlich und die nächsten Schritte lassen sich einfacher ausführen.

Umfang

Make It So ist eine einfache To-do-Listen-Anwendung, mit der Nutzer Aufgaben hinzufügen und bearbeiten, Markierungen, Prioritäten und Abgabetermine hinzufügen und die Aufgaben als erledigt markieren können. Die folgenden Bilder zeigen die beiden Hauptseiten dieser Anwendung: die Seite zum Erstellen von Aufgaben und die Hauptseite mit der Liste der erstellten Aufgaben.

Bildschirm „Mach es so“ – Aufgabe hinzufügen Startbildschirm von „Mach es so“

Sie fügen einige Funktionen hinzu, die in dieser App fehlen:

Nutzer mit E-Mail-Adresse und Passwort authentifizieren
Einer Firestore-Sammlung einen Listener hinzufügen und die Benutzeroberfläche auf Änderungen reagieren lassen
Benutzerdefinierte Traces hinzufügen, um die Leistung bestimmter Codeabschnitte in der App zu überwachen
Mit Remote Config eine Funktion erstellen und mit einem gestaffelten Roll-out einführen

Aufgaben in diesem Lab

Firebase Authentication, Performance Monitoring, Remote Config und Cloud Firestore in einer modernen Android-Anwendung verwenden
Firebase APIs in eine MVVM-Architektur einbinden
Mit Firebase APIs vorgenommene Änderungen in der Compose-Benutzeroberfläche widerspiegeln

Voraussetzungen

Android Studio Flamingo+
Android-Emulator mit API 21 oder höher
Vorkenntnisse in der Programmiersprache Kotlin

2. Beispielanwendung herunterladen und Firebase einrichten

Code der Beispiel-App abrufen

Klonen Sie das GitHub-Repository über die Befehlszeile:

git clone https://github.com/FirebaseExtended/make-it-so-android.git

Firebase-Projekt erstellen

Rufen Sie zuerst die Firebase Console auf und erstellen Sie ein Firebase-Projekt, indem Sie auf die Schaltfläche „+ Projekt hinzufügen“ klicken (siehe Abbildung unten).

Firebase Console

Folgen Sie der Anleitung auf dem Bildschirm, um die Projekterstellung abzuschließen.

Ihrem Firebase-Projekt eine Android-App hinzufügen

In Ihrem Firebase-Projekt können Sie verschiedene Apps registrieren: für Android, iOS, Web, Flutter und Unity.

Wählen Sie die Android-Option aus, wie hier zu sehen:

Firebase-Projekt – Übersicht

Führen Sie dann folgende Schritte aus:

Geben Sie com.example.makeitso als Paketnamen und optional einen Alias ein. Für dieses Codelab müssen Sie das Zertifikat für die Debug-Signatur nicht hinzufügen.
Klicken Sie auf Weiter, um Ihre App zu registrieren und auf die Firebase-Konfigurationsdatei zuzugreifen.
Klicken Sie auf google-services.json herunterladen, um die Konfigurationsdatei herunterzuladen und im Verzeichnis make-it-so-android/app zu speichern.
Klicken Sie auf Weiter. Da die Firebase SDKs bereits in der build.gradle-Datei im Beispielprojekt enthalten sind, klicken Sie auf Weiter, um mit Nächste Schritte fortzufahren.
Klicken Sie auf Weiter zur Konsole, um den Vorgang abzuschließen.

Damit die App Make it So ordnungsgemäß funktioniert, müssen Sie in der Console zwei Dinge tun, bevor Sie mit dem Code beginnen: Authentifizierungsanbieter aktivieren und die Firestore-Datenbank erstellen.

Authentifizierung einrichten

Aktivieren Sie zuerst die Authentifizierung, damit sich Nutzer in der App anmelden können:

Wählen Sie im Menü Build die Option Authentifizierung und dann Jetzt starten aus.
Wählen Sie auf der Karte Anmeldemethode die Option E-Mail/Passwort aus und aktivieren Sie sie.
Klicken Sie als Nächstes auf Neuen Anbieter hinzufügen und wählen Sie Anonym aus.

Cloud Firestore einrichten

Richten Sie als Nächstes Firestore ein. Sie verwenden Firestore, um die Aufgaben eines angemeldeten Nutzers zu speichern. Jeder Nutzer erhält ein eigenes Dokument in einer Sammlung der Datenbank.

Maximieren Sie im linken Bereich der Firebase Console Build und wählen Sie dann Firestore-Datenbank aus.
Klicken Sie auf Datenbank erstellen.
Lassen Sie die Datenbank-ID auf (default).
Wählen Sie einen Speicherort für die Datenbank aus und klicken Sie auf Weiter.
Für eine echte App sollten Sie einen Speicherort in der Nähe Ihrer Nutzer auswählen.
Klicken Sie auf Im Testmodus starten. Lesen Sie den Haftungsausschluss zu den Sicherheitsregeln.
In den nächsten Schritten dieses Abschnitts fügen Sie Sicherheitsregeln hinzu, um Ihre Daten zu schützen. Veröffentlichen oder verteilen Sie keine App, ohne Sicherheitsregeln für Ihre Datenbank hinzuzufügen.
Klicken Sie auf Erstellen.

Nehmen Sie sich einen Moment Zeit, um robuste Sicherheitsregeln für die Firestore-Datenbank zu erstellen.

Öffnen Sie das Firestore-Dashboard und rufen Sie den Tab Regeln auf.
Aktualisieren Sie die Sicherheitsregeln so:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow create: if request.auth != null;
      allow read, update, delete: if request.auth != null && resource.data.userId == request.auth.uid;
    }
  }
}

Diese Regeln besagen im Grunde, dass jeder angemeldete Nutzer der App ein Dokument für sich selbst in einer beliebigen Sammlung erstellen kann. Anschließend kann nur der Nutzer, der das Dokument erstellt hat, es aufrufen, aktualisieren oder löschen.

Anwendung ausführen

Jetzt können Sie die Anwendung ausführen. Öffnen Sie den Ordner make-it-so-android/start in Android Studio und führen Sie die App aus. Sie können dazu einen Android-Emulator oder ein echtes Android-Gerät verwenden.

3. Firebase Authentication

Welche Funktion fügen Sie hinzu?

Im aktuellen Zustand der Beispiel-App Make It So können Nutzer die App verwenden, ohne sich zuerst anmelden zu müssen. Dazu wird die anonyme Authentifizierung verwendet. Mit anonymen Konten können Nutzer jedoch nicht auf ihre Daten auf anderen Geräten oder in zukünftigen Sitzungen zugreifen. Die anonyme Authentifizierung ist zwar für ein Warm-Onboarding nützlich, Sie sollten Nutzern aber immer die Möglichkeit geben, zu einer anderen Anmeldeform zu wechseln. In diesem Codelab fügen Sie der Make It So-App eine E-Mail- und Passwort-Authentifizierung hinzu.

Zeit zum Programmieren!

Sobald der Nutzer ein Konto erstellt, indem er eine E-Mail-Adresse und ein Passwort eingibt, müssen Sie die Firebase Authentication API um Anmeldedaten für E-Mail-Adressen bitten und die neuen Anmeldedaten mit dem anonymen Konto verknüpfen. Öffnen Sie die Datei AccountServiceImpl.kt in Android Studio und aktualisieren Sie die Funktion linkAccount so, dass sie so aussieht:

model/service/impl/AccountServiceImpl.kt

override suspend fun linkAccount(email: String, password: String) {
    val credential = EmailAuthProvider.getCredential(email, password)
    auth.currentUser!!.linkWithCredential(credential).await()
}

Öffnen Sie nun SignUpViewModel.kt und rufen Sie die Dienstfunktion linkAccount innerhalb des launchCatching-Blocks der onSignUpClick-Funktion auf:

screens/sign_up/SignUpViewModel.kt

launchCatching {
    accountService.linkAccount(email, password)
    openAndPopUp(SETTINGS_SCREEN, SIGN_UP_SCREEN)
}

Zuerst wird versucht, sich zu authentifizieren. Wenn der Aufruf erfolgreich ist, wird mit dem nächsten Bildschirm (SettingsScreen) fortgefahren. Da Sie diese Aufrufe in einem launchCatching-Block ausführen, wird die Ausnahme in der ersten Zeile abgefangen und behandelt. Die zweite Zeile wird gar nicht erreicht.

Sobald die SettingsScreen wieder geöffnet wird, müssen die Optionen Anmelden und Konto erstellen nicht mehr angezeigt werden, da der Nutzer jetzt bereits authentifiziert ist. Dazu lassen wir die SettingsViewModel den Status des aktuellen Nutzers (verfügbar in AccountService.kt) abhören, um zu prüfen, ob das Konto anonym ist oder nicht. Aktualisieren Sie dazu die uiState in SettingsViewModel.kt so:

screens/settings/SettingsViewModel.kt

val uiState = accountService.currentUser.map {
    SettingsUiState(it.isAnonymous)
}

Aktualisieren Sie abschließend die uiState in SettingsScreen.kt, um die vom SettingsViewModel gesendeten Status zu erfassen:

screens/settings/SettingsScreen.kt

val uiState by viewModel.uiState.collectAsState(
    initial = SettingsUiState(false)
)

Jetzt wird das SettingsScreen jedes Mal neu zusammengesetzt, wenn sich der Nutzer ändert, um die Optionen entsprechend dem neuen Authentifizierungsstatus des Nutzers anzuzeigen.

Testen Sie es!

Starte Make it So und rufe die Einstellungen auf, indem du oben rechts auf das Zahnradsymbol klickst. Klicken Sie dort auf die Option „Konto erstellen“:

Bildschirm „Mach es so“ Anmeldebildschirm von Make it So

Geben Sie eine gültige E-Mail-Adresse und ein starkes Passwort ein, um ein Konto zu erstellen. Das sollte funktionieren und Sie werden zur Seite „Einstellungen“ weitergeleitet. Dort sehen Sie zwei neue Optionen: „Abmelden“ und „Konto löschen“. Sie können das neue Konto, das im Authentifizierungs-Dashboard der Firebase Console erstellt wurde, auf dem Tab „Nutzer“ prüfen.

4. Cloud Firestore

Welche Funktion fügen Sie hinzu?

Bei Cloud Firestore fügen Sie der Firestore-Sammlung, in der die Dokumente gespeichert sind, die die in Make it So angezeigten Aufgaben darstellen, einen Listener hinzu. Sobald Sie diesen Listener hinzugefügt haben, erhalten Sie alle Updates, die an dieser Sammlung vorgenommen werden.

Zeit zum Programmieren!

Aktualisieren Sie die in StorageServiceImpl.kt verfügbare Flow so:

model/service/impl/StorageServiceImpl.kt

override val tasks: Flow<List<Task>>
    get() =
      auth.currentUser.flatMapLatest { user ->
        firestore.collection(TASK_COLLECTION).whereEqualTo(USER_ID_FIELD, user.id).dataObjects()
      }

Mit diesem Code wird der Aufgabensammlung ein Listener basierend auf user.id hinzugefügt. Jede Aufgabe wird durch ein Dokument in einer Sammlung namens tasks dargestellt. Jedes Dokument hat ein Feld namens userId. Hinweis: Wenn sich der Status der currentUser ändert (z. B. durch Abmelden), wird eine neue Flow gesendet.

Jetzt müssen Sie die Flow in TasksViewModel.kt so festlegen, dass sie mit der im Dienst übereinstimmt:

screens/tasks/TasksViewModel.kt

val tasks = storageService.tasks

Als Letztes müssen Sie dafür sorgen, dass composable function in TasksScreens.kt, das die Benutzeroberfläche darstellt, diesen Ablauf erkennt und als Status erfasst. Jedes Mal, wenn sich der Status ändert, wird die zusammensetzbare Funktion automatisch neu zusammengesetzt und der Nutzer sieht den aktuellen Status. Fügen Sie Folgendes zu TasksScreen composable function hinzu:

screens/tasks/TasksScreen.kt

val tasks = viewModel
    .tasks
    .collectAsStateWithLifecycle(emptyList())

Sobald die zusammensetzbare Funktion Zugriff auf diese Status hat, können Sie die LazyColumn (die Struktur, mit der eine Liste auf dem Bildschirm angezeigt wird) so aktualisieren:

screens/tasks/TasksScreen.kt

LazyColumn {
    items(tasks.value, key = { it.id }) { taskItem ->
        TaskItem( [...] )
    }
}

Testen Sie es jetzt!

Um zu testen, ob alles funktioniert, fügen Sie über die App eine neue Aufgabe hinzu. Klicken Sie dazu rechts unten auf dem Bildschirm auf die Schaltfläche „Hinzufügen“. Nachdem Sie die Aufgabe erstellt haben, sollte sie in der Firestore-Sammlung in der Firestore Console angezeigt werden. Wenn Sie sich auf anderen Geräten mit demselben Konto in Make it So anmelden, können Sie Ihre To-do-Listen bearbeiten und in Echtzeit auf allen Geräten aktualisieren.

5. Performance Monitoring

Welche Funktion fügen Sie hinzu?

Die Leistung ist ein sehr wichtiger Faktor, auf den Sie achten sollten. Denn Nutzer geben die Nutzung Ihrer App sehr wahrscheinlich auf, wenn die Leistung nicht gut ist und sie zu viel Zeit für eine einfache Aufgabe benötigen. Daher ist es manchmal nützlich, einige Messwerte zu einem bestimmten Nutzerpfad in Ihrer App zu erheben. Firebase-Leistungsüberwachung bietet benutzerdefinierte Traces, die Ihnen dabei helfen können. Folgen Sie den nächsten Schritten, um benutzerdefinierte Traces hinzuzufügen und die Leistung in verschiedenen Codeabschnitten in Make it So zu messen.

Zeit zum Programmieren!

Wenn Sie die Datei Performance.kt öffnen, sehen Sie eine Inline-Funktion namens „trace“. Diese Funktion ruft die Performance Monitoring API auf, um einen benutzerdefinierten Trace zu erstellen, und gibt den Namen des Traces als Parameter weiter. Der andere Parameter ist der Codeblock, den Sie überwachen möchten. Der standardmäßige Messwert, der für jeden Trace erfasst wird, ist die Zeit, die für die vollständige Ausführung benötigt wird:

model/service/Performance.kt

inline fun <T> trace(name: String, block: Trace.() -> T): T = Trace.create(name).trace(block)

Sie können auswählen, welche Teile der Codebasis Ihrer Meinung nach wichtig sind, um sie zu messen, und benutzerdefinierte Traces hinzufügen. Hier ist ein Beispiel dafür, wie Sie der linkAccount-Funktion, die Sie bereits in diesem Codelab in AccountServiceImpl.kt gesehen haben, einen benutzerdefinierten Trace hinzufügen:

model/service/impl/AccountServiceImpl.kt

override suspend fun linkAccount(email: String, password: String): Unit =
  trace(LINK_ACCOUNT_TRACE) {
      val credential = EmailAuthProvider.getCredential(email, password)
      auth.currentUser!!.linkWithCredential(credential).await()
  }

Jetzt sind Sie an der Reihe. Fügen Sie der App Make it So einige benutzerdefinierte Traces hinzu und fahren Sie mit dem nächsten Abschnitt fort, um zu testen, ob alles wie erwartet funktioniert.

Testen Sie es jetzt!

Nachdem Sie die benutzerdefinierten Traces hinzugefügt haben, starten Sie die App und verwenden Sie die Funktionen, die Sie messen möchten, mehrmals. Rufen Sie dann die Firebase Console und das Dashboard zur Leistungsüberwachung auf. Unten auf dem Bildschirm finden Sie drei Tabs: Netzwerkanfragen, Benutzerdefinierte Traces und Bildschirmrendering.

Rufen Sie den Tab Benutzerdefinierte Traces auf und prüfen Sie, ob die in der Codebasis hinzugefügten Traces dort angezeigt werden und ob Sie sehen können, wie viel Zeit die Ausführung dieser Codeabschnitte normalerweise in Anspruch nimmt.

6. Remote Config

Welche Funktion fügen Sie hinzu?

Remote Config bietet eine Vielzahl von Anwendungsfällen, z. B. das Ändern des Erscheinungsbildes Ihrer App aus der Ferne oder das Konfigurieren verschiedener Verhaltensweisen für verschiedene Nutzersegmente. In diesem Codelab erstellen Sie mit Remote Config eine Ein-/Aus-Schaltfläche, mit der die neue Funktion Aufgabe bearbeiten in der App Make it So angezeigt oder ausgeblendet wird.

Zeit zum Programmieren!

Erstellen Sie zuerst die Konfiguration in der Firebase Console. Rufen Sie dazu das Remote Config-Dashboard auf und klicken Sie auf die Schaltfläche Parameter hinzufügen. Füllen Sie die Felder wie im Bild unten aus:

Dialogfeld „Remote Config-Parameter erstellen“

Wenn alle Felder ausgefüllt sind, können Sie auf die Schaltfläche Speichern und dann auf Veröffentlichen klicken. Nachdem der Parameter erstellt und für Ihre Codebasis verfügbar ist, müssen Sie den Code hinzufügen, mit dem die neuen Werte in Ihre App abgerufen werden. Öffnen Sie die Datei ConfigurationServiceImpl.kt und aktualisieren Sie die Implementierung dieser beiden Funktionen:

model/service/impl/ConfigurationServiceImpl.kt

override suspend fun fetchConfiguration(): Boolean {
  return remoteConfig.fetchAndActivate().await()
}

override val isShowTaskEditButtonConfig: Boolean
  get() = remoteConfig[SHOW_TASK_EDIT_BUTTON_KEY].asBoolean()

Die erste Funktion ruft die Werte vom Server ab und wird beim Starten der App in SplashViewModel.kt aufgerufen. So können Sie dafür sorgen, dass auf allen Bildschirmen von Anfang an die aktuellsten Werte verfügbar sind. Es ist nicht nutzerfreundlich, wenn Sie die Benutzeroberfläche oder das Verhalten der App später ändern, wenn der Nutzer gerade etwas tut.

Die zweite Funktion gibt den booleschen Wert zurück, der für den Parameter veröffentlicht wurde, den Sie gerade in der Console erstellt haben. Diese Informationen müssen Sie in TasksViewModel.kt abrufen. Fügen Sie dazu der loadTaskOptions-Funktion Folgendes hinzu:

screens/tasks/TasksViewModel.kt

fun loadTaskOptions() {
  val hasEditOption = configurationService.isShowTaskEditButtonConfig
  options.value = TaskActionOption.getOptions(hasEditOption)
}

Sie rufen den Wert in der ersten Zeile ab und verwenden ihn, um die Menüoptionen für die Aufgabenelemente in der zweiten Zeile zu laden. Wenn der Wert false ist, enthält das Menü die Option „Bearbeiten“ nicht. Nachdem Sie die Liste der Optionen erstellt haben, müssen Sie dafür sorgen, dass sie in der Benutzeroberfläche richtig angezeigt wird. Wenn Sie eine App mit Jetpack Compose entwickeln, müssen Sie nach der composable function suchen, in der festgelegt ist, wie die Benutzeroberfläche der TasksScreen aussehen soll. Öffnen Sie dazu die Datei TasksScreen.kt und aktualisieren Sie LazyColum so, dass sie auf die Optionen in TasksViewModel.kt verweist:

screens/tasks/TasksScreen.kt

val options by viewModel.options

LazyColumn {
  items(tasks.value, key = { it.id }) { taskItem ->
    TaskItem(
      options = options,
      [...]
    )
  }
}

Die TaskItem ist eine weitere composable function, die angibt, wie die Benutzeroberfläche einer einzelnen Aufgabe aussehen soll. Jede Aufgabe hat ein Menü mit Optionen, das angezeigt wird, wenn der Nutzer am Ende auf das Dreipunkt-Menü klickt.

Testen Sie es jetzt!

Jetzt können Sie die App ausführen. Prüfen Sie, ob der Wert, den Sie über die Firebase Console veröffentlicht haben, mit dem Verhalten der App übereinstimmt:

Wenn es false ist, sollten Sie beim Klicken auf das Dreipunkt-Menü nur zwei Optionen sehen:
Wenn es true ist, sollten Sie drei Optionen sehen, wenn Sie auf das Dreipunkt-Menü klicken:

Ändern Sie den Wert in der Console ein paar Mal und starten Sie die App neu. So einfach ist es, mit Remote Config neue Funktionen in Ihrer App einzuführen.

7. Glückwunsch

Herzlichen Glückwunsch! Sie haben eine Android-App mit Firebase und Jetpack Compose erstellt.

Sie haben einer Android-App, die vollständig mit Jetpack Compose für die Benutzeroberfläche erstellt wurde, Firebase Authentication, Performance Monitoring, Remote Config und Cloud Firestore hinzugefügt und sie in die empfohlene MVVM-Architektur eingebunden.

Android-App mit Firebase und Jetpack Compose erstellen

1. Einführung