====== Cordova ====== Apache Cordova (inicialment PhoneGap) son unes llibreries per al desenvolupament d'apps mòbils utilitzant [[JavaScript]], [[HTML]] i [[CSS]]. La principal avantatge és que permet utilitzar un llenguatge web genèric (JS) i compilar l'app per a diverses plataformes diferents, d'entre les que destaquem les majoritàries [[Android]] i [[iOS]]. El seu funcionament es basa en tenir una aplicació nadiua amb una simple WebView que ocupa tota la pantalla sencera. Implementant codi JavaScript dins la WebView ens permetrà controlar la interfície gràfica. Per accedir a les funcionalitats pròpies del dispositiu mòbil disposarem de certes llibreries (càmera, filesystem, acceleròmetre, etc). {{ cordova.png?400 }} {{tag> #Dam #DamMp08 #DamMpDual #DawMpDual Android iOS Cordova HTML JavaScript }} ===== Introducció i requisits ===== Per poder seguir aquest article se suposa que has de tenir coneixements de [[JavaScript]], [[HTML]] i [[CSS]]. Si tens coneixements molt bàsics també t'interessaria [[https://www.w3schools.com/js/js_htmldom.asp|repassar els conceptes del DOM o Document Object Model]]. Abans de començar a treballar amb Cordova caldrà que tinguem instal·lats els entorns de desenvolupament: llegeix [[Java]] i [[Android]] primerament. Per instal·lar Cordova necessites un bon plegat d'eines. De forma general necessitaràs: - **Android Studio** que ens facilitarà les eines de l'Android SDK. - **Java JDK** per compilar la part base de la app (en Java). Ull amb les versions: >11 i < =18 - **NodeJS** que ens facilitarà el gestor de paquets NPM amb el què podrem instal·lar Cordova - **Gradle** en la darrera versió. Segueix les indicacions de l'article [[Cordova install]] per posar a punt tot l'entorn. \\ ====== Construint una App amb Cordova ====== Si ja tens l'entorn preparat, es tracta de desenvolupar una app com si es tractés d'una aplicació web (com si fos pel //browser//) amb JavaScript. Podem aplicar llibreries típiques com jQuery o AngularJS, i a més disposarem d'algunes mes per a poder accedir al //hardware// del mòbil. \\ ===== Primera App ===== La seqüència típica per iniciar un projecte és com s'indica a continuació: - Crear projecte: $ cordova create proj1 - Entrar al directori del projecte: $ cd proj1 - Afegir plataformes (android/ios/browser): $ cordova platform add android - Compilar per Android: $ cordova build android - Arrencar el projecte a l'emulador: $ cordova run android Tingues en compte que per desenvolupar resulta molt còmode treballar amb la ''platform browser'' i les eines de desenvolupador del propi navegador. Mira l'article [[Introducció Javascript]] i realitza l'exercici de //login// i registre d'usuaris dins d'una aplicació Cordova. \\ ===== Afegint jQuery ===== jQuery és una biblioteca de codi que opera sobre el DOM de JavaScript i facilita moltes operacions. Podeu aprendre més sobre [[jQuery]] <- en aquesta wiki. \\ ==== Exercici Tasklist v0.1 ==== Implementarem una //tasklist// clàssica. Inicialment farem una versió senzilla que permeti afegir elements i prou. Tasklist: - Inicia un projecte Cordova. - Crea una llista de tasques d'exemple amb un senzill OL o UL. - Implementa el **botó d'afegir tasca**. * Necessitaràs conèixer [[jQuery|com utilitzar el DOM amb jQuery]]. * Afegir elements. El text el podem agafar amb: - El [[https://developer.mozilla.org/es/docs/Web/API/Window/prompt|prompt del navegador]] (és el més senzill). - Un [[https://jqueryui.com/dialog/#modal-form|modal form de jQuery UI]], que quedarà més vistós :) * Tingues en compte la documentació oficial de la jQuery UI. Cal fer-ho correctament per tal que ens apliqui els estils CSS adequats quan insertem un nou element. \\ {{tasklist2.png?200}} {{tasklist1.png?200}} ==== Exercici Tasklist v0.2 ==== Continua de l'anterior exercici Tasklist v0.1: - Implementa un **botó Elimina** dins de cada element de la llista que esborri aquell element. Convé fer-ho en la pròpia creació de l'element ''jQuery''. * Per eliminar un element del DOM caldrà saber //quin// element està cridant (caller). [[https://stackoverflow.com/questions/945201/how-to-get-the-caller-event-and-dom-element-id|Aquest post explica com obtenir el caller]]:function Hello(e){ var caller = e.target || e.srcElement; console.log( caller ); } * Busca la funció jQuery per a eliminar un element. * Busca la funció jQuery per a accedir al pare d'un element per poder esborrar el ''
  • '' (si no, esborraràs el botó i prou). - Implementa un **botó Edita** dins de cada element de la llista. - La funció d'edició la podem realitzar de diverses formes: - Buidant l'element ''
  • '' que volem editar i creant a dins un '''' i botó de OK com a la imatge. - Que ens porti a una altra pàgina que ens permeti editar la tasca. * Mireu l'exemple inicial on cada element de la llista ens porta a una pàgina. En tenim prou amb tenir dues pàgines: la //home// (on hi ha la ''listview'' i la pàgina //edita//. - És probable (depenent de la implementació que hagis fet) que quan vulguis editar el text de la tasca (està dintre d'un ) et trobis que et posa també el text dels elements fills (botons d'esborrar i/o editar). [[https://stackoverflow.com/questions/3442394/using-text-to-retrieve-only-text-not-nested-in-child-tags|En aquest post s'explica una solució molt eleganṭ]] per eliminar el text dels botons i deixar el de la task sola. \\ ===== Local Storage ===== ''localStorage'' és un objecte //built-in// de [[JavaScript]] dintre dels //browsers// que ens permet emmagatzemar dades persistents en una BD interna del tipus //KEY-VALUE//. Les aplicacions web no estaven pensades per emmagatzemar dades, només per ser visualitzades, i en tot cas per interaccionar amb el servidor. Per això aquest recurs va trigar en implementar-se en els navegadors. A més, cal tenir en compte que, per raons de seguretat, l'accés al disc dur en un navegador sempre s'ha limitat molt (JavaScript no té accés al //filesystem// per seguretat de les dades de l'usuari). És molt senzill d'utilitzar, al capdavall una DB //key-value// no deixa de ser un diccionari. En principi en tindreu prou amb els mètodes: localStorage.setItem("clau","valor"); var valor = localStorage.getItem("clau"); Mira't la [[https://www.w3schools.com/jsref/prop_win_localstorage.asp|doc de W3Schools]] per mes detalls. ==== Objectes a localStorage ==== ''localStorage'' només emmagatzema //strings//. **Si volem guardar objectes complexes, com diccionaris o arrays, caldrà utilitzar algun mètode de serialització**. Les funcions típiques que s'empren per a això son: - [[https://www.w3schools.com/js/js_json_stringify.asp|JSON.stringify()]] ens transforma l'objecte en un string per poder ser insertat al ''localStorage''. - [[https://www.w3schools.com/js/js_json_parse.asp|JSON.parse()]] ens permet recuperar un string serialitzat i el restitueix com a objecte. \\ ==== Exercici Tasklist v0.3 ==== Aplicarem tot l'exposat fins aquí en el següent exercici: Fes la //tasklist// persistent utilitzant el ''localStorage'', tal i com s'explica més amunt. \\ ===== Cordova no vol inlines ===== Típicament podríem fer una aplicació en JavaScript en una pàgina HTML i podríem posar botons que cridin a funcions del nostre codi amb un //onclick// (el què coneixem per crida //inline//). Doncs bé, Cordova no ens deixa fer //inlines// com aquest. Aquesta solució funcionaria en una web normal, però **no funciona en Cordova si utilitzem la plantilla que ve quan creem un projecte**: Això es deu al tag META que hi ha l'inici del HTML (secció //head//): i que veurem més endavant com a mesura de seguretat, per evitar injeccions de codi extern a la nostra app. Forma de solventar-ho: fer els botons més senzills, sense //onclick// (però amb //id//): I després, en el nostre ''index.js'', ja li afegim el //onclick// (jQuery version): $('#boto1').click(addElem); En aquest exemple, cridaríem a la funció ''addElem()''. I un darrer apunt, la crida a aquesta funció no pot anar al principi del document, pq en el //head// encara no existeix el nostre //button//. Tenim 2 solucions: - Posar el tag ''