Questo framework open source offre la possibilità di realizzare app per Android sfruttando le libreria per il WEB che usiamo di solito: Javascript, CSS e HTML. In pratica voi sviluppate un sito con pagine statiche, un’applicazione web che sfrutti le librerie Javascript (jQuery based, ad esempio) stilizzate mediante CSS e phonegap si occuperà di “tradurre” questa app in un file .apk adatto ad essere installato su un’enorme varietà di dispositivi Android-based, Windows Phone e anche iPhone (con qualche accortezza).
Il software funziona mediante linea di comando, e possiede i seguenti requisiti:
- richiede il supporto di Android SDK scaricabile da qui (circa 470 mega);
- richiede un computer che abbia Node.js (una piattaforma open source basata sul runtime di Chrome per facilitare lo sviluppo di applicazioni) installato;
- richiede inoltre il supporto delle librerie brew (package manager solo per Mac) ed obbligatoriamente il supporto di Apache ant (la versione per Windows è questa).
Come configurare PhoneGap su Mac
Partiamo quindi dall’inizio, e supponiamo che abbiate realizzato una pagina HTML con JS e CSS (PHP non è previsto, in questa fase, per semplicità di trattazione): quello che dovete fare, in sostanza, è convertire i vostri file per il web (un’applicazione web, un sito, un form, un videogame in JS) in un’applicazione “pura” per Android.
Fate attenzione che questa guida non è intesa per principianti, richiede un certo livello di esperienza in quanto andrà ad agire sul vostro Mac da superamministratore: per cui massima cautela, specie quando operate mediante linea di comando come superadmin (su o sudo).
Configurare il PATH di sistema di Android: .bash_profile
Come prerequisito, dopo aver installato SDK di Android fare un piccolo pre-test da linea di comando digitando android, e poi invio: se vi compare un messaggio di errore, significa tipicamente che dovrete fare in modo che il tool android sia localizzato nel PATH di ambiente in modo che la shell bash possa riconoscerlo.
Poichè tale file si trova nella directory sdk/tools, andremo a localizzarlo (su Mac) mediante la configurazione del file .bash_profile .
Per editare il file (ho usato nano, ma ci sono molte alternative), non prima di averne fatto una copia di backup al volo, scrivete via terminale:
nano ~/.bash_profile
(nota, la tilde ~ si digita con la combinazione di tasti ALT e 5 su Mac) e mediante vi andiamo ad aggiungere il path corretto (supponiamo di aver già copiato la cartella di SDK Android nella vostra directory utente) mediante la diretta export.
La prima volta definiamo una variabile di comodo ANDROID_HOME, successivamente la mettiamo “in coda” nel PATH di sistema.
export ANDROID_HOME=/Users/nome_utente_mac/adt-bundle-mac-x86_64-20140321/sdk/tools export PATH=$PATH:$ANDROID_HOME
Fate attenzione che una modifica scorretta al .bash_profile può compromettere l’utilizzo del terminale di Mavericks, impedendovi di riconoscere qualsiasi comando della shell.
Per ripristinare la situazione editate il file con il comando pico col path completo (altrimenti non verrebbe riconosciuto):
/usr/bin/pico .bash_profile
Per testare che tutto sia andato per il verso giusto digitate android da terminale e dovreste vedere, dopo qualche instante, una finestra informativa del genere, che vi inviterà ad effettuare eventuali aggiornamenti.
Il nostro PhoneGap, nel dettaglio, funziona mediante diverse librerie open source ed offre allo sviluppatore la possibilità di programmare in Java (supportato nativamente), C++ (mediante ndk), bash script o Python (mediante Scripting Environment di Google); in questo caso quello che ci interessa è semplicemente “tradurre” il markup HTML, i fogli di stile CSS e gli script JS in un formato che permetta l’esecuzione di un’applicazione sui nostri dispositivi Android.
Procedura di installazione di PhoneGap
Dal sito ufficiale di PhoneGap è piuttosto chiaro quello che dovrete fare: dopo aver installato correttamente NodeJS sul Mac aprite il terminale di comando (io l’ho fatto sul Mac ed userò quello come riferimento, sugli altri SO dovrebbe essere “quasi” la stessa procedura):
sudo npm install -g phonegap
In questo modo installerete l’applicativo da linea di comando che vi permetterà di creare applicazioni Android partendo da uno o più file HTML statici.
A questo punto andate, sempre da terminale, nella cartella che contiene i vostri file HTML, CSS e JS ed utilizzate questa sequenza di istruzioni:
phonegap create nomeapp123 cd nomeapp123 phonegap run android
A questo punto stando alla documentazione il processo dovrebbe essere bello che realizzato, fermo restando i requisiti visti all’inizio. Nel mio test, tuttavia, ho riscontrato un problema, ovvero questo messaggio di errore:
Command failed with exit code 8
Consultando un po’ la rete è uscito fuori che bisogna installare anche Cordova, il client che permette al software di funzionare, e per farlo bisogna dare questo comando di installazione come superadmin:
npm install -g cordova
Note a margine importanti
Ci sono un bel po’ di cose da aggiungere in merito, che potrebbero aiutarvi a risolvere i più comuni problemi che, a quanto pare, non sono stato il solo ad avere.
Prima di tutto: “exit code 8” non è solitamente indicativo di alcun errore in particolare, ma è una diagnostica di un errore critico che impedisce all’app di funzione. Nello specifico conviene quindi ricopiare su Google l’errore specifico che avete, e cercare di comprendere dai vari forum cosa sia successo e come provvedere.
Seconda cosa, se vi trovate su Mavericks dovrete testare la vostra app convertita da HTML / JS / CSS in emulazione, cioè installando un apposito software che “simuli” un dispositivo Android sul vostro Mac. Unico problema di questo approccio è che l’emulazione è abbastanza lenta, per cui sembrerebbe più comodo ricorrere ad un servizio di cordova/phonegap, il quale si aprirà sulla porta 8000 lanciando il comando:
cordova serve android
Dopo qualche istante il terminale Mac dovrebbe rispondere:
Static file server running on port 8000 (i.e. http://localhost:8000) CTRL + C to shut down
Aprite quindi una finestra del browser sulla porta 8000 di localhost, e cliccate su android per vedere la vostra app funzionare dentro al browser; per spegnere il servizio digitate CTRL C come suggerito. Tenete conto, inoltre, che in certi casi la resa grafica del browser integrato di Android potrebbe essere sostanzialmente diversa da quella che vi appare su un browser desktop, per cui fate moltissimi test.
Per andare comunque (temerari che non siete altro! :-) ) in emulazione Android su Mac, si può lanciare (la spiegazione dettagliata è qui):
android avd
che aprirà l’app che permette di creare gli ambienti in emulazione, con il risultato che riporto di seguito.
Ho notato inoltre che l’emulazione sembra essere piuttosto lenta, nel mio caso, per cui è il caso di testare più di un dispositivo avendo cura, in caso, di installare anche il supporto ad HAX (notificato da “emulator: Failed to open the hax module“, cioè nel caso in cui non fosse già presente sul vostro Mac) da qui (Intel HAX). Se propendete per il sado-maso, in un certo senso, cioè se preferite la console di comando, le istruzioni per installare e sostare i vari emulatori Android sono a questo link.
àˆ inoltre fondamentale configurare correttamente il file (nascosto) .bash_profile, cosa che si può fare facilmente con:
open ~/.bash_profile
avendo cura, ad ogni modifica, di flushare le modifiche:
source ~/.bash_profile
Ecco un esempio di bash_profile ben configurato sul mio Mavericks, dove xxx corrisponde al nome preciso della cartella di Android che avrete installato:
export PIPPO=/Users/salvatorecapolupo/adt-bundle-mac-x86_64-xxx/sdk/platform-tools/ export ANDROID_HOME=/Users/salvatorecapolupo/adt-bundle-mac-x86_64-xxx/sdk/tools/ export PATH=$PATH:$ANDROID_HOME:$PIPPO
Un path ben settato, per intenderci, vi preserva dall’errore “adb command not found” che impedisce al software di andare correttamente in emulazione.
Attenzione, quindi, a rendere visibili sia platform-tools che tools, altrimenti avrete una serie di errori imprevisti che mi avevano lasciato un po’ in dubbio sul da farsi negli ultimi giorni. Le istruzioni più complete ed immediate che ho trovato sono comunque online sul sito (documentatissimo) di PhoneGap, basta avere un po’ di pazienza a leggere e capire il tutto.
Altra cosa essenziale, inoltre, è quella di installare (dopo aver digitato android nel terminale) il supporto di Android denominato Android 4.4.2 (API 19), perchè è quello compatibile con l’ultima versione di PhoneGap (la 3.4.0-0.19.13). Se non lo fate l’errore “Please install Android target 19 (the Android newest SDK)” è alle porte. Se avete ulteriori domande, ovviamente, ponetele pure nei commenti!
Altre cose importanti da sapere
Dal blog iphonedevlog e da una discussione che ho aperto in merito, riporto un po’ di altre cose importanti da conoscere su PhoneGap:
- Â la procedura standard di sviluppo prevede di costruire una prima volta l’applicazione nella cartella (ad es.) app-xxx, poi digitare cd app-xxx e ricopiare i vostri file HTML/CSS/JS dentro la sottocartella WWW di cordova;
- modificando il file config.xml con un editor di testo potrete personalizzare nome, autore, descrizione ed altre proprietà della vostra applicazione;
- su iphonedevlog viene spiegato, tra l’altro, come modificare e personalizzare le varie icone delle app;
- ad ogni modifica e ricopia dei file, ovviamente, sarà opportuno ricostruire il file .apk (che trovate dentro platform/android/ant-build), che rappresenta il file di installazione per Android, che potrete installare soltanto se avete abilitato le sorgenti sconosciute di software. Per fare il rebuild del progetto date il comando:
phonegap build android
(ultimo aggiornamento: 12 agosto 2014)
👇 Da non perdere 👇
- 📈 Analizza Cellulari 📱
- 🔐 AI che dolor, Chat
- 🎯 Targetizza Database SQL 🗄
- 📊 Analizza Errori più comuni 📛
- 🚧 Costruisci Evergreen 📟
- 👩💻 Programma Gratis 🎉
- 💻 Configura Hosting a confronto 💑
- 🔒 Conosci Hosting reti e domini 💻
- 👩💻 Tapioca Informatica 🖥
- 💻 Iconizza Internet 💻
- 🔒 Gestisci Lavoro 🔧
- 💡 Mostra Marketing & SEO 🌪
- 🔑 Apprendi Meteo ⛅
- 🤯 Visiona Mondo Apple 🍎
- 🔍 Supervisiona Mondo Domini 🌐
- 🚀 Metti in cloud monitoraggio servizi online 📈
- 🔮 Anatomizza Nuove tecnologie 🖥
- 🔒 Antani PEC e firma digitale 📩
- 👀 Prematura Programmare 🖥
- 🎮 Lonfa Scrivere 🖋
- 🔒 Conosci Servizi di SMS 📶
- 👀 Guarda Sicurezza informatica e privacy digitale 🖥
- 🎮 Ricorda Siti web 🌎
- 🤖 Ottimizza Spiegoni 🎓
- 🧠 Neuralizza Svago 🎈
- 📡 Quantizza Usare Excel 🌀
- 🤖 Sovrascrivi Windows 😲
- 🎨 Personalizza Wireless 🚁
- 🔑 Decifra WordPress 🤵
- 💬 Il nostro canale Telegram: iscriviti
- 🟡 Come capire se un IP è valido?
- 🔴 Pattern in Programmazione: Guida Completa e Importanza nella Progettazione Software
- 🔴 Domini .onion: cosa sono, e come registarne uno
