Share
Firebase ist eine großartige Technologie, mit der wir Web-Apps ohne serverseitige Programmierung erstellen können, sodass die Entwicklung schneller und einfacher wird. In diesem Artikel werde ich Ihnen zeigen, wie Sie es zusammen mit AngularJS verwenden, um die bestmögliche Entwickler- und Benutzererfahrung zu erzielen.
Was ist so großartig an Firebase mit AngularJS? Nun, wenn Sie sehen, wie beide Technologien hergestellt werden, gibt es Ihre Antwort. Die bidirektionale Datenbindung von AngularJS funktioniert hervorragend mit Firebases "Daten nicht nur speichern, sondern synchronisieren." Philosophie.
Die Entwicklung ist schnell und die Benutzererfahrung ist großartig - sie geben einfach etwas ein und sind bereits gespeichert und für die anderen verbundenen Benutzer verfügbar.
Beginnen wir mit dem Erstellen einer Datenbank. Wenn Sie noch keinen Account haben, erstellen Sie einen (Sie können sich mit GitHub anmelden!). Melden Sie sich dann an und erstellen Sie eine App, indem Sie das Formular ausfüllen und auf die Schaltfläche klicken.
Da wir später ein Facebook-Login verwenden, müssen Sie die Details Ihrer Facebook-App (d. H. Die App-ID und das App-Geheimnis) in den Optionen Ihrer Datenbank angeben. Klicken Sie unter Ihrem Firebase-App-Namen auf die Schaltfläche "Verwalten". Gehen Sie zur Registerkarte "Einfache Anmeldung", geben Sie die erforderlichen Informationen ein und aktivieren Sie "Aktiviert"..
Sie müssen außerdem Ihre Facebook-App konfigurieren, damit sie funktioniert. Der gesamte Prozess ist ziemlich schnell und wird auf der Firebase-Website beschrieben.
Beginnen wir mit der Erstellung eines Basis-HTML- und JavaScript-Codes für unsere App. Wir erstellen eine einfache Chat-Anwendung, mit der sich Benutzer über Facebook anmelden können.
Erstellen Sie eine HTML-Datei und fügen Sie diese Markierung ein:
message.author: Nachrichtentext
Wie Sie sehen, enthält es ein paar Skripte, die wir brauchen. Natürlich gehört dazu firebase.js und eckig.js, und wir brauchen auch firebase-simple-login.js für die Facebook-Authentifizierung. anglefire.min.js enthält das AngularFire-Modul, das die Arbeit mit Firebase erheblich vereinfacht.
Nun erstellen Sie die eckig.app.js Datei, in der wir unsere Anwendungslogik ablegen werden. Beginnen wir mit der Deklaration des Hauptmoduls, simpleChat:
Accentsconagua
var app = angle.module ('simpleChat', ['firebase']);Wie Sie sehen, ist die einzige Abhängigkeit die Feuerbasis Modul von AngularFire.
Lassen Sie uns nun den Code erstellen, mit dem sich Benutzer bei Facebook anmelden können. Da unsere App so klein ist, haben wir dort nur einen Controller: MessagesCtrl.
app.controller ('MessagesCtrl', ["$ scope", "$ firebase"), Funktion ($ scope, $ firebase) Das $ firebase Mit dieser Funktion können wir eine Verbindung zur Firebase-Datenbank herstellen, und $ firebaseSimpleLogin wird das Login-Zeug verwalten.
Wir werden eine brauchen Firebase So lassen Sie uns es erstellen:
var ref = new Firebase ("https://tutssampleapp.firebaseio.com/");Natürlich ersetzen "Ihre-eindeutige-URL" mit der URL Ihrer Datenbank. Bereiten Sie nun das Login-Objekt mit vor $ firebaseSimpleLogin und das ref wir haben gerade erstellt:
$ scope.login = function () ref.authWithOAuthPopup ("facebook", Funktion (Fehler, authData) ); Und das ist so ziemlich alles, um den Login-Status zu bekommen. Wenn der Benutzer angemeldet ist, wird die $ scope.loginObj.user Variable enthält ein Objekt mit den Daten des Benutzers; sonst wird es sein Null.
Fügen Sie jetzt eine Wir haben das benutzt Der einzige Parameter, den wir verwendet haben, ist der Name des Anbieters, mit dem der Benutzer angemeldet wird. Sie können Ihre App jetzt testen und die Anmeldeschaltfläche sollte beim Anmelden ausgeblendet werden. Wie zu erwarten, wird dies auch ziemlich einfach sein. Zuerst bereiten wir das HTML vor. Wir werden verwenden Jetzt müssen wir den Controller aktualisieren. Erstellen Sie die Das Wir stellen Und das ist alles was Sie brauchen, um die Meldungen anzuzeigen! Natürlich, es sei denn, Sie haben etwas in die Dieser wird noch schneller sein. Fügen wir unseren Controllern einen Eingang hinzu Der Wert der Eingabe wird an das gebunden Definieren wir das Zuerst prüfen wir, ob die Eingabetaste gedrückt wurde: In diesem Fall fügen wir den Anzeigenamen des Benutzers zum hinzu Sie müssen auch das initialisieren Das ist es - öffnen Sie Ihre App in zwei Browsern (damit Sie zwei Facebook-Konten verwenden können) und probieren Sie es aus! Bitte hinterlassen Sie wie üblich Fragen, Kommentare und allgemeines Feedback im untenstehenden Formular.ngHide Anweisung zum Ausblenden der Schaltfläche, wenn der Benutzer angemeldet ist $ scope.login () Die Methode ruft einfach eine Methode mit dem gleichen Namen auf $ scope.loginObj:$ scope.login = function () ref.authWithOAuthPopup ("facebook", Funktion (Fehler, authData) ); Schritt 4: Anzeigen der Meldungen
ngRepeat alle Nachrichten durchlaufen und anzeigen:obj Variable, die das von Firebase zurückgegebene Objekt enthält:var obj = $ firebase (ref). $ asObject ();
$ asObject () Diese Methode konvertiert die gesamte Referenz mit einigen nützlichen Methoden in ein Javascript-Objekt. Die, die wir verwenden werden, heißt .$ bindTo () und ermöglichen uns die Erstellung einer Dreiwege-Bindung (Firebase-AngularJS-DOM):obj. $ bindTo ($ scope, "data");
$ scope als erster Parameter und den Namen einer Eigenschaft als zweiten. Das verbindliche Objekt wird in angezeigt $ scope unter diesem Namen (als $ scope.data in diesem Beispiel).Mitteilungen Array in Ihrer Datenbank, werden Sie nichts sehen, wenn Sie Ihre App jetzt ausführen.Schritt 5: Nachrichten senden
div, damit unsere Benutzer Nachrichten eingeben können:$ scope.newMessage.text Variable und ihre keyup Ereignis wird die feuern $ scope.handleKeyup () Ruf zurück. Beachten Sie, dass wir bestanden haben $ event als Parameter, da wir prüfen müssen, ob der Benutzer die Eingabetaste gedrückt hat.$ scope.handleKeyup () Funktion:$ scope.handleKeyup = Funktion handleKeyup (e)
if (e.keyCode == 13)
$ scope.newMessage Objekt, aktualisieren Sie die $ scope.data.messages Array und setzen Sie das zurück $ scope.newMessage Objekt:$ scope.newMessage.author = ref.getAuth (). facebook.displayName; ref.child ("messages"). push ($ scope.newMessage); $ scope.newMessage = ;$ scope.newMessage Objekt:$ scope.newMessage = ;
