Durante il corso di questa rubrica ci siamo soffermati spesso sulle caratteristiche di Dart Editor, evidenziandone quelle che, oltre a semplificare la fase di stesura del codice, consentono all’utente di imparare ad usare Dart al meglio. Dalla build 0.3.1.1_r17328, rilasciata il 22 Gennaio 2013, è stato integrato nell’Editor un wizard per la creazione di Chrome Packaged Apps; questo tipo di applicazioni sono particolarmente interessanti perché consentono di sviluppare robuste applicazioni web con l’ausilio delle chrome.* APIs, che ne estendono notevolmente il campo di azione.
Nell’articolo di oggi vedremo come creare una semplicissima Chrome Packaged App che esegue una ricerca su Twitter e mostra i risultati.
Per iniziare abbiamo bisogno di:
- Una versione di Google Chrome uguale o superiore a 23
- L’ultima versione di Dart Editor
- Il codice sorgente dell’applicazione cercaSuTwitter
Apriamo il Dart Editor e assicuriamoci di avere l’ultima versione disponibile, Tools -> Preferences -> Update
Scegliamo di creare una nuova applicazione, File -> New Application e nella scheda Sample content selezioniamo Chrome packaged application.
A questo punto la directory della nostra applicazione avrà questa forma:
├── build.dart ├── packages │ ├── browser -> /home/utente/.pub-cache/hosted/pub.dartlang.org/browser-0.3.2/lib │ ├── js -> /home/utente/.pub-cache/hosted/pub.dartlang.org/js-0.0.15/lib │ ├── meta -> /home/utente/.pub-cache/hosted/pub.dartlang.org/meta-0.3.2/lib │ └── unittest -> /home/utente/.pub-cache/hosted/pub.dartlang.org/unittest-0.3.2/lib ├── pubspec.lock ├── pubspec.yaml ├── README.md └── web ├── cercasutwitter.css ├── cercasutwitter.dart ├── cercasutwitter.dart.js ├── cercasutwitter.dart.js.deps ├── cercasutwitter.dart.js.map ├── cercasutwitter.html ├── dart_icon.png ├── main.js ├── manifest.json └── packages -> /home/utente/dart/cercaSuTwitter/packages
Diamo uno sguardo alle componenti fondamentali della nostra Chrome Packaged App:
- manifest.json
Nel manifest sono dichiarate le proprietà dell’applicazione: versione del manifest, nome dell’applicazione, versione dell’applicazione, icone, permessi e risorse dell’app. Nel nostro caso le risorse dell’app sono:
"app": { "background": { "scripts": ["main.js"] }
La nostra app dovrà interagire con Twitter per reperire i dati, quindi dobbiamo dichiarare che l’app abbia permessi sufficienti aggiungendo questa riga al manifest:
"permissions": ["https://search.twitter.com/*"]
Il file
manifest.json
si presenterà dunque così:{ "manifest_version": 2, "name": "cercaSuTwitter", "version": "1", "minimum_chrome_version": "23", "icons": {"128": "dart_icon.png"}, "app": { "background": { "scripts": ["main.js"] } }, "permissions": ["https://search.twitter.com/*"] }
- main.js
Questo è lo script che viene eseguito all’avvio dell’applicazione:
chrome.app.runtime.onLaunched.addListener(function() { chrome.app.window.create('cercasutwitter.html', {id: 'cercasutwitter', width: 800, height: 600}); });
Lo scopo dello script è creare una finestra di dimensioni 800×600 e caricare il file
cercasutwitter.html
- cercasutwitter.html
È l’interfaccia HTML.
<input id="cerca" type="text"/> <button id="btn">Cerca su Twitter</button> <div id="boxRisultati"></div> <script src="packages/browser/dart.js"></script> <script src="packages/js/dart_interop.js"></script> <script src="packagd.dart.js"></script>
Vediamo ora nello specifico il codice DART del file cercasutwitter.dart
. Innanzitutto vediamo quali sono le librerie necessarie:
import 'dart:html'; import 'dart:json' as JSON; import 'package:js/js.dart' as js;
Passiamo ora alla panoramica sulle funzioni principali dell’applicazione:
- main()
Richiesto, è l’entry point dell’applicazione. Abbina determinati elementi del DOM a funzioni in DART e chiama la funzione
cerca("engeene")
; - cerca(String q)
Se il valore in input non è vuoto, effettua una richiesta HTTP (cfr. XMLHttpRequest) all’url
https://search.twitter.com/search.json?q=${q}&rpp=10";
, dove i parametriq
erpp
indicano rispettivamente la query e il numero di risultati da mostrare per pagina.Il metodo
HttpRequest.get()
accetta due parametri,String url
eonComplete(HttpRequest request)
; quest’ultima funzione è la callback da invocare quando la richiesta riceve un responso dal server. Nel nostro caso la funzione di callback èmostra(HttpRequest req)
. - mostra(HttpRequest req)
Ha il compito di mostrare i risultati. Sorvoliamo le funzioni per la manipolazione del DOM, già viste durante il corso della rubrica, e soffermiamoci sulla funzione
JSON.parse()
definita nella libreriadart:json
. Intuitivamente, questa funzione agevola la gestione del messaggio JSON (JavaScript Notation Object) ricevuto dal server.L’istruzione
Map tweets = JSON.parse(req.response)["results"];
ci consente infatti di trattare il responso del server come un oggetto
Map
, includendo nella mappa solo il campo results (è disponibile su gist.github.com un esempio di messaggio completo ricevuto da search.twitter.com).Il valore del testo del n-esimo tweet sarà
tweets[n]["text"]
, l’autore saràtweets[n]["from_user"]
, la data saràtweets[n]["created_at"]
e così via.
In aggiunta a queste funzioni, distanzaNelTempo(String twitterTimestamp)
, meseDaStringa()
e desinenza()
ci permettono di ottenere valori user-friendly:
- distanzaNelTempo(String twitterTimestamp)
Prende in ingresso il timestamp del tweet nella forma “Fri, 01 Feb 2013 10:44:19 +0000” e restituisce una stringa nella forma “20 ore fa“, “circa 1 mese fa“, etc. Per ottenere questo risultato, l’applicazione analizza la stringa e la converte in un oggetto
DateTime
che poi viene sottratto da un altro oggettoDateTime
che rappresenta l’orario corrente.DateTime dataCorrente = new DateTime.now(); DateTime dataTweet = new DateTime(anno,mese,giorno,ora,minuto,secondo).add(dataCorrente.timeZoneOffset); . . . int tempoTrascorso = dataCorrente.difference(dataTweet).inMilliseconds;
A questo punto siamo pronti per caricare l’applicazione in Google Chrome:
- compiliamo il file
cercasutwitter.dart
in Javascript dal Dart Editor, Tools -> Generate Javascript (CTRL + SHIFT + G) - apriamo il pannello delle estensioni all’URL
chrome://extensions
- abilitiamo la Modalità sviluppatore, facciamo clic su “Carica estensione non pacchettizzata…” e scegliamo di caricare la directory cercaSuTwitter/web
- avviamo l’applicazione, accessibile dalla home di Google Chrome
Come sempre, il codice di questa applicazione è disponibile sull’account Engeene su GitHub. Nel prossimo articolo parleremo degli ultimi aggiornamenti al Dart SDK, ormai sempre più vicino al raggiungimento del Milestone 3.
Leave a Reply