Share
Firebase este o tehnologie excelentă care ne permite să creăm aplicații web fără nici o programare de la server, astfel încât dezvoltarea să devină mai rapidă și mai ușoară. În acest articol vă voi arăta cum să-l utilizați împreună cu AngularJS pentru a obține cel mai bun dezvoltator și experiența utilizatorului posibil.
Ce este atât de grozav în utilizarea Firebase cu AngularJS? Ei bine, dacă te uiți la modul în care sunt făcute ambele tehnologii, e răspunsul tău. Datele bidirecționale care se leagă de AngularJS funcționează excepțional de bine cu Firebase "Nu salvați doar datele. Sincronizați-l". filozofie.
Dezvoltarea este rapidă, iar experiența utilizatorului este excelentă - ei doar introduc ceva și sunt deja salvați și disponibili celorlalți utilizatori conectați.
Să începem prin crearea unei baze de date. Dacă încă nu aveți un cont, creați unul (vă puteți conecta cu GitHub!). Apoi conectați-vă și creați o aplicație completând formularul și făcând clic pe buton.
Deoarece vom folosi o autentificare Facebook mai departe pe drum, va trebui să furnizați detaliile aplicației dvs. Facebook (adică ID-ul aplicației și secretul aplicației) în opțiunile bazei dvs. de date. Faceți clic pe butonul "Gestionați" sub numele aplicației dvs. Firebase și mergeți la fila "Simplu autentificare", apoi introduceți informațiile solicitate și bifați opțiunea "Activat".
Va trebui, de asemenea, să vă configurați aplicația Facebook pentru ca aceasta să funcționeze. Întregul proces este destul de rapid și este descris pe site-ul Firebase.
Să începem prin crearea unei baze HTML și JavaScript pentru aplicația noastră. Vom crea o aplicație simplă de chat, care va permite utilizatorilor să se conecteze folosind Facebook.
Creați un fișier HTML și puneți acest marcaj în interiorul:
message.author: mesaj text
După cum puteți vedea, acesta conține câteva scripturi de care avem nevoie. Bineînțeles că include firebase.js și angular.js, și avem nevoie, de asemenea firebase-simplu-login.js pentru autentificarea pe Facebook. angularfire.min.js conține modulul AngularFire, care simplifică foarte mult lucrul cu Firebase.
Acum creați angular.app.js fișier, în care vom pune logica noastră de aplicare. Să începem prin declararea modulului principal, simpleChat:
Accentsconagua
var app = angular.module ("simpleChat", ['firebase']);După cum puteți vedea, singura dependență este firebase modul de la AngularFire.
Acum, să creăm codul care va permite utilizatorilor să se conecteze la Facebook. Întrucât aplicația noastră este atât de mică, vom avea doar un singur controlor: MessagesCtrl.
app.controller ('MessagesCtrl', ["$ scope", "$ firebase", functie ($ scope, $ firebase) $ firebase ne va permite să ne conectăm la baza de date Firebase și $ firebaseSimpleLogin va gestiona chestiile de conectare.
Vom avea nevoie de a Firebase de exemplu, să o creăm:
var ref = noua Firebase ("https://tutssampleapp.firebaseio.com/");Desigur, înlocuiți-vă 'Ta-unica-url' cu adresa URL a bazei dvs. de date. Acum, pregătiți obiectul de conectare folosind $ firebaseSimpleLogin si ref tocmai am creat:
$ scope.login = function () ref.authWithOAuthPopup (funcția "facebook", eroare, authData) );
Și asta este destul de mult pentru obținerea statutului de conectare. În cazul în care utilizatorul este conectat, $ scope.loginObj.user variabila va conține un obiect cu datele utilizatorului; altfel, va fi nul.
Acum adaugati a Am folosit Singurul parametru pe care l-am utilizat este numele furnizorului folosit pentru a vă conecta utilizatorul. Puteți testa acum aplicația dvs., iar butonul de conectare ar trebui să dispară atunci când vă conectați. Așa cum vă puteți aștepta, acest lucru va fi, de asemenea, destul de ușor. Mai întâi să pregătim HTML. Noi vom folosi Acum trebuie să actualizăm controlerul. Creați Am pus Și asta este tot ce aveți nevoie pentru a afișa mesajele! Desigur, dacă nu ați pus ceva în Acesta va fi și mai rapid. Să adăugăm o intrare operatorului nostru Valoarea intrării va fi legată de Să definim În primul rând, verificăm dacă tasta Enter a fost apăsată: Dacă da, adăugăm numele afișat al utilizatorului la De asemenea, trebuie să inițializați Asta este - Aplicați-vă aplicația în două browsere (pentru a putea utiliza două conturi Facebook) și încercați! Ca de obicei, vă rugăm să lăsați orice întrebări, comentarii și feedback general în formularul de mai jos.ngHide directiva pentru a ascunde butonul atunci când utilizatorul este logat $ Scope.login () metoda va apela doar o metodă cu același nume pe $ scope.loginObj:$ scope.login = function () ref.authWithOAuthPopup (funcția "facebook", eroare, authData) );
Pasul 4: Afișarea mesajelor
ngRepeat pentru a trece prin toate mesajele și a le afișa:obj care va păstra obiectul returnat de la Firebase:var obj = $ firebase (ref). $ asObject ();
$ AsObject () metoda convertește întreaga referință la un obiect Javascript cu câteva metode utile. Se numește cea pe care o vom folosi .$ BindTo () și ne va permite să creăm o legare în trei direcții (Firebase-AngularJS-DOM):vol. $ bindTo (domeniul $, "date");
domeniul de aplicare $ ca primul parametru, și numele unei proprietăți ca al doilea. Obiectul pe care îl obligăm va apărea în domeniul de aplicare $ sub această denumire (ca $ scope.data în acest exemplu).mesaje în baza de date, nu veți vedea nimic dacă executați aplicația acum.Pasul 5: Trimiterea de mesaje
div, astfel încât utilizatorii noștri să poată scrie mesaje:$ scope.newMessage.text variabilă și cea a lui keyup evenimentul va declanșa $ Scope.handleKeyup () suna inapoi. Rețineți că am trecut $ eveniment ca parametru, deoarece trebuie să verificăm dacă utilizatorul a apăsat pe Enter.$ Scope.handleKeyup () funcţie:$ scope.handleKeyup = funcția handleKeyup (e)
dacă (e.keyCode == 13)
$ scope.newMessage obiect, actualizați $ scope.data.messages și reinițializați $ scope.newMessage obiect:$ scope.newMessage.author = ref.getAuth () facebook.displayName; ref.child ( "mesaje") împinge ($ scope.newMessage).; $ scope.newMessage = ;
$ scope.newMessage obiect:$ scope.newMessage = ;
