Semplice HTML5 Mobile App con Bootstrap Ratchet e Backbone.js

upcreative — Fri, 28 Mar 2014 14:07:15 +0000

Nonostante non sia d’accordo con l’idea di utilizzare un framework esterno “per intero” nello sviluppo di HTML Mobile App, sono comunque convinto che attingere CSS e stili da alcuni di essi possa notevolmente incrementare la qualità del prodotto finale e velocizzare il flusso di lavoro, evitando di reinventare ogni volta la ruota.

In un precedente articolo avevo parlato di 8 mobile framework per la realizzazione di applicazioni mobile in HTML5, CSS3 e Javascript, in cui ho inserito anche Ratchet, che offre stili CSS3 molto puliti ed un markup in linea con le moderne specifiche HTML5.

Dopo che lo scorso mese nel blog di Twitter Bootstrap è stato annunciato che Ratchet 2.0 farà parte d’ora in poi dell’organizzazione Bootstrap, ho deciso di rilasciare l’esempio di una semplice HTML5 Mobile App sviluppata con Backbone.js usando gli stili (e solo gli stili) di questa nuova versione di Ratchet, la quale quale offre 3 ottimi skin di partenza: quello di base, quello stile iOS, e quello stile Android.

Cosa desideriamo di meglio?

L’intento è quello di realizzare una view iniziale con un header, un sub-header contenente un input di ricerca, ed il contenitore per mostrare una lista di articoli; grazie all’input di ricerca l’utente può filtrare i contenuti della lista.

L’applicazione è quindi composta da 3 backbone view:

la prima rappresenta la schermata principale contenente header e sub-header
la seconda rappresenta la view della lista
la terza rappresenta ogni articolo che dovrà essere inserito nella lista

Come nello scorso esperimento, lavoreremo sempre con model e collection per definire rispettivamente il modello di articolo e la collezione per la lista degli articoli.

Ecco lo schema del funzionamento dei vari componenti che formano la nostra HTML5 Mobile App:

Semplice #HTML5 #MobileApp con #Bootstrap #Ratchet e #Backbonejs
Click To Tweet

Trovi le DEMO dei 3 diversi stili ed il DOWNLOAD alla fine di questo articolo!

HTML5 mobile app: impostazione del documento

Come prima cosa andiamo a scaricare lo zip di Ratchet dal sito ed includiamo nel nostro documento solo gli stili CSS ed il font per le icone. Per usare lo stile base dovremo includere solo il file ‘ratchet.css‘ o ‘ratchet.min.css‘, mentre per gli stili iOS o android dovremo aggiungere anche i rispettivi file ‘ratchet-theme-ios.css‘ o ‘ratchet-theme-android.css‘.

Ecco l’esempio per l’utilizzo del tema iOS:

Poi inseriamo nel documento le varie librerie javascript, prima della chiusura del tag in modo da velocizzare il caricamento della pagina:

Definizione di model e collection

Vediamo come definire il model e la collection deli articoli:

//definiamo il modello di un articolo
var ArticleModel = Backbone.Model.extend({

    // all'inizializzazione di ogni modello creiamo la relativa anteprima
    initialize: function(){
        var article = this.get("article");
        this.set("preview", article.substr(0, 70)+"...");
    },

    // Attributi predefiniti per il modello, che vengono usati 
    //se non passati al momento dell'inizializzazione    
    defaults: {
        id: new Date().getUTCMilliseconds(), //impostiamo un id univoco in base alla data 
        title: "Nessun titolo",
        article: "",
        image: false,
        createdat: new Date()
    } 
});

//definiamo la collection per la lista degli articoli
var ArticleList = Backbone.Collection.extend({ 
    //Impostiamo la referenza al model per questa collection.
    model: ArticleModel,

    //funzione che restituisce il numero seriale per l'id di ogni nuovo articolo
    nextId: function() {
        if (!this.length) return 1;
        return this.first().get('test') + 1; 
    },

    //la funzione per la ricerca, che restituisce solo i models degli articoli
    //che contengono il termine ricercato nel titolo (la usaeremo per la ricerca)
    search : function(term){
        if(term == "") return this;

        var pattern = new RegExp(term,"gi");
        return _(this.filter(function(data) {
            return pattern.test(data.get("title"));
        }));
    }
});

