Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK

Erstellen Sie eine Gewichts-Tracker-App mit Cloud Firestore

by
Read Time:13 minsLanguages:

German (Deutsch) translation by Nikol Angelowa (you can also view the original English article)

Das Speichern der Daten Ihrer App in der Cloud ist heutzutage sehr wichtig, da Benutzer dazu neigen, mehrere Geräte zu besitzen und möchten, dass ihre Apps auf allen synchronisiert sind. Mit Cloud Firestore, einer auf der Firebase-Plattform verfügbaren Echtzeit-NoSQL-Datenbank, ist dies einfacher und sicherer als je zuvor.

In einer früheren Anleitung habe ich Ihnen alle leistungsstarken Funktionen von Cloud Firestore vorgestellt. Heute zeige ich Ihnen, wie Sie es zusammen mit anderen Firebase-Produkten wie FirebaseUI Auth und Firebase Analytics verwenden können, um eine einfache, aber hoch skalierbare App zur Gewichtserfassung zu erstellen.

Voraussetzungen

Um dieser Schritt-für-Schritt-Anleitung zu folgen, benötigen Sie:

  • die neueste Version von Android Studio
  • ein Firebase-Konto
  • und ein Gerät oder Emulator mit Android 5.0 oder höher

1. Projekteinrichtung

Um Firebase-Produkte in Ihrem Android Studio-Projekt verwenden zu können, benötigen Sie das Google Services Gradle-Plug-in, eine Firebase-Konfigurationsdatei und einige implementation-Abhängigkeiten. Mit dem Firebase Assistant können Sie sie alle ganz einfach abrufen.

Öffnen Sie den Assistenten, indem Sie auf Tools > Firebase gehen. Wählen Sie als Nächstes die Option Analyse aus und klicken Sie auf den Link Analyseereignis protokollieren.

Fierbase Assistant panelFierbase Assistant panelFierbase Assistant panel

Sie können jetzt auf die Schaltfläche Mit Firebase verbinden klicken, um Ihr Android Studio-Projekt mit einem neuen Firebase-Projekt zu verbinden.

Connect to Firebase dialogConnect to Firebase dialogConnect to Firebase dialog

Um das Plugin und die implementation-Abhängigkeiten tatsächlich hinzuzufügen, müssen Sie jedoch auch auf die Schaltfläche Analytics zu Ihrer App hinzufügen klicken.

Die Weight-Tracker-App, die wir heute erstellen, wird nur zwei Funktionen haben: Gewichte speichern und als Liste in umgekehrter chronologischer Reihenfolge anzeigen. Wir werden natürlich Firestore verwenden, um die Gewichte zu speichern. Um sie als Liste anzuzeigen, verwenden wir jedoch Firestore-bezogene Komponenten, die in der FirebaseUI-Bibliothek verfügbar sind. Fügen Sie daher der Datei build.gradle des app-Moduls die folgende implementation-Abhängigkeit hinzu:

Benutzer müssen nur ihre eigenen Gewichte anzeigen können, nicht die Gewichte aller Benutzer der App. Daher muss unsere App in der Lage sein, ihre Benutzer eindeutig zu identifizieren. FirebaseUI Auth bietet diese Möglichkeit, also fügen Sie als nächstes die folgende Abhängigkeit hinzu:

Wir werden auch einige Material Design-Widgets benötigen, um unserer App ein ansprechendes Aussehen zu verleihen. Stellen Sie also sicher, dass Sie die Design Support-Bibliothek und die Material Dialogs-Bibliothek als Abhängigkeiten hinzufügen.

Klicken Sie abschließend auf die Schaltfläche Jetzt synchronisieren, um das Projekt zu aktualisieren.

2. Konfigurieren der Firebase-Authentifizierung

Firebase Authentication unterstützt eine Vielzahl von Identitätsanbietern. Alle sind jedoch standardmäßig deaktiviert. Um eine oder mehrere davon zu aktivieren, müssen Sie die Firebase-Konsole besuchen.

