Bild von Unsplash genommen

Erstellen eines WhatsApp-Klons mit Firebase

In diesem Tutorial verwenden wir Firebase, um einen WhatsApp-Klon zu erstellen.

Voraussetzungen

Ich werde nicht alle Details der Implementierung dieser App durchgehen, hauptsächlich nur die Logik- und Codedateien. In diesem Tutorial wird davon ausgegangen, dass Sie bereits über Kenntnisse in der Arbeit mit einfachen Apps für iOS verfügen. Darauf bauen wir auf. Aber ärgern Sie sich nicht, ich werde den gesamten Quellcode unten als Referenz einfügen, wenn Sie ihn Zeile für Zeile lernen möchten.

Für dieses Tutorial habe ich XCode 10 und Swift 4.2 verwendet.

Lernprogramm

Erstellen wir zunächst ein neues Projekt, FakeChat, in einem beliebigen Ordner. Sie können wählen, ob Core Data / Unit / UI-Tests eingeschlossen oder ausgeschlossen werden sollen, da ich sie hier nicht behandeln werde.

Neues Projekt mit Pods erstellen

Erstellen Sie eine Einzelansicht-App

Als nächstes werden wir verschiedene Pods installieren, die in diesem Tutorial verwendet werden:

pod init open Podfile -a Xcode
Fügen Sie die erforderlichen Pods hinzu
Pod installieren

Nachdem wir die erforderlichen Abhängigkeiten installiert haben, erstellen wir ein neues Firebase-Projekt.

Firebase einrichten

Gehen Sie hierher und drücken Sie oben rechts auf Zur Konsole gehen (stellen Sie sicher, dass Sie angemeldet sind).

Klicken Sie anschließend auf Projekt hinzufügen mit Standardeinstellungen und Speicherorten. In Produktions-Apps möchten Sie möglicherweise den Speicherort je nach Ihren Anforderungen ändern.

Wählen Sie Projektübersicht und fügen Sie dem Projekt eine neue iOS-App hinzu. Verwenden Sie unbedingt Ihre iOS-Bunde-ID, da diese eindeutig sein muss, damit unsere App funktioniert. Ersetzen Sie com.bilguun.FakeChat durch etwas Einzigartiges wie com.yourorgname.FakeChat

Klicken Sie auf App registrieren und laden Sie die GoogleService-Info.plist herunter. Wir werden dies zur Wurzel unseres Projekts hinzufügen.

Stellen Sie sicher, dass Sie FakeChat als unser Ziel hinzufügen

Jetzt müssen wir nur noch Folgendes in unsere didDinegate.swift-Datei hinzufügen: didFinishLaunchingWithOption-Methode.

FirebaseApp.configure ()
let database = Database.database (). reference ()
database.setValue ("Testen")

Datenbank erstellen

Derzeit bietet Firebase zwei Arten von Datenbanken an, die die Cloud-Synchronisierung unterstützen. Dies sind Cloud Firestore und Realtime Database. Im Wesentlichen ist Cloud Firestore eine aktualisierte Echtzeitdatenbank.

Cloud Firestore ist die neue Flaggschiff-Datenbank von Firebase für die Entwicklung mobiler Apps. Mit einem neuen, intuitiveren Datenmodell werden die Erfolge der Echtzeitdatenbank verbessert. Der Cloud Firestore bietet außerdem umfangreichere, schnellere Abfragen und skaliert besser als die Echtzeitdatenbank.

Es ist einfacher zu skalieren und kann komplexe Modelle modellieren und ist auf lange Sicht insgesamt besser. Um die Dinge einfach zu halten, bleiben wir jedoch bei der Echtzeitdatenbank.

Echtzeitdatenbank

Kehren Sie anschließend zur Firebase-Konsole zurück und führen Sie folgende Schritte aus:

Dadurch wird im Testmodus eine Echtzeitdatenbank erstellt. Dies bedeutet, dass Benutzer nicht authentifiziert werden müssen, um in diese Datenbank lesen und schreiben zu können. Wir werden die Regeln irgendwann ändern, aber machen wir weiter, damit wir unsere App testen können.

Führen Sie unsere iOS-App auf einem Simulator aus. Wenn Sie nach dem Start in Firebase auf Datenbank klicken, sollte Folgendes angezeigt werden:

Unsere Sollwertmethode hat funktioniert!

Großartig! Nach dem Start unserer App haben wir auf das Stammverzeichnis unserer Echtzeitdatenbank verwiesen und einen neuen Wert für das Testen festgelegt

Wir werden jetzt die Firebase-Datenbank beiseite legen und wieder darauf zurückkommen, wenn wir bereit sind, Nachrichten zu senden. Lassen Sie uns jetzt unsere ViewController- und Anmelde- / Anmeldelogik für unsere Benutzer implementieren.

Registrieren und Anmelden

Gehen wir zur Authentifizierung und klicken Sie auf E-Mail / Passwort und aktivieren Sie diese. Was wir hier tun, ist, dass wir unseren Benutzern die Möglichkeit geben, sich per E-Mail oder Passwort anzumelden. Wir werden die Gültigkeit der E-Mails oder die Authentizität der Benutzer in diesem Tutorial nicht überprüfen.

Firebase bietet außerdem viel mehr Optionen, mit denen Benutzer sich anmelden / anmelden, dies erkunden und in Ihre App integrieren können.

ViewController erstellen

Dies wird unser erstes Storyboard sein

Lassen Sie uns unser erstes Storyboard erstellen. Hier sind nur 2 Bildschirme in Navigation Controller eingebettet. Unser Begrüßungsbildschirm enthält Eingabefelder für E-Mail und Passwort. Wir können uns dann entweder anmelden oder registrieren. Sobald wir eine dieser Aktionen ausgeführt haben, können wir unseren Chats ViewController präsentieren

In der obigen Bildschirmaufnahme finden Sie Informationen zum aktuellen Fluss.

Abwicklung der Registrierung und Anmeldung

Aktualisieren Sie Ihre Hauptansicht von ViewController.swift so. Stellen Sie sicher, dass die IBOutlets und IBActions im Storyboard verbunden sind, um Abstürze zu vermeiden.

Lassen Sie uns nun die App ausführen und einen neuen Benutzer registrieren

Geben Sie die gewünschte E-Mail-Adresse und ein Passwort ein. Klicken Sie auf Registrieren und die App sollte Sie nach einer kurzen Verzögerung zum ChatsViewController bringen.

Authentifizierungsseite

Aktualisieren Sie in der Firebase die Authentifizierungsseite, und Sie sollten einen neuen Benutzer sehen, den wir gerade registriert haben. Was wir haben ist:

  • Kennung - E-Mail, die wir verwendet haben
  • Anbieter - Symbol, das anzeigt, um welche Art von Authentifizierung es sich handelt
  • Erstellt - Erstellungsdatum
  • Angemeldet - Datum, an dem sich der Benutzer zuletzt angemeldet hat
  • Benutzer-UUID - Eindeutige Kennung, die jedem Benutzer zugewiesen wird
  • Die Kennwortspalte wird nicht angezeigt, da es sich um vertrauliche Daten handelt. Es wird entsprechend gehasht und gespeichert.

Gehen Sie zurück zur Hauptseite und versuchen Sie sich anzumelden. Sobald sich der Benutzer erfolgreich angemeldet hat, wird der ChatsViewController erneut angezeigt.

ChatsViewController

Sieht ziemlich anständig aus!

Dies werden wir in unserem ChatsViewController implementieren. Die Grundidee lautet wie folgt:

  1. Erstellen Sie ein benutzerdefiniertes Modell, das Nachrichten, eingehende Nachrichten und Absender enthält
  2. Erstellen Sie eine benutzerdefinierte Tabellenansichtszelle, um die Nachrichtenausrichtung und die Hintergrundfarbe basierend auf dem empfangenen Modell zu definieren. Wenn Sie nicht der Absender sind, zeigen Sie den Absendernamen oben in der Nachricht an
  3. Zeigen Sie die Zellen in der Tabellenansicht an.

Dies ist alles, was wir wirklich brauchen, um die Nachrichten entsprechend anzuzeigen. Verbinden wir jetzt unsere TableView-Daten mit Firebase! Wir werden eine Nachricht senden und sicherstellen, dass wir sie auf einem anderen Simulator zurückerhalten können.

Herstellen einer Verbindung zur Firebase-Datenbank

Wir werden zwei neue Methoden hinzufügen, um mit der Firebase-Datenbank kommunizieren zu können:

  1. Nachricht an die Firebase senden, wenn auf die Schaltfläche Senden geklickt wird.
  2. Fügen Sie einen Listener hinzu, um Datenbankänderungen zu beobachten.

Ich werde Sie nicht mit zu vielen Worten langweilen, daher hier die eigentliche Implementierung

Gehen Sie den Code durch und versuchen Sie zu verstehen, was genau passiert ist. Die neuen Methoden sind sendButtonDidTap und getMessages. Dies ist alles erforderlich, um ordnungsgemäß mit unserer Firebase-Datenbank zu kommunizieren. Führen Sie die App aus, registrieren Sie 2 Benutzer, falls Sie dies noch nicht getan haben, und melden Sie sich mit ihnen auf einem Simulator oder Ihrem Telefon an. Das Endergebnis sollte ungefähr so ​​aussehen:

Die Nachrichten werden sofort gesendet und auch sofort empfangen.

Abschließende Gedanken

Über unsere App

Ja, ich weiß, obwohl unser WhatsApp-Klon funktioniert, hat er keine Idee / kein Konzept von Freunden. In dieser Phase verhält sich der ChatsViewController wie eine große Gruppe, in der alle registrierten Mitglieder Nachrichten senden und empfangen können. Um die Idee des Sendens von Nachrichten an Freunde / Gruppen / Räume zu integrieren, muss unsere Datenbankstruktur geändert werden, um dies zu ermöglichen. Vielleicht werde ich in naher Zukunft ein Update geben, wie Sie dies mit Firebase erreichen können. Wenn jemand wissen möchte, wie das gemacht werden kann, kann er es mir auch gerne mitteilen.

Firebase kann ein wirklich leistungsfähiges Tool sein, um mit dem Informationsaustausch in Echtzeit zu beginnen, wenn Sie nicht über die erforderlichen Fähigkeiten oder Ressourcen verfügen, um Ihren eigenen Server zu erhalten. In Zukunft werde ich dies aktualisieren oder ein neues Tutorial erstellen, das die Implementierung unseres eigenen Dienstes mit Sockets / MongoDB anstelle von Firebase behandelt. Aber um loszulegen, bietet Firebase eine super nette Möglichkeit, den Austausch von Informationen in Echtzeit zu ermöglichen.

Den endgültigen Quellcode finden Sie hier.

Wenn jemand dies nützlich findet, können Sie dies gerne teilen oder mich informieren, falls ein Fehler / eine schlechte Praxis / Implementierungen vorliegen.

Viel Spaß beim Codieren!