4

Con il proliferare delle applicazioni web in tempo reale è aumentato anche il numero e la qualità dei servizi che offrono API in grado di eliminare l’annosa necessità di doversi affidare alle tecnologie server side convenzionali.

In questo tutorial creeremo una semplice chat con accesso tramite facebook basata su Firebase. Firebase è una piattaforma che fornisce API per immagazzinare ed ottenere informazioni in tempo reale. Inoltre il pacchetto base che permette 50 connessioni simultanee, 5 GB di data transfer, 100Mb di database, 1 Gb di hosting e 100 GB hosting transfer è completamente gratuito per cui permette di creare piccole app o semplicemente sperimentare senza investimenti aggiuntivi.

Data la natura in tempo reale dell’applicazione il templating verrà preso in carico da handlebars di cui abbiamo già parlato in precedenza.

Codice Completo Demo

L’applicazione che andremo a realizzare

Iniziamo

Come prima cosa create un account gratuito su Firebase. Terminata la procedura di registrazione sarà stata già creata per voi la prima applicazione “My First App”.

In questo esempio impiegheremo l’hosting di Firebase in modo da illustrarne tutte le funzionalità ma potete tranquillamente procedere utilizzando un qualsiasi altro hosting a vostra disposizione saltanto la parte che segue (in questo caso ricordatevi di dare il permesso all’eventuale dominio utilizzato di accedere alle API di firebase nella sezione Simple Login).

Firebase Hosting

Per lavorare con l’hosting di firebase dovete prima di tutto installare node.js sul vostro sistema dopo di che eseguire il seguente comando dal terminale per installare il tool per l’upload sulll’hosting di firebase:

$ npm install -g firebase-tools

Una volta terminata la procedura di installazione create una nuova cartella “MyApp” per la vostra applicazione (i comandi che seguono sono per Mac, la procedura è comunque molto simile per window):

$ mkdir MyApp
$ cd MyApp
$ firebase init

Ora vi verranno chieste le credenziali di accesso a Firebase dopodichè apparirà una lista delle applicazioni attive e vi verrà chiesto di per quale  volete creare l’hosting. Copia incollate il nome (qualcosa del tipo: amber-fire-1234) nel campo Firebase app e date invio alla richiesta successiva (current directory) per confermare la directory corrente.

Ora ogni volta che vorrete pubblicare qualcosa sul vostro hosting accessibile all’indirizzo … non dovrete fare altro che accedere alla cartella da terminale e digitare:

$ firebase deploy

per pubblicare le modifiche sull’hosting di firebase.

Pubblichiamo il nostro file sull’hosting di firebase

Creiamo un nuovo file index.html ed inseriamo nel file la struttura base HTML5:

<!DOCTYPE html>
<html>
    <head>
        <title>MyApp</title>
    </head>
    <body>
        <p>Hello World</p>
    </body>
</html>

Ora per pubblicare il sito digitiamo nel terminale:

$ firebase deploy

seguito da

$ firebase open

per visualizzare il risultato nel nostro browser (se aveste optato per un altro hosting non dovete fare altro che caricare il file attraverso Ftp).

Creiamo la base della nostra applicazione

Ora modificate il file index.html come segue:

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>MyApp</title>

        <style>
        /* Gli stili della tua app vanno qui */
        </style>

        <!--[if lt IE 9]>
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        
    </head>
    <body>

    	<p>Hello World</p>

        <!-- Scripts -->
        <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
        <script type='text/javascript' src='//cdn.firebase.com/js/client/1.0.15/firebase.js'></script>
        <script type='text/javascript' src='//cdn.firebase.com/js/simple-login/1.4.1/firebase-simple-login.js'></script>
        <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js'></script>
        <script type="text/javascript">
            // Il codice della tua App va qui
        </script>

    </body>
</html>

