Share
În tutorialul din ziua de astăzi, vă vom ajuta să lucrați cu Firebase, construind o aplicație simplă pentru chat, utilizând Javascript API-ul Firebase. Această aplicație vă va oferi modulele necesare pentru a dezvolta aplicații mai avansate în timp real în propriile proiecte.
Pentru ca Firebase să funcționeze, va trebui să creați un cont de dezvoltator gratuit accesând site-ul web și înregistrarea. Odată ce v-ați înregistrat cu succes, Firebase vă va redirecționa către tabloul de bord al contului, unde veți avea acces la toate locațiile de date Firebase și la alte caracteristici bine definite. Cu toate acestea, acum trebuie să selectați locația de date Firebase intitulată, Primul meu APP. Simțiți-vă liber să redenumiți această aplicație sau să creați o nouă aplicație.
Când a fost creată locația de date Firebase, a fost atribuită propria ei unică gazdă nume-. Acest nume-gazdă unic este foarte important; deoarece aceasta este locația unde vor fi citite și scrise datele dvs. Vom discuta numele gazdei în detaliu, mai târziu în tutorial, dar pentru moment:
Primul element de pe ordinea de zi: creați un nou fișier HTML care face referire la Firewall client, jQuery și Bootstrap CDNs. Este evident că trebuie să facem referire la Firebase CDN. Acum, s-ar putea să nu fie la fel de clar de ce facem referire atât la jQuery, cât și la Bootstrap. Folosesc atât jQuery cât și Bootstrap pentru dezvoltarea rapidă a aplicațiilor. Ambele biblioteci îmi permit să fac lucrurile foarte repede și nu necesită multă codificare manuală. Cu toate acestea, nu voi mai acoperi nici jQuery sau Bootstrap în niciun detaliu; deci nu ezitați să aflați mai multe despre aceste biblioteci JavaScript pe cont propriu.
Marcajul care implementează ceea ce am descris este după cum urmează:
Firebase Chat Application
Acum, când am creat fișierul HTML și face referire la CDN-urile corecte, să începem să lucrăm la restul aplicației noastre.
În primul rând, trebuie să determinăm ce funcționalitate esențială va avea nevoie această aplicație. Se pare că majoritatea aplicațiilor în stilul camerei de chat au două asemănări: o casetă de mesaje pentru trimiterea mesajelor către un server și o secțiune care este populată cu mesaje de la un server. În cazul nostru, acest server va fi locația noastră de date Firebase.
Să implementăm caseta de mesaje pentru a trimite mesaje la un server înainte de mâna. Acest lucru va necesita crearea unei interfețe simple care să includă o interfață intrare câmp și a a depune butonul înfășurat înăuntru formă Etichete. Deoarece facem referire la foaia de stiluri Bootstrap, avem comoditatea de a folosi anumite stiluri de bootstrap predefinite pentru a crea interfața. Așa cum am spus mai devreme, acest lucru este foarte convenabil și ne permite să scriem mai puțin cod de mână.
Deci, să punem primul a div cu atributul de clasă recipient imediat după deschidere corp în fișierul HTML. Aceasta este o caracteristică de bootstrap care oferă constrângeri de lățime și umplutură pentru conținutul paginii. În etichetele containerului, permiteți adăugarea unui titlu înfășurat înăuntru H1 , astfel încât să putem da aplicației un nume descriptiv. Titlul meu va fi "Firebase Chat Application". Simțiți-vă libertatea de a vă folosi propria creativitate atunci când vă scrieți titlul.
Marcajul care implementează ceea ce am descris mai sus, arată astfel:
Firebase Chat Application
În plus, trebuie să adăugăm și o div cu atribute de clasă: panou și Panou-default. Un panou este o componentă Bootstrap care oferă o cutie simplă care conține patru DIV-uri interioare: Panou-poziție, Panou-titlu, Panou corp, și Panou-footer în mod implicit. Nu vom folosi Panou-poziție și Panou-titlu dar vom folosi ambele Panou corp și Panou-footer. panou DIV va fi folosit ca container principal pentru clientul camerei de chat.
Marcajul care implementează ceea ce am descris mai sus este după cum urmează:
Firebase Chat Application
În prezent, nu vom lucra cu Panou corp. Cu toate acestea, va trebui să folosim această secțiune mai târziu în tutorialul pentru stocarea mesajelor din locația noastră de date.
Acum ne vom concentra pe panoul de panou div. Subsolul panoului va conține un câmp de introducere, un buton de trimitere și un buton de resetare. Vom da câmpului de intrare un atribut id de comentarii și butonul de trimitere un id de atribut submit-BTN. Ambele atribute id sunt foarte importante și vor fi necesare mai târziu în tutorial. Simțiți-vă liber să modificați ID-urile atributului pentru elementele de formă.
Marcajul care implementează ceea ce am descris mai sus este după cum urmează:
Firebase Chat Application
Acum, să implementăm JavaScript care ne va permite să trimitem mesajul în locația noastră de date Firebase.
Mai întâi trebuie să adăugăm un set de scenariu etichete direct deasupra închiderii corp tag, în fișierul HTML. În cadrul etichetelor de script, trebuie să creați o referință la locația de date a Firebase. Fără această referință, nu putem scrie date în locația noastră de date. Acest lucru poate fi realizat prin inițializarea constructorului Firebase și trecerea locației noastre de date ca parametru. Rețineți că locația de date Firebase a fost creată când configurați Firebase (numele gazdă unic).
Codul care implementează ceea ce am descris mai sus este următorul:
Accentsconagua
var fireBaseRef = noua Firebase ("URL-ul DATELOR FIREBASE DATE"); După inițializarea obiectului de referință Firebase, trebuie să legăm un handler de evenimente de clic la selectorul butonului de trimitere. Locația acestui selector se află în subsolul panoului. De asemenea, trebuie să ne asigurăm că apelul de preluare a evenimentului conține a return false declarație ca ultima linie de cod. Astfel, se va asigura că acțiunea implicită de trimitere a formularului nu apare și nu împiedică evenimentul să provoace bubble în copacul DOM. Cu toate acestea, în anumite cazuri este posibil să doriți să se producă bule de evenimente.
Ambele fragmente JavaScript mai jos pun în aplicare ceea ce este descris mai sus:
$ ("# submit-btn") bind ("clic", funcția () return false;); $ ("# submit-btn") bind ("click", functie (eveniment) event.preventDefault (); event.stopPropagation ();); Apoi, vom defini o variabilă care face referință selectorul de comentarii și altă variabilă care elimină spațiile albe de la începutul și sfârșitul valorii comentariului.
Codul care implementează ceea ce am descris mai sus este următorul:
$ ("# submit-btn") bind ("click", function () var comment = $ ("# comments"); ; Acum trebuie să determinăm metoda necesară pentru scrierea facturilor în locația noastră de date.
Firebase API oferă mai multe metode pentru a scrie date într-o locație de date. Cu toate acestea, în tutorialul de astăzi ne vom concentra pe utilizarea a stabilit() și Apăsați() metode. Să analizăm pe scurt ceea ce ne permite fiecare dintre aceste metode.
a stabilit() metoda va scrie date la locația de date, precum și suprascrie orice date care sunt stocate în prezent la locația de date.Apăsați() metoda va scrie date la locația de date prin generarea automată a unei noi locații copil cu un nume unic. În plus, acest nume unic va fi prefixat cu o ștampilă de timp. Aceasta va permite tuturor locațiilor pentru copii să fie sortate cronologic.După examinarea ambelor a stabilit() și Apăsați() metode; Cred că este evident că trebuie să folosim acest lucru Apăsați() în aplicația noastră. În caz contrar, vom suprascrie ulterior ultimul comentariu la locația noastră de date și asta nu ar fi distractiv.
Pentru a face acest lucru, să revenim la JavaScript pe care l-am adăugat anterior pe pagina noastră. Acum trebuie să împingem valoarea de comentariu în locația noastră de date. Acum, rețineți că sunt diferite Apăsați metode care ne permit să împingem date în diverse formate, cum ar fi un obiect, matrice, șir, număr, boolean sau null. Vom folosi doar un obiect care are o pereche cheie de valoare a unui comentariu și o valoare de comentariu. În plus, vom atașa un apel invers la oprire după Apăsați metodele au terminat. Callback-ul va returna un obiect de eroare la eșec, iar la succes, o valoare nulă.
Codul care implementează ceea ce am descris mai sus este următorul:
$ ("submit-btn"), bind ("click", function () var comment = $ ("# comments"); var commentValue = $ .trim (comment.val (); fireBaseRef.push comment: commentValue, funcția (eroare) if (eroare! == null) alert ('Nu pot impinge comentariile la Firebase!');); Acum, să adăugăm ceva pentru a ne asigura că utilizatorii camerei de chat nu pot scrie mesaje goale în locația noastră de date. Acest lucru poate fi ușor realizat prin adăugarea unei simple dacă altceva declarație care verifică lungimea valorii comentariului.
Codul care implementează ceea ce am descris mai sus este următorul:
$ ("# submit-btn") bind ("click", function () var comment = $ ("# comments"); var commentValue = $ .trim (comment.val () === 0) alert ("Comentariile trebuie să continue!"); Altceva _fireBaseRef.push (comment: commentValue, funcția (eroare) if (error! = Null) alert împingeți comentariile către Firebase! ');); comment.val (""); return false;); Excelent, am finalizat cu succes secțiunea din aplicația noastră, care permite utilizatorilor să scrie date în locația noastră de date. Dar, suntem lipsiți de funcționalitate care oferă utilizatorilor o experiență de chat în timp real. Acest tip de experiență va necesita posibilitatea de a citi date din locațiile copilului, în cadrul locației de date.
Așa cum am menționat mai devreme, cele mai multe aplicații în stilul camerei de chat citesc datele de pe un server și apoi o populație a unei secțiuni a interfeței. Va trebui să facem același lucru în aplicația noastră, folosindu-ne API-ul Firebase.
Firebase API oferă mai multe metode pentru a citi date dintr-o locație de date. În tutorialul de astăzi, ne vom concentra pe utilizarea pe() metodă.
pe() metoda are mai multe argumente pe care merită să le analizăm, dar vom aborda doar primele două argumente: tip de eveniment și suna inapoi. Să analizăm ambele.
tip de eveniment ""tip de eveniment"Argumentul are mai multe opțiuni. Să ne uităm la fiecare astfel încât să putem determina care vor satisface nevoile noastre.
valoare"- va fi declanșat o singură dată și va citi toate comentariile și de fiecare dată când vor fi modificate comentariile vor fi declanșate din nou, precum și vor fi citite toate comentariile.child_added"- va fi declanșat o dată pentru fiecare comentariu, precum și de fiecare dată când se adaugă un comentariu nou.child_removed"- va fi declanșat oricând se va elimina un comentariu.child_changed"- va fi declanșat oricând se va schimba un comentariu.child_moved"- va fi declanșat oricând se va schimba comanda unui comentariu.După ce am analizat opțiunile de mai sus, pare destul de clar că ar trebui să folosim "child_added"ca și"tip de eveniment"Acest even tip va fi declansat o singura data pentru fiecare comentariu in locatia noastra de date, precum si de fiecare data cand se adauga un comentariu nou.In plus, atunci cand se adauga un comentariu nou, acesta nu va returna intregul set de comentarii in acea locatie, dar doar ultimul copil a fost adăugat, exact ceea ce dorim! Nu este nevoie să returnați întregul set de comentarii când se adaugă un comentariu nou.
suna inapoi ""suna inapoi" pentru pe() metoda oferă un element pe care Firebase îl numește drept "instantaneu de date" care are mai multe funcții membre, accentul fiind pus astăzi pe Nume() și val ().
Nume() funcția membru ne oferă numele unic al "instantaneu de date". Dacă vă amintiți mai devreme, am folosit Apăsați() funcția de a scrie un comentariu nou la locația noastră de date. Cand Apăsați() a fost numit, a generat o nouă locație a copilului folosind un nume unic și acesta este numele care va fi returnat prin intermediul funcției de membru al apelului,Nume().
val () funcția membru ne furnizează reprezentarea obiectului JavaScript a "instantaneului de date", iar cu acest instantaneu vom putea să preluăm un comentariu din locația noastră de date. Cu toate acestea, trebuie să ne retragem pentru o clipă.
Mai devreme în acest tutorial am implementat JavaScript necesar pentru a împinge comentariile la locația Firebase și am făcut acest lucru prin împingerea unui obiect cu o pereche de valori cheie. În acest caz, cheia era "cometariu"și valoarea a fost intrarea pe care utilizatorul a introdus-o.Prin urmare, dacă dorim să extragem un comentariu din" instantaneu de date ", trebuie să recunoaștem tipul corect de date. utilizați notația punctului sau notația pentru a accesa proprietatea specificată.
Ambele fragmente JavaScript mai jos, implementați ceea ce este descris mai sus:
fireBaseRef.on ('child_added', funcție (snapshot) var uniqName = snapshot.name (); var comment = snapshot.val () comment;); fireBaseRef.on ('child_added', funcție (snapshot) var uniqName = snapshot.name (); var comment = snapshot.val () ["comment"];); În continuare, să creați un mod simplu, dar curat, pentru a afișa fiecare comentariu. Acest lucru poate fi realizat cu ușurință prin împachetarea fiecărui comentariu într-un div și etichetarea fiecărui comentariu cu numele său unic. De obicei, comentariile sunt etichetate cu numele utilizatorului care a scris acel comentariu, în cazul nostru, acesta este un client de cameră de chat anonim.
Codul care implementează ceea ce am descris mai sus este următorul:
var commentsContainer = $ ('# comentarii-container'); $ (“', clasa:' comment-container ') .html ('Comentariu '+ uniqName +'"+ comentariu); Apoi trebuie să adăugăm fiecare comentariu în containerul comentariului și să obținem poziția verticală curentă a barei de derulare a containerului din comentariu și să defilați la cea mai recentă locație. Acest lucru va asigura că de fiecare dată când un comentariu este împins către Firebase, toți utilizatorii care folosesc aplicația de chat vor vedea cel mai recent comentariu făcut. Toate acestea trebuie efectuate în cadrul callback-ului.
Ar trebui să arate ceva de genul:
var commentsContainer = $ ('# comentarii-container'); $ (“', clasa:' comment-container ') .html ('Comentariu '+ uniqName +''+ comentariu) .appendTo (comentariiContainer); commentsContainer.scrollTop (commentsContainer.prop ( 'scrollHeight')); Acum permiteți aplicarea unor stiluri CSS simple pentru DIV-urile înfășurate în jurul fiecărui bloc de comentarii. Acest lucru va face aspectul ușor mai atractiv și ușor de utilizat. Aceste stiluri ar trebui adăugate în etichetele de stil, situate în cap secțiune a codului HTML.
Codul care implementează ceea ce am descris mai sus este următorul:
.container max-width: 700px; # comments-container border: 1px solid # d0d0d0; înălțime: 400px; overflow-y: parcurgere; .comment-container padding: 10px; Marja: 6px; fundal: # f5f5f5; font-size: 13px; -moz-border-radius: 5px; -webkit-border-radius: 5px; raza de graniță: 5px; .comment-container .label marginea-dreapta: 20px; .comment-container: ultimul tip border-bottom: none;
Acum este momentul să ne executați cererea. Să începem prin deschiderea a două instanțe ale browserului nostru preferat, modern și plasându-le unul lângă celălalt pe desktop-ul nostru. Apoi, vom naviga la locația fișierului nostru pe care am creat-o, în ambele browsere. Testați-l scriind câteva comentarii și bucurați-vă de magia Firebase.
Este de necrezut că numai câteva linii de coduri pot produce o aplicație atât de puternică. Nu ezitați să editați acest fragment în vreun fel pentru a produce rezultatele dorite.
Consultați demo-ul online pentru ao vedea în acțiune. Mai jos este codul sursă complet pentru întreaga aplicație pentru camere de chat:
Firebase Chat Application Firebase Chat Application
În tutorialul de astăzi, am lucrat tot atâta timp prin procesul de implementare a unei aplicații simple de cameră de chat prin folosirea JavaScript API-ului Firebase. În acest fel, am reușit să experimentăm puterea Firebase și să obținem o apreciere pentru confortul său. Mai jos sunt câteva dintre elementele cheie pe care le-am lovit astăzi:
Apăsați metodă.pe metoda cu tipul de eveniment "child_added".Sper că acest tutorial ți-a dat punctul de plecare de care trebuie să faci mai departe cu Firebase. Dacă aveți întrebări sau comentarii, nu ezitați să le lăsați mai jos. Vă mulțumim din nou pentru timpul acordat și continuați să explorați posibilitățile nesfârșite ale API-ului Firebase.
