Share
Firebase is een geweldige technologie waarmee we web-apps kunnen maken zonder server-side programmering, zodat de ontwikkeling sneller en eenvoudiger wordt. In dit artikel laat ik je zien hoe je het samen met AngularJS kunt gebruiken om de best mogelijke ontwikkelaar en gebruikerservaring te bereiken.
Wat is er zo geweldig aan het gebruik van Firebase met AngularJS? Nou, als je kijkt naar hoe beide technologieën zijn gemaakt, is er jouw antwoord. Bidirectionele databinding van AngularJS werkt uitzonderlijk goed met Firebase's "Sla niet alleen gegevens op." Synchroniseer het ook. filosofie.
De ontwikkeling gaat snel en de gebruikerservaring is geweldig: ze typen gewoon iets en het is al opgeslagen en beschikbaar voor de andere verbonden gebruikers.
Laten we beginnen met het maken van een database. Als je nog geen account hebt, maak er dan een aan (je kunt inloggen met GitHub!). Log dan in en maak een app door het formulier in te vullen en op de knop te klikken.
Aangezien we verderop een Facebook-login gebruiken, moet u de gegevens van uw Facebook-app (dat wil zeggen de app-ID en het app-geheim) opgeven in de opties van uw database. Klik op de knop 'Beheren' onder uw Firebase-appnaam en ga naar het tabblad 'Eenvoudige aanmelding'. Voer vervolgens de gevraagde informatie in en vink 'Ingeschakeld' aan.
Je zult ook je Facebook-app moeten configureren om het te laten werken. Het hele proces verloopt snel en wordt beschreven op de Firebase-website.
Laten we beginnen met het maken van een basis-HTML en JavaScript voor onze app. We zullen een eenvoudige chattoepassing maken waarmee gebruikers kunnen inloggen met Facebook.
Maak een HTML-bestand en plaats deze op:
message.author: bericht tekst
Zoals je ziet, bevat het een paar scripts die we nodig hebben. Natuurlijk omvat het firebase.js en angularjs, en we hebben ook nodig firebase-simple-login.js voor de Facebook-authenticatie. angularfire.min.js bevat de AngularFire-module, die het werken met Firebase aanzienlijk vereenvoudigt.
Maak nu het angular.app.js bestand, waarin we onze toepassingslogica zullen plaatsen. Laten we beginnen met het declareren van de hoofdmodule, simpleChat:
Accentsconagua
var app = angular.module ('simpleChat', ['firebase']);Zoals u kunt zien, is de enige afhankelijkheid de firebase module van AngularFire.
Laten we nu de code maken waarmee gebruikers kunnen inloggen met Facebook. Omdat onze app zo klein is, hebben we er maar één controller in: MessagesCtrl.
app.controller ('MessagesCtrl', ["$ scope", "$ firebase", function ($ scope, $ firebase) De $ firebase functie stelt ons in staat om verbinding te maken met de Firebase-database, en $ firebaseSimpleLogin zal de login dingen beheren.
We zullen een Firebase bijvoorbeeld, dus laten we het maken:
var ref = new Firebase ("https://tutssampleapp.firebaseio.com/);Natuurlijk vervangen 'Your-unieke-url' met de URL van uw database. Bereid nu het login-object voor met behulp van $ firebaseSimpleLogin en de ref we hebben zojuist gemaakt:
$ scope.login = function () ref.authWithOAuthPopup ("facebook", functie (error, authData) ); En dat is zo ongeveer het verkrijgen van de login-status. Als de gebruiker is aangemeld, de $ scope.loginObj.user variabele bevat een object met de gegevens van de gebruiker; anders zal het zijn nul.
Voeg nu een toe We gebruikten de De enige parameter die we hebben gebruikt, is de naam van de provider waarmee de gebruiker is aangemeld. U kunt uw app nu testen en de aanmeldknop moet verdwijnen wanneer u zich aanmeldt. Zoals je mag verwachten, zal dit ook vrij eenvoudig zijn. Laten we eerst de HTML voorbereiden. We zullen gebruiken Nu moeten we de controller updaten. Maak het De We zetten En dat is alles wat u nodig hebt om de berichten weer te geven! Natuurlijk, tenzij je iets hebt geplaatst in de Deze zal nog sneller zijn. Laten we een input toevoegen aan onze controller's De waarde van de invoer zal worden gebonden aan de Laten we het definiëren Eerst controleren we of de Enter-toets is ingedrukt: Als dit het geval is, voegen we de weergavenaam van de gebruiker toe aan de U moet ook het Dat is het - ppen uw app in twee browsers (zodat u twee Facebook-accounts kunt gebruiken) en probeer het uit! Zoals gebruikelijk, laat eventuele vragen, opmerkingen en algemene feedback achter op het onderstaande formulier.ngHide richtlijn om de knop te verbergen wanneer de gebruiker is aangemeld. Nu de $ Scope.login () methode zal gewoon een methode met dezelfde naam op de $ scope.loginObj:$ scope.login = function () ref.authWithOAuthPopup ("facebook", functie (error, authData) ); Stap 4: de berichten weergeven
ngRepeat om alle berichten door te lussen en ze weer te geven:obj variabele die het object dat wordt geretourneerd van Firebase houdt:var obj = $ firebase (ref). $ asObject ();
$ AsObject () methode converteert de hele verwijzing naar een Javascript-object met een paar bruikbare methoden. Degene die we zullen gebruiken, wordt genoemd .$ BindTo () en stelt ons in staat om een driewegbinding te maken (Firebase-AngularJS-DOM):obj. $ bindTo ($ scope, "data");
$ scope als de eerste parameter en de naam van een eigenschap als de tweede. Het object dat we binden, verschijnt in $ scope onder deze naam (als $ scope.data in dit voorbeeld).berichten array in uw database, u zult niets zien als u uw app nu uitvoert.Stap 5: Berichten verzenden
div, zodat onze gebruikers berichten kunnen typen:$ scope.newMessage.text variabele en zijn keyup evenement zal de $ Scope.handleKeyup () Bel terug. Merk op dat we geslaagd zijn $ event als de parameter, omdat we moeten controleren of de gebruiker op Enter heeft gedrukt.$ Scope.handleKeyup () functie:$ scope.handleKeyup = function handleKeyup (e)
if (e.keyCode == 13)
$ scope.newMessage object, werk het $ scope.data.messages array en reset de $ scope.newMessage voorwerp:$ scope.newMessage.author = ref.getAuth (). facebook.displayName; ref.child ( "berichten") push ($ scope.newMessage).; $ scope.newMessage = ;
$ scope.newMessage voorwerp:$ scope.newMessage = ;
