Share
In de tutorial van vandaag helpen we je aan de slag met Firebase door een eenvoudige chatroomapp te bouwen door gebruik te maken van de JavaScript-API van Firebase. Deze applicatie biedt u de bouwstenen om geavanceerdere real-time applicaties voor uw eigen projecten te ontwikkelen.
Om Firebase operationeel te krijgen, moet je een gratis ontwikkelaarsaccount maken door hun website te bezoeken en te registreren. Zodra u zich hebt geregistreerd, leidt Firebase u om naar uw accountdashboard waar u toegang heeft tot al uw Firebase-gegevenslocaties en andere handige functies. Op dit moment moet u echter de juiste Firebase-gegevenslocatie selecteren, MIJN EERSTE APP. U kunt deze applicatie hernoemen of een nieuwe maken.
Wanneer de Firebase-gegevenslocatie werd gemaakt, kreeg deze een eigen unieke locatie hostnaam. Deze unieke hostnaam is erg belangrijk; omdat dit de locatie is waar uw gegevens ook worden gelezen en geschreven. We zullen de host-naam in meer detail bespreken, later in de tutorial maar nu:
Het eerste item op de agenda: maak een nieuw HTML-bestand dat verwijst naar de Firebase-client, jQuery en Bootstrap-CDN's. Het is vrij duidelijk dat we moeten verwijzen naar de Firebase-CDN. Nu is het misschien niet zo duidelijk waarom we verwijzen naar zowel jQuery als Bootstrap. Ik gebruik zowel jQuery als Bootstrap voor een snelle applicatie-ontwikkeling. Beide bibliotheken stellen mij in staat zeer snel dingen te doen en vereisen niet veel handcodering. Ik zal echter jQuery of Bootstrap niet tot in detail behandelen; dus voel je vrij om meer over deze JavaScript-bibliotheken te leren.
De markup die implementeert wat ik heb beschreven is als volgt:
Firebase-chatapp
Nu we ons HTML-bestand hebben aangemaakt en het refereert aan de juiste CDN's, beginnen we met het uitwerken van de rest van onze applicatie.
Allereerst moeten we bepalen welke essentiële functionaliteit deze toepassing nodig heeft. Het lijkt erop dat de meeste toepassingen in chatroomstijl twee overeenkomsten hebben: een berichtvenster voor het verzenden van berichten naar een server en een gedeelte dat wordt gevuld met berichten van een server. In ons geval wordt deze server onze Firebase-gegevenslocatie.
Laten we het berichtvenster voor het verzenden van berichten naar een server voor de hand implementeren. Dit vereist dat we een eenvoudige interface maken met een invoer veld en een voorleggen knop binnen verpakt het formulier -tags. Omdat we verwijzen naar de Bootstrap-stylesheet, hebben we het gemak om een aantal vooraf gedefinieerde bootstrap-stijlen te gebruiken om de interface te maken. Zoals ik eerder al zei, is dit erg handig en kunnen we met de hand minder code schrijven.
Dus laten we eerst een plaatsen div met het kenmerk class houder direct na de opening lichaam tag in het HTML-bestand. Dit is een bootstrap-functie die breedtebeperkingen en opvulling biedt voor de pagina-inhoud. Binnen de containertags kunt u een titel toevoegen die is ingepakt in H1 tags, zodat we de applicatie een beschrijvende naam kunnen geven. Mijn titel is "Firebase Chat Application". Voel je vrij om je eigen creativiteit te gebruiken bij het schrijven van je titel.
De markup die implementeert wat ik hierboven heb beschreven, ziet er als volgt uit:
Firebase-chatapp
Daarnaast moeten we ook een toevoegen div met klassekenmerken: paneel en panel-default. Een paneel is een Bootstrap-component die een eenvoudige box biedt met vier DIV's voor binnen: panel-titel, paneelvormig title, paneelvormig body, en panel-footer standaard. We zullen niet gebruiken panel-titel en paneelvormig title maar we zullen beide gebruiken paneelvormig body en panel-footer. De paneel DIV wordt gebruikt als hoofdcontainer voor de chatroomclient.
De markup die implementeert wat ik hierboven heb beschreven, is als volgt:
Firebase-chatapp
Op dit moment zullen we niet werken met de paneelvormig body. We zullen deze sectie echter later in de handleiding moeten gebruiken voor het invullen van berichten van onze gegevenslocatie.
Op dit moment zullen we focussen op de panel footer div. De voettekst van het paneel bevat een invoerveld, verzendknop en resetknop. We geven het invoerveld een attribuut-ID van opmerkingen en de submit-knop een attribuut-ID van submit-btn. Beide id-attributen zijn erg belangrijk en zullen later in de tutorial nodig zijn. U kunt de kenmerk-ID's voor de formulierelementen wijzigen.
De markup die implementeert wat ik hierboven heb beschreven, is als volgt:
Firebase-chatapp
Laten we nu het JavaScript implementeren waarmee we het bericht naar de gegevenslocatie van onze Firebase kunnen verzenden.
Eerst moeten we een set toevoegen script labels direct boven de sluiting lichaam tag, in het HTML-bestand. Binnen de scripttags moeten we een verwijzing maken naar de gegevenslocatie van onze Firebase. Zonder deze referentie kunnen we geen gegevens naar onze datalocatie schrijven. Dit kan worden bereikt door de Firebase-constructor te initialiseren en onze gegevenslocatie als parameter door te geven. Vergeet niet dat de Firebase-gegevenslocatie is gemaakt toen u Firebase instelde (de unieke hostnaam).
De code die implementeert wat ik hierboven heb beschreven, is als volgt:
Accentsconagua
var fireBaseRef = nieuwe Firebase ("YOUR FIREBASE DATA URL"); Nadat het Firebase-referentieobject is geïnitialiseerd, moeten we een klikgebeurtenishandler aan de kiezer voor verzendknop koppelen. De locatie van deze selector bevindt zich in de voettekst van het paneel. We moeten er ook voor zorgen dat de callback voor gebeurtenishandlers een return false verklaring als de laatste regel code. Dit zorgt ervoor dat de standaardactie van het verzenden van het formulier niet plaatsvindt en voorkomt dat de gebeurtenis de DOM-structuur laat opborrelen. In sommige gevallen wilt u misschien borrelen met gebeurtenissen.
Beide onderstaande JavaScript-fragmenten implementeren wat hierboven is beschreven:
$ ("# submit-btn"). bind ("klik", functie () return false;); $ ("# submit-btn"). bind ("klik", functie (event) event.preventDefault (); event.stopPropagation ();); Vervolgens definiëren we een variabele die verwijst naar de selector van de opmerking en een andere variabele die de witruimten verwijdert van het begin en het einde van de waarde van de opmerking.
De code die implementeert wat ik hierboven heb beschreven, is als volgt:
$ ("# submit-btn"). bind ("klik", functie () var comment = $ ("# comments"); var comment_value = $. trim (comment.val ()); return false;) ; Nu moeten we de methode bepalen die nodig is om deze opmerkingen op onze datalocatie te schrijven.
De API van Firebase biedt verschillende methoden om gegevens naar een datalocatie te schrijven. In de tutorial van vandaag gaan we ons echter concentreren op het gebruik van de set () en Duwen() methoden. Laten we kort bekijken wat elk van deze methoden ons toestaan te doen.
set () methode schrijft data naar de datalocatie en overschrijft ook alle data die momenteel op de datalocatie is opgeslagen.Duwen() methode zal data naar de datalocatie schrijven door automatisch een nieuwe child-locatie met een unieke naam te genereren. Bovendien wordt deze unieke naam voorafgegaan door een tijdstempel. Hierdoor kunnen alle kinderlocaties chronologisch worden gesorteerd.Na het bekijken van beide set () en Duwen() methoden; Ik denk dat het vrij duidelijk is dat we gebruik moeten maken van de Duwen() methode in onze applicatie. Anders zullen we de nieuwste opmerking op onze datalocatie continu overschrijven en dat zou niet leuk zijn.
Laten we hiertoe teruggaan naar het JavaScript dat we eerder aan onze pagina hebben toegevoegd. We moeten nu de reactiewaarde naar onze gegevenslocatie pushen. Houd er nu rekening mee dat er verschillende zijn Duwen methoden waarmee we gegevens in verschillende indelingen kunnen pushen, zoals een object, array, tekenreeks, nummer, boolean of null. We gebruiken alleen een object met een sleutelwaardepaar van een opmerking en een opmerkingwaarde. Daarnaast zullen we een optionele callback toevoegen om te vuren na de Duwen methoden zijn voltooid. De callback retourneert een foutobject bij een fout en bij succes een null-waarde.
De code die implementeert wat ik hierboven heb beschreven, is als volgt:
$ ("# submit-btn"). bind ("klik", functie () var comment = $ ("# comments"); var commentValue = $. trim (comment.val ()); fireBaseRef.push ( comment: commentValue, function (error) if (error! == null) alert ('Kan commentaar niet pushen naar Firebase!');); return false;); Laten we nu iets toevoegen om ervoor te zorgen dat de chatroomgebruikers geen blanco berichten kunnen schrijven naar onze datalocatie. Dit kan eenvoudig worden bereikt door een eenvoudige toe te voegen als anders verklaring die de lengte van de waarde van de opmerking controleert.
De code die implementeert wat ik hierboven heb beschreven, is als volgt:
$ ("# submit-btn"). bind ("klik", functie () var comment = $ ("# comments"); var commentValue = $ .trim (comment.val ()); if (commentValue.length === 0) alert ('Reacties zijn vereist om verder te gaan!'); Else _fireBaseRef.push (comment: commentValue, function (error) if (error! == null) alert ('Kan niet push comments to Firebase! ');); comment.val (""); return false;); Geweldig, we hebben met succes het gedeelte van onze applicatie voltooid waarmee gebruikers gegevens naar onze datalocatie kunnen schrijven. Maar we missen de functionaliteit die gebruikers een realtime chatervaring biedt. Dit type ervaring vereist de mogelijkheid om gegevens van de onderliggende locaties binnen de datalocatie te lezen.
Zoals we eerder al vermeldden, lezen de meeste applicaties in de chatroom-stijl gegevens van een server en vullen dan een deel van de interface in. We zullen hetzelfde moeten doen in onze applicatie, door gebruik te maken van de Firebase API.
De API van Firebase biedt verschillende methoden om gegevens van een gegevenslocatie te lezen. In de tutorial van vandaag gaan we ons concentreren op het gebruik van de op() methode.
De op() methode heeft verschillende argumenten die de moeite van het bekijken waard zijn, maar we gaan alleen de eerste twee argumenten behandelen: eventType en Bel terug. Laten we beide bekijken.
eventType De "eventType"argument heeft verschillende opties. Laten we naar elk kijken, zodat we kunnen bepalen wat aan onze behoeften zal voldoen.
waarde"- wordt eenmalig geactiveerd en leest alle opmerkingen en elke keer dat een opmerking verandert, wordt deze opnieuw geactiveerd en leest u alle opmerkingen.child_added"- wordt één keer geactiveerd voor elke opmerking, en telkens wanneer een nieuwe opmerking wordt toegevoegd.child_removed"- wordt geactiveerd wanneer een opmerking wordt verwijderd.child_changed"- wordt geactiveerd telkens wanneer een opmerking wordt gewijzigd.child_moved"- wordt geactiveerd telkens wanneer de volgorde van een opmerking wordt gewijzigd.Na het bekijken van de bovenstaande opties lijkt het vrij duidelijk dat we moeten gebruiken "child_added" Als onze "eventType". Dit even type wordt één keer geactiveerd voor elke opmerking op onze gegevenslocatie, en telkens wanneer een nieuwe opmerking wordt toegevoegd. Als een nieuwe opmerking wordt toegevoegd, wordt niet de hele reeks opmerkingen op die locatie geretourneerd, maar alleen het laatste kind toegevoegd. Dit is precies wat we willen! Het is niet nodig om de hele set reacties terug te sturen wanneer een nieuwe opmerking is toegevoegd.
Bel terug De "Bel terug" voor de op() methode biedt een item dat door Firebase wordt aangeduid als een 'momentopname van gegevens' met verschillende lidfuncties, waarop de focus van vandaag ligt naam() en val ().
De naam() lidfunctie geeft ons de unieke naam van de "momentopname van gegevens". Als je het je eerder herinnert, hebben we de Duwen() functie om een nieuwe opmerking te schrijven naar onze datalocatie. Wanneer Duwen() was, heeft het een nieuwe kindlocatie gegenereerd met een unieke naam en dat is de naam die wordt teruggegeven via de functie terugroeplid,naam().
De val () lidfunctie geeft ons de JavaScript-objectrepresentatie van de "momentopname van gegevens" en met deze momentopname kunnen we een opmerking van onze gegevenslocatie ophalen. We moeten echter even teruggaan.
Eerder in deze zelfstudie hebben we de JavaScript-code geïmplementeerd die nodig is om opmerkingen naar onze Firebase-locatie te pushen. We hebben dit gedaan door een object met een sleutelwaardepaar te duwen. In dit geval was de sleutel "commentaar"en de waarde was de invoer die de gebruiker invoerde. Daarom, als we een opmerking uit onze" momentopname van gegevens "willen extraheren, moeten we het juiste gegevenstype herkennen. In dit geval hebben we te maken met een object, dus u kunt gebruik een puntnotatie of haakjesnotatie om toegang te krijgen tot de opgegeven eigenschap.
Beide JavaScript-fragmenten hieronder implementeren wat hierboven is beschreven:
fireBaseRef.on ('child_added', functie (snapshot) var uniqName = snapshot.name (); var comment = snapshot.val (). comment;); fireBaseRef.on ('child_added', functie (momentopname) var uniqName = snapshot.name (); var comment = snapshot.val () ["comment"];); Laten we vervolgens een eenvoudige, maar toch schone manier maken om elke opmerking weer te geven. Dit kan gemakkelijk worden bereikt door elke opmerking in een div en het labelen van elke opmerking met zijn unieke naam. Meestal worden opmerkingen gelabeld met de gebruikersnaam die deze opmerking heeft geschreven, in ons geval is dit een anonieme chatroomclient.
De code die implementeert wat ik hierboven heb beschreven, is als volgt:
var commentsContainer = $ ('# comments-container'); $ ('', class:' comment-container ') .html ('Reactie '+ uniqName +''+ opmerking); Vervolgens moeten we elke opmerking toevoegen aan de container van de opmerking en de huidige verticale positie van de containerschuifbalk van de opmerking ophalen en naar die laatste locatie scrollen. Dit zorgt ervoor dat elke keer dat een opmerking naar Firebase wordt gepusht, alle gebruikers die de chattoepassing gebruiken, de nieuwste opmerking zullen zien. Dit alles moet binnen de callback worden gedaan.
Het zou er ongeveer zo uit moeten zien:
var commentsContainer = $ ('# comments-container'); $ ('', class:' comment-container ') .html ('Reactie '+ uniqName +''+ opmerking) .appendTo (commentsContainer); commentsContainer.scrollTop (commentsContainer.prop (scrollHeight ")); Laten we nu enkele eenvoudige CSS-stijlen toepassen op de DIV's die rond elk commentaarblok zijn gewikkeld. Dit maakt het uiterlijk iets aantrekkelijker en gebruiksvriendelijker. Deze stijlen moeten worden toegevoegd binnen de stijltags in de hoofd sectie van de HTML.
De code die implementeert wat ik hierboven heb beschreven, is als volgt:
.container max-width: 700px; # comments-container border: 1px solid # d0d0d0; hoogte: 400 px; overflow-y: scroll; .comment-container opvulling: 10px; margin: 6px; achtergrond: # f5f5f5; lettergrootte: 13px; -moz-border-radius: 5px; -webkit-border-radius: 5px; grensradius: 5px; .comment-container .label margin-right: 20px; .comment-container: laatste-van-type border-bottom: none;
Het is nu tijd om onze applicatie uit te voeren. Laten we beginnen door twee exemplaren van onze favoriete, moderne browser te openen en ze naast elkaar op onze desktop te plaatsen. Vervolgens gaan we in beide browsers naar de bestandslocatie van ons bestand dat we hebben gemaakt. Test het door een paar opmerkingen te schrijven en geniet van de magie van Firebase.
Het is ongelofelijk dat slechts een paar regels code zo'n krachtige applicatie kunnen produceren. U kunt dit fragment op elke manier bewerken om de door u gewenste resultaten te produceren.
Bekijk de online demo om hem in actie te zien. Hieronder vindt u de volledige broncode voor de hele chatroomtoepassing:
Firebase-chatapp Firebase-chatapp
In de tutorial van vandaag hebben we het hele proces van het implementeren van een eenvoudige chatroomtoepassing doorgewerkt met de JavaScript-API van Firebase. Door dit te doen, konden we de kracht van Firebase ervaren en waardering opdoen voor het gemak. Hieronder staan enkele van de belangrijkste items die we vandaag hebben bezocht:
Duwen methode.op methode met het gebeurtenistype "child_added".Ik hoop dat deze zelfstudie je het startpunt heeft gegeven om verder te gaan met Firebase. Als u vragen of opmerkingen heeft, kunt u deze hieronder achterlaten. Nogmaals bedankt voor uw tijd en blijf de eindeloze mogelijkheden van de Firebase API verkennen.
