Diese Seite wurde von der Cloud Translation API übersetzt.

Android-App mit Firebase und Jetpack Compose erstellen

1. Einführung

Zuletzt aktualisiert:16.11.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 Ebene dar, die in der Anwendung auf Daten zugreift. Die View 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 können einfacher ausgeführt werden.

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 "Aufgabe hinzufügen" Startbildschirm anpassen

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 Codes in der App zu überwachen
Mit Remote Config eine Funktions-Ein/Aus-Schaltfläche erstellen und den gestaffelten Roll-out starten

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

Als Erstes müssen Sie in der Firebase Console ein Firebase-Projekt erstellen. Klicken Sie dazu wie unten dargestellt auf die Schaltfläche „+ Projekt hinzufügen“:

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, wie hier gezeigt:

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 Anwendung Make it So ordnungsgemäß funktioniert, müssen Sie in der Console zwei Schritte ausführen, bevor Sie zum Code wechseln: Aktivieren Sie Authentifizierungsanbieter und erstellen Sie die Firestore-Datenbank.

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 aus und klicken Sie dann auf Jetzt starten.
Wählen Sie auf der Karte Anmeldemethode die Option E-Mail/Passwort aus und aktivieren Sie sie.
Klicken Sie dann auf Neuen Anbieter hinzufügen und aktivieren Sie Anonym.

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 sein 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.
Belassen Sie die Datenbank-ID bei (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 in einer beliebigen Sammlung ein Dokument für sich selbst 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. Öffne den Ordner make-it-so-android/start in Android Studio und führe die App aus. Dies ist mit einem Android-Emulator oder einem echten Android-Gerät möglich.

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. Dafür wird eine 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.

Jetzt Code erstellen

Sobald der Nutzer ein Konto erstellt, müssen Sie die Firebase Authentication API nach den Anmeldedaten für die E-Mail-Adresse fragen 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 Funktion linkAccount im launchCatching-Block der Funktion onSignUpClick auf:

screens/sign_up/SignUpViewModel.kt

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

Zuerst versucht er zu authentifizieren. Wenn der Aufruf erfolgreich ist, gelangt er zum nächsten Bildschirm (SettingsScreen). Wenn Sie diese Aufrufe innerhalb eines launchCatching-Blocks ausführen und in der ersten Zeile ein Fehler auftritt, wird die Ausnahme abgefangen und behandelt und die zweite Zeile wird überhaupt nicht erreicht.

Sobald SettingsScreen wieder geöffnet ist, müssen Sie darauf achten, dass die Optionen Anmelden und Konto erstellen nicht mehr verfügbar sind, 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 uiState in SettingsViewModel.kt so:

screens/settings/SettingsViewModel.kt

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

Als Letztes müssen Sie die uiState in SettingsScreen.kt aktualisieren, um die von SettingsViewModel ausgegebenen Status zu erfassen:

screens/settings/SettingsScreen.kt

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

Wenn sich der Nutzer nun ändert, wird SettingsScreen neu zusammengesetzt, um die Optionen entsprechend dem neuen Authentifizierungsstatus des Nutzers anzuzeigen.

Testen Sie es jetzt!

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

Bildschirm "Vorbereiten" (Einstellungen) Anmeldebildschirm von Make it So

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

4. Cloud Firestore

Welche Funktion möchten Sie hinzufügen?

Für Cloud Firestore fügen Sie der Firestore-Sammlung einen Listener hinzu, der die Dokumente speichert, die die in Bereitstellen angezeigten Aufgaben darstellen. Wenn Sie diesen Listener hinzufügen, erhalten Sie alle Updates, die an dieser Sammlung vorgenommen wurden.

Jetzt Code erstellen

Aktualisieren Sie die in StorageServiceImpl.kt verfügbaren 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()
      }

Dieser Code fügt der Aufgabensammlung einen Listener basierend auf dem user.id hinzu. Jede Aufgabe wird durch ein Dokument in einer Sammlung mit dem Namen tasks dargestellt. Jede Aufgabe hat ein Feld mit dem Namen 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 TasksScreen composable function Folgendes hinzu:

screens/tasks/TasksScreen.kt

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

Sobald die zusammensetzbare Funktion auf diese Status zugreifen kann, können Sie 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( [...] )
    }
}

Jetzt testen!

Um zu testen, ob es funktioniert hat, fügen Sie mit der 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 verfolgen.

5. Performance Monitoring

Welche Funktion möchten Sie hinzufügen?

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. Deshalb ist es manchmal nützlich, einige Messwerte zu einem bestimmten Nutzerpfad in Ihrer App zu erfassen. Um Ihnen dabei zu helfen, bietet Firebase Performance Monitoring benutzerdefinierte Traces an. Folgen Sie den nächsten Schritten, um benutzerdefinierte Traces hinzuzufügen und die Leistung in verschiedenen Codeabschnitten in Make it So zu messen.

Jetzt Code erstellen

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 für jedes Trace erfasste Standardmesswert gibt die Zeit an, 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 sie wie erwartet funktioniert hat.

Testen Sie es jetzt!

Nachdem Sie die benutzerdefinierten Traces hinzugefügt haben, führen Sie die App aus und verwenden Sie die zu messenden Funktionen 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.

Gehen Sie zum Tab Benutzerdefinierte Traces und prüfen Sie, ob die von Ihnen in der Codebasis hinzugefügten Traces dort angezeigt werden und wie lange die Ausführung dieser Codeabschnitte normalerweise dauert.

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 in der Abbildung unten dargestellt 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 Ihrer 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 stellen Sie am besten sicher, dass von Anfang an auf allen Bildschirmen die aktuellen 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 nun über die Liste der Optionen verfügen, müssen Sie sicherstellen, dass sie in der Benutzeroberfläche korrekt 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. Und jede Aufgabe hat ein Menü mit Optionen, die angezeigt werden, wenn Nutzende auf das Dreipunkt-Menü am Ende klicken.

Jetzt testen!

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 sich um false handelt, sollten Sie nur zwei Optionen sehen, wenn Sie auf das Dreipunkt-Menü klicken:
Wenn es sich um true handelt, 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 erfolgreich eine Android-App mit Firebase und Jetpack Compose erstellt.

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

Android-App mit Firebase und Jetpack Compose erstellen

1. Einführung