Share
Nel tutorial di oggi ti aiuteremo a creare Firebase creando una semplice applicazione per chat room sfruttando l'API Javascript di Firebase. Questa applicazione ti fornirà gli elementi fondamentali per sviluppare applicazioni più avanzate in tempo reale sui tuoi progetti.
Al fine di ottenere Firebase attivo e funzionante, dovrai creare un account sviluppatore gratuito visitando il loro sito Web e registrandoti. Una volta effettuata la registrazione, Firebase ti reindirizzerà alla dashboard del tuo account, dove avrai accesso a tutte le posizioni dei tuoi dati Firebase e ad altre caratteristiche accurate. Tuttavia, adesso devi selezionare l'ubicazione dei dati di Firebase dal titolo, LA MIA PRIMA APP. Sentiti libero di rinominare questa applicazione o crearne una nuova.
Quando, la posizione dei dati di Firebase è stata creata, è stata assegnata la sua unica proprietà host-name. Questo nome host univoco è molto importante; perché questa è la posizione da cui verranno letti e scritti anche i tuoi dati. Discuteremo il nome host in modo più approfondito, più avanti nel tutorial ma per ora:
Il primo elemento all'ordine del giorno: crea un nuovo file HTML che faccia riferimento ai client Firebase, jQuery e Bootstrap CDN. È abbastanza ovvio che dobbiamo fare riferimento al CDN di Firebase. Ora, potrebbe non essere chiaro il motivo per cui stiamo facendo riferimento a jQuery e Bootstrap. Sto usando jQuery e Bootstrap allo scopo di sviluppare rapidamente le applicazioni. Entrambe queste librerie mi permettono di fare le cose molto velocemente e non richiedono molta codifica manuale. Tuttavia, non coprirò jQuery o Bootstrap in nessun grande dettaglio; quindi sentiti libero di saperne di più su queste librerie JavaScript da solo.
Il markup che implementa ciò che ho descritto è il seguente:
Firebase Chat Application
Ora che abbiamo creato il nostro file HTML e fa riferimento ai CDN corretti, iniziamo a lavorare sul resto della nostra applicazione.
In primo luogo, dobbiamo determinare quali funzionalità essenziali questa applicazione avrà bisogno. Sembra che la maggior parte delle applicazioni in stile chat abbia due somiglianze: una finestra di messaggio per l'invio di messaggi a un server e una sezione che viene popolata con messaggi da un server. Nel nostro caso, questo server sarà la nostra posizione dei dati Firebase.
Implementiamo la finestra di messaggio per l'invio di messaggi a un server prima mano. Questo ci richiederà di creare un'interfaccia semplice che includa un ingresso campo e a Sottoscrivi pulsante avvolto all'interno modulo tag. Poiché facciamo riferimento al foglio di stile Bootstrap, abbiamo la comodità di utilizzare alcuni stili di bootstrap predefiniti per creare l'interfaccia. Come ho detto prima, questo è molto conveniente e ci consente di scrivere meno codice a mano.
Quindi, innanzitutto, posizioniamo a div con l'attributo class contenitore direttamente dopo l'apertura corpo tag all'interno del file HTML. Questa è una funzione di bootstrap che fornisce vincoli di larghezza e riempimento per il contenuto della pagina. All'interno dei tag contenitore, consente di aggiungere un titolo racchiuso all'interno H1 tag, in modo che possiamo dare all'applicazione un nome descrittivo. Il mio titolo sarà "Firebase Chat Application". Sentiti libero di usare la tua creatività quando scrivi il tuo titolo.
Il markup che implementa ciò che ho descritto sopra, assomiglia a questo:
Firebase Chat Application
Inoltre, abbiamo anche bisogno di aggiungere un div con attributi di classe: pannello e Pannello-default. Un pannello è un componente Bootstrap che fornisce una semplice scatola che contiene quattro DIV interni: Pannello-rubrica, Pannello-titolo, Pannello corpo, e Pannello-footer per impostazione predefinita. Non useremo Pannello-rubrica e Pannello-titolo ma useremo entrambi Pannello corpo e Pannello-footer. Il pannello DIV verrà utilizzato come contenitore principale per il client della chat room.
Il markup che implementa ciò che ho descritto sopra è il seguente:
Firebase Chat Application
Al momento, non lavoreremo con il Pannello corpo. Tuttavia, avremo bisogno di utilizzare questa sezione più avanti nel tutorial per popolare i messaggi dalla nostra posizione dei dati.
In questo momento ci concentreremo sul pannello footer div. Il riquadro del pannello conterrà un campo di inserimento, pulsante di invio e pulsante di ripristino. Daremo al campo di input un ID attributo di Commenti e il pulsante di invio un ID attributo di submit-btn. Entrambi questi attributi di identificazione sono molto importanti e saranno necessari in seguito nel tutorial. Sentiti libero di modificare gli ID attributo per gli elementi del modulo.
Il markup che implementa ciò che ho descritto sopra è il seguente:
Firebase Chat Application
Ora implementiamo il codice JavaScript che ci consentirà di inviare il messaggio alla posizione dei dati del nostro Firebase.
Per prima cosa dobbiamo aggiungere un set di copione etichetta direttamente sopra la chiusura corpo tag, all'interno del file HTML. All'interno dei tag di script, dobbiamo creare un riferimento alla posizione dei dati del nostro Firebase. Senza questo riferimento, non possiamo scrivere dati nel nostro percorso dati. Questo può essere ottenuto inizializzando il costruttore Firebase e passando il nostro percorso dati come parametro. Ricorda che la posizione dei dati di Firebase è stata creata durante l'installazione di Firebase (il nome host univoco).
Il codice che implementa ciò che ho descritto sopra è il seguente:
Accentsconagua
var fireBaseRef = new Firebase ("IL TUO URL DATI FIREBASE"); Dopo aver inizializzato l'oggetto di riferimento Firebase, dobbiamo associare un gestore di eventi click al selettore del pulsante di invio. La posizione di questo selettore si trova nel piè di pagina del pannello. Inoltre, dobbiamo assicurarci che la callback del gestore di eventi contenga a restituisce falso dichiarazione come l'ultima riga di codice. Ciò garantirà che l'azione predefinita di invio del modulo non si verifichi e impedisca all'evento di ribollire nell'albero DOM. Tuttavia, in alcuni casi è possibile che si verifichi un bubbling degli eventi.
Entrambi i snippet di JavaScript qui sotto implementano quanto descritto sopra:
$ ("# submit-btn"). bind ("click", function () return false;); $ ("# submit-btn"). bind ("click", function (event) event.preventDefault (); event.stopPropagation ();); Successivamente, definiremo una variabile che fa riferimento al selettore del commento e un'altra variabile che rimuove gli spazi bianchi dall'inizio e dalla fine del valore del commento.
Il codice che implementa ciò che ho descritto sopra è il seguente:
$ ("# submit-btn"). bind ("click", function () var comment = $ ("# comments"); var commento_valore = $ .trim (commento.val ()); return false;) ; Ora abbiamo bisogno di determinare il metodo necessario per scrivere effettivamente i commenti di tesi nella nostra posizione dei dati.
L'API di Firebase offre diversi metodi per scrivere dati in un percorso dati. Tuttavia, nel tutorial di oggi ci concentreremo sull'utilizzo di impostato() e Spingere() metodi. Esaminiamo brevemente ciò che ciascuno di questi metodi ci consente di fare.
impostato() il metodo scriverà i dati nell'ubicazione dei dati e sovrascriverà tutti i dati attualmente archiviati nel percorso dei dati.Spingere() il metodo scriverà i dati nella posizione dei dati generando automaticamente una nuova posizione secondaria con un nome univoco. Inoltre, questo nome univoco avrà come prefisso un indicatore di data e ora. Ciò consentirà a tutti i luoghi dei bambini di essere ordinati cronologicamente.Dopo aver esaminato entrambi i impostato() e Spingere() metodi; Penso che sia abbastanza evidente che dobbiamo sfruttare il Spingere() metodo nella nostra applicazione. Altrimenti, continueremo a sovrascrivere l'ultimo commento nella nostra posizione dei dati e non sarebbe divertente.
Per fare questo, torniamo al JavaScript che abbiamo precedentemente aggiunto alla nostra pagina. Ora dobbiamo inserire il valore del commento nella nostra posizione dei dati. Ora tieni presente che ci sono diversi Spingere metodi che ci permettono di spingere i dati in vari formati, come un oggetto, un array, una stringa, un numero, booleano o null. Useremo solo un oggetto che ha una coppia di valori chiave di un commento e un valore di commento. Inoltre, allegheremo una richiamata opzionale per sparare dopo il Spingere i metodi sono finiti. Il callback restituirà un oggetto errore in caso di errore e, in caso di successo, un valore nullo.
Il codice che implementa ciò che ho descritto sopra è il seguente:
$ ("# submit-btn"). bind ("click", function () var comment = $ ("# comments"); var commentValue = $ .trim (comment.val ()); fireBaseRef.push ( comment: commentValue, function (error) if (error! == null) alert ('Impossibile inviare commenti a Firebase!');); return false;); Ora aggiungiamo qualcosa per garantire che gli utenti della chat non siano in grado di scrivere messaggi vuoti nella nostra posizione dei dati. Questo può essere facilmente realizzato aggiungendo un semplice se altro dichiarazione che controlla la lunghezza del valore del commento.
Il codice che implementa ciò che ho descritto sopra è il seguente:
$ ("# submit-btn"). bind ("clic", funzione () var commento = $ ("# commenti"); var commentoValore = $ .trim (commento.val ()); if (commentoValore.lunghezza === 0) alert ('I commenti sono necessari per continuare!'); Else _fireBaseRef.push (commento: commentoValore, funzione (errore) if (errore! == null) avviso ('Impossibile invia commenti a Firebase! ');); comment.val (""); restituisce false;); Bene, abbiamo completato con successo la sezione della nostra applicazione che consente agli utenti di scrivere dati nella nostra posizione dei dati. Tuttavia, mancano le funzionalità che offrono agli utenti un'esperienza di chat in tempo reale. Questo tipo di esperienza richiederà la capacità di leggere i dati dalle posizioni dei bambini, all'interno del percorso dei dati.
Come accennato in precedenza, la maggior parte delle applicazioni in stile chat room legge i dati da un server e quindi popola una sezione dell'interfaccia. Dovremo fare la stessa cosa nella nostra applicazione, sfruttando l'API Firebase.
L'API di Firebase offre diversi metodi per leggere i dati da un'ubicazione dati. Nel tutorial di oggi, ci concentreremo sull'utilizzo di sopra() metodo.
Il sopra() metodo ha diversi argomenti che vale la pena esaminare, ma stiamo andando a coprire solo i primi due argomenti: Tipo di evento e richiama. Esaminiamo entrambi questi.
Tipo di evento Il "Tipo di evento"L'argomento ha diverse opzioni: diamo un'occhiata a ciascuna in modo da poter determinare quali soddisfano i nostri bisogni.
valore"- verrà attivato una sola volta e leggerà tutti i commenti e ogni volta che verranno modificati i commenti verrà nuovamente attivato, oltre a leggere tutti i commenti.child_added"- verrà attivato una volta per ogni commento, nonché ogni volta che viene aggiunto un nuovo commento.child_removed"- verrà attivato ogni volta che viene rimosso un commento.child_changed"- verrà attivato ogni volta che viene modificato un commento.child_moved"- verrà attivato ogni volta che viene modificato l'ordine di un commento.Dopo aver esaminato le opzioni di cui sopra, sembra abbastanza chiaro che dovremmo usare "child_added" come il nostro "Tipo di eventoQuesto tipo pari verrà attivato una volta per ogni commento nella nostra posizione dei dati, nonché ogni volta che viene aggiunto un nuovo commento Inoltre, quando viene aggiunto un nuovo commento, non restituirà l'intera serie di commenti in quella posizione, ma solo l'ultimo figlio aggiunto. Questo è esattamente ciò che vogliamo! Non è necessario restituire l'intera serie di commenti quando viene aggiunto un nuovo commento.
richiama Il "richiama" per il sopra() metodo fornisce un elemento a cui Firebase si riferisce come una "istantanea di dati" che ha diverse funzioni membro, il focus oggi è attivo nome() e val ().
Il nome() la funzione membro ci fornisce il nome univoco dello "snapshot dei dati". Se ricordi prima, abbiamo usato il Spingere() funzione per scrivere un nuovo commento nella nostra posizione dei dati. quando Spingere() è stato chiamato, ha generato una nuova posizione secondaria utilizzando un nome univoco e questo è il nome che verrà restituito tramite la funzione membro richiamata,nome().
Il val () la funzione membro ci fornisce la rappresentazione dell'oggetto JavaScript dello "snapshot dei dati" e con questa istantanea, saremo in grado di recuperare un commento dalla nostra posizione dei dati. Tuttavia, dobbiamo tornare indietro per un momento.
In precedenza in questo tutorial abbiamo implementato il codice JavaScript necessario per inviare commenti alla nostra posizione di Firebase e lo abbiamo fatto spingendo un oggetto con una coppia di valori chiave. In questo caso, la chiave era "commento"e il valore era l'input immesso dall'utente. Pertanto, se vogliamo estrarre un commento dalla nostra" istantanea di dati ", dobbiamo riconoscere il tipo di dati corretto. In questo caso abbiamo a che fare con un oggetto, quindi puoi utilizzare la notazione dei punti o la notazione delle parentesi per accedere alla proprietà specificata.
Entrambi i snippet di JavaScript qui sotto, implementano quanto descritto sopra:
fireBaseRef.on ('child_added', function (snapshot) var uniqName = snapshot.name (); var commento = snapshot.val (). comment;); fireBaseRef.on ('child_added', function (snapshot) var uniqName = snapshot.name (); var comment = snapshot.val () ["comment"];); Quindi creiamo un modo semplice, ma pulito per visualizzare ogni commento. Questo può essere facilmente ottenuto avvolgendo ogni commento all'interno di a div e etichettare ogni commento con il suo nome univoco. Di solito i commenti sono etichettati con il nome dell'utente che ha scritto quel commento, nel nostro caso si tratta di un client di chat room anonimo.
Il codice che implementa ciò che ho descritto sopra è il seguente:
var commentsContainer = $ ('# comments-container'); $ ('', class:' comment-container ') .html ('Commenta '+ uniqName +''+ commento); Successivamente dobbiamo aggiungere ogni commento al contenitore del commento e ottenere la posizione verticale corrente della barra di scorrimento del contenitore del commento e scorrere fino all'ultima posizione. Questo assicurerà che ogni volta che un commento viene inviato a Firebase, tutti gli utenti che utilizzano l'applicazione di chat vedranno l'ultimo commento fatto. Tutto ciò deve essere fatto all'interno del callback.
Dovrebbe assomigliare a qualcosa di simile a questo:
var commentsContainer = $ ('# comments-container'); $ ('', class:' comment-container ') .html ('Commenta '+ uniqName +''+ comment) .appendTo (commentsContainer); commentsContainer.scrollTop (commentsContainer.prop ( 'scrollHeight')); Ora consente di applicare alcuni semplici stili CSS ai DIV racchiusi attorno a ciascun blocco di commenti. Questo renderà l'aspetto leggermente più attraente e facile da usare. Questi stili dovrebbero essere aggiunti all'interno dei tag di stile, che si trovano nel capo sezione dell'HTML.
Il codice che implementa ciò che ho descritto sopra è il seguente:
.container larghezza massima: 700 px; # comments-container border: 1px solid # d0d0d0; altezza: 400 px; overflow-y: scroll; .comment-container padding: 10px; margin: 6px; sfondo: # f5f5f5; dimensione del font: 13px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; .comment-container .label margin-right: 20px; .com-container: last-of-type border-bottom: none;
Ora è il momento di eseguire la nostra applicazione. Iniziamo aprendo due istanze del nostro browser moderno preferito e posizionandole parallelamente sul nostro desktop. Successivamente, esploreremo la posizione del file del nostro file che abbiamo creato, su entrambi i browser. Provalo scrivendo alcuni commenti e divertiti a guardare la magia di Firebase.
È incredibile che solo un paio di righe di codice possano produrre un'applicazione così potente. Sentiti libero di modificare questo snippet in qualsiasi modo per produrre i risultati desiderati.
Guarda la demo online per vederla in azione. Di seguito è riportato il codice sorgente completo per l'intera applicazione della chat room:
Firebase Chat Application Firebase Chat Application
Nel tutorial di oggi, abbiamo lavorato per tutto il processo di implementazione di una semplice applicazione di chat room sfruttando l'API JavaScript di Firebase. In tal modo, siamo stati in grado di sperimentare il potere di Firebase e ottenere un apprezzamento per la sua praticità. Di seguito sono riportati alcuni degli elementi chiave su cui ci siamo imbattuti oggi:
Spingere metodo.sopra metodo con il tipo di evento "child_added".Spero che questo tutorial ti abbia dato il punto di partenza che devi portare avanti con Firebase. Se avete domande o commenti, sentitevi liberi di lasciarli qui sotto. Grazie ancora per il tuo tempo e continua a esplorare le infinite possibilità dell'API Firebase.
