Share
I dagens veiledning vil vi få deg i gang med Firebase ved å bygge et enkelt chatrom søknad ved å utnytte Firebase's Javascript API. Denne applikasjonen vil gi deg byggeklossene for å utvikle mer avanserte sanntidsprogrammer på dine egne prosjekter.
For å få Firebase oppe, må du opprette en gratis utvikler konto ved å besøke deres nettside og registrere seg. Når du har registrert deg, vil Firebase omdirigere deg til kontooversikten din, hvor du vil ha tilgang til alle dine Firebase-data-steder og andre fine funksjoner. Men akkurat nå bør du velge Firebase-datalokasjonen som er rettet, MIN FØRSTE APP. Du er velkommen til å gi nytt navn til dette programmet eller opprette en ny.
Når Firebase-datalokasjonen ble opprettet, ble den tildelt sin helt egen unike host-name. Dette unike vertsnavnet er veldig viktig; fordi dette er stedet der dataene dine vil bli lest og skrevet også. Vi vil diskutere vertsnavnet i dybden, senere i opplæringen, men for nå:
Det første elementet på agendaen: Opprett en ny HTML-fil som refererer til Firebase-klienten, jQuery og Bootstrap-CDN-ene. Det er ganske tydelig at vi må referere til Firebase CDN. Nå er det kanskje ikke så klart hvorfor vi refererer til både jQuery og Bootstrap. Jeg bruker både jQuery og Bootstrap for formålet med rask applikasjonsutvikling. Begge disse bibliotekene tillater meg å gjøre ting veldig fort og de krever ikke mye håndkoding. Imidlertid vil jeg ikke dekke enten jQuery eller Bootstrap i noen fine detaljer; så vær så snill å lære mer om disse JavaScript-bibliotekene på egen hånd.
Markeringen som implementerer det jeg beskrev, er som følger:
Firebase Chat Application
Nå som vi har opprettet vår HTML-fil, og den refererer til de riktige CDNene, la oss begynne å trene resten av applikasjonen vår.
Først må vi avgjøre hvilken viktig funksjonalitet denne applikasjonen trenger. Det ser ut til at de fleste chat rom stil applikasjoner har to likheter: en melding boksen for å sende meldinger til en server og en seksjon som blir fylt med meldinger fra en server. I vårt tilfelle vil denne serveren være vår Firebase-datalokasjon.
La oss implementere meldingsboksen for å sende meldinger til en server før hånden. Dette vil kreve at vi oppretter et enkelt grensesnitt som inkluderer en inngang felt og a sende inn knappen innpakket i skjema tags. Siden vi refererer til Bootstrap-stilarket, har vi muligheten til å bruke noen forhåndsdefinerte bootstrap-stiler for å opprette grensesnittet. Som jeg sa tidligere, er dette veldig praktisk og lar oss skrive mindre kode for hånd.
Så la oss først plassere a div med klassen attributtet container rett etter åpningen kropp tag i HTML-filen. Dette er en bootstrap-funksjon som gir breddebegrensninger og utfylling for sidens innhold. Innenfor containeretikettene kan vi legge til en tittel innpakket i H1 koder, slik at vi kan gi programmet et beskrivende navn. Min tittel vil være, "Firebase Chat Application". Bruk gjerne din egen kreativitet når du skriver tittelen din.
Markeringen som implementerer det jeg beskrev ovenfor, ser slik ut:
Firebase Chat Application
I tillegg må vi også legge til en div med klassen attributter: panel og panel-standard. Et panel er en Bootstrap-komponent som gir en enkel boks som inneholder fire interiør DIV: panel rubrikken, panel-tittel, panel-legeme, og panel-footer som standard. Vi vil ikke bruke panel rubrikken og panel-tittel men vi vil bruke begge deler panel-legeme og panel-footer. De panel DIV vil bli brukt som hovedbeholder for chatroom-klienten.
Markeringen som implementerer det jeg beskrev ovenfor, er som følger:
Firebase Chat Application
For øyeblikket vil vi ikke jobbe med panel-legeme. Vi må imidlertid bruke denne delen senere i opplæringen for å fylle ut meldinger fra vår datalokasjon.
Akkurat nå vil vi fokusere på panelfoten div. Panelet footer vil inneholde et inputfelt, sende inn og tilbakestille-knappen. Vi vil gi inntastingsfeltet et attributt ID for kommentarer og send-knappen et attribut ID for sende-btn. Begge disse id-egenskapene er svært viktige og vil bli trengte senere i opplæringen. Du er velkommen til å endre attributt-IDene for skjemaelementene.
Markeringen som implementerer det jeg beskrev ovenfor, er som følger:
Firebase Chat Application
La oss nå implementere JavaScript som lar oss sende meldingen til vår Firebase datalokasjon.
Først må vi legge til et sett med manus koder rett over avslutningen kropp tag, i HTML-filen. Innenfor skriptkodene må vi opprette en referanse til vår Firebase datalokasjon. Uten denne henvisningen kan vi ikke skrive data til vår datalokasjon. Dette kan oppnås ved å initialisere Firebase-konstruktøren og passere vår dataplassering som parameter. Husk at databasen for brannbase ble opprettet når du installerte Firebase (det unike vertsnavnet).
Koden som implementerer det jeg beskrev ovenfor, er som følger:
Accentsconagua
var fireBaseRef = ny Firebase ("FIREBASE DATA URL"); Etter at du har initialisert Firebase-referanseobjektet, må vi binde en hendelseshåndterer til klikkknappen. Plasseringen av denne velgeren er innenfor panelfoten. Vi må også sørge for at hendelseshandler tilbakeringingen inneholder a returner falsk uttalelse som siste linje av kode. Dette sikrer at standardinnsatsen for å sende inn skjemaet, forekommer ikke, og forhindrer at hendelsen bobler opp DOM-treet. Men i noen tilfeller vil du kanskje ha boblende hendelser.
Begge JavaScript-kodene nedenfor implementerer det som er beskrevet ovenfor:
$ ("# submit-btn"). bind ("klikk", funksjon () return false;); $ ("# submit-btn"). bind ("klikk", funksjon (hendelse) event.preventDefault (); event.stopPropagation ();); Deretter skal vi definere en variabel som refererer til kommentarsvelgeren og en annen variabel som fjerner de hvite mellomrom fra begynnelsen og slutten av kommentarens verdi.
Koden som implementerer det jeg beskrev ovenfor, er som følger:
$ ("# submit-btn"). bind ("klikk", funksjon () var kommentar = $ ("# kommentarer"); var comment_value = $ .trim (comment.val ()); return false;) ; Nå må vi avgjøre hvilken metode som trengs for å skrive de aktuelle kommentarene til vår datalokasjon.
Firebase API gir flere metoder for å skrive data til en datalokasjon. Men i dagens veiledning skal vi fokusere på å bruke sett() og trykk() metoder. La oss kort gå gjennom hva hver av disse metodene tillater oss å gjøre.
sett() Metoden vil skrive data til datalokasjonen, samt overskrive data som er lagret på datalokasjonen.trykk() Metoden vil skrive data til datalokasjonen ved å automatisk generere et nytt barns sted med et unikt navn. I tillegg vil dette unike navnet være prefiks med et tidsstempel. Dette vil tillate at alle barns steder blir kronologisk sorterte.Etter å ha gjennomgått begge sett() og trykk() fremgangsmåter; Jeg synes det er ganske tydelig at vi trenger å utnytte trykk() metode i vår søknad. Ellers vil vi kontinuerlig overskrive den siste kommentaren på vår datalokasjon, og det ville ikke være gøy.
For å gjøre dette, la oss hoppe tilbake til JavaScript som vi tidligere har lagt til vår side. Vi må nå trykke kommenterværdien til vår datalokasjon. Husk nå at det er forskjellig trykk metoder som tillater oss å skyve data i forskjellige formater, for eksempel en gjenstand, array, streng, tall, boolean eller null. Vi vil bare bruke et objekt som har et nøkkelverdierpar av en kommentar og en kommenterværdi. I tillegg vil vi legge ved en valgfri tilbakeringing til brann etter trykk metodene er ferdig. Tilbakeringingen returnerer et feilobjekt ved feil, og etter suksess, null verdi.
Koden som implementerer det jeg beskrev ovenfor, er som følger:
$ ("# submit-btn"). bind ("klikk", funksjon () var kommentar = $ ("# kommentarer"); var commentValue = $ .trim (comment.val ()); fireBaseRef.push kommentar: commentValue, funksjon (feil) if (error! = null) alert ('Unable to push kommentarer til Firebase!');); return false;); La oss nå legge til noe for å sikre at chatrombrukerne ikke kan skrive tomme meldinger til vår datalokasjon. Dette kan lett oppnås ved å legge til en enkel om ikke annet setning som kontrollerer lengden på kommentarens verdi.
Koden som implementerer det jeg beskrev ovenfor, er som følger:
$ ("# submit-btn"). bind ("klikk", funksjon () var kommentar = $ ("# kommentarer"); var commentValue = $ .trim (comment.val ()); hvis (commentValue.length === 0) alert ('Kommentarer er påkrevd for å fortsette!'); Else _fireBaseRef.push (comment: commentValue, funksjon (feil) if (error! = Null) alert skyv kommentarer til Firebase! ');); comment.val (""); return false;); Flott, vi har fullført delen av programmet som lar brukerne skrive data til vår datalokasjon. Men vi er herre uten funksjonaliteten som gir brukerne en sanntids chat-opplevelse. Denne typen erfaring vil kreve evnen til å lese data fra barnets steder, innenfor datalokasjonen.
Som nevnt tidligere, leser de fleste chatromstil applikasjoner data fra en server og fyller deretter en del av grensesnittet. Vi må gjøre det samme i vår søknad, ved å utnytte Firebase API.
Firebase API gir flere metoder for å lese data fra en datalokasjon. I dagens veiledning skal vi fokusere på å bruke på() metode.
De på() Metoden har flere argumenter som er verdt å se på, men vi skal bare dekke de to første argumentene: eventtype og Ring tilbake. La oss se gjennom begge disse.
eventtype "eventtype"Argumentet har flere alternativer. La oss se på hver slik at vi kan bestemme hvilke som vil tilfredsstille våre behov.
verdi"- vil bli utløst en gang, og leser alle kommentarer, og hver gang noen kommentarer endres vil den bli utløst igjen, samt lese alle kommentarene.child_added"- vil bli utløst en gang for hver kommentar, så vel som hver gang en ny kommentar legges til.child_removed"- vil bli utløst når en kommentar er fjernet.child_changed"- vil bli utløst når en kommentar endres.child_moved"- vil bli utløst når en kommentars ordre er endret.Etter å ha sett over alternativene ovenfor, virker det ganske klart at vi skal bruke "child_added" som vår "eventtype"Denne jevn typen vil bli utløst en gang for hver kommentar på vår datalokasjon, så vel som hver gang en ny kommentar legges til. I tillegg, når en ny kommentar er lagt til, vil den ikke returnere hele settet av kommentarer på den plasseringen, men bare det siste barnet har lagt til. Dette er akkurat det vi vil! Det er ikke nødvendig å returnere hele settet av kommentarer, når en ny kommentar legges til.
Ring tilbake "Ring tilbake" for på() Metoden gir et element som Firebase refererer til som et "øyeblikksbilde av data" som har flere medlemsfunksjoner, fokuset er i dag på Navn() og val ().
De Navn() medlem funksjon gir oss det unike navnet på "øyeblikksbilde av data". Hvis du husker tidligere, brukte vi trykk() funksjon for å skrive en ny kommentar til vår datalokasjon. Når trykk() ble kalt, det genererte et nytt barns sted ved hjelp av et unikt navn, og det er navnet som vil bli returnert via funksjonen for tilbakeringing av tilbakemeldinger,Navn().
De val () medlem funksjonen gir oss JavaScript-objektet representasjon av "øyeblikksbilde av data" og med dette øyeblikksbildet, vil vi kunne hente en kommentar fra vår datalokasjon. Imidlertid må vi backtrack et øyeblikk.
Tidligere i denne opplæringen implementerte vi JavaScript som trengs for å skape kommentarer til vår Firebase-plassering, og vi gjorde dette ved å trykke på et objekt med et nøkkelparametre. I dette tilfellet var nøkkelen "kommentar"og verdien var innspillet som brukeren skrev inn. Derfor, hvis vi ønsker å trekke ut en kommentar fra vår" stillbilde av data ", må vi gjenkjenne riktig datatype. I dette tilfellet har vi å gjøre med et objekt, slik at du kan Bruk enten punktnotering eller brakettnotasjon for å få tilgang til den angitte egenskapen.
Begge JavaScript-kodene nedenfor implementerer det som er beskrevet ovenfor:
fireBaseRef.on ('child_added', funksjon (stillbilde) var uniqName = snapshot.name (); var kommentare = snapshot.val (). comment;); fireBaseRef.on ('child_added', funksjon (stillbilde) var uniqName = snapshot.name (); var comment = snapshot.val () ["comment"];); Neste, la oss lage en enkel, men likevel ren måte å vise hver kommentar. Dette kan lett oppnås ved å pakke inn hver kommentar i en div og merker hver kommentar med sitt unike navn. Vanligvis merkes kommentarer med brukerens navn som skrev den kommentaren. I vårt tilfelle er dette et anonymt chatrom klient.
Koden som implementerer det jeg beskrev ovenfor, er som følger:
var commentsContainer = $ ('# comments-container'); $ ('', class:' comment-container ') .html ('Kommentar '+ uniqName +''+ kommentar); Deretter må vi legge til hver kommentar til kommentarens container og få den nåværende vertikale posisjonen til kommentarens rulleboks og bla til den siste plasseringen. Dette vil sikre at hver gang en kommentar blir presset til Firebase, vil alle brukere som bruker chatprogrammet, se den siste kommentaren som ble gjort. Alt dette må gjøres innen tilbakeringingen.
Det skal se slik ut:
var commentsContainer = $ ('# comments-container'); $ ('', class:' comment-container ') .html ('Kommentar '+ uniqName +''+ kommentar) .appendTo (commentsContainer); commentsContainer.scrollTop (commentsContainer.prop ( 'scrollHeight')); Nå kan vi bruke noen enkle CSS-stiler til DIVene som er pakket rundt hver kommentarblokk. Dette vil gjøre utseendet litt mer attraktivt og brukervennlig. Disse stilene bør legges til i stilen koder, som ligger i hode delen av HTML-koden.
Koden som implementerer det jeg beskrev ovenfor, er som følger:
.beholder maksimal bredde: 700px; # comments-container border: 1px solid # d0d0d0; høyde: 400px; overflow-y: scroll; .comment-container polstring: 10px; margin: 6 piksler; bakgrunn: # f5f5f5; skriftstørrelse: 13px; -moz-grense-radius: 5px; -webkit-grense-radius: 5px; border-radius: 5px; .comment-container .label margin-right: 20px; .comment-container: siste-of-type border-bottom: none;
Det er nå på tide å kjøre vår søknad. La oss begynne med å åpne to forekomster av vår favoritt, moderne nettleser og plassere dem ved siden av hverandre på skrivebordet vårt. Deretter vil vi bla til filplasseringen av filen vi opprettet, på begge nettleserne. Teste det ut ved å skrive noen få kommentarer og nyt å se på Firebase's magi.
Det er utrolig at bare et par kodelinjer kan produsere en så kraftig applikasjon. Du er velkommen til å redigere denne brikken på noen måte for å produsere de ønskede resultatene.
Sjekk ut online demoen for å se den i aksjon. Nedenfor er den komplette kildekoden for hele chatrom-søknaden:
Firebase Chat Application Firebase Chat Application
I dagens veiledning jobbet vi hele veien gjennom prosessen med å implementere et enkelt chatrom søknad ved å utnytte Firebase's JavaScript API. På den måten kunne vi oppleve kraften i Firebase og få en takknemlighet for sin bekvemmelighet. Nedenfor er noen av de viktigste elementene vi treffer i dag:
trykk metode.på metode med arrangementstypen "child_added".Jeg håper denne opplæringen har gitt deg utgangspunktet du må ta ting videre med Firebase. Hvis du har spørsmål eller kommentarer, vær så snill å la dem være under. Takk igjen for tiden din og fortsett å utforske de uendelige mulighetene til Firebase API.
