bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc


Barra lateral

ASIX Administració de Sistemes Informàtics i Xarxes
Tots els mòduls del cicle
MP01 Implantació de sistemes operatius
Totes les UFs del modul
MP02 Gestió de bases de dades
Totes les UFs del modul
MP03 Programació bàsica
Totes les UFs del modul
MP04 Llenguatges de marques i sistemes de gestió d'informació
Totes les UFs del modul
MP05 Fonaments de maquinari
Totes les UFs del modul
MP06 Administració de sistemes operatius
Totes les UFs del modul
MP07 Planificació i administració de xarxes
Totes les UFs del modul
MP08 Serveis de xarxa i Internet
Totes les UFs del modul
MP09 Implantació d'aplicacions web
Totes les UFs del modul
MP10 Administració de sistemes gestors de bases de dades
Totes les UFs del modul
MP11 Seguretat i alta disponibilitat
Totes les UFs del modul
MP12 Formació i orientació laboral
Totes les UFs del modul
MP13 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP14 Projecte
Totes les UFs del modul
DAM Desenvolupament d’aplicacions multiplataforma
Tots els mòduls del cicle
MP01 Sistemes informàtics
Totes les UFs del modul
MP02 Bases de dades
Totes les UFs del modul
MP03 Programació bàsica
Totes les UFs del modul
MP04 Llenguatges de marques i sistemes de gestió d'informació
Totes les UFs del modul
MP05 Entorns de desenvolupament
Totes les UFs del modul
MP06 Accés a dades
Totes les UFs del modul
MP07 Desenvolupament d’interfícies
Totes les UFs del modul
MP08 Programació multimèdia i dispositius mòbils
Totes les UFs del modul
MP09 Programació de serveis i processos
Totes les UFs del modul
MP10 Sistemes de gestió empresarial
Totes les UFs del modul
MP11 Formació i orientació laboral
Totes les UFs del modul
MP12 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP13 Projecte de síntesi
Totes les UFs del modul
MPDual Mòdul Dual / Projecte
DAW Desenvolupament d’aplicacions web
Tots els mòduls del cicle
MP01 Sistemes informàtics
Totes les UFs del modul
MP02 Bases de dades
Totes les UFs del modul
MP03 Programació
Totes les UFs del modul
MP04 Llenguatge de marques i sistemes de gestió d’informació
Totes les UFs del modul
MP05 Entorns de desenvolupament
Totes les UFs del modul
MP06 Desenvolupament web en entorn client
Totes les UFs del modul
MP07 Desenvolupament web en entorn servidor
Totes les UFs del modul
MP08 Desplegament d'aplicacions web
Totes les UFs del modul
MP09 Disseny d'interfícies web
Totes les UFs del modul
MP10 Formació i Orientació Laboral
Totes les UFs del modul
MP11 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP12 Projecte de síntesi
Totes les UFs del modul
SMX Sistemes Microinformàtics i Xarxes
Tots els mòduls del cicle
MP01 Muntatge i manteniment d’equips
Totes les UFs del modul
MP02 Sistemes Operatius Monolloc
Totes les UFs del modul
MP03 Aplicacions ofimàtiques
Totes les UFs del modul
MP04 Sistemes operatius en xarxa
Totes les UFs del modul
MP05 Xarxes locals
Totes les UFs del modul
MP06 Seguretat informàtica
Totes les UFs del modul
MP07 Serveis de xarxa
Totes les UFs del modul
MP08 Aplicacions Web
Totes les UFs del modul
MP09 Formació i Orientació Laboral
Totes les UFs del modul
MP10 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP11 Anglès
Totes les UFs del modul
MP12 Síntesi
Totes les UFs del modul
CETI Ciberseguretat en Entorns de les Tecnologies de la Informació
Tots els mòduls del cicle
CiberOT Ciberseguretat en Entorns d'Operació
Tots els mòduls del cicle
cordova

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).

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 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:

  1. Android Studio que ens facilitarà les eines de l'Android SDK.
  2. Java JDK per compilar la part base de la app (en Java). Ull amb les versions: >11 i < =18
  3. NodeJS que ens facilitarà el gestor de paquets NPM amb el què podrem instal·lar Cordova
  4. 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ó:

  1. Crear projecte:
    $ cordova create proj1
  2. Entrar al directori del projecte:
    $ cd proj1
  3. Afegir plataformes (android/ios/browser):
    $ cordova platform add android
  4. Compilar per Android:
    $ cordova build android
  5. 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 ens pot ajudar molt a agilitzar el desenvolupament.

Podeu aprendre més sobre jQuery ← en aquesta wiki.