Le view

Ecco come si presenta la view principale:

//definiamo la view principale della nostra app
var StartView = Backbone.View.extend({

    // comunichiamo a backbone che deve inserire il markup del template di questa view all'interno di un oggetto dal tag 'section'
    tagName:  "section",

    //settiamo la classe che deve avere il tag 'section'
    className: "page-wrapper",

    //impostaiamo l'id del template da cui generare il markup di questa view
    template: "#startview-template",

    initialize: function() {

        //compiliamo il template in una variabile
        this.template = _.template($(this.template).html());

        //inizializziamo la view della lista degli articoli
        this.resultsView = new ListView({collection: this.collection});
    },

    //funzione che genera il markup di questa view
    render: function () {
        this.$el.html(this.template()); //genero l'html di questa view 
        //inserisco l'html della view dei risultati ti ricerca nella div con classe '.content' presente in questa view
        this.$('.content').append(this.resultsView.render().el); 
        return this;
    },

    // Deleghiamo gli eventi per la ricerca sull'input di testo 
    events: {
        //evento //selettore    //funzione da eseguire
        "keyup .search-term":    "search",
        "keypress .search-term": "onkeypress"
    },

    //funzione che richiama il methodo 'renderList' della view della lista ad ogni keyup sull'input di ricerca
    search: function (e) {
        var term = $(e.currentTarget).val();
        //se il termine non è vuoto allora richiamo il 'renderList' passando i dati filtrati,
        //altrimenti richiamo il render per mostrare la lista intera
        if(term!="") 
            this.resultsView.renderList(this.collection.search(term));
        else
            this.resultsView.render();
    },

    onkeypress: function (e) {
        if (e.keyCode === 13) { // preveniamo il normale evento di invio con il pulsante 'Enter'
            e.preventDefault();
        }
    }
});

Avremmo potuto anche “unificare” entrambe le view (quella principale e quella del contenitore della lista) in un unica view, ma lasciandole separate riusciamo ad ottenere un progetto più scalabile e dinamico: potremmo per esempio inserire nell’elemento ‘.content‘ della view principale qualsiasi altra view, oltre a quella della lista. Ciò ci permetterebbe di usare la view principale per più di uno scopo.

Ora vediamo la view del contenitore della lista, che sarà applicata appunto all’interno dell’elemento DOM con classe ‘.content‘ della view principale:

//view per la lista degli articoli (viene inizializzata all'interno della view 'StartView')
var ListView = Backbone.View.extend({

    // comunichiamo a backbone che deve inserire il markup del template di questa view all'interno di un 'ul'
    tagName:'ul',

    //questa view non ha bisogno di template, perchè viene popolata con le varie view 'ListItemView'
    //relative ad ogni model presente nella collection

    //impostiamo la classe che deve avere il contenitore di questa view
    className:'table-view',

    initialize:function () {

    },

    //funzione per mostrare la lista completa all'avvio dell'ìapplicazione
    render : function(articles){
        var _this = this;   
        this.$el.empty(); 

        //per ogni elemento della collection creiamo una nuova view
        this.collection.each(function(task){
            var view = new ListItemView({ model: task });
            _this.$el.append(view.render().el);
        });
        return this;
    },

    //funzione che viene richiamata al momento della ricerca, alla quale vengono passati i model che 
    //soddisfano la ricerca
    renderList : function(articles){
        var _this = this;        
        this.$el.empty(); 

        //anche qui per ogni model creo la relativa view
        articles.each(function(task){
            var view = new ListItemView({ model: task });
            _this.$el.append(view.render().el);
        });
        return this;
    }

});

Questa view si preoccupa di mostrare inizialmente tutti i model (quindi gli articoli) presenti all’interno della collection, mentre tramite il metodo ‘renderList‘ mostra solamente la lista di articoli che viene passata come parametro. Tale metodo viene richiamato dalla view principale al momento in cui si verifica l’evento ‘keyup‘ sull’input di ricerca.

