Setup Menus in Admin Panel

School.Dataninja.it

Applicazioni web: un esempio completo

Una semplice visualizzazione di dati dinamica per vedere d3js, jquery, bootstrap, bower e grunt in azione, tra numeri casuali e palle colorate.

Ci siamo. Dopo aver capito come organizzare i file e le cartelle di progetto, gestirne l’evoluzione nel tempo con Git, sfruttare efficacemente le librerie e le dipendenze esterne con Bower, automatizzare le operazioni ripetitive con Grunt, sei pronto per costruire da zero un’intera applicazione web funzionante. In particolare svilupperai una visualizzazione dati dinamica e interattiva che farà uso delle funzionalità dei browser moderni con la giusta dose di effetto wow: una griglia di cerchi colorati il cui raggio e il cui colore cambiano nel tempo in base a dati generati casualmente.

C’era una volta… una cartella vuota

Crea una cartella vuota dove vuoi sul tuo disco, apri un terminale e posizionati al suo interno con il comando cd [percorso]/[nome cartella]/ . Prima di tutto inizializza il repository Git locale con il comando git init . Inizializza anche git-flow con il comando git flow init . Crea il file .gitignore con il seguente contenuto:

Inizializza il file package.json con il comando npm init . Inizializza il file bower.json con il comando bower init . Crea la struttura di file e cartelle come indicato nell’unità dedicata, aggiungendo un file di descrizione README e un file di licenza LICENSE. Alcuni di questi file sono inizialmente vuoti (nello schema sottostante li indico con un carattere corsivo), ma è bene crearli subito. Alla fine la tua cartella di progetto dovrebbe avere questo aspetto:

  • project/
    • index.html
    • package.json
    • bower.json
    • README
    • LICENSE
    • css/
      • main.css
    • js/
      • main.js
    • lib/
    • .gitignore

Salviamo lo stato del progetto, ancora molto preliminare, con un commit sul repository Git:

Librerie e dipendenze

Scegli con cura le librerie da cui deve dipendere la tua applicazione in base all’effetto finale che vuoi ottenere e alle funzionalità richieste. Stai sviluppando una pagina in cui una serie di cerchi sono posizionati in una griglia regolare, il cui numero, raggio e colore sono definiti da dati in ingresso che cambiano nel tempo.

jQuery

Una delle librerie più famose per lo sviluppo di pagine web, jQuery mette a disposizione una quantità infinita di metodi utili in ogni occasione. Usa il comando  bower install jquery --save per scaricarne l’ultima versione nella cartella bower_components/. Aggiungi il file principale jquery.min.js tra le dipendenze del tuo progetto nel package.json:  files: ["jquery/dist/jquery.min.js"] .

Bootstrap

Sviluppato originariamente da Twitter, Bootstrap è uno dei framework più famosi e usati per le interfacce delle pagine web. Permette di implementare in maniera semplice ed efficace un layout a griglia che sia anche responsive. Usa il comando  bower install bootstrap --save per scaricarne l’ultima versione nella cartella bower_components/. Per ora ti serve solo il foglio di stile per la griglia, per cui puoi aggiungere il solo file principale bootstrap.min.css tra le dipendenze del tuo progetto nel package.json:  files: ["jquery/dist/jquery.min.js", "bootstrap/dist/css/bootstrap.min.css"] .

d3js

Probabilmente la libreria ormai più usata per visualizzazioni web data-driven, D3 facilita enormemente la costruzione di elementi grafici delle pagina in base ai dati in ingresso. Nel tuo caso non vuoi fissare una volta per tutte numero, dimensioni e colore dei cerchi, ma vuoi che siano determinati da dati dinamici. Usa il comando  bower install d3 --save per scaricarne l’ultima versione nella cartella bower_components/. Aggiungi il file principale d3.min.js tra le dipendenze del tuo progetto nel package.json:  files: ["jquery/dist/jquery.min.js", "bootstrap/dist/css/bootstrap.min.css", "d3/d3.min.js"] .

Al termine dell’installazione delle dipendenze, il comando git status  evidenzierà solo due file modificati dall’ultimo commit: bower.json e package.json, che ora contengono le informazioni sulle tre nuove librerie. Nota che git ignora completamente i file delle librerie, tiene solo traccia del fatto che la tua applicazione ne dipende. Salva il nuovo stato del progetto con un commit: git commit -am 'New libraries: jquery, bootstrap, d3' .

Task automatici

Se pubblicassi in questo momento il tuo progetto in un repository Git pubblico, chiunque potrebbe scaricare la tua applicazione e usarla come meglio crede (anche se non avrebbe ancora molta soddisfazione). Ma nel progetto appena clonato non troverebbe le librerie, perché come abbiamo visto Git le ignora. Dovrebbe prima eseguire un bower install  (e quindi dovrebbe avere bower installato e configurato). Non è il massimo per un utente finale che non vuole partecipare allo sviluppo dell’applicazione, ma solo usarla (o almeno darle un’occhiata). D’altra parte anche includere nel repository Git del tuo progetto tutti i file delle librerie da cui dipende non è una grande idea, perché di fatto te ne servono solo tre, quelli esplicitamente nominati nel file package.json.

L’ideale sarebbe permettere a Git di tenere traccia solo di questi tre file e di nessun altro. Per esempio copiandoli dalla loro posizione originaria (in bower_components/) in un’altra più comoda e inserita nel repository, come la cartella lib/. Il lavoro perfetto per Grunt, a cui serve l’installazione di un plugin (grunt-contrib-copy) e il file Gruntfile.js opportunamente compilato.

Il plugin grunt-contrib-copy

Sempre nella cartella di progetto lancia il comando npm install grunt-contrib-copy --save-dev . Il plugin nominato viene scaricato localmente nella cartella node_modules/.

Il file Gruntfile.js

Crea il file Gruntfile.js e copia il contenuto che hai già visto nell’unità dedicata e che riporto qui per comodità.

Esegui il task con un semplice comando grunt: troverai i tre file da cui dipende la tua applicazione nella cartella lib/. Ora puoi eseguire un nuovo commit, aggiungendo al repository Git i nuovi file appena creati:

Una pagina web che c’è… ma non si vede!

Sei pronto per riempire la tua pagina web di contenuti. Prima però hai bisogno di un modo per aprire il file index.html, il file principale della tua applicazione, nel tuo browser preferito. Il modo più semplice è lanciare un piccolo web server locale e aprire il browser alla pagina http://localhost:8080. Mediante npm possiamo installarne uno leggerissimo con il comando npm install http-server -g . Una volta fatto, apri un nuovo terminale, posizionati all’interno della cartella principale della tua applicazione ed esegui il comando http-server. Ignora pure l’output del comando e riduci a icona la finestra del terminale (non chiuderla!). Aprendo l’url http://localhost:8080 vedrai una bella pagina bianca, completamente vuota.

Apri il file index.html e scrivi il codice HTML che includa le librerie e definisca gli elementi principali della pagina.

Ricaricando la pagina del browser, non cambierà apparentemente nulla. In realtà prima (non) visualizzavi un file completamente vuoto, mentre adesso stai guardando una pagina web regolare e ben formata, benché vuota. L’elemento caratterizzante dei documenti data-driven (d.d.d., da cui d3) è che gli elementi della pagina e le loro caratteristiche sono definiti dai dati, non impostabili a priori. Per il momento nel body c’è infatti solo un contenitore vuoto, in attesa che la tua applicazione lo riempia. Esegui un nuovo commit:  git commit -am 'Simple HTML structure of the web page' .

Dati dinamici

Normalmente i dati che guidano un’applicazione data-driven provengono da un dataset memorizzato in un file, da un database, da un servizio interrogabile da remoto (un sensore collegato a Internet, le API di Twitter, ecc.). In questo esempio non avrai nulla di tutto questo, ma scriverai una semplice funzione che produrrà di volta in volta dati casuali. Apri il file js/main.js e incolla il codice seguente.

Salva e ricarica la pagina del browser. Osserva come il contenuto della pagina cambia ogni secondo. I dati hanno questa forma: una sequenza (array) di oggetti, ognuno dei quali possiede due attributi numerici, a e b. Esegui un commit:  git commit -am 'Generation of random data: [ { "a":[num], "b": [num] }, ...]'

Numeri e forme

Già questa è una rappresentazione dinamica dei dati: il metodo JSON.stringify() costruisce una stringa ben indentata (quindi leggibile) dei dati e permette di visualizzarli. Non ti basta stamparli, però, tu vuoi associare i dati a delle caratteristiche geometriche, vuoi codificare l’informazione contenuta nei dati in elementi visuali. In particolare vuoi rappresentare ogni oggetto come un cerchio, l’attributo a come il raggio e l’attributo b come il colore. In questo d3 è imbattibile.

Salva e ricarica la pagina. Ora viene generato dinamicamente un riquadro per ogni elemento della sequenza di dati in ingresso, riempito con il valore degli attributi a e b. In ogni istante la griglia della pagina mostra i dati correnti e non appena questi cambiano, si adatta di conseguenza, creando nuovi riquadri, distruggendo quelli vecchi, aggiornando il contenuti di quelli rimasti.

Prova anche a ridimensionare la finestra del browser, soprattutto in larghezza. Le larghezze dei riquadri cambieranno di conseguenza e sotto certe soglie cambierà il numero di riquadri per riga.

E alla fine furono cerchi

Basta però stampare i dati numerici, l’obiettivo è creare cerchi dai tuoi dati.

Salva e ricarica e poi esegui un commit: git commit -am 'Circle radius and fill color are now joined to dynamic data' .

Eppur si muove

Per quanto bella e colorata, una visualizzazione dinamica così è troppo singhiozzante. Il problema è che l’aggiornamento dei dati e dei cerchi è troppo repentino, non permette all’occhio di apprezzare la variazione dei raggi. E non si aggiornano nemmeno i colori. Grazie a d3 puoi comunque aggiungere effetti animati aggiungendo solo poche righe al codice già scritto (cerca transition()).

Salva, ricarica e commit:  git commit -am 'Dynamic transitions for circle radius and fill color' .

Pubblicare il tutto su Github

Soddisfatto del risultato, è ora di rilasciare l’applicazione pubblicamente. Prima di tutto ricordati che finora hai lavorato sulla branch develop di Git, quindi è il caso di rilasciare la prima versione completa sulla branch master, passando alla versione 1.0.0. Usando git flow è tutto molto semplice. Prima inizia la fase di rilascio con il comando  git flow release start 1.0.0 . Poi modifica i file package.json, bower.json e il README per aggiornare il numero di versione ed eventuali note per gli utenti. Esegui il commit delle modifiche:  git commit -am 'Update version number and README file' . Concludi la fase di rilascio facendo il merge con la branch master e aggiungendo una tag al relativo commit:  git flow release finish 1.0.0 .

Ora accedi a Github con il tuo account e crea un nuovo repository vuoto (inserisci solo nome e descrizione, non aggiungere alcun file predefinito). Una volta fatto effettua il push del tuo repository locale su quello remoto appena creato (ricordati di sostituire [user name] e [repo name] con il tuo username su Github e con il nome del nuovo repository).

Aggiungo un piccolo trucco molto utile per visualizzazioni web di questo tipo che non richiedono altro che i propri file di progetto (quindi nessun database o applicativo eseguito dal server).

Apri ora la pagina http://[user name].github.io/[repo name]. La visualizzazione è servita. Se vuoi vederne il codice e la storia così come l’hai letta qui, trovi tutto su Github.

Letture: 545