Com afegir jQuery a la meva pàgina HTML:

  1. Instal·lació «a mà». Cal incloure els arxius de jQuery al nostre projecte. Ho pots fer de diverses maneres:
    1. Descarregar els arxius de la web oficial http://jquery.com
    2. Utilitzar els repositoris online (CDN). Pots veure com fer-ho en aquest tutorial:
  2. Instal·lació amb el package cordova-jquery de NodeJS que, a més, ens facilita plantilles bàsiques típiques de apps mòbils.
    1. Està força obsolet, però té alguns templates que permeten començar ràpid.
    2. Instal·la-ho a l'arrel del teu projecte Cordova:
      $ npm install cordova-jquery
    3. Configura el template.
      • En Linux executa:
        $ node_modules/cordova-jquery/cordova-jquery
      • En Windows fes des del CMD:
        node node_modules/cordova-jquery/cordova-jquery
  3. Mira com queda la plantilla fent de nou:
    $ cordova run browser
  4. Prova diversos templates (per exemple: multipage, accordion, listview). Observa el codi que ens genera per cadascun d'ells, en particular el index.html.
  5. Ens quedarem amb el listview ja que ens anirà bé com a base per a fer un exercici de tasklist.

Hi ha un petit error a les plantilles. Quan arrenquis l'aplicació mira la consola (CTRL+SHIFT+K) i veuràs un error a la línia 28 del index.js. Elimina aquesta línia ja que no ens cal i ens atura l'execució de la nostra aplicació.


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:

<button id="boto_esborrar" onclick="esborra()">Esborra</button>

Això es deu al tag META que hi ha l'inici del HTML (secció head):

<meta http-equiv="Content-Security-Policy" ...>

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):

index.html
  <button id="boto1">Prem per afegir</button>

I després, en el nostre index.js, ja li afegim el onclick (jQuery version):

