Mobile Workflow: Appcelerator Titanium

Da quando abbiamo cominciato a lavorare su Appcelerator Titanium, si è evoluto così rapidamente da non sembrare quasi più lo stesso. Vogliamo condividere...

Da quando qui in Caffeina abbiamo incominciato a lavorare con Appcelerator Titanium, lo abbiamo visto evolversi così rapidamente che, dopo un anno di progetti realizzati, questo framework non sembra quasi più lo stesso.

Durante lo sviluppo abbiamo collezionato un po’ di consigli e best pratice che ora vogliamo condividere.

Cosa c’è di nuovo sotto il cofano

Con la versioni 3.X sono state introdotte molte funzionalità, prime tra tutte il supporto ad iOS7 e ad Ti.UI.iOS.Animator, che gestisce nativamente la fisica degli oggetti.

Tuttavia, ciò che ha subito notevoli migliorie è stata la CLI (Command line interface):

  • è stato deprecato il supporto allo script legacy scritto in Python in favore di una versione più leggera ed efficiente scritta in Node.js
  • l’interattività con l’utente è stata approfondita, soprattutto durante la fase di compilazione: vengono listate tutte le opzioni disponibili (certificati, dispositivi, output directory)
  • è stato introdotto il supporto nativo per la compilazione e la simulazione in Genymotion, un emulatore Android che è nettamente superiore a quello originale di Google in quanto a performance (personalmente non sono mai riuscito a far girare un’applicazione in quello nativo)
  • (finalmente) non bisogna passare da iTunes per installare un’app su un “iDevice”

Tutte queste nuove funzionalità sono sicuramente utili e diminuiscono i tempi di sviluppo, ma sono nulla se paragonate ad un hook sviluppato da yydigital che negli ultimi mesi ha raggiunto una stabilità tale da poter essere finalmente usato anche nei flussi operativi di produzione: TiShadow.

 

Goodbye Titanium Studio, wilkommen Sublime Text

Screen Shot 2014-04-17 at 18.42.58

Sono sempre stato convinto che fornire ad un developer un IDE ricco di funzionalità, ma esteticamente brutto (lasciatemi passare il termine) e/o con una UX pessima, renda tale IDE da buttare. Sì, parlo a te: Eclipse (e di conseguenza Titanium Studio).

Il nostro editor preferito è Sublime Text: estremamente versatile, leggero, configurabile, ricco di plugin (potrei quasi definirlo il WordPress degli Editor).

Parliamoci chiaro, non assumiamo che Sublime Text sia lontanamente paragonabile ad un IDE di alto livello (Visual Studio, xCode, etc.); è un editor, e come tale deve concentrare le sue funzionalità sul “codice” e sulla manipolazione del testo nella maniera più veloce ed efficace possibile.

Chiaramente utilizziamo Sublime Text unito ad una serie di plugin che velocizzano il tutto:

SublimeLinter3 for Javascript

Utilizzando jshint, SublimeLinter analizza il codice scritto as-you-type, mostrando errori di sintassi e warning: è una vera manna del cielo.

Per maggiori informazioni, qui trovate la guida per l’installazione.

Sublime-Ti-Build

Questo plugin fornisce numerose funzionalità quali:

  • completamento dei metodi di Titanium, del tipo Ti.*
  • highlighting per i file TSS (Alloy)
  • un build system collegato alla Titanium CLI

Per l’installazione, fate riferimento alla documentazione su Github.

Se utilizzate Sublime Text 3 invece della versione 2, l’installazione tramite il Package Control andrà a buon fine ma il plugin non sarà visibile: potete ovviare a questo problema clonando la repository di Github nei packages di Sublime con
git clone https://github.com/MattTuttle/sublime-ti-build "Packages"

Titanium CLI

Screen Shot 2014-05-15 at 17.26.32

Attraverso la CLI puoi sostanzialmente fare tutto quello che fai con Titanium Studio, ma occupando molte meno risorse di sistema.

Ultimamente la community dietro Titanium sta spingendo molto nel migliorare questo strumento; si sono finalmente resi conto che Titanium Studio non è lo strumento ideale, snobbato da molti: anche noi vi consigliamo vivamente di preferire la CLI + il vostro editor a Titanium Studio.

Per l’installazione completa, vi rimando alla documentazione ufficiale.

Alias per la CLI

Sicuramente la cosa più ostica è il dover digitare ogni volta gli stessi comandi solo per effettuare una semplice build: per questo, il nostro consiglio è quello di scrivere degli alias della shell per ottimizzare il flusso.

Condivido qui i miei, per darvi un’idea:

# iOS
alias tios="ti build -p ios"
alias tiosd="ti build -p ios -T device --device-id all"
alias tiosa="ti build -p ios -T dist-adhoc"
alias tiosi="ideviceinstaller --install dist/*.ipa"
# Android
alias tidr="ti build -p android"
alias tidrd="ti build -p android -T device --device-id all"
alias tidra="ti build -p android -T dist-playstore"
alias tidri="adb install dist/*.apk"
# Generic
alias titf="/Applications/TestFlight.app/Contents/MacOS/TestFlight dist/*.ipa"
alias ti-push="ticons assets && git-release"
alias ti-ios-release="ticons assets && tiosa && ti-push && titf"
alias ti-and-release="ticons assets && tidra && ti-push"

TiCons

68747470733a2f2f646c2e64726f70626f782e636f6d2f752f32393935332f69653130746f756368746573742f70617468333836382e706e67

Con l’introduzione degli schermi retina, gli sviluppatori hanno dovuto affrontare la problematica delle immagini al doppio della risoluzione.