Wählen Sie in der Konsole das Firebase-Projekt aus, das Sie im vorherigen Schritt erstellt haben, gehen Sie zum Abschnitt Authentifizierung und klicken Sie auf die Schaltfläche Anmeldemethode einrichten.

Firebase Authentication home screenFirebase Authentication home screenFirebase Authentication home screen

Damit sich Nutzer mit einem Google-Konto bei unserer App anmelden können, aktivieren Sie Google als Anbieter, geben Sie dem Projekt einen aussagekräftigen öffentlichen Namen und klicken Sie auf die Schaltfläche Speichern.

Google identity provider configurationGoogle identity provider configurationGoogle identity provider configuration

Google ist der einfachste Identitätsanbieter, den Sie verwenden können. Es erfordert keine Konfiguration und Ihr Android Studio-Projekt benötigt keine zusätzlichen Abhängigkeiten dafür.

3. Cloud Firestore konfigurieren

Sie müssen Firestore in der Firebase-Konsole aktivieren, bevor Sie es verwenden können. Rufen Sie dazu den Abschnitt Datenbank auf und klicken Sie auf die Schaltfläche Erste Schritte, die sich auf der Cloud Firestore Beta-Karte befindet.

Cloud Firestore cardCloud Firestore cardCloud Firestore card

Sie werden nun aufgefordert, einen Sicherheitsmodus für die Datenbank auszuwählen. Stellen Sie sicher, dass Sie die Option Im gesperrten Modus starten auswählen und die Schaltfläche Aktivieren drücken.

Security mode selection screenSecurity mode selection screenSecurity mode selection screen

Im gesperrten Modus kann standardmäßig niemand auf den Inhalt der Datenbank zugreifen oder ihn ändern. Daher müssen Sie jetzt eine Sicherheitsregel erstellen, die es Benutzern erlaubt, nur die ihnen gehörenden Dokumente zu lesen und zu schreiben. Öffnen Sie zunächst die Registerkarte Regeln.

Bevor wir eine Sicherheitsregel für unsere Datenbank erstellen, müssen wir festlegen, wie wir Daten darin speichern. Nehmen wir also an, wir haben eine Top-Level-Sammlung namens Users, die Dokumente enthält, die unsere users repräsentieren. Die Dokumente können eindeutige IDs haben, die mit den IDs identisch sind, die der Firebase Authentication-Dienst für die Benutzer generiert.

Da die Benutzer ihren Dokumenten mehrere Gewichtseinträge hinzufügen, ist die Verwendung einer Untersammlung zum Speichern dieser Einträge ideal. Nennen wir die Untersammlungs weights.

Firestore database structureFirestore database structureFirestore database structure

Basierend auf dem obigen Schema können wir nun eine Regel für den Pfad users/{user_id}/weights/{weight} erstellen. Die Regel lautet, dass ein Benutzer nur dann aus dem Pfad lesen und in diesen schreiben darf, wenn die Variable {user_id} gleich der Firebase-Authentifizierungs-ID des Benutzers ist.

Aktualisieren Sie dementsprechend den Inhalt des Regeleditors.

Klicken Sie abschließend auf die Schaltfläche Veröffentlichen, um die Regel zu aktivieren.

4. Benutzer authentifizieren

Unsere App darf nur nutzbar sein, wenn der Nutzer mit einem Google-Konto bei ihr eingeloggt ist. Daher muss beim Öffnen sofort überprüft werden, ob der Benutzer über eine gültige Firebase-Authentifizierungs-ID verfügt. Wenn der Benutzer die ID hat, sollte er die Benutzeroberfläche rendern. Andernfalls sollte ein Anmeldebildschirm angezeigt werden.

Um zu überprüfen, ob der Benutzer eine ID hat, können wir einfach überprüfen, ob die currentUser-Eigenschaft der FirebaseAuth-Klasse nicht null ist. Wenn es null ist, können wir eine Anmeldeabsicht erstellen, indem wir die Methode createSignInIntentBuilder() der AuthUI-Klasse aufrufen.

Der folgende Code zeigt Ihnen, wie dies für Google als Identitätsanbieter geht:

Beachten Sie, dass wir eine Methode namens showUI() aufrufen, wenn bereits eine gültige ID vorhanden ist. Diese Methode existiert noch nicht, also erstellen Sie sie und lassen Sie ihren Körper vorerst leer.

Um das Ergebnis der Anmeldeabsicht abzufangen, müssen wir die Methode onActivityResult() der Aktivität überschreiben. Wenn der Wert des resultCode-Arguments innerhalb der Methode RESULT_OK ist und die currentUser-Eigenschaft nicht mehr null ist, bedeutet dies, dass sich der Benutzer erfolgreich anmelden konnte. In diesem Fall müssen wir erneut die Methode showUI() aufrufen, um die Benutzeroberfläche zu rendern.

Wenn sich der Benutzer nicht anmelden kann, können wir einen Toast anzeigen und die App schließen, indem wir die Methode finish() aufrufen.

Fügen Sie dementsprechend den folgenden Code zur Aktivität hinzu:

Wenn Sie die App zum ersten Mal ausführen, sollten Sie jetzt einen Anmeldebildschirm sehen, der wie folgt aussieht:

Account selection dialogAccount selection dialogAccount selection dialog

Bei weiteren Läufen – dank Google Smart Lock, das standardmäßig aktiviert ist – werden Sie automatisch angemeldet.

5. Layouts definieren

Unsere App benötigt zwei Layouts: eines für die Hauptaktivität und eines für die Gewichtseinträge, die als Elemente der umgekehrt chronologisch geordneten Liste angezeigt werden.

Das Layout der Hauptaktivität muss ein RecyclerView-Widget aufweisen, das als Liste fungiert, und ein FloatingActionButton-Widget, auf das der Benutzer drücken kann, um einen neuen Gewichtseintrag zu erstellen. Nachdem Sie beide in einem RelativeLayout-Widget platziert haben, sollte die XML-Layoutdatei Ihrer Aktivität so aussehen:

Wir haben einen On-Click-Ereignishandler namens addWeight() mit dem FloatingActionButton-Widget verknüpft. Der Handler existiert noch nicht, also erstellen Sie einen Stub dafür innerhalb der Aktivität.

Um das Layout des Gewichtseintrags einfach zu halten, haben wir nur zwei TextView-Widgets darin: eines zur Anzeige des Gewichts und das andere zum Anzeigen der Zeit, zu der der Eintrag erstellt wurde. Es reicht aus, ein LinearLayout-Widget als Container für sie zu verwenden.

Erstellen Sie dementsprechend eine neue Layout-XML-Datei namens weight_entry.xml und fügen Sie den folgenden Code hinzu:

6. Erstellen eines Modells

Im vorherigen Schritt haben Sie gesehen, dass jedem Gewichtseintrag ein Gewicht und eine Zeit zugeordnet sind. Um Firestore darüber zu informieren, müssen wir ein Modell für den Gewichtseintrag erstellen.

Firestore-Modelle sind normalerweise einfache Datenklassen mit den erforderlichen Membervariablen.

Jetzt ist auch ein guter Zeitpunkt, um für jeden Gewichtseintrag einen Ansichtshalter zu erstellen. Der Ansichtshalter wird, wie Sie vielleicht vermutet haben, vom RecyclerView-Widget zum Rendern der Listenelemente verwendet. Erstellen Sie also eine neue Klasse namens WeightEntryVH, die die Klasse RecyclerView.ViewHolder erweitert, und erstellen Sie Mitgliedsvariablen für beide TextView-Widgets. Vergessen Sie nicht, sie mit der Methode findViewById() zu initialisieren. Der folgende Code zeigt Ihnen, wie es in Kürze geht:

7. Erstellen von eindeutigen Benutzerdokumenten

Wenn ein Benutzer zum ersten Mal versucht, einen Gewichtseintrag zu erstellen, muss unsere App ein separates Dokument für den Benutzer in der users-Sammlung auf Firestore erstellen. Wie wir bereits entschieden haben, ist die ID des Dokuments nichts anderes als die Firebase-Authentifizierungs-ID des Benutzers, die mit der uid-Eigenschaft des currentUser-Objekts abgerufen werden kann.