Come potete vedere abbiamo accodato prima del tag </body> tutti gli script che andremo ad utilizzare ovvero:

  1. jquery.min.js • In questo caso l’uso di jQuery è assolutamente inutile ma dato che si tratta di un esempio ho deciso di adottarlo per velocizzare la scrittura del codice
  2. firebase.js • Il client per le API di firebase
  3. firebase-simple-login.js • Plugin aggiuntivo necessario per implementare il login con facebook
  4. handlebars.min.js • Il template engine scelto per renderizzare la chat

Ora andiamo a costruire il form per l’invio dei messaggi alla chat. Sotto al nostro Hello World andiamo ad inserire:

<!-- Chat Input -->
<form id='chat_input' action='#'>
    <input type='text' id='message' placeholder='Messaggio'>
    <button type='submit' id='send'>Invia</button>
</form>

Qui comincia il bello. Ora che è tutto pronto possiamo andare a contattare le API di Firebase per inserire il nostro primo messaggio. All’interno del tag script aggiungiamo:

jQuery('document').ready(function ($) {

    // Ci colleghiamo alle API della nostra App firebase
    // Sostituite tutorial-chat-app con l'url della vostra App
    var myDataRef = new Firebase('https://tutorial-chat-app.firebaseIO.com/');

    // Quando il form viene inviato
    $('#chat_input').submit(function (e) {

        // Inserisco l'input in un oggetto jQuery
        var input = $('#message');

        // Impedisco il comportamento di default dell'evento submit
        e.preventDefault();

        // Se il campo non è vuoto
        if ( $('#message').val() ){

            // Invio a firebase un oggetto che contiene la proprietà message
            myDataRef.push({
                time: Firebase.ServerValue.TIMESTAMP,
                message: input.val() // Contenuto dell'input
            });
        }

        // Riazzero l'input e gli do il focus
        input.val('').focus();

    });

    // Continua qui

});

Ora non ci rimane che caricare il tutto eseguendo nuovamente i comandi:

$ firebase deploy
$ firebase open

Ora nel vostro browser dovrebbe essersi aperta l’applicazione. Scrivete qualcosa nel campo messaggio e cliccate su Invia… Ma non succede niente? Dov’è finito il vostro messaggio?

Ancora non abbiamo scritto il codice che visualizza i dati inseriti ma possiamo comunque consultarli dal pannello di amministrazione dell’applicazione. Accedete al vostro account di firebase e cliccate su Manage App… Espandete il campo con il + accanto e voilà, ecco il vostro messaggio!

Schermata 07-2456854 alle 15.40.31

Ora non ci resta che visualizzare i messaggi all’interno dell’App. Per farlo andiamo ad aggiungere il seguente codice subito dopo al form:

<!-- Message list -->
<ul id="message_list"></ul>

<!-- Single Message template -->
<script id="message-template" type="text/x-handlebars-template">
    <li class="message-body">
        <small class="message-date">{{timeConverter time}}</small>
        <p class="message-content">{{message}}</p>
    </li>
</script>

Come potete facilmente intuire in queste poche linee di codice abbiamo definito un contenitore per la lista dei messaggi nonchè un template per il messaggio singolo utilizzando la sintassi di handlebars. Torniamo al nostro codice js e subito sotto a “continua qui” aggiungiamo:

// Registro il mio template per i singoli messaggi
var messageTemplate = Handlebars.compile($('#message-template').html());

// Registro un helper di handlebars per visualizzare correttamente l'ora
Handlebars.registerHelper('timeConverter', function (UNIX_timestamp) {
    var now = new Date(UNIX_timestamp),
        pad = "00",
        minutes = (pad+now.getMinutes()).slice(-pad.length);

    return now.getHours() + ':' + minutes;
});

// All'aggiunta di un nuovo messaggio
myDataRef.on('child_added', function(snapshot) {

    // Lo aggiungo alla lista
    $('#message_list').prepend(messageTemplate(snapshot.val()));

});

