Share
Firebase er en flott teknologi som gjør at vi kan lage webapper uten server-side programmering, slik at utviklingen blir raskere og enklere. I denne artikkelen vil jeg vise deg hvordan du bruker den sammen med AngularJS for å oppnå den beste utvikleren og brukeropplevelsen mulig.
Hva er så bra med å bruke Firebase med AngularJS? Vel, hvis du ser på hvordan begge teknologiene er laget, er det ditt svar. Toveisbinding fra AngularJS fungerer svært bra med Firebase's "Ikke bare lagre data. Synkroniser det." filosofi.
Utviklingen er rask, og brukeropplevelsen er flott. De skriver bare noe, og den er allerede lagret og tilgjengelig for de andre tilkoblede brukerne.
La oss begynne med å opprette en database. Hvis du ikke har en konto enda, opprett en (du kan logge inn med GitHub!). Deretter logger du inn og lager en app ved å fylle ut skjemaet og klikke på knappen.
Siden vi skal bruke en Facebook-innlogging lenger nede i veien, må du gi informasjon om din Facebook-app (det vil si app-ID og app-hemmelig) i databasens alternativer. Klikk på "Administrer" -knappen under Firebase-appenavnet ditt, og gå til fanen "Enkel pålogging", og skriv deretter inn den forespurte informasjonen og sjekk "Aktivert".
Du må også konfigurere Facebook-appen din for å få den til å fungere. Hele prosessen er ganske rask og er beskrevet på Firebase nettsted.
La oss starte med å opprette en base HTML og JavaScript for appen vår. Vi vil skape et enkelt chatprogram som lar brukere logge inn med Facebook.
Opprett en HTML-fil og legg inn denne merkingen inni:
message.author: message.text
Som du kan se, inneholder den noen få skript som vi trenger. Selvfølgelig inkluderer den firebase.js og angular.js, og vi trenger også Fire-enkel-login.js for Facebook-godkjenning. angularfire.min.js inneholder AngularFire-modulen, som forenkler arbeidet med Firebase sterkt.
Opprett nå angular.app.js fil, der vi legger vår programlogikk. La oss begynne med å erklære hovedmodulen, simpleChat:
Accentsconagua
var app = angular.module ('simpleChat', ['firebase']);Som du kan se er den eneste avhengigheten den Fire modul fra AngularFire.
La oss nå lage koden som tillater brukere å logge inn med Facebook. Siden vår app er så liten, vil vi bare ha en kontroller der inne: MessagesCtrl.
app.controller ('MessagesCtrl', ["$ scope", "$ firebase", funksjon ($ scope, $ firebase) De $ Fire funksjonen tillater oss å koble til Firebase-databasen, og $ firebaseSimpleLogin vil administrere påloggingsspørsmålene.
Vi trenger en Fire eksempel, så la oss lage det:
var ref = ny Firebase ("https://tutssampleapp.firebaseio.com/");Selvfølgelig erstatte 'Din-unike-url' med databasens URL. Forbered nå innloggingsobjektet med $ firebaseSimpleLogin og ref vi nettopp opprettet:
$ scope.login = function () ref.authWithOAuthPopup ("facebook", funksjon (feil, authData) ); Og det er ganske mye for å få innloggingsstatusen. Hvis brukeren er logget inn, vil $ scope.loginObj.user variabel vil inneholde et objekt med brukerens data; ellers vil det være null.
Legg nå til en Vi brukte Den eneste parameteren vi brukte er navnet på leverandøren som ble brukt til å logge brukeren inn. Du kan teste appen din nå, og innloggingsknappen skal forsvinne når du logger på. Som du kanskje regner med, vil dette også være ganske enkelt. Først la oss forberede HTML-en. Vi vil bruke Nå må vi oppdatere kontrolleren. Opprett De Vi putter Og det er alt du trenger for å vise meldingene! Selvfølgelig, med mindre du har satt noe i Denne blir enda raskere. La oss legge til et innspill til kontrolleren vår Inngangsverdien vil være bundet til La oss definere Først kontrollerer vi om Enter-tasten ble trykket: I så fall legger vi til brukerens visningsnavn til Du må også initialisere Det er det - ppen din app i to nettlesere (slik at du kan bruke to Facebook-kontoer) og prøve det! Som vanlig, vennligst legg inn eventuelle spørsmål, kommentarer og generell tilbakemelding i skjemaet under.ngHide direktiv for å skjule knappen når brukeren er logget inn. Nå $ Scope.login () Metode vil bare kalle en metode med samme navn på $ scope.loginObj:$ scope.login = function () ref.authWithOAuthPopup ("facebook", funksjon (feil, authData) ); Trinn 4: Viser meldingene
ngRepeat å sløyfe gjennom alle meldinger og vise dem:obj variabel som vil holde objektet returnert fra Firebase:var obj = $ firebase (ref). $ asObject ();
$ AsObject () Metode konverterer hele referansen til et Javascript-objekt med noen nyttige metoder. Den vi skal bruke, kalles .$ BindTo () og vil tillate oss å lage en treveisbinding (Firebase-AngularJS-DOM):obj. $ bindTo ($ omfang, "data");
$ omfang som den første parameteren, og en egenskaps navn som det andre. Objektet vi er bindende vil vises i $ omfang under dette navnet (som $ scope.data i dette eksemplet).meldinger array i databasen din, vil du ikke se noe hvis du kjører appen din nå.Trinn 5: Sende meldinger
div, slik at våre brukere kan skrive inn meldinger:$ scope.newMessage.text variabel og dens keyup hendelsen vil brenne $ Scope.handleKeyup () Ring tilbake. Legg merke til at vi passerte $ event som parameter, siden vi må sjekke om brukeren trykker på Enter.$ Scope.handleKeyup () funksjon:$ scope.handleKeyup = funksjonshåndtakKeyup (e)
hvis (e.keyCode == 13)
$ scope.newMessage objekt, oppdater $ scope.data.messages array, og tilbakestill $ scope.newMessage gjenstand:$ scope.newMessage.author = ref.getAuth (). facebook.displayName; ref.child ( "meldinger") presse ($ scope.newMessage.); $ scope.newMessage = ;
$ scope.newMessage gjenstand:$ scope.newMessage = ;
