Title: La primera Phonegap/Cordova app
Course: CFGS - Desenvolupament d'aplicacions web > Section: Desenvolupament d'aplicacions mòbils

Introducció a PhoneGAP

Consola PhoneGAP-Cli / Cordova-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 o Cordova-CLI

PhoneGAP-Cli o Cordova-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 / cordova help ens permet veure l'ajuda global dels scripts Phonegap, però també podem demanar ajuda de qualsevol altra instrucció emprant phonegap help instruccio o cordova help instrucció

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 / cordova 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>
cordova create <carpeta> <namespace> <titol_aplicacio> --template <nom_plantilla>

Exemple:

phonegap create c:\android-projects "com.josep.myfirstapp" "La meva APP" --template blank
cordova 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/Cordova 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/Cordova crea un projecte sense cap plataforma mòbil associada. El següent pas que cal fer sempre és associar una plataforma. Les instruccions 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).

Instruccions:

phonegap platform add android

cordova platform add android

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
cordova build android

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

Instrucció:

phonegap build
cordova 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
cordova emulate android

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

Instrucció:

phonegap emulate
cordova emulate

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

Instrucció:

phonegap run android --emulator
cordova 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
cordova 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 Android Studio

Per accelerar el desenvolupament podrem emprar un IDE com Android Studio, que és una aplicació que proporciona totes les eines necessàries per al desenvolupament d'aplicacions per Android, però per poder-hi treballar abans caldrà importar el codi generat anteriorment pel CLI.

1. Arrencar Android Studio
2. Tria Import Project (Eclipse ADT, Gradle, etc)

1. Tria la carpeta on es troba el projecte que heu creat anteriorment amb la consola Cordova ( elteu/projecte/platforms/android )

1. A la pregunta sobre Gradle Sync podeu respondre-hi afirmativament

I ja estareu en disposició d'emprar Android Studio per desenvolupar i executar les aplicacions creades amb Phonegap/Cordova.

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 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

Si tenim un dispositiu real connectat al PC, el nostre IDE 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.

Els IDE ens permetran 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, disposarem 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 AMB ECLIPSE!

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
cordova 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
cordova 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 el CLI

Instrucció:

phonegap build android
cordova build android

Guies i recursos

Recursos que poden ser del vostre interès:

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