Um einen Verweis auf die users-Sammlung zu erhalten, müssen wir die Methode collection() der Klasse FirebaseFirestore verwenden. Wir können dann seine Methode document() aufrufen und die uid als Argument übergeben, um das Dokument des Benutzers zu erstellen.

Sowohl beim Lesen als auch beim Erstellen der Gewichtseinträge müssen wir auf die benutzerspezifischen Dokumente zugreifen. Um die obige Logik nicht zweimal zu codieren, schlage ich vor, dass Sie eine separate Methode dafür erstellen.

Beachten Sie, dass das Dokument nur einmal pro Benutzer erstellt wird. Mit anderen Worten, mehrere Aufrufe der obigen Methode geben immer dasselbe Dokument zurück, solange der Benutzer dasselbe Google-Konto verwendet.

8. Hinzufügen von Gewichtseinträgen

Wenn Benutzer den schwebenden Aktionsknopf unserer App drücken, müssen sie in der Lage sein, neue Gewichtseinträge zu erstellen. Damit sie ihre Gewichte eingeben können, erstellen wir nun einen Dialog mit einem EditText-Widget. Mit der Materialdialog-Bibliothek ist dies äußerst intuitiv.

Erstellen Sie innerhalb der addWeight()-Methode, die als On-Click-Ereignishandler der Schaltfläche dient, eine MaterialDialog.Builder-Instanz und rufen Sie ihre title()- und content()-Methoden auf, um Ihrem Dialog einen Titel und eine aussagekräftige Nachricht zu geben. Rufen Sie auf ähnliche Weise die Methode inputType() auf und übergeben Sie ihr TYPE_CLASS_NUMBER als Argument, um sicherzustellen, dass der Benutzer nur Zahlen in den Dialog eingeben kann.

Rufen Sie als Nächstes die Methode input() auf, um einen Hinweis anzugeben und dem Dialogfeld einen Ereignishandler zuzuordnen. Der Handler erhält das vom Benutzer eingegebene Gewicht als Argument.

Stellen Sie schließlich sicher, dass Sie die Methode show() aufrufen, um den Dialog anzuzeigen.

Innerhalb des Ereignishandlers müssen wir nun Code hinzufügen, um tatsächlich ein neues Gewichtseingabedokument zu erstellen und zu füllen. Da das Dokument zur weights-Sammlung des eindeutigen Dokuments des Benutzers gehören muss, müssen Sie für den Zugriff auf die Sammlung die Methode collection() des Dokuments aufrufen, das von der Methode getUserDocument() zurückgegeben wird.

Sobald Sie die Sammlung haben, können Sie ihre add()-Methode aufrufen und ihr eine neue Instanz der WeightEntry-Klasse übergeben, um den Eintrag zu speichern.

Im obigen Code sehen Sie, dass wir die time-Eigenschaft der Date-Klasse verwenden, um dem Eintrag einen Zeitstempel zuzuordnen.

Wenn Sie die App jetzt ausführen, sollten Sie Firestore neue Gewichtseinträge hinzufügen können. Sie werden in der App noch nicht angezeigt, sind jedoch in der Firebase-Konsole sichtbar.

Add weight dialogAdd weight dialogAdd weight dialog

9. Anzeige der Gewichtseingaben

Jetzt ist es an der Zeit, das RecyclerView-Widget unseres Layouts zu füllen. Beginnen Sie also damit, mit der findViewById()-Methode eine Referenz dafür zu erstellen und ihr eine neue Instanz der LinearLayoutManager-Klasse zuzuweisen. Dies muss innerhalb der showUI()-Methode erfolgen, die wir zuvor erstellt haben.

Das RecyclerView-Widget muss alle Dokumente anzeigen, die in der weights-Sammlung des Benutzerdokuments vorhanden sind. Außerdem sollten die neuesten Dokumente zuerst erscheinen. Um diese Anforderungen zu erfüllen, müssen wir nun eine Abfrage erstellen, indem wir die Methoden collection() und orderBy() aufrufen.

Aus Effizienzgründen können Sie die Anzahl der von der Abfrage zurückgegebenen Werte begrenzen, indem Sie die Methode limit() aufrufen.

