Preparant el nostre equip (WinXP) per a programar app’s per a smartphones amb Cordova

Bones! Quí no ha sentit parlar de Cordova? I no dic la ciutat d’Andalusia, sino l’entorn de programació que ens dona la possibilitat de compilar una mateixa app tant per a iOS, Android, Firefox, Windows phone,…. Cordova té un germà (per ara encara és un germà bessó) anomenat Phonegap. En qué es diferèncien? doncs per ara en res, solament en que Phonegap és d’Adobe i Cordova si no em falla la memòria és d’Apache (o està baix la llicència d’Apache). La historia és que Cordova ho va crear l’empresa Nitobi i més tard ho va comprar Adobe amb la condició que sigués lliure i així aparegueren les dues rames del projecte. Per ara són igual, però igual al cap d’uns anys comencen a eixir les primeres diferències.

A part Adobe té una ferramenta de compilació on-line: Adobe PhoneGap Build, a la qual et pots registrar gratuïtament amb opció de tenir un projecte a l’àmbit privat i tots els següents de forma pública. Si vols tenir més projectes privats ja tens que anar en diners per davant 😛

El que no he dit abans és el llenguatge de programació: El necessari per a programar una pàgina web, exacte! Tu dissenyes una web amb HTML5 + CSS3 + Javascript i Cordova ho empaqueta per a que ho pugues executar al smartphone. Bàsicament és un webview, no té més història si no fos perquè es pot interactuar amb el dispositiu. Em referisc a que es pot utilitzar la càmera, bluetooth, gps, comprovar l’estat del dispositiu,… amb plugins que han creat tant el mateix equip de Cordova/Phonegap com terceres persones.

No he programat mai en llenguatge natiu per a Android però supose que les seves diferències tindrà programar en llenguatge natiu i utilitzar aquesta plataforma, de forma nativa segurament les aplicacions seran més ràpides, ocuparan menys espai, millor interacció amb el dispositiu, menys consum de recursos,… en canvi d’aquesta forma tens homogeneïtat a l’hora de programar per a diferents dispositius ja que programes sols amb un llenguatge i una vegada. Depen del que necessites fer al teu projecte serà o no una bona opció per a tindre en compte.

Adobe PhoneGap Build

Ara continuaré amb la opció més senzilla, Adobe PhoneGap Build. Per a empaquetar la teva aplicació primer la tens que dissenyar amb el teu software preferit (notepad, atom, dreamviewer,…), crear un arxiu que s’anomenarà config.xml en l’arrel del teu projecte amb una estructura com aquesta:

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
    xmlns:gap = "http://phonegap.com/ns/1.0"
    id        = "com.phonegap.example"
    version   = "1.0.0">

<name>Aplicacio comunicacio</name>

<description>
Aplicacio que comunica
</description>

<author href="https://example.com" email="you@example.com">
Your Name
</author>
<gap:plugin name="org.apache.cordova.device" version="0.2.12" />
</widget>

i després comprimir-ho tot a un arxiu ZIP (RAR no, donarà error), pujar aquest arxiu i automàticament es posarà a compilar.Si utilitzes una aplicació pública sols pots actualitzar via github, indiques la URL i phonegap ja s’ho agarra d’allí. És important posar al fitxer config.xml els camps amb valors nostres, el id sol ser com.nom_empresa.nom_aplicacio i després del </author> és on van posant-se el plugins que s’utilitzaran.

El que no he comentat és que en aquest mon de les app’s cada ‘creador’ necessita tindre un certificat/id per a poder publicar les seves app’s. Així que si no en tens cap (cada plataforma necessita el seu), sols es podrà compilar per a windows phone i per a Android en mode debug, l’aplicació és totalment funcional però no la podràs posar al google play/market,… en iOS no es podrà empaquetar. Si puc, més endavant publicaré un post explicant com treure aquestos ID’s o certificats (ara mateixa jo tampoc ho se encara, poc a poc jeje).

Plugins a Adobe PhoneGap Build

Si vols utilitzar algun plugin, el primer que faràs és veure quins plugins hi ha i la seva documentació. Per a això s’accedix a l’apartat del plugins i es busca el que més ens interesse, per exemple posem el de la orientació de la pantalla. En aquest cas ens indica que és un plugin compatible amb Android i iOS, i en Usage Instructions ens indica qué hem de fer per a poder utilitzar aquest plugin. En aquest cas és copiar

<gap:plugin name="net.yoik.cordova.plugins.screenorientation" version="1.3.1" />

al nostre fitxer de configuració config.xml, i en l’enllaç de la documentació ja ens indica com cridar a les funcions d’aquest plugin. A partir d’ací ens queda definir les nostres funcions javascript per a poder interactuar amb el plugin. Per exemple definir a l’acció de fer clic a un botó per a que cride a una funció del plugin i que el resultat el mostre per pantalla (amb un alert(resultat); per exemple).

En aquest cas obviarem els apartats de la documentació on ens indica que per a instal·lar el plugin hem d’executar el comandament ‘cordova‘, aquesta part és per a Cordova/Phonegap en local.

Instalar Cordova en local

Com m’agrada tenir un entorn net solc utilitzar prou les màquines virtuals, tenin una màquina per a un proposit (sempre que els requisits em deixen), així separe entorns de programació que no necessite que estiguen junts, faig backup del SO acabat de configurar,…. i això he fet també en aquest cas. No he triat linux (llèstima!) sino Windows XP, si! XP perquè consumix menys recursos que les següents versions. Així que passe a explicar com preparar el terreny per a empaquetar en local. Requisits:

  • Java
  • Apache Ant
  • SDK d’Android
  • Node.js
  • Cordova

Java

Anem a la web de Java i ens instal·lem l’última versió de Java (ara és la 1.8.60), la qual al instal·lar-la al XP ens avisa que possiblement no funcione OK però s’instal·la sense cap problema

Apache Ant

Fem el mateix en Apache Ant, descarreguem l’última versió i la descomprimim on ens vinga be. Després en la variable de sistema PATH afegim la ruta a c:\ruta_on_esta\bin

SDK d’Android

Ací jo m’he baixat el Android Studio sencer(exactament aquest enllaç), però no se si també funcionarà sense instal·lar-lo (quí sap si més endavant l’utilitze!). Una vegada instal·lat, afegim a la variable del sistema PATH la ruta dels platform-tools i de les tools. En aquest cas ho he instal·lat tot a C:\Archivos de programa i he afegit a PATH les rutes C:\Archivos de programa\Android\sdk\platform-tools;C:\Archivos de programa\Android\sdk\tools. Si modifiques les rutes d’instal·lació a C:\Archivos de programa, apareix una advertència indicant que l’usuari necessita accés de lectura/escriptura en aquesta ruta.

Node.js

Anar a la web, baixar, instal·lar i afegir el path (segurament C:\Archivos de programa\nodejs\) a la variable de sistema PATH.

Cordova

Executar a una finestra de comandament (cmd) el comandament

npm install -g cordova

I ‘arreando’!

És important definir correctament les rutes a la variable de sistema PATH. Aquesta variable és la que ens ajuda a executar aplicacions en rutes diferents a les seves. Per exemple si volem executar l’aplicació ‘android.exe’ no és necessari anar a la ruta on ho hem instal·lat (al meu cas C:\Archivos de programa\Android\sdk\tools), sino executar-ho directament on estem al comandament.

Finalment, per a comprovar que s’ha instal·lat correctament executem

cordova -version

I ens indicarà la versió, ara és la 5.3.1, quan tu ho lliges i ho instal·les no se quina podrà ser jeje. Com pots observar sols he indicat com configurar-ho per a Android, per a iOS es necessita Mac OS (més motiu per a no entrar al mon de la poma rosegada).

Creant aplicacions

Ara ja anem a tirar de ‘comandos’, comandaments que memoritzarem i al final els utilitzarem sense pensar. Els que més es gasten són pocs: crear, afegir plataforma, afegir plugin, compilar, emular.

Crear aplicació

cordova create carpeta id nom_aplicació
cordova create hello com.example.hello HolaMon

Ens crea una carpeta en la ruta on estem amb els fitxers necessaris per a programar però no està definit en quines plataformes compilarem aquesta aplicació

Definir plataformes

cordova platform add ios
cordova platform add wp8
cordova platform add windows
cordova platform add amazon-fireos
cordova platform add android
cordova platform add blackberry10
cordova platform add firefoxos

Poc puc dir ací, sols que ios sols funciona en un Mac i wp8 sols en windows (supose que a partir de windows 8)

Instal·lar plugin

En aquest cas cada plugin ens indica com instal·lar-lo, al plugin que he utilitzat abans ens indicaba en el readme que executarem el següent comandament:

cordova plugin add net.yoik.cordova.plugins.screenorientation

Sempre sol ser cordova plugin add.

Compilar

cordova build

per a especificar una plataforma

cordova build android

(al final del empaquetament ens indica on està guardada l’aplicació)

Instal·lar els paquets corresponents de la API seleccionada en l’aplicació a compilar

A mi la primera vegada que vaig compilar em va donar un error perquè no tenia instal·lat correctament els paquets del SDK, en la versió de cordova que tinc jo es necessita la versió 22 del API del Android. Segurament es pot canviar la configuració (he vist per ahí que es pot indicar la versió màxima i mínima que es necessita), però per ara no he tingut necessitat de empaquetar per a android menor de la versió 4 (canvieu-se el mòbil per favor, a no ser que el vulgau reutilitzar com jo).

Per a instal·lar els paquets corresponents executar android i apareixerà una finestra on pots escollir els paquets que vulgues. Tria els de la API 22.

Emular

cordova emulate android

En aquest apartat es pot obviar la plataforma però aleshores ens intentarà emular en totes les plataformes disponibles i segurament el nostre pc no ho aguante, així que millor indicar en quina plataforma vols emular-ho.

Per ara jo no utilitze molt la emulació, em costa menys compilar i instal·lar l’aplicació al dispositiu de proves que veure com queda a l’emulador, però això ja és a gust de cadascú.

Configurar un emulador d’android

Si mai has utilitzat un emulador d’android segurament no el tingues configurat i per això quan intentes executar l’emulador et done error. Per a configurar l’emulador pots executar android avd, en aquesta finestra podràs crear l’entorn virtual que necessites, indicant tamany de la pantalla RAM a utilitzar, disc a utilitzar, processador,…

No tinc temps per a més (ni per a posar alguna imatge!). Així queda el post, com una especie de resum/esquema del tema. Indicar que una de les diferències de programar en Adobe Phonegap Build i en Cordova és la estructura de carpetes. En APB sols hi ha una carpeta arrel (que nosaltres podem crear dins més carpetes), els plugins s’instal·len quan s’empaqueta a la web mentre que en Cordova ens crea un arbre de carpetes on nosaltres sols programarem en la WWW, dixant la resta com estan (en Cordova si que s’instal·len els plugins al projecte que estem fent).

Un altre dia profundiré més en com crear projectes.

Enllaços d’interés: