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 FOL
Totes les UFs del modul
MP13 EIE
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 FOL
Totes les UFs del modul
MP12 EIE
Totes les UFs del modul
MP13 Projecte
Totes les UFs del modul
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
M09 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
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 FOL
Totes les UFs del modul
MP10 EiE
Totes les UFs del modul
MP11 Anglès
Totes les UFs del modul
MP12 Síntesi
Totes les UFs del modul
cordova

Cordova

Cordova (inicialment PhoneGap) son unes llibreries per al desenvolupament d'apps mòbils utilizant JavaScript, HTML i CSS. La principal avantatge és que en 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.

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.

Passes prèvies

Abans de começar a trabalhar amb Cordova caldrà que tinguem instal·lats els entorns de desenvolupament: llegeix Java i Android primerament.

Per instal·lar el Android Studio en Ubuntu podeu fer:

$ sudo snap install android-studio --classic

En cas de que puguis treballar en un Mac, hauràs d'instal·lar Xcode (des de la pròpia AppStore) i activar les CLI (Command Line Interface) Tools. En la versió Xcode 10 (High Sierra) seria:

XCode -> Preferences -> Locations -> Command Line Tools

Tens algun material per començar amb Cordova a Cacauet.org

Instal·lació

  1. Per instal·lar Cordova en Linux Debian o Ubuntu:
    1. Canviar repos per descarregar la versió LTS:
      $ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
    2. Instal·lar nodejs:
      $ sudo apt install nodejs
    3. Instal·lar Cordova:
      $ sudo npm install -g cordova

Quickstart

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

De vegades no arrenca bé l'emulador. Pots obrir-lo des del Android Studio, però llavors el IDE consumeix força recursos, i complica l'execució. Si tanques el projecte (File → Close Project a Android Studio) pots obrir el AVD Manager des de la pantalla d'inici d'Android Studio a Configure → AVD Manager.

També pots provar d'arrencar l'emulador des de la línia de comandes, com explica la doc oficial https://developer.android.com/studio/run/emulator-commandline

$ emulator -avd <el_meu_emulador>

Per exemple:

$ emulator -avd Pixel_2_API_28

Devices

Per córrer l'aplicació sobre un device real només cal que afegiu –device a la comanda:

$ cordova run android --device

Abans, però, caldrà que configureu el vostre dispositiu en mode developer buscant les dades del dispositiu i clicant 7 cops seguits al nº de compilació. Després activeu la Depuració USB.

Troubleshooting

Emulador KVM (Android Studio)

Si no et deixa crear una màquina virtual al Android Studio pq li falten permisos d'execució a KVM:

$ sudo chmod 777 /dev/kvm

Variables d'entorn

Si al llançar el run ens dona errors en Ubuntu pq no troba les llibreries, executa:

export ANDROID_HOME=~/Android/Sdk
export ANDROID_SDK_ROOT=~/Android/Sdk
export PATH=$ANDROID_HOME/platform-tools:$PATH
export PATH=$ANDROID_HOME/tools:$PATH
export PATH=$ANDROID_HOME/emulator:$PATH

El millor és que incloguis aquestes darreres instruccions a l'arxiu ~/.profile del teu home directory i així no caldrà picar-les cada cop que vulguis treballar amb Cordova. Si ho fas, per tal de no reiniciar la màquina, pots carregar l'script manualment:

$ source ~/.profile

Java version

Si tenim el Java 11 no serveix, ha de ser Java 8. Això ho pots saber amb

$ java -version

Si tenim la 11, podem instal·lar en paral·lel la 8 amb:

$ sudo apt install openjdk-8-jdk

I posar la 8 com a versió per defecte amb:

$ sudo update-alternatives --config java
$ sudo update-alternatives --config javac

Si es queixa de que no troba JAVA_HOME, l'haurem d'afegir a l'arxiu .profile:

export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64/

Si aquest no fos el path adequat de JAVA_HOME us donaria un error. Mireu quin és buscant on està la ruta del compilador java

$ ll `which javac`
$ ll /etc/alternatives/javac

Gradle

Si es queixa de que li falta gradle:

$ sudo apt install gradle

I ja pots tornar a provar el cordova run android

Llicències

Si es queixa de que li falten llicències per acceptar, entra a Android Studio → SDK Manager i accepta les llicències pertinents. També ho pots fer per comandes:

$ ~/Android/Sdk/tools/bin/sdkmanager --licenses

iOS

Ull si treballem amb Mac perquè des de la versió Xcode 10 tenim un issue que ens fa afegir un paràmetre una mica incòmode a la línia de comandes:

$ cordova build ios --buildFlag='-UseModernBuildSystem=0'
$ cordova run ios --buildFlag='-UseModernBuildSystem=0'

Suposem que més endavant s'actualitzarà Cordova adequadament i no caldrà la flag aquesta.

Construint una aplicació amb JavaScript

Ara que tenim 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 poder accedir al hardware del mòbil.

Afegint jQuery

jQuery ens pot ajudar molt a agilitzar el desenvolupament.

  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 ens ho facilita (permet posar alguna plantilla típica per a 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 executant:
      $ node_modules/cordova-jquery/cordova-jquery

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.

Forma de solventar-ho: fer els botons més senzills, sense onclick (però amb id):

<button id="boto1">Prem per afegir</button>

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

$('#addButton').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);
    });
    

Plugins

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.getItem
  • localStorage.setItem

Mira't la doc de W3Schools per aprendre a utilitzar-ho.

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

Exploreu els següents recursos:

    • Per obtenir les dades en JSON cal que adjunteu el header de curl “Accept:application/json”
  1. Per fer pretty print d'un JSON va molt bé “empipar-lo” a aquesta comanda:
    $ curl ... | python3 -m json.tool

Exemple:

$ curl -H 'Accept:application/json'  http://musicbrainz.org/ws/2/artist/5b11f4ce-a62d-471e-81fc-a69a8278c7da?inc=aliases | 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.

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.

Materialize CSS

MaterializeCSS és un framework CSS per crear interfícies atractives i responsive. Segueix aquest tutorial sobre Materialize per iniciar un nou projecte amb aquesta eina.

Exercici

Tasklist:

  1. Implementa una tasklist en HTML i JavaScript.
  2. Caldrà que tinguis clar com utilitzar el DOM:
    1. Afegir elements (el text l'agafem d'un input box)
    2. Esborrar elements (cal afegir un botó a cada element)
  3. Passa el teu projecte a una aplicació Cordova.
  4. Reimplementa tota l'aplicació utilitzant jQuery
  5. Fes la tasklist persistent utilitzant el localStorage

Llegeix aquest article sobre Materialize per aplicar un framework CSS més potent i modern per fer interfícies més atractives. Utilitza-ho pel següent exercici.

Rock band searcher:

  1. Crea un nou projecte Cordova
  2. Implementa una plantilla amb el plugin cordova-jquery
  3. Accedeix a la API de musicbrainz.org i fes una recerca de grups i de cançons
    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

Queries a la API de MUSICBRAINZ.COM

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

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

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). En aquest cas filtrem amb grep, case insensitive (-i), tots els missatges que continguin “console” o “cordova”:

$ ./platforms/android/cordova/log | grep -i 'console\|cordova'

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

$ cordova run android ; ./platforms/android/cordova/log | grep -i 'console\|cordova'
cordova.txt · Darrera modificació: 2021/03/06 20:22 per enric_mieza_sanchez