Se già sviluppate su Titanium, sapete benissimo che questo problema viene amplificato dal fatto che Android ha 4 tipi di risoluzioni (hdpi, ldpi, xhdpi, xxhdpi), quindi, facendo 2+2, per ogni applicazione cross-platform è necessario generare 6 immagini di risoluzione differente per ogni immagine.

Ovviamente, tutto questo lavoro è automatizzabile, e ci ha pensato FokkeZB, che ha creato TiCons-CLI,un tool da linea di comando che genera tutti gli assets mancanti a partire da quelli presenti: splashes, icone e assets.

GitTio

aUiW0u27

Una delle mancanze di Titanium fino a poco tempo fa era quella di non avere alcuna repository ordinata e ben organizzata di “plugin” disponibili sviluppati dalla community.

GitTio si preoccupa di scansionare tutte le repository su GitHub e di filtrare per quelle che sono moduli Titanium o widgets per Alloy, in questo modo chiunque può pubblicare un modulo e, in meno di mezza giornata, viene incluso nei moduli ricercabili.

I package manager ultimamente spopolano, e Titanium non poteva non averne uno: tutti i moduli che trovate su GitTio sono installabili da linea di comando semplicemente con gittio -g install {{modulename}}.

GenyMotion

logo_oOInizialmente, non avendo nessuna conoscenza della piattaforma, il testing delle applicazioni su dispositivi Android è stato ostacolato dal fatto che gli emulatori forniti da Google nell’SDK ufficiale fanno davvero pena: per farli funzionare a dovere necessitano di configurazioni ostiche con le Intel x86 images, e alla fine il risultato non è comunque soddisfacente.

Fortunatamente abbiamo scoperto GenyMotion, “the next generation of the AndroVM“. GenyMotion fornisce un set di device virtuali che con un click puoi avere a disposizione.

Vi raccomandiamo inoltre di installare i Google Play Services, per il debugging delle mappe native di Google o altri servizi di sistema.

Il confronto con gli emulatori ufficiali risulta quasi imbarazzante, e il supporto integrato in Titanium CLI rende il tutto magnifico, vi basta infatti digitare ti build -p android --device-id "__GENYMOTION_ID__" per effettuare una build al volo ed installarla sull’emulatore GenyMotion.

TiShadow

L’idea dietro TiShadow è molto semplice, e si basa su una semplice assunzione: tutto il codice di Titanium viene eseguito a runtime (d’altronde è JavaScript).

Esso si compone essenzialmente di tre parti: il server, l’app e la cli.

Attraverso la cli viene inviato del codice al server, che si preoccuperà di pushare le modifiche all’app.

Attraverso questo diagramma riuscite a capire che le potenzialità di TiShadow sono infinite, difatti sfruttandone solo il minimo della sua potenza è stato creato TiShadow Express.

Un semplice hook, che genera una versione “live” dell’applicativo, avvia un server in node.js sulla macchina locale e “monitora” ogni cambiamento dei file del progetto: appena questo accade, il progetto viene ricompilato al volo e l’app viene rigenerata con il nuovo codice.

Tutto questo in meno di 4 secondi: in sostanza, si tratta della versione per Titanium di LiveReload.

Confrontando i tempi di compilazione standard e quelli di compilazione attraverso TiShadow, abbiamo una riduzione almeno del 500%.

Per installarlo, nulla di più semplice di un npm install -g tishadow

Ora, quando effettuate una build, vi basta aggiungere il flag--shadow in fondo al comando e TiShadow farà il resto.

Live Snippets!

Spesso capita di dover provare del codice Titanium live.

TiShadow fornisce anche questa possibilità: una volta lanciata l’applicazione “shadow-fizzata”, puntate il vostro browser su http://127.0.0.1:3000 ed avrete una vera e propria console interfacciata live con il dispositivo.

Dispositivi multipli

La versione “live” dell’applicativo, non è altro che un client connesso ad un server; quindi nulla vieta che possano esservene di più.

Difatti, se distribuite l’app su dispositivi multipli e vari tra di loro (iPhone 5, iPhone 4S, Simulatore, iPad), ad ogni salvataggio il server invierà le modifiche a tutti i dispositivi connessi, aggiornando l’applicazione in tempo reale.

ti build -p ios -T device --device-id all --shadow

Vi rimando ad un interessante articolo scritto da David Bankier, il creatore di Tishadow, sul blog TiDev.IO: http://www.tidev.io/2013/12/15/tishadow-2-3-0-alloy-now-a-first-class-citizen/

TestFlight e PlayStore

Una volta che l’app è pronta, bisogna rilasciare una beta release.

Noi siamo solito effettuare il testing su più dispostivi di natura differente, per questo ci serve un tool gestisca tutte questi rilasci in maniera automatica: TestFlight.

Fino a poco tempo fa, TestFlight gestiva nativamente il beta testing su iOS e Android, ma, con la recente acquisizione da parte di Apple, hanno troncato il supporto ad Android. Abbiamo quindi deciso di usare il Play Store come tool di rilascio di versioni intermedie: è difatti possibile effettuare l’upload di APK beta/alpha e specificare gli utenti che hanno accesso a queste versioni.

Screen Shot 2014-05-15 at 16.56.43


Flavio De Stefano

Flavio ha studiato all'Università di Parma ed è arrivato in Caffeina dopo alcune esperienze come full stack developer. Qui si specializza come Mobile Developer, con la responsabilità dell'execution lato client delle app mobile sviluppate da Caffeina.