Title: Introducció a PhoneGAP/Cordova
Course: CFGM. Sistemes microinformàtics - Curs 2020/21 > Section: 3. PROGRAMACIÓ DE L'APP: PHONEGAP

Programació amb PhoneGAP/Cordova

Què és PhoneGAP/Cordova?

En l’actualitat existeixen diverses plataformes mòbils en el mercat:

  - IOS: Que tant podem trobar en l’entorn de la telefonia de la mà de tota la família iPhone, com també per les tablet, en aquest cas iPad mini, iPad Air, etc, totes de la mà d'Apple. De forma nativa hauríem de desenvolupar les apps en Objective-C o Swift
  - Android: Que es troba dins l’ecosistema Google, en aquest cas, té una gama més variada de dispositius i de marques. Per desenvolupar una aplicació nativa hauríem de desenvolupar-la en Java emprant Android Studio o Eclipse, encara que també podríem desenvolupar a més baix nivell emprant les NDK i desenvolupant en C i C++
  - Windows Phone: Que encara que avui en dia estigui menys desenvolupat, cada cop la podrem trobar en més dispositiu, ja que Microsoft, que és la seva impulsora, vol aconseguir la seva quota de mercat. En aquest cas el desenvolupament d'apps  per a aquests dispositius es realitza emprant C# i XAML o HTML5 i WinJS. Com a entorn de desenvolupament s’hauria d’emprar Visual Studio de forma preferent.
  - Altres Plataformes: Existeixen altres plataformes com Blackberry, Tizen, FirefoxOS, Bada que tenen una quota de mercat més petita, però no menys important, de fet alguns d’aquests sistemes estan en força progressió, ja que s’incorporen a les SmartTV i altres dispositius similars, la qual cosa força a ternir-les en compte a l’hora de desenvolupar una nova aplicació.

En cas que vulguem desenvolupar una app per a entorns mòbils cal dissenyar una solució per a cada plataforma o emprar algun Framework que ens permeti reaprofitar el codi de l’aplicació per a una altra plataforma amb pocs canvis. Un altre problema inherent en la dispersió de sistemes i dispositius és l’elevada diversitat de sensors propis segons la família de dispositius. En el cas de Phonegap podem veure la seva disponibilitat segons dispositiu/sistema.

PhoneGAP/Cordova és un conjunt de llibreries que ens permet generar aplicacions mòbils emprant codi HTML5, fulls d'estil CSS i instruccions javascript, tot acompanyat de més arxius, com fonts, imatges, etc. En el moment que es genera una aplicació, realment es genera un mini navegador (WebView) amb un web ja integrat. Aquest tipus d'aplicacions s'anomenen WebAPPs.

Aquest navegador (WebView) és el que ofereix totes les possibilitats de posar-se en contacte amb el dispositiu, ja que és l'encarregat d'interceptar les instruccions relacionades amb ell. D'aquí que totes les crides habitualment començaran per la paraula navigator. Per exemple: navigator.camera, navigator.accelerometer...

Al tenir disponible un navegador (WebView) de phonegap per a cada sistema operatiu (IOS, Android, Windows Phone) ens permet desenvolupar un sol cop l'aplicació i reutilitzar-la en la resta de dispositius amb molt poques variacions. Aquest navegador suporta tot un conjunt de característiques bàsiques, però si necessitem una nova característica tenim la possibilitat d'utilitzar tot un conjunt de plugins desenvolupats per la comunitat Apache Cordova que permet ampliar les funcionalitats del navegador WebView. Amb més de 1000 plugins, la idea de PhoneGAP/Cordava es reflecteix en el següent esquema.

Diferències entre Phonegap i Cordova

En l’actualitat, Phonegap i Apache Cordova són eines idèntiques, encara que es descarreguen de llocs diferents i tenen noms diferents, quin és el motiu?

L’any 2009 una empresa desconeguda crea un framework per al desenvolupament mòbil multi plataforma, anomenada PhoneGap. La idea era emprar HTML5 i mitjançant Javascript permetre accedir a les funcions natives de cada sistema, així es permetria reutilitzar l’aplicació en diferents entorns.

La idea triomfa i el 2011 decideixen donar el codi font del producte a la fundació Apache per a fer-ne més gran el desenvolupament i les millores, convertint-lo en un gran projecte Open Source. En aquella epoca Adobe està buscant alternatives a Flash i comença a fer compres estratègiques, entre elles aquesta empresa, de forma que l’any 2011 Adobe es queda amb la marca de PhoneGap, el producte, treballadors, etc...

El 2012 la fundació Apache, per evitar problemes futurs ja que el nom és propietat de Adobe, decideix canviar-li el nom i passa a anomenar-se Cordova, nom del carrer que ocupava l’empresa que el va desenvolupar.

La diferencia entre ambdós productes és que Adobe pot oferir si vol més eines o característiques pròpies que pot decidir cobrar. Avui per avui, Phonegap permet la compilació en el núvol, proporcionada per Adobe i les actualitzacions potser no es produeixen tant sovint, com en Apache Cordova.

Software necessari. Android for Windows

El software que es detalla existeix per a totes les plataformes, Windows, Linux, MAC i ens permet generar aplicacions per a cadascuna de les plataformes. Per editar els arxius necessaris no cal emprar cap editor especial, podem fer-ho amb un editor de text normal que estigui disponible a la pròpia plataforma: notepad, notepad++, gedit....

Si volguéssim utilitzar un IDE (entorn de desenvolupament), hauríem d'utilitzar l'associat a la plataforma. El fet d'utilitzar-ne un, ens permetrà dur a terme les tasques de programació molt més àgilment. Per exemple: en entorns IOS empraríem XCode, per Android utilitzaríem Eclipse i per Windows Phone utilitzaríem Microsoft Visual Studio

JDK de Java

URL Descarrega: http://www.oracle.com/technetwork/java/javase/downloads/index.html

Segons quina sigui l'arquitectura de l'entorn en que treballem, haurem de descarregar la versión JDK que ens correspongui.

Android SDK

Android SDK

Per al desenvolupament d'aplicacions en Android cal descarregar i instal·lar les android SDK que contenen el conjunt de llibreries i arxius necessaris per a la generació d'aplicacions en Android.

URL Descarrega: https://developer.android.com/sdk/index.html

Un cop instal·lades les Android SDK, caldrà fer la instal·lació de la versió d'Android sobre la que vulguem provar les nostres apps. Tot això es dur a terme a través de l'aplicació d'escriptori Android SDK Manager que podrem cridar en qualsevol moment des de la consola mitjançant la instrucció android

Configuració variables entorn

Per a un correcte funcionament de totes les aplicacions cal configurar unes variables d'entorn, tal i com es detalla a continuació.

En aquest espai serà necessari definir les següents variables d'entorn:

- Nom: ANDROID_HOME
  - Valor: C:\ruta-android-sdk\Android\android-sdk
- Nom: JAVA_HOME
  - Valor: C:\Program Files\Java\jdk1.8.0_45 (o ruta on s'han ubicat les Java JDK)
- Nom: PATH
  - Valor: Cal afegir C:\ruta-android\Android\android-sdk\tools

Client NodeJS

PhoneGap i Cordova es basen en un client en format de scripts que han estat desenvolupats en nodejs. Per aquest motiu cal instal·lar un client de nodejs que ens permeti dur a terme la instal·lació de phonegap i el desenvolupament posterior de les aplicacions. Aquests scripts ens permetran generar la APK, executar el simulador, etc...

URL Descarrega: https://nodejs.org

PhoneGAP o Cordova

La instal·lació de PhoneGap o Cordova es realitza de forma automatitzada emprant el client NodeJS instal·lat anteriorment. Aquest script ja es connecta a internet, descarrega els paquets necessaris i els instal·la. Cal emprar el modificador –g per tal que la instal·lació es realitzi per a tots els usuaris.

Emprant una consola i des d'un usuari amb privilegis d'administrador cal executar: npm install -g phonegap

En cas que es volgués instal·lar Cordova, el procediment seria el mateix, únicament s’hauria de canviar la instrucció per npm install –g cordova

En cas de ser necessària una desinstal·lació, la instrucció és npm uninstall –g phonegap.En qualsevol cas el procés d’instal·lació/desinstal·lació es faria emprant l’eina npm.

Creació Dispositiu Virtual

Per poder provar la nostra aplicació, serà necessari configurar un dispositiu virtual AVD (Android Virtual Device). Es pot crear des de la consola de sistema amb la instrucció android i dins de l’eina que se’ns mostrarà per pantalla, accediríem a Manage AVD. Si utilitzem un IDE com Eclipse, es crea des dels propis menus.

Un cop hem accedit a l'administrador de dispositius virtuals, podem configurar-ne un de nou, ja sigui utilitzant les plantilles de les que disposa l'AVD Manager o podem crear un dispositiu completament de zero, triant: versió Android, grandaria pantalla, capacitat de memoria, tipus pantalla, sensors activats...

Software Opcional. Eclipse

Eclipse és un entorn de desenvolupament de software molt emprat per a la programació en JAVA, així com en la programació d'aplicacions Android a nivell més professional. Encara que el desenvolupament de les aplicacions Phonegap/Cordova es poden fer emprant un simple editor tipus Notepad++ o Brackets, podem emprar aquesta eina, ja que com a entorn de simulació resulta més rapid que el propi de phonegap. Tot i així, això no ens estalvia utilitzar les instruccions propies de phonegap/cordova, per tant caldrà tenir sempre una consola oberta.

URL: http://www.eclipse.org/downloads

Un cop descarregat l'arxiu, només serà necessari descomprimir-lo a la mateixa carpeta arrel del sistema i ja estarà operatiu i funcional. L'únic requisit per a què aquesta aplicació funcioni correctament és disposar de la Java Virtual Machine (JRE) instal·lada i configurada.

Per tal de desenvolupar aplicacions Android dins l'entorn Eclipse, Google ha creat un plugin per Eclipse que integra totes les possibilitats (connexió amb dispositius reals, simulador integrat, etc..). Per aquest motiu serà necessari instal·lar aquest plugin dins de l’aplicació Eclipse. Per fer-ho seguiríem els següents passos:

Afegir el repositori de google.

URL Repositori Google ADT: https://dl-ssl.google.com/android/eclipse/

Seleccionaríem els elements a instal·lar i procediríem a la instal·lació, acceptant les condicions d'utilització i llicència que apareixen a partir d'aquest punt.