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

Einrichten von Firebase für Ihr nächstes Projekt

by
Difficulty:BeginnerLength:LongLanguages:

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

Im heutigen Tutorial werden wir Sie mit Firebase vertraut machen, indem wir eine einfache Chatroom-Anwendung erstellen, indem wir die Javascript-API von Firebase nutzen. Diese Anwendung bietet Ihnen die Bausteine, um erweiterte Echtzeitanwendungen für Ihre eigenen Projekte zu entwickeln.

Einstieg

Um Firebase zum Laufen zu bringen, müssen Sie ein kostenloses Entwicklerkonto erstellen, indem Sie die Website besuchen und sich registrieren. Sobald Sie sich erfolgreich registriert haben, leitet Firebase Sie zu Ihrem Konto-Dashboard weiter, wo Sie Zugriff auf alle Ihre Firebase-Datenspeicherorte und andere nützliche Funktionen haben. Im Moment sollten Sie jedoch den Firebase-Datenspeicherort mit dem Titel MEINE ERSTE APP auswählen. Sie können diese Anwendung jederzeit umbenennen oder eine neue erstellen.

Beim Erstellen des Firebase-Speicherorts wurde ihm ein eindeutiger Hostname zugewiesen. Dieser eindeutige Hostname ist sehr wichtig. denn hier werden auch Ihre Daten gelesen und geschrieben. Wir werden den Hostnamen später im Tutorial genauer besprechen, aber vorerst:

Beginnen wir mit dem Bauen

Der erste Punkt auf der Tagesordnung: Erstellen Sie eine neue HTML-Datei, die auf die Firebase-Client-, jQuery- und Bootstrap-CDNs verweist. Es ist ziemlich offensichtlich, dass wir auf das Firebase-CDN verweisen müssen. Jetzt ist es möglicherweise nicht so klar, warum wir sowohl auf jQuery als auch auf Bootstrap verweisen. Ich verwende sowohl jQuery als auch Bootstrap für eine schnelle Anwendungsentwicklung. Beide Bibliotheken ermöglichen es mir, Dinge sehr schnell zu erledigen, und sie erfordern nicht viel Handcodierung. Ich werde jedoch weder jQuery noch Bootstrap detailliert behandeln. Sie können also selbst mehr über diese JavaScript-Bibliotheken erfahren.

Der HTML

Das Markup, das das implementiert, was ich beschrieben habe, lautet wie folgt:

Nachdem wir unsere HTML-Datei erstellt haben und sie auf die richtigen CDNs verweist, beginnen wir mit der Ausarbeitung des Restes unserer Anwendung.

Zunächst müssen wir bestimmen, welche wesentlichen Funktionen diese Anwendung benötigt. Es scheint, dass die meisten Anwendungen im Chatroom-Stil zwei Ähnlichkeiten aufweisen: ein Nachrichtenfeld zum Senden von Nachrichten an einen Server und einen Abschnitt, der mit Nachrichten von einem Server gefüllt wird. In unserem Fall wird dieser Server unser Firebase-Datenspeicherort sein.

Implementieren wir das Nachrichtenfeld zum Senden von Nachrichten an einen Server. Dazu müssen wir eine einfache Schnittstelle erstellen, die ein input-Feld und eine Senden-Schaltfläche enthält, die in form-Tags eingeschlossen sind. Da wir auf das Bootstrap-Stylesheet verweisen, können wir bequem einige vordefinierte Bootstrap-Stile verwenden, um die Schnittstelle zu erstellen. Wie ich bereits sagte, ist dies sehr praktisch und ermöglicht es uns, weniger Code von Hand zu schreiben.

Platzieren wir also zuerst ein div mit dem Klassenattribut-container direkt nach dem öffnenden body-Tag in der HTML-Datei. Dies ist eine Bootstrap-Funktion, die Breitenbeschränkungen und Auffüllungen für den Seiteninhalt bereitstellt. Fügen Sie innerhalb der Container-Tags einen Titel hinzu, der in H1-Tags eingeschlossen ist, damit wir der Anwendung einen beschreibenden Namen geben können. Mein Titel lautet "Firebase Chat Application". Fühlen Sie sich frei, Ihre eigene Kreativität beim Schreiben Ihres Titels einzusetzen.

Das Markup, das das implementiert, was ich oben beschrieben habe, sieht folgendermaßen aus:

Darüber hinaus müssen wir ein div mit Klassenattributen hinzufügen: panel und panel-default. Ein Panel ist eine Bootstrap-Komponente, die eine einfache Box bereitstellt, die vier interne DIVs enthält: panel-heading, panel-title, panel-body und panel-footer. Wir werden keine panel-heading und panel-title verwenden, aber wir werden sowohl panel-body als auch panel-footer verwenden. Das panel-DIV wird als Hauptcontainer für den Chatroom-Client verwendet.

Das Markup, das das implementiert, was ich oben beschrieben habe, lautet wie folgt:

Im Moment werden wir nicht mit dem panel-body arbeiten. Wir müssen diesen Abschnitt jedoch später im Tutorial verwenden, um Nachrichten von unserem Datenspeicherort aus zu füllen.

Im Moment konzentrieren wir uns auf die Panel-Fußzeile div. Die Fußzeile des Bedienfelds enthält ein Eingabefeld, eine Schaltfläche zum Senden und eine Schaltfläche zum Zurücksetzen. Wir geben dem Eingabefeld eine Attribut-ID von comments und der Senden-Schaltfläche eine Attribut-ID von submit-btn. Diese beiden ID-Attribute sind sehr wichtig und werden später im Lernprogramm benötigt. Sie können die Attribut-IDs für die Formularelemente jederzeit ändern.

Das Markup, das das implementiert, was ich oben beschrieben habe, lautet wie folgt:

Implementieren wir nun das JavaScript, mit dem wir die Nachricht an den Datenspeicherort unserer Firebase senden können.

Das JavaScript

Zuerst müssen wir eine Reihe von script-Tags direkt über dem schließenden body-Tag in der HTML-Datei hinzufügen. Innerhalb der Skript-Tags müssen wir einen Verweis auf den Datenspeicherort unserer Firebase erstellen. Ohne diese Referenz können wir keine Daten an unseren Datenort schreiben. Dies kann erreicht werden, indem der Firebase-Konstruktor initialisiert und unser Datenspeicherort als Parameter übergeben wird. Denken Sie daran, dass der Firebase-Datenspeicherort beim Einrichten von Firebase (dem eindeutigen Hostnamen) erstellt wurde.

Der Code, der das implementiert, was ich oben beschrieben habe, lautet wie folgt:

Nach dem Initialisieren des Firebase-Referenzobjekts müssen wir einen Klickereignishandler an die Auswahl der Senden-Schaltfläche binden. Die Position dieses Selektors befindet sich in der Fußzeile des Bedienfelds. Außerdem müssen wir sicherstellen, dass der Ereignishandler-Rückruf eine return false-Anweisung als letzte Codezeile enthält. Dadurch wird sichergestellt, dass die Standardaktion zum Senden des Formulars nicht ausgeführt wird, und verhindert, dass das Ereignis den DOM-Baum in die Luft sprudelt. In einigen Fällen kann es jedoch vorkommen, dass Ereignisblasen auftreten.

Die beiden folgenden JavaScript-Snippets implementieren das oben Beschriebene:

Als Nächstes definieren wir eine Variable, die auf den Selektor des Kommentars verweist, und eine andere Variable, die die Leerzeichen am Anfang und Ende des Kommentarwerts entfernt.

Der Code, der das implementiert, was ich oben beschrieben habe, lautet wie folgt:

Jetzt müssen wir die Methode bestimmen, die erforderlich ist, um diese Kommentare tatsächlich an unseren Datenspeicherort zu schreiben.

Daten in Firebase schreiben

Die Firebase-API bietet verschiedene Methoden zum Schreiben von Daten an einen Datenspeicherort. Im heutigen Tutorial konzentrieren wir uns jedoch auf die Verwendung der Methoden set() und push(). Lassen Sie uns kurz überprüfen, was jede dieser Methoden uns ermöglicht.

  • Die set()-Methode schreibt Daten in den Datenspeicherort und überschreibt alle Daten, die derzeit am Datenspeicherort gespeichert sind.
  • Die push()-Methode schreibt Daten in den Datenspeicherort, indem automatisch ein neuer untergeordneter Speicherort mit einem eindeutigen Namen generiert wird. Zusätzlich wird diesem eindeutigen Namen ein Zeitstempel vorangestellt. Auf diese Weise können alle untergeordneten Standorte chronologisch sortiert werden.

Nach Überprüfung der Methoden set() und push(); Ich denke, es ist ziemlich offensichtlich, dass wir die push()-Methode in unserer Anwendung nutzen müssen. Andernfalls werden wir den neuesten Kommentar an unserem Datenstandort kontinuierlich überschreiben, und das würde keinen Spaß machen.