Der folgende Code erstellt eine Abfrage, die die letzten 90 vom Benutzer erstellten Gewichtseinträge zurückgibt:

Mit der Abfrage müssen wir nun ein FirestoreRecyclerOptions-Objekt erstellen, mit dem wir später den Adapter unseres RecyclerView-Widgets konfigurieren. Wenn Sie die query-Instanz an die Methode setQuery() ihres Builders übergeben, stellen Sie sicher, dass die zurückgegebenen Ergebnisse in Form von WeightEntry-Objekten vorliegen. Der folgende Code zeigt Ihnen, wie das geht:

Sie haben vielleicht bemerkt, dass wir unsere aktuelle Aktivität zum Lebenszyklusbesitzer des FirestoreRecyclerOptions-Objekts machen. Dies ist wichtig, da wir möchten, dass unser Adapter angemessen auf gängige Lebenszyklusereignisse reagiert, z. B. wenn der Benutzer die App öffnet oder schließt.

An dieser Stelle können wir ein FirestoreRecyclerAdapter-Objekt erstellen, das das FirestoreRecyclerOptions-Objekt verwendet, um sich selbst zu konfigurieren. Da die FirestoreRecyclerAdapter-Klasse abstrakt ist, sollte Android Studio ihre Methoden automatisch überschreiben, um Code zu generieren, der wie folgt aussieht:

Wie Sie sehen, ist die FirestoreRecyclerAdapter-Klasse der RecyclerView.Adapter-Klasse sehr ähnlich. Tatsächlich leitet es sich daraus ab. Das bedeutet, dass Sie es genauso verwenden können, wie Sie die RecyclerView.Adapter-Klasse verwenden würden.

Innerhalb der Methode onCreateViewHolder() müssen Sie lediglich die Layoutdatei weight_entry.xml aufblasen und ein darauf basierendes WeightEntryVH-Ansichtshalterobjekt zurückgeben.

Und innerhalb der onBindViewHolder()-Methode müssen Sie das model-Aargument verwenden, um den Inhalt der TextView-Widgets zu aktualisieren, die im Ansichtshalter vorhanden sind.

Während die Aktualisierung des weightView-Widgets einfach ist, ist die Aktualisierung des timeView-Widgets etwas kompliziert, da wir den Zeitstempel, der in Millisekunden angegeben ist, dem Benutzer nicht direkt anzeigen möchten.

Die einfachste Möglichkeit, den Zeitstempel in ein lesbares Datum und eine lesbare Uhrzeit umzuwandeln, besteht darin, die formatDateTime()-Methode der DateUtils-Klasse zu verwenden. Neben dem Zeitstempel kann die Methode mehrere verschiedene Flags akzeptieren, mit denen Datum und Uhrzeit formatiert werden. Es steht Ihnen frei, Flags zu verwenden, die Ihren Vorlieben entsprechen.

Vergessen Sie nicht, das RecyclerView-Widget auf den gerade erstellten Adapter zu verweisen.

Die App ist fertig. Sie sollten jetzt in der Lage sein, neue Einträge hinzuzufügen und sie fast sofort in der Liste erscheinen. Wenn Sie die App auf einem anderen Gerät mit demselben Google-Konto ausführen, werden auch die gleichen Gewichtseinträge darauf angezeigt.

Weight entries shown as a listWeight entries shown as a listWeight entries shown as a list

Abschluss

In diesem Tutorial haben Sie gesehen, wie schnell und einfach es ist, mit Cloud Firestore als Datenbank eine voll funktionsfähige Gewichts-Tracker-App für Android zu erstellen. Fühlen Sie sich frei, weitere Funktionen hinzuzufügen! Ich schlage auch vor, dass Sie versuchen, es bei Google Play zu veröffentlichen. Mit dem Firebase Spark-Plan, der derzeit 1 GB Datenspeicher kostenlos bietet, haben Sie keine Probleme, mindestens einige Tausend Benutzer zu bedienen.

Und während Sie hier sind, lesen Sie einige unserer anderen Beiträge über die Entwicklung von Android-Apps!

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.