Per mostrare i risultati al suo interno, la view della lista provvede alla creazione di una nuova view ‘ListItemView‘ per ogni model degli articoli, sia all’interno del metodo ‘render‘ che del metodo ‘renderList‘:

//view per ogni elemento da inserire nella lista dei risultati degli articoli (viene inizializzata all'interno della view 'ListView')
var ListItemView = Backbone.View.extend({

    //il tag da usare per il contenitore del markup
    tagName:"li",

    //la classe da associare al contenitore del markup
    className: "table-view-cell",

    //impostaiamo l'id del template da cui generare il markup di questa view
    template: "#listitemview-template",

    initialize:function () {

        //compiliamo il template in una variabile
        this.template = _.template($(this.template).html());

        //se il model associato subisce delle modifiche allora richiamiamo il render per aggiornare il markup 
        //(non usato in questa demo)
        this.model.on("change", this.render, this);
        //se il model associato viene eliminato, allora richiamiamo la funzione 'close' che ne rimuove il 
        //relativo DOM dal documento (non usato in questa demo)
        this.model.on("destroy", this.close, this);
    },

    //genriamo il markup passando al template compilato i dai del model dell'articolo in formato JSON
    render:function () {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },

    close: function(){
        //elimina il DOM di questa view dal documento ed annulla gli eventi applicati nella funzione 'initialize'
        this.remove();
    }

});

I template e la generazione del markup

Come al solito utilizziamo il sistema di templating di underscore.js per la generazione del markup di ogni view, considerando che la view della lista non ha bisogno di un template, perché come abbiamo visto il markup da inserire al suo interno è costituito dalle varie view degli articoli.

Per avere maggiori informazioni sui sistemi di Javascript templating, ottimi per progetti di tipo “Single-Page-Application“, ti consiglio di leggere questo mio precedente articolo:

I sistemi di Javascript templating e le migliori librerie

Vediamo quindi i due template da inserire all’interno del documento:

Avviamo l’applicazione

Una volta impostati tutti i componenti necessari, passiamo all’avvio dell’applicazione, inizializzando una nuova collection per gli articoli con dei dati iniziali:

$(function(){

	//creiamo una nuova istanza per la collection degli articoli con 4 models iniziali
    var articles = new ArticleList([
        {
            title: "App su upCreative.net",
            image: "1.jpg",
            article: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        },
        {
            title: "Secondo articolo su upCreative.net",
            image: "2.jpg",
            article: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur"
        },
        {
            title: "Articolo senza immagine 3",
            image: "3.jpg",
            article: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat"
        },
        {
            title: "Quarto articolo sulla  lista",
            image: "4.jpg",
            article: "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat"
        },
        {
            title: "Quinto articolo sulla  lista",
            image: "5.jpg",
            article: "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat"
        },
        {
            title: "Sesto articolo sulla  lista",
            image: "1.jpg",
            article: "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat"
        },
        {
            title: "Settimo articolo sulla  lista",
            image: "2.jpg",
            article: "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat"
        }
    ]);
    //creiamo una nuova istanza per la view iniziale 
    //associandogli la collection appena creata e popolata
    var startView = new StartView({
        collection : articles
    });
    $("body").append(startView.render().el);

});

Backbone.js e Ratchet HTML5 mobile app: il risultato

Vediamo il risultato live nei 3 skin differenti offerti da Ratchet:

Stile di base

Stile di iOS

Stile di Android

Aiutami a condividere la risorsa per ottenere il download:

Crea la tua mobile app in HTML, CSS3 e Javascript

Utilizzando questa tecnica insieme a molte altre, ho realizzato più di 10 mobile app in HTML, CSS3 e Javascript (tra cui Tint e Dieta SI o NO?).

Se anche tu vuoi realizzare la tua applicazione in HTML, CSS e javascript da distribuire nei vari store, forse potrebbe interessarti il mio e-book HTML Mobile Accelerato.

The post Semplice HTML5 Mobile App con Bootstrap Ratchet e Backbone.js appeared first on upCreative.

upCreative » android