Kehren wir dazu zu dem JavaScript zurück, das wir zuvor zu unserer Seite hinzugefügt haben. Wir müssen jetzt den Kommentarwert an unseren Datenspeicherort verschieben. Denken Sie jetzt daran, dass es verschiedene push-Methoden gibt, mit denen wir Daten in verschiedenen Formaten wie Objekt, Array, Zeichenfolge, Zahl, Boolescher Wert oder Null übertragen können. Wir werden nur ein Objekt verwenden, das ein Schlüsselwertpaar aus einem Kommentar und einem Kommentarwert hat. Zusätzlich werden wir einen optionalen Rückruf anhängen, um nach Abschluss der push-Methoden zu feuern. Der Rückruf gibt bei einem Fehler ein Fehlerobjekt und bei Erfolg einen Nullwert zurück.

Der Code, der das implementiert, was ich oben beschrieben habe, lautet wie folgt:

Fügen wir nun etwas hinzu, um sicherzustellen, dass die Chatroom-Benutzer keine leeren Nachrichten an unseren Datenspeicherort schreiben können. Dies kann leicht erreicht werden, indem eine einfache if else-Anweisung hinzugefügt wird, die die Länge des Kommentarwerts überprüft.

Der Code, der das implementiert, was ich oben beschrieben habe, lautet wie folgt:

Großartig, wir haben den Abschnitt unserer Anwendung erfolgreich abgeschlossen, in dem Benutzer Daten an unseren Datenspeicherort schreiben können. Es fehlt uns jedoch immer noch die Funktionalität, die den Benutzern ein Echtzeit-Chat-Erlebnis bietet. Diese Art von Erfahrung erfordert die Fähigkeit, Daten von den untergeordneten Standorten innerhalb des Datenstandorts zu lesen.

Daten aus Firebase lesen

Wie bereits erwähnt, lesen die meisten Anwendungen im Chatroom-Stil Daten von einem Server und füllen dann einen Abschnitt der Benutzeroberfläche aus. Wir müssen dasselbe in unserer Anwendung tun, indem wir die Firebase-API nutzen.

Die Firebase-API bietet verschiedene Methoden zum Lesen von Daten von einem Datenspeicherort. Im heutigen Tutorial konzentrieren wir uns auf die Verwendung der on()-Methode.

Die on()-Methode enthält mehrere Argumente, die es wert sind, untersucht zu werden. Wir werden jedoch nur die ersten beiden Argumente behandeln: eventType und callback. Lassen Sie uns beide überprüfen.

Auswählen eines eventType

Das Argument "eventType" hat mehrere Optionen. Schauen wir uns die einzelnen an, damit wir feststellen können, welche unseren Anforderungen entsprechen.

  • "value" - wird einmal ausgelöst und liest alle Kommentare. Jedes Mal, wenn sich Kommentare ändern, werden sie erneut ausgelöst und alle Kommentare gelesen.
  • "child_added" - wird einmal für jeden Kommentar sowie jedes Mal ausgelöst, wenn ein neuer Kommentar hinzugefügt wird.
  • "child_removed" - wird jedes Mal ausgelöst, wenn ein Kommentar entfernt wird.
  • "child_changed" - wird jedes Mal ausgelöst, wenn ein Kommentar geändert wird.
  • "child_moved" - wird jedes Mal ausgelöst, wenn die Reihenfolge eines Kommentars geändert wird.

Nachdem wir uns die obigen Optionen angesehen haben, scheint es ziemlich klar zu sein, dass wir "child_added" als unseren "eventType" verwenden sollten. Dieser gerade Typ wird einmal für jeden Kommentar an unserem Datenstandort sowie jedes Mal ausgelöst, wenn ein neuer Kommentar hinzugefügt wird. Wenn ein neuer Kommentar hinzugefügt wird, wird nicht der gesamte Satz von Kommentaren an dieser Stelle zurückgegeben, sondern nur das zuletzt hinzugefügte untergeordnete Element. Genau das wollen wir! Es ist nicht erforderlich, den gesamten Satz von Kommentaren zurückzugeben, wenn ein neuer Kommentar hinzugefügt wird.

callback analysieren

Der "callback" für die on()-Methode stellt ein Element bereit, das Firebase als "Snapshot of Data" bezeichnet und das mehrere Mitgliedsfunktionen hat. Der Schwerpunkt liegt heute auf name() und val().

Die Mitgliedsfunktion name() gibt uns den eindeutigen Namen des "Schnappschusses von Daten". Wenn Sie sich früher erinnern, haben wir die push()-Funktion verwendet, um einen neuen Kommentar in unseren Datenspeicherort zu schreiben. Beim Aufruf von push() wurde ein neuer untergeordneter Speicherort mit einem eindeutigen Namen generiert. Dieser Name wird über die Rückruffunktion name() zurückgegeben.

Die Mitgliedsfunktion val() liefert uns die JavaScript-Objektdarstellung des "Snapshots von Daten" und mit diesem Snapshot können wir einen Kommentar von unserem Datenspeicherort abrufen. Wir müssen uns jedoch für einen Moment zurückziehen.

Zu Beginn dieses Tutorials haben wir das JavaScript implementiert, das zum Verschieben von Kommentaren an unseren Firebase-Speicherort erforderlich ist. Dazu haben wir ein Objekt mit einem Schlüsselwertpaar verschoben. In diesem Fall war der Schlüssel "comment" und der Wert war die Eingabe, die der Benutzer eingegeben hat. Wenn wir also einen Kommentar aus unserem "Snapshot of Data" extrahieren möchten, müssen wir den richtigen Datentyp erkennen. In diesem Fall handelt es sich um ein Objekt, sodass Sie entweder die Punktnotation oder die Klammernotation verwenden können, um auf die angegebene Eigenschaft zuzugreifen.

Beide unten aufgeführten JavaScript-Snippets implementieren das oben Beschriebene:

Kommentare rendern

Als nächstes erstellen wir eine einfache und dennoch saubere Methode, um jeden Kommentar anzuzeigen. Dies kann leicht erreicht werden, indem jeder Kommentar in ein div eingeschlossen und jeder Kommentar mit seinem eindeutigen Namen gekennzeichnet wird. Normalerweise werden Kommentare mit dem Namen des Benutzers gekennzeichnet, der diesen Kommentar geschrieben hat. In unserem Fall handelt es sich um einen anonymen Chatroom-Client.

Der Code, der das implementiert, was ich oben beschrieben habe, lautet wie folgt:

Als nächstes müssen wir jeden Kommentar an den Container des Kommentars anhängen und die aktuelle vertikale Position der Container-Bildlaufleiste des Kommentars abrufen und zu dieser neuesten Position scrollen. Dadurch wird sichergestellt, dass allen Benutzern, die die Chat-Anwendung verwenden, jedes Mal, wenn ein Kommentar an Firebase gesendet wird, der neueste Kommentar angezeigt wird. All dies muss innerhalb des Rückrufs erfolgen.

Es sollte ungefähr so aussehen:

Wenden wir nun einige einfache CSS-Stile auf die DIVs an, die um jeden Kommentarblock gewickelt sind. Dadurch wird das Erscheinungsbild etwas attraktiver und benutzerfreundlicher. Diese Stile sollten innerhalb der Stil-Tags hinzugefügt werden, die sich im head-Bereich des HTML befinden.

Der Code, der das implementiert, was ich oben beschrieben habe, lautet wie folgt:

Ausführen der Anwendung

Es ist jetzt Zeit, unsere Anwendung auszuführen. Beginnen wir damit, zwei Instanzen unseres bevorzugten, modernen Browsers zu öffnen und nebeneinander auf unserem Desktop zu platzieren. Als Nächstes navigieren wir in beiden Browsern zum Speicherort unserer von uns erstellten Datei. Testen Sie es, indem Sie ein paar Kommentare schreiben und genießen Sie die Magie von Firebase.

Es ist unglaublich, dass nur ein paar Codezeilen eine so leistungsstarke Anwendung erzeugen können. Sie können dieses Snippet jederzeit bearbeiten, um die gewünschten Ergebnisse zu erzielen.

Schauen Sie sich die Online-Demo an, um sie in Aktion zu sehen. Unten finden Sie den vollständigen Quellcode für die gesamte Chatroom-Anwendung:

Zusammenfassung 

Im heutigen Tutorial haben wir den gesamten Prozess der Implementierung einer einfachen Chatroom-Anwendung mithilfe der JavaScript-API von Firebase durchgearbeitet. Auf diese Weise konnten wir die Leistungsfähigkeit von Firebase erfahren und eine Anerkennung für seine Bequemlichkeit gewinnen. Im Folgenden sind einige der wichtigsten Punkte aufgeführt, auf die wir heute gestoßen sind:

  • Verweisen auf einen Firebase-Datenspeicherort durch Initialisieren eines Firebase-Konstruktors.
  • Schreiben von Daten in Firebase mithilfe der push-Methode.
  • Lesen von Daten aus Firebase mithilfe der on-Methode mit dem Ereignistyp "child_added".

Ich hoffe, dieses Tutorial hat Ihnen den Ausgangspunkt gegeben, den Sie benötigen, um mit Firebase weiter voranzukommen. Wenn Sie Fragen oder Kommentare haben, können Sie diese gerne unten hinterlassen. Nochmals vielen Dank für Ihre Zeit und erkunden Sie die unendlichen Möglichkeiten der Firebase-API.

Ressourcen

Advertisement
Advertisement
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.