index.js
  $('#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:

  1. Posar el tag <script src=… al final del doc (just després del button).
  2. Posar el codi d'inicialització dins la funció onclick del document, perquè s'executi al acabar de carregar (exemple segueix):
    $(document).ready( function ()  {
    	// initialize
    	$('#addButton').click(addElem);
    	$('#apiButton').click(callAPI);
    });
    


Exercici Tasklist v0.1

Implementarem una tasklist clàssica. Inicialment farem una versió senzilla que permeti afegir elements i prou.

Tasklist:

  1. Inicia un projecte Cordova.
  2. Implementa una plantilla amb el package NPM cordova-jquery, tal i com es descriu mes amunt (secció afegint_jquery).
    • Es recomana utilitzar la plantilla listView.
  3. Implementa el botó d'afegir tasca.


Exercici Tasklist v0.2

Continua de l'anterior exercici Tasklist v0.1:

  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 saber més sobre jQuery UI listview.
    • Per eliminar un element del DOM caldrà saber quin element està cridant (caller). 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 <li> (si no, esborraràs el botó i prou).
  2. Implementa un botó Edita dins de cada element de la llista.
  3. La funció d'edició la podem realitzar de diverses formes:
    1. Buidant l'element <li> que volem editar i creant a dins un <input> i botó de OK com a la imatge.
    2. 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.
  4. És probable (depenent de la implementació que hagis fet) que quan vulguis editar el text de la tasca (està dintre d'un <a>) et trobis que et posa també el text dels elements fills (botons d'esborrar i/o editar). 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 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:

  1. JSON.stringify() ens transforma l'objecte en un string per poder ser insertat al localStorage.
  2. 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.


Framework CSS : MaterializeCSS

MaterializeCSS és un framework CSS per crear interfícies atractives i responsives.

És molt important comptar amb una interfície gràfica clara i agradable si volem que la nostra app tingui una bona experiència d'usuari (UX).

La responsiveness és la capacitat de les interfícies d'amotllar-se a diferents grandàries de pantalles, per exemple, un mòbil, una tablet, depenent de si estan en vertical (portrait) o apaïsades (landscape). És una de les principals utilitats dels frameworks CSS.

Segueix aquest tutorial sobre Materialize per iniciar un nou projecte Cordova amb aquesta eina.


Utilitzant APIs amb AJAX

Treballar aplicacions en HTML+JS accedir a dades externes és molt còmode utilitzant crides asíncrones amb AJAX.

Una API web, també conegut com a web service és una interfície via web per demanar dades, així que es podria considerar una crida remota, d'aquí que en diguem API, com les llibreries de programació.

Explorarem la API externa per accedir a dades de www.musicbrainz.org

Queries a la API de musicbrainz.org

musicbrainz.org és una web amb informació sobre grups musicals que disposa d'una API pública o web service. Ens anirà molt bé per fer els primers exemples d'accés a dades remotes.

Documentació de musicbrainz:

Exemples

Obtenir els resultats en XML dels grups amb «queen» al seu nom:

curl https://musicbrainz.org/ws/2/artist?query=queen

Per obtenir els resultats en format JSON cal afegir un header a la request de la query, per exemple:

curl https://musicbrainz.org/ws/2/artist?query=queen -H "Accept:application/json"

Si volem mostrar els resultats de forma mes clara en la shell, podem utilitzar una eina per tenir una correcta indentació:

curl ...url_query... | python -m json.tool

Un altre exemple per cercar la informació d'un artista concret. De qui estem parlant?…

curl -H 'Accept:application/json' http://musicbrainz.org/ws/2/artist/5b11f4ce-a62d-471e-81fc-a69a8278c7da | python3 -m json.tool

AJAX amb jQuery

Aquestes mateixes les podem demanar des d'un document/aplicació HTML+JS amb crides asíncrones, el que solem conèixer per AJAX. Utilitzarem AJAX amb jQuery que ens ajudarà a simplificar el codi. Els exemples estan a la mateixa documentació, però us poso aquí un d'essencial per fer la crida i que ens retorni un objecte JSON de la API de musicbrainz.org :

$.ajax({
  method: "GET",
  url: "https://musicbrainz.org/ws/2/artist?query=queen",
  dataType: "json",   // necessitem això pq ens retorni un objecte JSON
}).done(function (msg) {
  for(let item in msg.artists) {
    console.log(msg.artists[item]);
    // aquí caldría fer mes coses, of course...
    // ...
  };
}).fail(function () {
	alert("ERROR");
});

Cal tenir en compte que les URLs a les que cridis amb AJAX han de tenir habilitada la capçalera de CORS (Cross-Origin Resource Sharing). Les APIs solen tenir-ho habilitat. Totes les APIs públiques ho tenen activat.

Pots veure una demo i explicació de com funciona a http://ieti.cat/cors/

Aquí s'explica els orígens de CORS força correctament.

Dins la nostra aplicació cal autoritzar l'accés a les dades externes del domini en qüestió. Si no ho fem, ens apareixerà un error a la consola similar a:

Content Security Policy: Els paràmetres de la pàgina han blocat la càrrega d'un recurs a https://musicbrainz.org/ws/2/ («default-src»).

Per tal d'autoritzar la petició, caldrà que a la capçalera META amb la política de seguretat validem la font de dades als següents apartats:

  • data: https://musicbrainz.org : URLs de les APIs de les que vulgui rebre info.
  • img-src: * : ens permetrà carregar imatges de qualsevol web.
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.gstatic.com https://code.jquery.com  data: https://musicbrainz.org gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' https://fonts.googleapis.com 'unsafe-inline'; media-src *; img-src * 'self' data: content:;">

Exericici

Rock band searcher:

  1. Crea un nou projecte Cordova
  2. Implementa una plantilla amb Materialize.
  3. Accedeix a la API de musicbrainz.org i fes una recerca de grups i de cançons, tal i com s'explica més amunt.
    1. Primer prova-ho amb curl
    2. Després implementa-ho en el HTML del projecte Cordova
  4. Mostra els resultats de la cerca en una llista HTML

Public APIs lists

En aquest repositori hi ha un llistat de public APIs per poder fer aplicacions amb les seves dades.

Mira't la documentació d'aquesta de space news ja que és força clara per començar.

Fes-li un cop d'ull i troba el teu hobby en una API!


Exercici

Aprofitant el codi que hem fet amb l'API de musicbrainz.com , fes una nova app que utilitzi la API de spaceflight news:

  • Al tab1 posa un botó que carregui una llista de notícies (mostrant només el títol).
  • Al tab2 posa la notícia complerta amb la imatge. Formata-la adequadament. Probablement hauràs de fer una altra crida a la API per carregar els detalls de l'article concret, cercant-lo per ID.
    • Poseu links a les notícies originals. El problema és que salta dins de la pròpia app. En realitat el què voldrem és que l'obri al navegador del mòbil, això ho podem aconseguir així:
      <a href="#" onclick="window.open('http://www.nasa.com/abc.html', '_system'); return false;">Notícia original.</a>
  • Al tab3 carregarem la llista de notícies amb Materialize Cards o bé utilitzant la Grid de Materialize amb containers, row i col, l'exemple «Example Promotion Table» ens anirà molt bé.


Plugins

Pots explorar-ne més a la documentació de plugins de Cordova.


Depuració (debug)

Per depurar el més fàcil és utilitzar al nostre codi missatges via la consola del browser:

console.log("missatge...")

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

Browser

  • Firefox: CTRL + SHIFT + K
  • Chrome: F12 (inspector) → Pestanya «Console».

Android

Chrome disposa d'eines de connexió remota. La consola de la WebView que utilitza la nostra app Cordova és accessible des de Chrome excecutat a la màquina host.

Obrim Chrome i anem a:

chrome://inspect/#devices

Des d'aquí hauriem de veure el nostre device i accedir-hi amb un inspect. S'obrirà una pantalla on veurem la consola de JavaScript.


cordova.txt · Darrera modificació: 2024/01/10 17:22 per enric_mieza_sanchez