Cordova

Intro

Cordova és un framework per desenvolupar aplicacions mòbils amb HTML + CSS + JavaScript. Té la gran avantatge que ens permet fer un codi únic per a totes les plataformes disponibles, particularment:

• Android
• iOS
• Windows Phone
• Ubuntu Touch
• Blackberry
• ...i el què vingui a darrera

El desavantatge és que podem trobar-nos amb que la performance és probra (velocitat d'execució de les aplicacions).

Primeres passes

1. Instal·lar Android Studio. Podriem només instal·lar les eines per comandes, però aquest programari ens facilitarà molt tot plegat.
2. Instal·lar node.js. Probablement podem fer-ho amb un simple

   $ sudo apt-get install nodejs

3. Instal·lar el gestor de paquets per a node.js NPM

   $ sudo apt-get install npm

4. Actualitza tot el programari

   $ sudo npm -g update

5. Instal·lar Cordova:

   $ sudo npm -g install cordova

6. Crear projecte de prova:

   $ cordova create hellocordova

7. Entrem a la carpeta de treball (hellocordova)
8. Afegim les plataformes adequades. Primer podem provar amb "browser" per testejar:

   $ cordova platform add browser

9. Llançem el projecte:

   $ cordova run browser

Aquesta serà una primera visualització en el navegador (normalment Google Chrome o Chromium). Convé reduir el tamany perquè sembli un mòbil i fer-nos a la idea del què desenvoluparem.

Si volem compilar-ho per Android:

• Afegir plataforma:

  $ cordova platform add android

• Compilar:

  $ cordova build android

• Llençar emulador:

  $ cordova run android

Si endollem un dispositiu Android al nostre ordinador s'executarà en ell (si no ho fes, es pot provar afegint -device a la comanda run). L'emulador és pràctic quan no tenim un dispositiu a mà, però és força lent.

Depuració (debug)

Per depurar el més fàcil és utilitzar al nostre codi missatges amb

console.log("missatge...")

Per poder mostrar aquests missatges dependrà de la plataforma que utilitzem:

• browser: Premem F12 per veure el Inspector de Chrome, i anem a la pestanya "Console". També ens serà útil aquesta eina per poder depurar a nivell gràfic i CSS
• Android:
  • Un cop llançada la app, executem:

    $ ./platforms/android/cordova/log

  • Com que surten chorrocientos missatges, és més clar si filtrem només els què ens interessa (tot i que en determinats moments ens pot interessar treure el filtre per veure-ho tot):

    $ ./platforms/android/cordova/log | grep CONSOLE

  • Potser la manera més còmoda seria posar-ho tot a la mateixa comanda:

    $ cordova run android ; ./platforms/android/cordova/log | grep CONSOLE

GUI framework

De cara a construir la interfície gràfica de la nostra aplicació tenim diverses opcions. Destaquem aquestes:

• A pèl : podem construir a partir del HTML i JS planer. El projecte d'exemple que ve és una mostra. Al principi pot ser ràpid però a la llarga crear widgets una mica rics i eficaços serà molt costós. A part, la compatibilitat d'algunes instruccions JS per a diferents plataformes (Android/iOS/Windows) ens pot portar problemes. El més recomanat és utilitzar algun framework per a JS.
• jQuery mobile : jQuery és el framework per a JS més estandaritzat, pel que adaptar-nos a jQuery mobile serà fàcil i ràpid.
• Angular.js : el framework de Google és interessant, però la corva d'aprenentatge és lenta. Si t'atreveixes pots directament utilitzar ionic framework que no deixa de ser una fusió entre Cordova + Angular.js

Ja es veu que recomano jQuery mobile, oi? ;)

jQyuery mobile

Per entrar en jQyuery mobile framework recomano instal·lar el paquet de NPM cordova-jquery que ens facilitarà començar amb diverses plantilles simples.

Instal·lació:

$ sudo npm -g install cordova-jquery

Afegir plantilla (des del directori de treball). Només cal executar la següent comanda i triar la plantilla en mode interactiu:

$ cordova-jquery

Emmagatzemament

El més senzill i convenient és utilitzar el localStorage dels navegadors, per emmagatzemar dades persistents en format JSON, ja que ve integrat al propi JavaScript del navegador (o més aviat la webview) en què s'executa la nostra app.

Plugins

Podeu buscar-ne aquí: https://cordova.apache.org/plugins/

Descàrrega de fitxers

Hi 2 plugins que s'utilitzen per a això: File (permet accés a filesystem) i File Transfer (per descàrregues), però val a dir que fastrde-downloader ens ho resol tot molt més senzillament (els dos primers es fan prou complexe d'utilitzar), inclús descomprimeix Zips:

$ cordova plugin add cordova-plugin-fastrde-downloader

Penseu que si voleu utilitzar les imatges descarregades en el GUI (per evitar accedir a internet), cal resoldre diversos problemes:

• Clarificar quina és la URL adequada per accedir a la imatge descarregada. Es pot saber si utilitzem:
  • fileEntry.toURL(): ens dona la URL tipus "file:///data/..." del filesystem
  • fileEntry.toInternalURL(): ens dóna la URL interna tipus "cdvfile://localhost/persistent/...". Aquesta és la que ens interessa per col·locar-la al SRC de les imatges del nostre HTML.
• Posar cdvfile:// com a protocol a la whitelist. En config.xml, afegir:

  <allow-navigation href="cdvfile://*/*" />

• Assegurar-vos que la vostra API/servei permet CORS (cross-domain calls), sinó potser refusa enviar la imatge o la info JSON