Share
Firebase è una grande tecnologia che ci consente di creare applicazioni web senza alcuna programmazione lato server, in modo che lo sviluppo diventi più rapido e semplice. In questo articolo ti mostrerò come utilizzarlo insieme ad AngularJS per ottenere la migliore esperienza utente e sviluppatore possibile.
Cosa c'è di così bello nell'usare Firebase con AngularJS? Bene, se guardi come sono fatte entrambe le tecnologie, c'è la tua risposta. L'associazione bidirezionale dei dati di AngularJS funziona eccezionalmente bene con "Non salvare solo i dati di Firebase". filosofia.
Lo sviluppo è rapido e l'esperienza utente è ottima: digita semplicemente qualcosa ed è già salvata e disponibile per gli altri utenti connessi.
Iniziamo creando un database. Se non hai ancora un account, creane uno (puoi accedere con GitHub!). Quindi accedi e crea un'app compilando il modulo e facendo clic sul pulsante.
Dal momento che utilizzeremo un accesso di Facebook più avanti, dovrai fornire i dettagli della tua app di Facebook (ovvero l'ID app e il segreto dell'app) nelle opzioni del tuo database. Fai clic sul pulsante "Gestisci" sotto il nome della tua app Firebase e vai alla scheda "Login semplice", quindi inserisci le informazioni richieste e seleziona "Abilitato".
Dovrai anche configurare la tua app di Facebook per farlo funzionare. L'intero processo è piuttosto veloce ed è descritto sul sito web di Firebase.
Iniziamo creando una base HTML e JavaScript per la nostra app. Creeremo una semplice applicazione di chat che consentirà agli utenti di accedere utilizzando Facebook.
Crea un file HTML e inserisci questo codice all'interno:
messaggio.autore: messaggio di testo
Come puoi vedere, contiene alcuni script di cui abbiamo bisogno. Ovviamente include firebase.js e angular.js, e abbiamo anche bisogno Firebase-semplici-login.js per l'autenticazione di Facebook. angularfire.min.js contiene il modulo AngularFire, che semplifica enormemente il lavoro con Firebase.
Ora crea il angular.app.js file, in cui metteremo la nostra logica applicativa. Iniziamo dichiarando il modulo principale, simpleChat:
Accentsconagua
var app = angular.module ('simpleChat', ['firebase']);Come puoi vedere, l'unica dipendenza è la Firebase modulo da AngularFire.
Ora creiamo il codice che consentirà agli utenti di accedere con Facebook. Poiché la nostra app è così piccola, avremo solo un controller in là: MessagesCtrl.
app.controller ('MessagesCtrl', ["$ scope", "$ firebase", function ($ scope, $ firebase) Il $ Firebase funzione ci permetterà di connetterci al database Firebase, e $ firebaseSimpleLogin gestirà le cose di login.
Avremo bisogno di un Firebase esempio, quindi creiamolo:
var ref = new Firebase ("https://tutssampleapp.firebaseio.com/");Ovviamente sostituire 'Your-unico-url' con l'URL del tuo database. Ora prepara l'oggetto di accesso usando $ firebaseSimpleLogin e il arbitro abbiamo appena creato:
$ scope.login = function () ref.authWithOAuthPopup ("facebook", function (error, authData) ); E questo è più o meno per ottenere lo stato di accesso. Se l'utente è loggato, il $ scope.loginObj.user la variabile conterrà un oggetto con i dati dell'utente; altrimenti, lo sarà nullo.
Ora aggiungi un Abbiamo usato il L'unico parametro che abbiamo utilizzato è il nome del provider utilizzato per registrare l'utente. Puoi testare l'app ora e il pulsante di accesso dovrebbe scomparire quando accedi. Come ci si potrebbe aspettare, anche questo sarà abbastanza facile. Per prima cosa prepariamo l'HTML. Noi useremo Ora dobbiamo aggiornare il controller. Crea il Il Abbiamo messo E questo è tutto ciò che serve per visualizzare i messaggi! Certo, a meno che tu non abbia messo qualcosa nel Questo sarà ancora più veloce. Aggiungiamo un input al nostro controller Il valore dell'input sarà associato a Definiamo il Per prima cosa, controlliamo se è stato premuto il tasto Invio: In tal caso, aggiungiamo il nome visualizzato dell'utente al file Devi anche inizializzare il Ecco fatto: apri la tua app in due browser (in modo da poter utilizzare due account Facebook) e provalo! Come al solito, si prega di lasciare qualsiasi domanda, commento e feedback generale nel modulo sottostante.ngHide direttiva per nascondere il pulsante quando l'utente ha effettuato il login. Ora il $ Scope.login () metodo chiamerà semplicemente un metodo con lo stesso nome sul $ scope.loginObj:$ scope.login = function () ref.authWithOAuthPopup ("facebook", function (error, authData) ); Passaggio 4: visualizzazione dei messaggi
ngRepeat per scorrere tutti i messaggi e visualizzarli:obj variabile che manterrà l'oggetto restituito da Firebase:var obj = $ firebase (ref). $ asObject ();
$ Asobject () metodo converte l'intero riferimento in un oggetto Javascript con alcuni metodi utili. Viene chiamato quello che useremo .$ BindTo () e ci permetterà di creare un legame a tre vie (Firebase-AngularJS-DOM):obj. $ bindTo ($ scope, "data");
$ portata come primo parametro e il nome di una proprietà come secondo. Apparirà l'oggetto che stiamo vincolando $ portata sotto questo nome (come $ scope.data in questo esempio).messaggi array nel tuo database, non vedrai nulla se esegui la tua app ora.Passaggio 5: invio di messaggi
div, in modo che i nostri utenti possano digitare messaggi:$ scope.newMessage.text variabile, e il suo keyup l'evento licenzierà il $ Scope.handleKeyup () richiama. Nota che siamo passati $ evento come parametro, dal momento che dobbiamo verificare se l'utente ha premuto Invio.$ Scope.handleKeyup () funzione:$ scope.handleKeyup = function handleKeyup (e)
if (e.keyCode == 13)
$ scope.newMessage oggetto, aggiorna il $ scope.data.messages array e resettare il $ scope.newMessage oggetto:$ scope.newMessage.author = ref.getAuth (). facebook.displayName; ref.child ( "messaggi") spingere ($ scope.newMessage).; $ scope.newMessage = ;
$ scope.newMessage oggetto:$ scope.newMessage = ;
