Title: La primera PhoneGAP app
Course: Sistemes microinformàtics > Section: 3. PROGRAMACIÓ DE L'APP: PHONEGAP

Introducció a PhoneGAP

Consola PhoneGAP-Cli

Un cop instal·lat tot el software, ja estem en disposició de crear projectes Android. Aquesta tasca caldrà fer-la des d’una consola, fent la crida corresponent a PhoneGap-CLI.

PhoneGAP-Cli és un conjunt de scripts que s'encarreguen d'executar totes les operacions necessàries: descàrrega d'arxius, creació d'arxius, creació de carpetes, generació apk, execució del simulador...

Les instruccions de consola són les mateixes, únicament és a l’hora de realitzar la crida que, segons sigui el framework instal·lat, cal fer una crida al script phonegap o cordova. Respecte a la documentació, la mateixa instrucció proveeix informació sobre els seus paràmetres i/o instruccions.

La instrucció phonegap help ens permet veure l'ajuda global dels scripts phonegap, però també podem demanar ajuda de qualsevol altra instrucció emprant phonegap help instruccio

Crear un projecte

En el moment de crear un nou projecte, únicament cal indicar la ruta on ubicar els arxius, la resta de paràmetres són opcionals, encara que molt interessants de cara a personalitzar el desenvolupament del projecte. Amb la instrucció phonegap help create podem veure quines són totes aquestes opcions, tal i com es mostra a continuació.

Instrucció: phonegap create <carpeta> <namespace> <titol_aplicacio> --template <nom_plantilla>

Exemple: phonegap create c:\android-projects "com.josep.myfirstapp" "La meva APP" --template blank

A l'executar aquesta instrucció, ens crea els arxius i carpetes necessaris, que contenen la nostra APP, dins de la carpeta que se li ha passat per paràmetres.

La instrucció anteriorment executada s’ha encarregat de crear les carpetes necessàries per al projecte. La única carpeta que modificarem manualment serà l’anomenada www que serà la carpeta que contindrà tots els arxius HTML, CSS i JS de la nostra APP, igual que si es tractés d’una pàgina web.

La carpeta platform contindrà els arxius necessaris per a cada plataforma. Per defecte PhoneGap crea un projecte buit, sense cap plataforma associada, per tant el següent pas serà associar-hi una plataforma.

Afegeix una plataforma a l'app

Per defecte PhoneGAP crea un projecte sense cap plataforma mòbil associada. El següent pas que cal fer sempre és associar una plataforma. Les instruccions phonegap-cli s'han d'executar sempre en la carpeta on s'ubica l'app. Per tant, el primer pas serà accedir a aquesta carpeta, en el nostre cas cd \android-projects\myfirstapp

Un cop situats en aquesta carpeta, comprovarem quines plataformes tenim disponibles i quines estan associades a la APP.

Un cop comprovat que no hi ha cap plataforma associada, cal afegir aquelles que necessitem per al nostre projecte (poden ser més d'una).

L'app Hello world

Tal com hem vist anteriorment, el desenvolupament d'una app mitjançant Phonegap és el mateix que desenvolupar una web. Aquesta web es troba dins la carpeta www del projecte. Sempre s'inicia l'aplicació a partir de l'arxiu index.html

Per mostrar missatges o qualsevol informació per pantalla, emprarem els tags HTML que creguem oportuns o les propietats CSS necessàries.

Canviar icona de l'app

Podem canviar la icona de la nostra app substituint l'arxiu icon.png que es troba dins de la carpeta www del projecte

Generar APK per simular

Un cop tenim l'aplicació desenvolupada, cal generar l'arxiu de l'app que serà el que enviarem al simulador o al telèfon mòbil.

Instrucció: phonegap build android

Descripció: Genera l'app per a la plataforma especificada, en el cas de Android l'arxiu APK.

Instrucció: phonegap build

Descripció: Genera l'app per a totes les plataformes configurades en el projecte.

En el cas concret d'Android, l'aplicació en format APK es troba en la següent carpeta: <carpeta_projecte>\platforms\android\build\outputs\apk

Executar l'aplicació dins l'emulador

Per poder simular la nostra app dins del dispositiu virtual cal que, durant el procés d'instal·lació del software, configurem un Android Virtual Device.

Instrucció: phonegap emulate android

Descripció: Executa el simulador android i envia l'aplicació per a la seva execució

Instrucció: phonegap emulate

Descripció: Executa els simuladors de les plataformes configurades en el projecte i envia l'aplicació a cadascun d'ells

Instrucció: phonegap run android --emulator

Descripció: Executa l'aplicació android i l'envia al simulador, amb el paràmetre --device es pot enviar a un dispositiu real, connectat

Instrucció: phonegap run --emulator

Descripció: Executa l'aplicació en totes les plataformes configurades i les envia als simuladors, amb el paràmetre --device es pot enviar a un dispositiu real, connectat

Importar projecte Eclipse IDE

Per accelerar el desenvolupament o fins i tot per emprar les eines que ens proporciona un bon IDE, ens serà necessari importar el projecte generat per phonegap-cli. En el cas d'Android utilitzarem el IDE Eclipse

Un cop dut a terme aquest procés, el codi de l'aplicació es troba preparat per poder treballar dins de l'entorn Eclipse i el trobarem disponible dins de la finestra del Package Explorer

Debug de l'app a Eclipse

Si tenim un dispositiu real connectat al PC, Eclipse ens permetrà triar quin dispositiu volem emprar per executar la nostra aplicació. Podem així provar-la en un entorn real però controlant-ho des del PC.

L'IDE Eclipse ens permet veure els missatges de log del smartphone que tinguem connectat, ja sigui un AVD o un dispositiu real. Aquesta característica ens permet poder trobar més facilment els errors de programació que es puguin produir en la nostra app. Per accedir a la consola de control del dispositiu de debug, Eclipse disposa d'una eina anomenada DDMS

En aquest espai podrem controlar el dispositiu: veure processos que s'estan executant, controlar els sensors, sistema d'arxius, estat de la xarxa, gps... De totes les eines que disposarem, la més útil serà l'anomenada LOGCat que mostra un registre en pantalla de tot allò que està succeint en el dispositiu, a mode de registre.

Podem veure la mateixa aplicació executant-se tant en el simulador com en un dispositiu real Samsung Galaxy SII

ATENCIO!

Cada cop que es canvia algun arxiu del web, html, css, javascript, és necessari executar una instrucció per a què puguem veure els canvis reflectits en el simulador d'Eclipse.

Instrucció: phonegap prepare android

Descripció: Prepara el projecte per a la seva execució en Android, prenent com a referència els arxius de www

Instrucció: phonegap prepare

Descripció: Prepara el projecte per a la seva execució en totes les plataformes configurades, prenent com a referència els arxius de www

Aquesta tasca també la podríem integrar dins del propi Eclipse, emprant l'eina "External Tools"

Per configurar-ho, caldrà localitzar la ubicació del script phonegap. Aquest es troba dins la carpeta de l'usuari: C:\users\nom_usuari\AppData\Roaming\npm\ i s'anomena phonegap.cmd

Si s'afegeixen plugins nous és possible que sigui necessari reconstruir l'aplicació emprant phonegap-cli

Instrucció: phonegap build android

Guies i recursos

Recursos que poden ser del vostre interès:

- http://cordova.apache.org/
- http://phonegap.com/