App-Entwicklung war früher eine Domäne für Programmierexperten. Doch dank No-Code-Plattformen wie Flutterflow und leistungsstarken Backend-Lösungen wie Firebase, kann heutzutage fast jeder seine eigene App bauen. In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie ein Following-System in Ihrer Flutterflow App implementieren, unterstützt von einem Firebase Server. Dieses System ermöglicht es Nutzern, anderen Nutzern zu folgen und deren Inhalte in einem personalisierten Feed zu sehen.
Was Sie für den Start benötigen
Bevor wir loslegen, stellen Sie sicher, dass Sie die folgenden Voraussetzungen erfüllen:
- Ein Google Firebase Konto (kostenlos!).
- Ein Flutterflow Konto (die kostenlose Version reicht für diese Anleitung aus).
- Grundlegende Kenntnisse in der Bedienung von Flutterflow.
- Etwas Zeit und Geduld – wir gehen es detailliert an!
Firebase Setup: Die Basis für Ihr Following-System
Zuerst müssen wir unser Firebase Projekt einrichten. Gehen Sie zu Firebase Console und erstellen Sie ein neues Projekt. Geben Sie Ihrem Projekt einen Namen und folgen Sie den Anweisungen. Sobald Ihr Projekt erstellt ist, müssen wir die Cloud Firestore Datenbank aktivieren. Diese Datenbank wird verwendet, um unsere Benutzerdaten und die Follower-Beziehungen zu speichern.
- Klicken Sie im linken Menü auf „Firestore Database”.
- Klicken Sie auf „Create database”.
- Wählen Sie „Start in test mode” (für diese Anleitung). In einer Produktionsumgebung sollten Sie Sicherheitsregeln konfigurieren.
- Wählen Sie den Standort für Ihre Datenbank und klicken Sie auf „Enable”.
Wir benötigen zwei Firestore Collections: „users” und „followers”.
Die „users” Collection
Diese Collection enthält Informationen über jeden Benutzer Ihrer App. Jeder Benutzer hat ein Dokument mit einer eindeutigen ID (die Firebase automatisch generiert). Folgende Felder sind minimal erforderlich:
- name (String): Der Name des Benutzers.
- email (String): Die E-Mail-Adresse des Benutzers.
- profilePicture (String, optional): Eine URL zum Profilbild des Benutzers.
Sie können weitere Felder hinzufügen, die für Ihre App relevant sind, z.B. „bio”, „location” usw.
Die „followers” Collection
Diese Collection speichert die Follower-Beziehungen. Jedes Dokument in dieser Collection repräsentiert eine einzelne Follower-Beziehung. Die Dokumente enthalten die folgenden Felder:
- followerId (String): Die ID des Benutzers, der folgt.
- followingId (String): Die ID des Benutzers, dem gefolgt wird.
- timestamp (Timestamp): Der Zeitpunkt, an dem die Follower-Beziehung erstellt wurde (nützlich für Sortierung).
Vergessen Sie nicht, die Indizes in Firestore zu konfigurieren, insbesondere für die Felder followerId und followingId, um die Abfrageleistung zu verbessern. Firebase wird Ihnen möglicherweise Vorschläge zur Indexerstellung basierend auf Ihren Abfragen geben, sobald Sie mit dem Erstellen von Abfragen in Flutterflow beginnen.
Flutterflow Setup: Die Benutzeroberfläche gestalten
Jetzt geht es an die Gestaltung der Benutzeroberfläche in Flutterflow. Erstellen Sie ein neues Projekt in Flutterflow und verbinden Sie es mit Ihrem Firebase Projekt. Flutterflow bietet eine einfache Möglichkeit, sich mit Firebase zu verbinden, indem Sie Ihre Firebase Projekt ID eingeben und die erforderlichen Berechtigungen erteilen.
- Gehen Sie in Flutterflow zu „Settings” (das Zahnrad-Symbol).
- Klicken Sie auf „Firebase”.
- Füllen Sie die erforderlichen Felder aus, einschließlich Ihrer Firebase Projekt ID.
- Klicken Sie auf „Connect”.
Flutterflow generiert automatisch die erforderlichen Firebase Konfigurationsdateien. Stellen Sie sicher, dass Sie auch die Firestore-Integration aktivieren.
Die Profilseite
Erstellen Sie eine Profilseite, auf der Benutzer das Profil eines anderen Benutzers sehen und diesem Benutzer folgen oder entfolgen können. Diese Seite sollte mindestens Folgendes anzeigen:
- Das Profilbild des Benutzers.
- Den Namen des Benutzers.
- Eine Schaltfläche „Folgen” / „Entfolgen”.
Die Logik für die „Folgen” / „Entfolgen”-Schaltfläche ist der Schlüssel. Wir benötigen zwei Custom Actions:
Custom Action: followUser
Diese Custom Action erstellt ein neues Dokument in der „followers” Collection. Sie benötigt zwei Eingabeparameter:
followerId(String): Die ID des aktuell angemeldeten Benutzers.followingId(String): Die ID des Benutzers, dem gefolgt wird.
Der Code für diese Custom Action könnte wie folgt aussehen (beachten Sie, dass dies Pseudo-Code ist und an die Flutterflow-Syntax angepasst werden muss):
// Firebase Referenz holen
final followersCollection = FirebaseFirestore.instance.collection('followers');
// Neues Dokument erstellen
await followersCollection.add({
'followerId': followerId,
'followingId': followingId,
'timestamp': FieldValue.serverTimestamp(),
});
Custom Action: unfollowUser
Diese Custom Action löscht das entsprechende Dokument aus der „followers” Collection. Sie benötigt ebenfalls zwei Eingabeparameter:
followerId(String): Die ID des aktuell angemeldeten Benutzers.followingId(String): Die ID des Benutzers, dem entfolgt wird.
Der Code für diese Custom Action könnte wie folgt aussehen:
// Firebase Referenz holen
final followersCollection = FirebaseFirestore.instance.collection('followers');
// Query, um das Dokument zu finden
final querySnapshot = await followersCollection
.where('followerId', isEqualTo: followerId)
.where('followingId', isEqualTo: followingId)
.get();
// Dokument löschen (wenn gefunden)
if (querySnapshot.docs.isNotEmpty) {
await followersCollection.doc(querySnapshot.docs.first.id).delete();
}
Binden Sie diese Custom Actions an die „Folgen” / „Entfolgen”-Schaltfläche. Stellen Sie sicher, dass Sie den Status der Schaltfläche basierend darauf ändern, ob der Benutzer dem angezeigten Profil folgt oder nicht. Dies kann durch eine Firestore Query erfolgen, die prüft, ob ein Dokument in der „followers” Collection existiert, das die aktuelle Benutzer-ID als followerId und die Profil-ID als followingId enthält.
Die Follower-Liste und die Follower-Liste
Es ist auch üblich, Listen zu erstellen, die zeigen, wem ein Benutzer folgt und wer ihm folgt. Diese Listen können auf separaten Seiten oder in einem Popup-Dialog angezeigt werden.
Follower-Liste
Diese Liste zeigt alle Benutzer, die einem bestimmten Benutzer folgen. Die Abfrage für diese Liste würde die „followers” Collection filtern, wobei followingId der ID des angezeigten Benutzers entspricht. Sie müssten dann die followerId jedes gefundenen Dokuments verwenden, um die entsprechenden Benutzerinformationen aus der „users” Collection abzurufen.
Folgt-Liste
Diese Liste zeigt alle Benutzer, denen ein bestimmter Benutzer folgt. Die Abfrage für diese Liste würde die „followers” Collection filtern, wobei followerId der ID des angezeigten Benutzers entspricht. Sie müssten dann die followingId jedes gefundenen Dokuments verwenden, um die entsprechenden Benutzerinformationen aus der „users” Collection abzurufen.
Der personalisierte Feed
Das Herzstück jedes Following-Systems ist der personalisierte Feed. Dieser Feed zeigt Inhalte von Benutzern, denen der aktuelle Benutzer folgt. Um dies zu implementieren, benötigen Sie:
- Eine Möglichkeit, Inhalte (z. B. Beiträge) zu speichern, zusammen mit der Benutzer-ID, die den Inhalt erstellt hat. Angenommen, Sie haben eine „posts” Collection mit einem Feld
userId. - Eine Firestore Query, die zuerst die „followers” Collection abfragt, um alle
followingIdWerte für den aktuellen Benutzer zu ermitteln. - Eine weitere Firestore Query, die dann die „posts” Collection abfragt und nach Beiträgen filtert, deren
userIdWert in der Liste derfollowingIdWerte enthalten ist.
Diese zweite Abfrage kann etwas komplex sein, aber Firebase unterstützt in-Abfragen, mit denen Sie nach Dokumenten suchen können, deren Feld in einer Liste von Werten enthalten ist. Die in-Abfrage hat jedoch eine Beschränkung der Anzahl der Werte, die sie verarbeiten kann (derzeit in der Regel 10). Wenn ein Benutzer einer großen Anzahl von Benutzern folgt, müssen Sie möglicherweise die Feed-Inhalte paginieren oder andere Strategien zur Optimierung der Abfrage in Betracht ziehen.
Fehlerbehebung und Optimierung
Bei der Implementierung eines Following-Systems können einige häufige Probleme auftreten:
- Performance: Große Datenmengen und komplexe Abfragen können die Performance beeinträchtigen. Stellen Sie sicher, dass Sie Ihre Abfragen optimieren und Indizes in Firebase verwenden.
- Sicherheitsregeln: Konfigurieren Sie Ihre Firebase Sicherheitsregeln, um unbefugten Zugriff auf Ihre Daten zu verhindern.
- Benutzererfahrung: Gestalten Sie die Benutzeroberfläche so, dass sie intuitiv und benutzerfreundlich ist.
Verwenden Sie die Firebase Console, um Ihre Datenbankabfragen zu überwachen und Engpässe zu identifizieren. Nutzen Sie die Flutterflow Preview Funktion, um Ihre App auf verschiedenen Geräten zu testen und sicherzustellen, dass sie reibungslos läuft.
Fazit
Mit Flutterflow und Firebase ist die Implementierung eines Following-Systems in Ihrer App einfacher denn je. Indem Sie die Schritte in diesem Artikel befolgen, können Sie Ihren Benutzern eine personalisierte Erfahrung bieten und die Interaktion in Ihrer App fördern. Experimentieren Sie mit verschiedenen Funktionen und passen Sie das System an die spezifischen Bedürfnisse Ihrer App an. Viel Erfolg!