Share
Firebase är en bra teknik som gör det möjligt för oss att skapa webbapps utan serverprogrammering, så att utvecklingen blir snabbare och enklare. I den här artikeln ska jag visa hur du använder det tillsammans med AngularJS för att uppnå bästa möjliga utvecklare och användarupplevelse.
Vad är så bra med att använda Firebase med AngularJS? Tja, om du tittar på hur båda teknikerna är gjorda, finns det ditt svar. Tvåriktad databindning från AngularJS fungerar exceptionellt bra med Firebase's "Spara inte bara data. Synkronisera den." filosofi.
Utvecklingen är snabb, och användarupplevelsen är bra. De skriver bara något och det är redan sparat och tillgängligt för de andra anslutna användarna.
Låt oss börja med att skapa en databas. Om du inte har ett konto ännu, skapa ett (du kan logga in med GitHub!). Logga sedan in och skapa en app genom att fylla i formuläret och klicka på knappen.
Eftersom vi kommer att använda Facebook-inloggning längre ner på vägen måste du tillhandahålla dina Facebook-appens uppgifter (det vill säga app-id och apphemligheten) i dina databasalternativ. Klicka på "Hantera" -knappen under ditt Firebase-appnamn och gå till fliken "Enkel inloggning", ange sedan den begärda informationen och kolla "Enabled".
Du måste också konfigurera din Facebook-app för att få den att fungera. Hela processen är ganska snabb och beskrivs på Firebase hemsida.
Låt oss börja med att skapa en bashtml och JavaScript för vår app. Vi kommer att skapa en enkel chattprogram som tillåter användare att logga in med Facebook.
Skapa en HTML-fil och sätt in den här markeringen inuti:
message.author: meddelandetext
Som du kan se innehåller den några skript som vi behöver. Naturligtvis ingår det firebase.js och angular.js, och vi behöver också Firebase-simple-login.js för Facebook-autentisering. angularfire.min.js innehåller AngularFire-modulen, vilket förenklar arbetet med Firebase.
Skapa nu angular.app.js fil, där vi lägger vår applikationslogik. Låt oss börja med att deklarera huvudmodulen, simpleChat:
Accentsconagua
var app = angular.module ('simpleChat', ['firebase']);Som du kan se är det enda beroendet det Firebase modul från AngularFire.
Låt oss nu skapa koden som tillåter användare att logga in med Facebook. Eftersom vår app är så liten kommer vi bara ha en kontroller där inne: MessagesCtrl.
app.controller ('MessagesCtrl', ["$ scope", "$ firebase", funktion ($ scope, $ firebase) De $ Firebase funktionen tillåter oss att ansluta till Firebase databasen, och $ firebaseSimpleLogin kommer att hantera inloggningsalternativen.
Vi behöver en Firebase exempel, så låt oss skapa det:
var ref = ny Firebase ("https://tutssampleapp.firebaseio.com/");Naturligtvis ersätta 'Din unika-url' med din databas URL. Förbered nu inloggningsobjektet med $ firebaseSimpleLogin och den ref vi har just skapat:
$ scope.login = function () ref.authWithOAuthPopup ("facebook", funktion (fel, authData) ); Och det är ganska mycket för att få inloggningsstatusen. Om användaren är inloggad, $ scope.loginObj.user variabeln kommer att innehålla ett objekt med användarens data; annars kommer det att bli null.
Lägg nu till en Vi använde Den enda parametern vi använde är namnet på den leverantör som användes för att logga in användaren. Du kan testa din app nu och inloggningsknappen ska försvinna när du loggar in. Som du kan förvänta dig, kommer det också att bli ganska enkelt. Först låt oss förbereda HTML. Vi kommer använda Nu måste vi uppdatera regulatorn. Skapa De Vi lägger Och det är allt du behöver för att visa meddelandena! Självklart, om du inte har lagt något i Den här kommer att bli ännu snabbare. Låt oss lägga till en ingång till vår controller Ingångens värde kommer att vara bunden till Låt oss definiera Först kontrollerar vi om Enter-tangenten trycks in: Om så är fallet lägger vi till användarens visningsnamn i Du måste också initiera Det är det - ppen din app i två webbläsare (så att du kan använda två Facebook-konton) och prova det! Vänligen lämna några frågor, kommentarer och allmän feedback i formuläret nedan som vanligt.ngHide direktiv för att dölja knappen när användaren är inloggad. Nu $ Scope.login () Metoden kommer bara att ringa en metod med samma namn på $ scope.loginObj:$ scope.login = function () ref.authWithOAuthPopup ("facebook", funktion (fel, authData) ); Steg 4: Visa meddelandena
ngRepeat att slinga igenom alla meddelanden och visa dem:obj variabel som håller objektet tillbaka från Firebase:var obj = $ firebase (ref). $ asObject ();
$ AsObject () Metoden omvandlar hela referensen till ett Javascript-objekt med några användbara metoder. Den vi ska använda heter .$ BindTo () och tillåter oss att skapa en trevägsbindning (Firebase-AngularJS-DOM):obj. $ bindTo ($ scope, "data");
$ omfattning som den första parametern, och en egenskaps namn som den andra. Objektet vi är bindande kommer att visas i $ omfattning under detta namn (som $ scope.data i detta exempel).meddelanden array i din databas ser du ingenting om du kör din app nu.Steg 5: Skicka meddelanden
div, så att våra användare kan skriva in meddelanden:$ scope.newMessage.text variabel och dess keyUp händelse kommer att avfyra $ Scope.handleKeyup () ring tillbaka. Observera att vi passerade $ event som parameter, eftersom vi måste kontrollera om användaren tryckte på Enter.$ Scope.handleKeyup () fungera:$ scope.handleKeyup = funktionshandtagKeyup (e)
om (e.keyCode == 13)
$ scope.newMessage objekt, uppdatera $ scope.data.messages array och nollställa $ scope.newMessage objekt:$ scope.newMessage.author = ref.getAuth (). facebook.displayName; ref.child ( "meddelanden") tryck ($ scope.newMessage). $ scope.newMessage = ;
$ scope.newMessage objekt:$ scope.newMessage = ;