Ora concentriamo l’attenzione sull’ultima parte del codice appena inserito. All’evento child_added, ovvero ogni volta che un elemento viene inserito nella nostra base dati viene eseguito il codice all’interno cui viene passato il valore dell’ellemento (nel nostro caso la variabile snapshot che contiene il messaggio e la data in formato timestamp).

Il bello è che si tratta di un evento asincrono per cui i dati verranno visualizzati in tempo reale. Ma non dovete fidarvi della mia parola per cui andiamo a pubblicare il tutto con il solito:

$ firebase deploy
$ firebase open

Finalmente riusciamo a visualizzare il nostro messaggio precedente ma c’è di più, provate ad aprire lo stesso indirizzo con il cellulare o un altro computer ed inserire un nuovo messaggio… tutte le istanze dell’applicazione aperte saranno sincronizzate in automatico.

Come implementare il login con facebook

Arrivati a questo punto abbiamo già una chat bruttina ma funzionante. Quello che manca è chiaramente la possibilità di autenticarsi e nel nostro esempio andremo a farlo con facebook grazie ad plugin già incluso nella suite di Firebase ovvero firebase-simple-login.

Per poter fare interagire Firebase con facebook dobbiamo come prima cosa creare un’applicazione su facebook. La procedura è piuttosto semplice. Accedete a facebook e create una nuova applicazione accedendo alla sezione developers, cliccando su Apps e successivamente su Create a New App dal menu a tendina. Compilate ora il Display Name e la Categoria per procedere.

Schermata 07-2456854 alle 17.12.24

Nella schermata che segue, dal menu laterale selezionate Settings ed inserite un’indirizzo email valido nel campo Contact Email. Cliccate ora su Add platform, selezionate Website ed inserite in entrambi i campi (Site URL, Mobile Site URL) l’indirizzo della vostra applicazione firebase. Infine cliccate su Advanced ed inserite nel campo Valid OAuth redirect URIs il seguente indirizzo:

https://auth.firebase.com/auth/facebook/callback

Ora salvate e sempre dal menu laterale selezionate Status & Review e cliccate sul grosso swith in alto a destra per mettere l’applicazione online.

Schermata 07-2456854 alle 17.14.57

Non vi rimane che cliccare su dashboard e copiare i due campi App ID e App Secret (per il secondo dovete prima cliccare su SHOW). Ora tornate sul pannello di ammistrazione di Firebase ed incollate i due valori nella sezione Simple Login della vostra applicazione come da screenshot che segue:

Schermata 07-2456854 alle 17.17.24

Analizziamo ora, per un’attimo, la logica dell’applicazione. La lista dei messaggi sarà pubblica, per cui accessibile a tutti, mentre per poter scrivere un nuovo messaggio bisognerà essere loggati.

Modifichiamo il codice del nostro form aggiungendo un link per il login e nascondendo di default il campo del messaggio:

<!-- Login button -->
<a href="#" class="login_button">Login con facebook</a>

<!-- Chat Input -->
<form id='chat_input' action='#' style="display:none;">
    <input type='text' id='message' placeholder='Messaggio'>
    <button type='submit' id='send'>Invia</button>
</form>

Aggiungiamo le informazioni sull’utente al template del messaggio come segue:

<!-- Single Message template -->
<script id="message-template" type="text/x-handlebars-template">
    <li class="message-body">
        <img src="http://graph.facebook.com/{{author_id}}/picture">
        <small class="message-date">{{timeConverter time}}</small> 
        <strong>{{author}}</strong>
        <p class="message-content">{{message}}</p>
    </li>
</script>

Torniamo al nostro script e sostituiamo tutto il codice javascript fino ad ora inserito con quello che segue:

// Your code goes here
jQuery('document').ready(function ($) {

    // Ci colleghiamo alle API della nostra App firebase
    // Sostituite tutorial-chat-app con l'url della vostra App
    var myDataRef = new Firebase('https://tutorial-chat-app.firebaseIO.com/');

    // Richiedo a firebase la situazione dell'autenticazione
    var auth = new FirebaseSimpleLogin(myDataRef, function(error, user) {

        // Se l'utente è loggato
        if (user) {

            // Nascondo il link al login
            $('.login_button').hide();

            // Visualizzo il modulo per l'inserimento di un nuovo messaggio
            $('#chat_input').fadeIn();

            // Quando il form viene inviato
            $('#chat_input').submit(function (e) {

                // Inserisco l'input in un oggetto jQuery
                var input = $('#message');

                // Impedisco il comportamento di default dell'evento submit
                e.preventDefault();

                // Se il campo non è vuoto
                if ( $('#message').val() ){

                    // Invio a firebase un oggetto che contiene la proprietà message
                    myDataRef.push({
                        author: user.displayName,
                        author_id: user.id,
                        time: Firebase.ServerValue.TIMESTAMP,
                        message: input.val()
                    });
                }

                // Riazzero l'input e gli do il focus
                input.val('').focus();

            });

        // Se l'utente non è loggato
        } else {

            // Cliccando su login
            $('.login_button').click(function (e) {

                // Impedisco il comportamento di default
                e.preventDefault();

                // Richiedo l'autorizzazione al login con facebook
                auth.login('facebook');
                
            });

        }

    });

    // Registro il mio template per i singoli messaggi
    var messageTemplate = Handlebars.compile($('#message-template').html());

    // Registro un helper di handlebars per visualizzare correttamente l'ora
    Handlebars.registerHelper('timeConverter', function (UNIX_timestamp) {
        var now = new Date(UNIX_timestamp),
            pad = "00",
            minutes = (pad+now.getMinutes()).slice(-pad.length);

        return now.getHours() + ':' + minutes;
    });

    // All'aggiunta di un nuovo messaggio
    myDataRef.on('child_added', function(snapshot) {

        // Lo aggiungo alla lista
        $('#message_list').prepend(messageTemplate(snapshot.val()));

    });

});

Ora carichiamo il tutto su firebase:

$ firebase deploy
$ firebase open

La prima cosa che noterete è che i vecchi messaggi non sono formattati correttamente. Questo dipende dal fatto che tali messaggi non contenevano le informazioni sull’utente. La seconda cosa è che manca il campo per inserire il messaggio ed al suo posto c’è il link per il login. Perfetto!

Date il permesso all’applicazione di accedere al vostro profilo facebook e provate a scrivere un nuovo messaggio… Finalmente la chat sembra completa ma manca ancora qualcosa. Non abbiamo definito da nessuna parte che solo gli utenti loggati possono scrivere sulla chat per cui un hacker potrebbe tranquillamente inserire un nuovo messaggio dalla console del browser senza essere loggato. Non ci sta bene per cui torniamo sul pannello di ammistrazione della nostra applicazione Firebase e clicchiamo su Security Rules. Nell’area dedicata cancelliamo il contenuto attuale e lo sostituiamo con quello che segue:

{
    "rules": {
        ".read": true,
        ".write": "auth != null"
    }
}

Si tratta di semplici istruzioni che informano l’applicazione che tutti gli utenti (anche quelli anonimi) hanno permessi in lettura ma solo quelli autenticati possono pubblicare un nuovo messaggio.

Conclusioni

Come avrete intuito il potenziale di questa piattaforma è davvero incredibile. In questo caso abbiamo creato una semplice Chat ma si presta benissimo per ogni genere di Applicazione Web o Mobile. Di seguito potete visualizzare la demo o scaricare l’intero codice del tutorial.

Codice Completo Demo

  1. salve cercando nel web ho trovato il tuo sito
    trovo interessante cio che ai scritto e sono interessato a costruire anch’io
    una chat come ai integrato sopra nella pagina…
    il punto e che non mi e chiaro una volta registrato sul sito dove trovo Simple Login x le API
    per poi dare il comando CON node.js

    puoi postare una guida passo passo non sono molto pratico ho letto e riletto la tua guida
    ma qualcosa mi sfugge

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *