Cordova
Contingut
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
- Instal·lar Android Studio. Podriem només instal·lar les eines per comandes, però aquest programari ens facilitarà molt tot plegat.
- Instal·lar node.js. Probablement podem fer-ho amb un simple
$ sudo apt-get install nodejs
- Instal·lar el gestor de paquets per a node.js NPM
$ sudo apt-get install npm
- Actualitza tot el programari
$ sudo npm -g update
- Instal·lar Cordova:
$ sudo npm -g install cordova
- Crear projecte de prova:
$ cordova create hellocordova
- Entrem a la carpeta de treball (hellocordova)
- Afegim les plataformes adequades. Primer podem provar amb "browser" per testejar:
$ cordova platform add browser
- 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.
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 amb aquest 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
Primeres passes
...
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
