Eseguire Chrome Apps con Dart e Angular su Android

Di - 5 February 2014 - in
Post image for Eseguire Chrome Apps con Dart e Angular su Android

Pochi giorni fa Google ha rilasciato un toolchain basato su Apache Cordova per assistere gli sviluppatori nelle operazioni di deploy di Chrome Apps su piattaforme mobili. Nell’articolo di oggi vedremo questo toolchain in azione, in particolare vedremo come sviluppare una Chrome App con Dart — una semplice finestra tramite la quale l’utente può creare una notifica di sistema — ed eseguirla sull’emulatore Android. Parleremo inoltre di AngularDart, porting del famoso framework Javascript, che sta riscuotendo enorme successo negli ultimi tempi.

Apriamo il Dart Editor, creiamo una nuova applicazione selezionando il template Chrome Packaged Application, la chiamiamo chrome_apps_dart_mobile, modifichiamo il file manifest.json aggiungendo "permissions": ["notifications"] ed aggiungiamo al file pubspec.yaml le seguenti dipendenze:

  • chrome
  • angular
  • shadow_dom

La prima dipendenza è necessaria per accedere all’interfaccia notification delle chrome.* API, mentre la seconda e la terza sono necessarie per utilizzare le componenti di AngularDart. L’interfaccia per la creazione di una notifica consiste in una textarea per la composizione del messaggio e di un pulsante di submit, e quest’interfaccia viene definita come un web component che sarà poi incluso nell’interfaccia principale dell’app. La struttura quindi è la seguente:

  • chrome_apps_dart_mobile.html
  • chrome_apps_dart_mobile.dart
  • notification_component.html
  • notification_component.dart

Il primo file serve a definire l’interfaccia principale dell’app e ad includere l’elemento personalizzato <notification>, mentre il secondo file effettua il bootstraping di Angular; nel terzo file, notification_component.html viene definita la struttura del componente mentre nell’ultimo file viene definita la logica del componente <notification>.

Analizziamo il contenuto di notification_component.html:

<div>
  <textarea rows="4" cols="30" ng-model="cmp.message">{{cmp.message}}</textarea>
  <br/>
  <button ng-click="cmp.send()">Send Notification</button>
</div>

Esso consiste in un semplice frammento HTML, gli elementi da notare sono: ng-model, {{cmp.message}}, ng-click e cmp.send(). Per poter analizzare questi elementi è necessario dare uno sguardo al contenuto di notification_component.dart:

library notification_component;

import 'package:angular/angular.dart';
import 'package:chrome/chrome_app.dart' as chrome;

@Component(
    selector: 'notification',
    templateUrl: 'notification_component.html',
    publishAs: 'cmp'
)
class NotificationComponent {
  String message;

  void send() {
    var opts = new chrome.NotificationOptions();
    opts.type = chrome.TemplateType.BASIC;
    opts.title = "Hello";
    opts.iconUrl = "dart_icon.png";
    opts.message = message;
    chrome.notifications.create("id", opts).then((_){
      message = '';
    });
  }
}

main() {}

Vediamo che in questo file viene definita la classe NotificationComponent, la cui definizione è preceduta dal decoratore @Component(): questo decoratore indica che la classe sarà utilizzata per controllare il web component; gli attributi di @Component:

  • selector: il nome con cui istanzieremo il componente
  • templateUrl: il percorso del componente
  • publishAs: l’identificatore della classe all’interno del componente

Ritorniamo agli elementi di notification_component.html:

  • ng-model="cmp.message": questo attributo definisce un binding bidirezionale fra interfaccia e logica di message, ovvero mantiene i valori di message sincronizzati fra Dart e HTML: l’HTML riflette le modifiche apportate a message da Dart e Dart riflette le modifiche apportate da HTML.
  • ng-click="cmp.send()": alla pressione del pulsante, viene invocato il metodo send() di NotificationComponent, accessibile da HTML tramite l’identificatore cmp.
  • {{cmp.message}}: mostra il valore di message

Abbiamo detto che alla pressione del pulsante viene invocato il metodo send(), vediamo in cosa consiste:

var opts = new chrome.NotificationOptions();
opts.type = chrome.TemplateType.BASIC;
opts.title = "Hello";
opts.iconUrl = "dart_icon.png";
opts.message = message;
chrome.notifications.create("id", opts).then((_){
  message = '';
});

opts è una istanza di NotificationOptions(), classe in cui vengono definite le proprietà della notifica, quali tipo, titolo, percorso dell’icona e messaggio; fatto questo è possibile procedere con la creazione della notifica stessa, invocando il metodo notifications.create(), che restituisce un oggetto Future; al completamento dell’operazione la variabile message viene impostata a "".

Per fare in modo che il nostro componente possa essere utilizzato nell’app dobbiamo inserirlo fra i moduli caricati da Angular al momento del bootstrap; creiamo quindi una nuova istanza di Module() e aggiungiamo il nostro componente:

applicationFactory().addModule(new MyAppModule()).run();

A questo punto, dopo aver compilato in Javascript, siamo pronti per eseguire l’app sull’emulatore. Prepariamo il nostro ambiente di lavoro seguendo le istruzioni ufficiali, dopodichè apriamo un terminale e diamo i seguenti comandi:

# Creiamo una nuova app con il tool `cca`, collegandola al file manifest.json dell'app che abbiamo creato in precedenza
cca create chrome_apps_dart_mobile --android --copy-from-app=/path/to/app

# Entriamo nella directory dell'app
cd chrome_apps_dart_mobile

# Avviamo l'emulatore
cca emulate android

Ora sarà avviato l’emulatore Android e verrà aperta l’app:

screenshot

screenshot

Potete trovare il codice di quest’applicazione sul nostro account su GitHub.

Leave a Reply

Claudio d'Angelis Articolo scritto da

Programmatore e studente di Informatica, appassionato di musica, web e sistemi UNIX. Collabora con Googlab dall'Ottobre 2012.

Contatta l'autore

Previous post:

Next post: