Sviluppo Applicazioni Mobili Multi-Piattaforma – PhoneGap (Parte 3)
PhoneGap e’ un framework JavaScript che ci mette a disposizione le chiamate alle API dell’OS che sta eseguendo la nostra applicazione per poter accedere a Fotocamera, Galleria, GPS, Files, Contatti, etc… ed e’ anche estendibile con dei Plugin.
Il principio di PhoneGap e’ quello di “ospitare” l’applicazione HTML che sviluppiamo in una Applicazione Nativa per l’OS per cui compiliamo. L’applicazione Nativa non e’ altro che una WebView (qualcosa di meno potente, e secondo alcuni meno veloce, di un Browser Internet) che visualizza il codice HTML5, i CSS, esegue il codice JS.
In questo modo la nostra Applicazione Nativa (che ospita quella HTML5) e’ pubblicabile anche sui vari Store di Applicazioni Mobili (Google Play, App Store, Marketplace).
PhoneGap in ogni caso rimane un framework JS per accedere alle API di sistema e non prevede nessuna “libreria grafica” per lo sviluppo della nostra aplicazione, per questo dovremo adottare una altro framework, nel mio caso jQuery Mobile. In alcuni casi questi due mondi si incrociano, ad esempio e’ possibile visualzzare un Alert Nativo del’OS con PhoneGap anziché un Alert Html Classico. A loro volta questi due framework si incrociano con le fetarures disponibili in HTML5, ad esempio lo storage dei dati OffLine che e’ disponibile in HTML5 senza usare alcun framework.
Io sto usando Eclipse (nella versione Eclipse IDE for Java EE Developers) per questo tipo di programmazione, lo uso anche per sviluppare la parte server in Java, e devo dire che anche se c’e’ qualche problemino (di cui poi vi parlo) va abbastanza bene. Un altro IDE che vi posso suggerire se non siete già abituati ad Eclipse e’ Aptana (che e’ sviluppato sia come plugin per Eclipse ma che potete anche installare come IDE a sè). Se conoscete Dreamveaver e’ valido anche questo, anche se devo dire che come al solito il marketing sui prodotti commerciali promette funzionalità “magiche” che non sono così “magiche”, ma nella versione CS6 c’e’ una Live Preview molto molto comoda (impostabile alla risoluzione di un ipotetico dispositivo mobile)
Svluppare con PhoneGap con questi Ide, e’ possibile, come ho detto, ma non permette di testare\debuggare tutte le funzionalità che PhoneGap mette a disposizione. Se la preview della vostra applicazione la state testando con Google Crome (che vi consiglio in questo caso, perché usa il motore WebKit che e’ lo stesso che farà girare la vostra app sia in iOS sia in Android) non potrete di certo testare la chiamata alle varie API di un sistema Mobile, ad esempio la lettura della Rubrica.
Diventa quindi importante integrare lo sviluppo dell’App HTML con l’SDK di uno dei sistemi che avete la possibilità di testare.
iOS SDK lo potete testare solo se avete un Mac, invece Android SDK e’ disponibile per Mac, Linux e Windows, io ho iniziato ad usare quest’ultimo perché non possiedo un Mac.
Come configurare un progetto PhoneGap con l’SDK relativo? Per questo c’e’ una bella guida passo passo qui: Getting Started Guides
In questo momento quindi sto lavorando con due progetti in Eclipse:
Per il momento di volta in volta copio la cartella con I files html del secondo progetto (WebContent) nella cartella delle risorse (/asset/www) del primo progetto. Ho provato ad unirli in un unico progetto ma non ci sono riuscito, ad avere tutte le funzionalità di un progetto Eclipse Web Statico in uno Android.
Un aiuto comunque ce lo da anche questo plugin per Chrome che ci permette di debuggare alune funzionalità di PhoneGap direttamente dal Browser: Ripple Emulator (beta)
In questo caso possiamo eseguire direttamente il progetto HTML su Chrome ed attivare il Plugin Ripple, almeno velocizziamo lo sviluppo di alcune parti del programma.
Il principio di PhoneGap e’ quello di “ospitare” l’applicazione HTML che sviluppiamo in una Applicazione Nativa per l’OS per cui compiliamo. L’applicazione Nativa non e’ altro che una WebView (qualcosa di meno potente, e secondo alcuni meno veloce, di un Browser Internet) che visualizza il codice HTML5, i CSS, esegue il codice JS.
In questo modo la nostra Applicazione Nativa (che ospita quella HTML5) e’ pubblicabile anche sui vari Store di Applicazioni Mobili (Google Play, App Store, Marketplace).
PhoneGap in ogni caso rimane un framework JS per accedere alle API di sistema e non prevede nessuna “libreria grafica” per lo sviluppo della nostra aplicazione, per questo dovremo adottare una altro framework, nel mio caso jQuery Mobile. In alcuni casi questi due mondi si incrociano, ad esempio e’ possibile visualzzare un Alert Nativo del’OS con PhoneGap anziché un Alert Html Classico. A loro volta questi due framework si incrociano con le fetarures disponibili in HTML5, ad esempio lo storage dei dati OffLine che e’ disponibile in HTML5 senza usare alcun framework.
Ambiente di sviluppo:
Per sviluppare con PhoneGap non servirebbe neppure avere un Emulatore del sistema operativo mobile (Android SDK o iOS SDK) perché programmando in HTML5+JS si può usare un qualsiasi editor HTML.Io sto usando Eclipse (nella versione Eclipse IDE for Java EE Developers) per questo tipo di programmazione, lo uso anche per sviluppare la parte server in Java, e devo dire che anche se c’e’ qualche problemino (di cui poi vi parlo) va abbastanza bene. Un altro IDE che vi posso suggerire se non siete già abituati ad Eclipse e’ Aptana (che e’ sviluppato sia come plugin per Eclipse ma che potete anche installare come IDE a sè). Se conoscete Dreamveaver e’ valido anche questo, anche se devo dire che come al solito il marketing sui prodotti commerciali promette funzionalità “magiche” che non sono così “magiche”, ma nella versione CS6 c’e’ una Live Preview molto molto comoda (impostabile alla risoluzione di un ipotetico dispositivo mobile)
Svluppare con PhoneGap con questi Ide, e’ possibile, come ho detto, ma non permette di testare\debuggare tutte le funzionalità che PhoneGap mette a disposizione. Se la preview della vostra applicazione la state testando con Google Crome (che vi consiglio in questo caso, perché usa il motore WebKit che e’ lo stesso che farà girare la vostra app sia in iOS sia in Android) non potrete di certo testare la chiamata alle varie API di un sistema Mobile, ad esempio la lettura della Rubrica.
Diventa quindi importante integrare lo sviluppo dell’App HTML con l’SDK di uno dei sistemi che avete la possibilità di testare.
iOS SDK lo potete testare solo se avete un Mac, invece Android SDK e’ disponibile per Mac, Linux e Windows, io ho iniziato ad usare quest’ultimo perché non possiedo un Mac.
Come configurare un progetto PhoneGap con l’SDK relativo? Per questo c’e’ una bella guida passo passo qui: Getting Started Guides
In questo momento quindi sto lavorando con due progetti in Eclipse:
- primo progetto e’ un progetto Android configurato come da guida che mi permette di testare il codice direttamente nell’emulatore
- il secondo progetto e’ un progetto Web Statico che mi permette di sviluppare in HTML
Per il momento di volta in volta copio la cartella con I files html del secondo progetto (WebContent) nella cartella delle risorse (/asset/www) del primo progetto. Ho provato ad unirli in un unico progetto ma non ci sono riuscito, ad avere tutte le funzionalità di un progetto Eclipse Web Statico in uno Android.Un aiuto comunque ce lo da anche questo plugin per Chrome che ci permette di debuggare alune funzionalità di PhoneGap direttamente dal Browser: Ripple Emulator (beta)
In questo caso possiamo eseguire direttamente il progetto HTML su Chrome ed attivare il Plugin Ripple, almeno velocizziamo lo sviluppo di alcune parti del programma.
Libri
I libri che ho scelto di leggere\consultare sull’argomento sono:- PhoneGap Beginner's Guide
- 20 Recipes for Programming PhoneGap: Cross-Platform Mobile Development for Android and iPhone
Commenti