Share
I dagens handledning kommer vi att få dig igång med Firebase genom att bygga en enkel chattrumsapplikation genom att utnyttja Firebase's Javascript API. Denna applikation kommer att ge dig byggstenarna för att utveckla mer avancerade realtidsprogram på dina egna projekt.
För att få Firebase igång måste du skapa ett gratis utvecklare konto genom att besöka deras hemsida och registrera. När du väl har registrerat, kommer Firebase att omdirigera dig till din kontos instrumentpanel där du får tillgång till alla dina Firebase data platser och andra snygga funktioner. Men just nu bör du välja den brandbaserade databasen som är berättigad, MIN FIRST APP. Glöm inte att byta namn på den här applikationen eller skapa en ny.
När Firebase data plats skapades, tilldelades den sin egen unika värdnamn. Detta unika värdnamn är mycket viktigt; eftersom det här är platsen där dina data kommer att läsas från och skrivas också. Vi kommer att diskutera värdnamnet på djupet, senare i handledningen men för nu:
Det första objektet på agendan: Skapa en ny HTML-fil som hänvisar till Firebase-klienten, jQuery och Bootstrap-CDN. Det är uppenbart att vi behöver referera till Firebase CDN. Nu kan det inte vara så klart varför vi refererar till både jQuery och Bootstrap. Jag använder både jQuery och Bootstrap för snabb applikationsutveckling. Båda dessa bibliotek tillåter mig att göra saker mycket snabbt och de kräver inte mycket handkodning. Men jag kommer inte att täcka antingen jQuery eller Bootstrap i någon stor detalj; så är du välkommen att lära dig mer om dessa JavaScript-bibliotek på egen hand.
Markeringen som implementerar vad jag beskrivit är som följer:
Firebase Chat Application
Nu när vi har skapat vår HTML-fil och den hänvisar till rätt CDN, låt oss börja arbeta resten av vår ansökan.
Först måste vi bestämma vilken väsentlig funktionalitet den här applikationen behöver. Det verkar som om de flesta chatrumstilprogram har två likheter: en meddelandruta för att skicka meddelanden till en server och en sektion som blir befolkade med meddelanden från en server. I vårt fall kommer denna server att vara vår Firebase data plats.
Låt oss genomföra meddelandeboxen för att skicka meddelanden till en server före handen. Detta kräver att vi skapar ett enkelt gränssnitt som innehåller en inmatning fält och a lämna knapp inslagna inom form taggar. Eftersom vi refererar till Bootstrap-stilarket har vi det bekvämt att använda några fördefinierade bootstrap-stilar för att skapa gränssnittet. Som jag sa tidigare är det här mycket bekvämt och tillåter oss att skriva mindre kod för hand.
Så låt oss först placera a div med klassattributet behållare direkt efter öppningen kropp tagg i HTML-filen. Detta är en bootstrap-funktion som ger breddbegränsningar och vaddering för sidinnehållet. Inom behållarkoderna kan vi lägga till en titel som är insvept inom H1 taggar, så att vi kan ge ansökan ett beskrivande namn. Min titel kommer att vara "Firebase Chat Application". Använd gärna din egen kreativitet när du skriver din titel.
Markeringen som implementerar vad jag beskrev ovan ser så här ut:
Firebase Chat Application
Dessutom behöver vi också lägga till en div med klassattribut: panel och panel-default. En panel är en Bootstrap-komponent som ger en enkel låda som innehåller fyra interna DIV: panelrubrik, panel-titel, panel-kropp, och panel-footer som standard. Vi kommer inte att använda panelrubrik och panel-titel men vi kommer att använda båda panel-kropp och panel-footer. De panel DIV kommer att användas som huvudbehållare för chattrumsklienten.
Markeringen som implementerar vad jag beskrivit ovan är som följer:
Firebase Chat Application
För närvarande arbetar vi inte med panel-kropp. Vi måste dock använda det här avsnittet senare i handledningen för att fylla i meddelanden från vår datortilldelning.
Just nu kommer vi att fokusera på panel footer div. Panelfoten kommer att innehålla ett inmatningsfält, skicka in knappen och återställa knappen. Vi kommer att ge inmatningsfältet ett attribut ID för kommentarer och inlämningsknappen ett attribut ID för submit-BTN. Båda dessa ID-attribut är mycket viktiga och kommer att behövas senare i handledningen. Gärna ändra attribut ID-ID för formelementen.
Markeringen som implementerar vad jag beskrivit ovan är som följer:
Firebase Chat Application
Låt oss nu implementera JavaScript som tillåter oss att skicka meddelandet till vår Firebase datasort.
Först måste vi lägga till en uppsättning manus taggar direkt ovanför stängningen kropp tagg, i HTML-filen. Inom skriptkoderna måste vi skapa en referens till vår Firebase datasort. Utan denna referens kan vi inte skriva data till vår datortilldelning. Detta kan åstadkommas genom att initialisera Firebase-konstruktorn och överföra vår datortäte som parameter. Kom ihåg att Firebase data plats skapades när du installerar Firebase (det unika värdnamnet).
Koden som implementerar vad jag beskrivit ovan är som följer:
Accentsconagua
var fireBaseRef = ny Firebase ("DIN BRANDBASE DATA URL"); Efter att ha initierat Firebase-referensobjektet måste vi binda en händelsehanterare till knappen Skicka. Placeringen av den här väljaren ligger inom panelfoten. Vi måste också se till att händelsehanterarens återuppringning innehåller a returnera falskt uttalande som den sista raden av kod. Detta kommer att se till att standardåtgärden för att skicka formuläret inte uppstår och förhindra att händelsen bubblar upp DOM-trädet. Men i vissa fall kanske du vill att händelsebubbling ska inträffa.
Båda JavaScript-fragmenten nedan implementerar vad som beskrivs ovan:
$ ("# submit-btn"). bind ("klicka", funktion () return false;); $ ("# submit-btn"). bind ("klicka", funktion (händelse) event.preventDefault (); event.stopPropagation ();); Därefter kommer vi att definiera en variabel som refererar till kommentarsväljaren och en annan variabel som tar bort de vita mellanslagen från början och slutet av kommentarens värde.
Koden som implementerar vad jag beskrivit ovan är som följer:
$ ("# submit-btn"). bind ("klicka", funktion () var kommentar = $ ("# kommentarer"); var comment_value = $ .trim (comment.val ()); return false;) ; Nu måste vi bestämma vilken metod som behövs för att faktiskt skriva kommentarer till vår datasituation.
Firebase API erbjuder flera metoder för att skriva data till en datalokation. Men i dagens handledning kommer vi att fokusera på att använda uppsättning() och tryck() metoder. Låt oss korta granska vad vart och ett av dessa metoder tillåter oss att göra.
uppsättning() Metoden kommer att skriva data till dataläget, samt skriva över alla data som för närvarande lagras på datortillståndet.tryck() Metoden kommer att skriva data till dataläget genom att automatiskt generera ett nytt barns plats med ett unikt namn. Dessutom kommer detta unika namn att vara prefixat med en stämpel. Detta gör det möjligt för alla barnplatser att vara kronologiskt sorterade.Efter att ha granskat båda uppsättning() och tryck() metoder; Jag tycker att det är ganska uppenbart att vi behöver utnyttja tryck() metod i vår ansökan. Annars kommer vi kontinuerligt att skriva över den senaste kommentaren på vår datortillstånd och det skulle inte vara kul.
För att göra det, låt oss hoppa tillbaka till det JavaScript som vi tidigare lagt till på vår sida. Vi måste nu trycka på kommentervärdet till vår datortäte. Kom nu ihåg att det finns olika tryck metoder som tillåter oss att driva data i olika format, till exempel ett objekt, en array, en sträng, ett tal, en booleska eller en null. Vi kommer bara att använda ett objekt som har ett nyckelvärdespar av en kommentar och ett kommentarvärde. Dessutom kommer vi att bifoga en valfri återkoppling till eld efter tryck metoderna har slutförts. Återuppringningen kommer att returnera ett felobjekt vid fel och framgångsrikt, ett nullvärde.
Koden som implementerar vad jag beskrivit ovan är som följer:
$ ("# submit-btn"). bind ("klicka", funktion () var kommentar = $ ("# kommentarer"); var commentValue = $ .trim (comment.val ()); fireBaseRef.push kommentare: commentValue, funktion (fel) if (error! == null) alert ('Kan inte skicka kommentarer till Firebase!');); return false;); Låt oss nu lägga till något för att se till att chattrumsanvändarna inte kan skriva tomma meddelanden till vår datortälle. Detta kan enkelt uppnås genom att lägga till en enkel om annat uttalande som kontrollerar längden på kommentarens värde.
Koden som implementerar vad jag beskrivit ovan är som följer:
$ ("# submit-btn"). bind ("klicka", funktion () var kommentar = $ ("# kommentarer"); var commentValue = $ .trim (comment.val ()); om (commentValue.length === 0) alert ('Kommentarer måste fortsätta!'); Else _fireBaseRef.push (comment: commentValue, funktion (fel) om (error! = Null) alert tryck kommentarer till Firebase! ');); comment.val (""); return false;); Bra, vi har framgångsrikt slutfört avsnittet av vår applikation som tillåter användare att skriva data till vår datortilldelning. Men vi är herre som saknar funktionaliteten som ger användarna en chattupplevelse i realtid. Denna typ av erfarenhet kommer att kräva förmåga att läsa data från barnplatserna, inom dataläget.
Som vi nämnde tidigare läser de flesta chatroom-stilapplikationer data från en server och fyller sedan i en del av gränssnittet. Vi måste göra samma sak i vår ansökan, genom att utnyttja Firebase API.
Firebase API erbjuder flera metoder för att läsa data från en datalokation. I dagens handledning kommer vi att fokusera på att använda på() metod.
De på() Metoden har flera argument som är värda att titta på, men vi kommer bara att täcka de två första argumenten: event typ och ring tillbaka. Låt oss granska båda dessa.
event typ "event typ"Argumentet har flera alternativ. Låt oss titta på var och en så att vi kan bestämma vilka som kommer att uppfylla våra behov.
värde"- kommer att utlösas en gång och läser alla kommentarer, och varje gång några kommentarer ändras kommer det att utlösas igen, samt läsa alla kommentarer.child_added"- kommer att utlösas en gång för varje kommentar, liksom varje gång en ny kommentar läggs till.child_removed"- kommer att utlösas när en kommentar tas bort.child_changed"- kommer att utlösas när en kommentar ändras.child_moved"- kommer att utlösas när en kommandos order ändras.Efter att ha tittat på ovanstående alternativ verkar det helt klart att vi borde använda "child_added" som vår "event typ". Denna jämna typ kommer att utlösas en gång för varje kommentar på vår datalokal, liksom varje gång en ny kommentar läggs till. Dessutom kommer en ny kommentar att läggas till, det kommer inte att returnera hela uppsättningen kommentarer på den platsen, men bara det sista barnet har lagts till. Det här är precis vad vi vill! Det finns inget behov av att returnera hela uppsättningen kommentarer, när en ny kommentar läggs till.
ring tillbaka "ring tillbaka" för på() Metoden tillhandahåller ett objekt som Firebase refererar till som en "ögonblicksbild av data" som har flera medlemsfunktioner, fokus ligger idag på namn() och val ().
De namn() medlemsfunktionen ger oss det unika namnet på "ögonblicksbild av data". Om du kommer ihåg tidigare använde vi tryck() funktion för att skriva en ny kommentar till vår datortilldelning. När tryck() kallades, det genererade ett nytt barns plats med ett unikt namn och det är namnet som kommer att returneras via funktionen för återkoppling av medlemmen,namn().
De val () medlemsfunktionen ger oss JavaScript-objektrepresentationen av "stillbilder av data" och med denna ögonblicksbild kan vi hämta en kommentar från vår datortilldelning. Vi behöver dock backtrack ett ögonblick.
Tidigare i den här handledningen genomförde vi JavaScript som behövs för att driva kommentarer till vår Firebase-plats och det gjorde vi genom att trycka på ett objekt med ett nyckelvärdespar. I detta fall var nyckeln "kommentar"och värdet var den inmatning som användaren angav. Om vi vill extrahera en kommentar från vår" snapshot of data "måste vi känna igen rätt datatyp. I det här fallet handlar vi om ett objekt så att du kan använd antingen pricknotation eller fästnamn för att komma åt den angivna egenskapen.
Båda JavaScript-fragmenten nedan, implementera vad som beskrivs ovan:
fireBaseRef.on ('child_added', funktion (ögonblicksbild) var uniqName = snapshot.name (); var comment = snapshot.val (). comment;); fireBaseRef.on ('child_added', funktion (ögonblicksbild) var uniqName = snapshot.name (); var comment = snapshot.val () ["comment"];); Låt oss skapa ett enkelt, men ändå rent sätt att visa varje kommentar. Detta kan enkelt uppnås genom att inlämna varje kommentar inom en div och märkning varje kommentar med sitt unika namn. Vanligtvis är kommentarer märkta med användarens namn som skrev den här kommentaren, i vårt fall är detta en anonym chattrumsklient.
Koden som implementerar vad jag beskrivit ovan är som följer:
var commentsContainer = $ ('# comments-container'); $ ('', class:' comment-container ') .html ('Kommentar '+ uniqName +''+ kommentar); Därefter måste vi lägga till varje kommentar till kommentarens behållare och få nuvarande vertikala position för kommentarens behållare och bläddra till den senaste platsen. Detta kommer att se till att varje användare som använder chattprogrammet varje gång en kommentar skrivs till Firebase, ser den senaste kommentar som gjorts. Allt detta måste göras inom återuppringningen.
Det borde se ut så här:
var commentsContainer = $ ('# comments-container'); $ ('', class:' comment-container ') .html ('Kommentar '+ uniqName +''+ kommentar) .appendTo (commentsContainer); commentsContainer.scrollTop (commentsContainer.prop ( 'scrollHeight')); Nu kan vi tillämpa några enkla CSS-stilar på DIV-enheterna som vikts runt varje kommentarblock. Detta kommer att göra utseendet något mer attraktivt och användarvänligt. Dessa stilar ska läggas till i stilkoderna, som finns i huvud del av HTML-filen.
Koden som implementerar vad jag beskrivit ovan är som följer:
.behållare maxbredd: 700px; # comments-container border: 1px solid # d0d0d0; höjd: 400px; överflöde-y: bläddra .comment-container vaddering: 10px; marginal: 6px; bakgrund: # f5f5f5; typsnittstorlek: 13px; -moz-gränsen-radie: 5px; -webkit-gräns-radie: 5px; gränsstråle: 5px; .comment-container .label margin-right: 20px; .comment-container: sista-av-typ gränsbotten: ingen;
Det är dags att köra vår ansökan. Låt oss börja med att öppna två instanser av vår favorit, moderna webbläsare och placera dem sida vid sida på skrivbordet. Därefter bläddrar vi till filens plats för vår fil som vi skapade, på båda webbläsarna. Testa det genom att skriva några kommentarer och njut av att titta på Firebase's magi.
Det är otroligt att endast ett par rader kod kan producera en så kraftfull applikation. Känn fritt att redigera det här snippet på något sätt för att producera dina önskade resultat.
Kolla in online demo för att se den i åtgärd. Nedan är den fullständiga källkoden för hela chatrumsansökan:
Firebase Chat Application Firebase Chat Application
I dagens handledning arbetade vi hela vägen genom processen att implementera en enkel chattrumsapplikation genom att utnyttja Firebase's JavaScript API. På så sätt kunde vi uppleva Firebase och få en uppskattning för sin bekvämlighet. Nedan följer några av de viktigaste sakerna som vi slår på idag:
tryck metod.på metod med händelsetypen "child_added".Jag hoppas att denna handledning har gett dig utgångspunkten för att du måste ta saker vidare med Firebase. Om du har några frågor eller kommentarer, vänligen lämna dem nedan. Tack igen för din tid och fortsätt utforska de oändliga möjligheterna till Firebase API.
