Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.
Ambdós costats versió prèvia Revisió prèvia Següent revisió | Revisió prèvia | ||
playground:prova [2022/12/14 18:49] enric_mieza_sanchez |
playground:prova [2023/06/30 16:56] (actual) isaac_gonzalo_rivero |
||
---|---|---|---|
Línia 1: | Línia 1: | ||
- | ====== Cordova ====== | + | proves vàries |
- | + | ||
- | Apache Cordova (inicialment PhoneGap) son unes llibreries per al desenvolupament d'apps mòbils utilitzant [[JavaScript]], | + | |
- | + | ||
- | 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, | + | |
- | + | ||
- | {{ cordova.png? | + | |
- | + | ||
- | {{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]], | + | |
- | + | ||
- | Si tens coneixements molt bàsics també t' | + | |
- | + | ||
- | Abans de començar a treballar amb Cordova caldrà que tinguem instal·lats els entorns de desenvolupament: | + | |
- | + | ||
- | Per instal·lar Cordova necessites un bon plegat d' | + | |
- | - **Android Studio** que ens facilitarà les eines de l' | + | |
- | - **Java 8 JDK** no ens servirà cap altra versió. | + | |
- | - **NodeJS** que ens facilitarà el gestor de paquets NPM amb el què podrem instal·lar Cordova | + | |
- | - **Gradle** en la darrera versió. | + | |
- | + | ||
- | + | ||
- | En cas de que puguis treballar en un Mac, hauràs d' | + | |
- | XCode -> Preferences -> Locations -> Command Line Tools | + | |
- | + | ||
- | MacOS: [[https:// | + | |
- | + | ||
- | Tens algun material per [[https:// | + | |
- | + | ||
- | \\ | + | |
- | + | ||
- | ===== Instal·lació en Ubuntu ===== | + | |
- | + | ||
- | - Primer cal tenir instal·lat **Anrdoid Studio**:< | + | |
- | - Prova de crear un projecte dins d' | + | |
- | - Cal **instal·lar Java 8 JDK, només funcionarà amb aquesta versió** de Java. | + | |
- | - Vigila que no tens cap altra versió instal·lada. Si la tens, desinstal·la-la. Comprova si la tens amb (ha de sortir-te openjdk version 1.8):< | + | |
- | - Instal·la Java 8 JDK:< | + | |
- | - Ajusta la variable d' | + | |
- | - Millor que afegeixis aquest export a l' | + | |
- | - Necessitarem **instal·lar NodeJS**, no pel servidor web, sinó perquè necessitem el gestor de paquets '' | + | |
- | - Canviem repos per [[https:// | + | |
- | - Instal·lar nodejs:< | + | |
- | - Instal·lar **Cordova**: | + | |
- | - També ens caldrà **Gradle**: | + | |
- | - Ajustem [[https:// | + | |
- | $ sudo apt install gradle</ | + | |
- | - Comprova que és una versió recent (7.x durant l'any 2022) amb:< | + | |
- | + | ||
- | \\ | + | |
- | + | ||
- | ===== Quickstart ====== | + | |
- | La seqüência típica per iniciar un projecte és com s' | + | |
- | - Crear projecte: < | + | |
- | - Entrar al directori del projecte: < | + | |
- | - Afegir plataformes (android/ | + | |
- | - Compilar per Android: < | + | |
- | - Arrencar el projecte a l' | + | |
- | + | ||
- | De vegades no arrenca bé l' | + | |
- | + | ||
- | També pots provar d' | + | |
- | $ emulator -avd < | + | |
- | Per exemple: | + | |
- | $ emulator -avd Pixel_2_API_28 | + | |
- | + | ||
- | ==== Devices ==== | + | |
- | Per córrer l' | + | |
- | $ 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' | + | |
- | $ sudo chmod 777 /dev/kvm | + | |
- | + | ||
- | ==== Variables d' | + | |
- | Si al llançar el '' | + | |
- | export ANDROID_SDK_ROOT=~/ | + | |
- | + | ||
- | El millor és que incloguis aquestes darreres instruccions a l' | + | |
- | $ source ~/ | + | |
- | + | ||
- | + | ||
- | ==== Variables d' | + | |
- | Alguna comanda no et funciona, és perquè necessita estar al PATH per poder ser trobada. | + | |
- | + | ||
- | Cerca " | + | |
- | \Users\usuari\AppData\Local\Android\Sdk | + | |
- | + | ||
- | Però cerca abans per assegurar-te d'on son exactament les eines. | + | |
- | + | ||
- | ==== Altres ==== | + | |
- | Si es queixa de: | + | |
- | No usable Android build tools found. Highest 30.x installed version is 30.0.2; minimum version required is 30.0.3 | + | |
- | [[https:// | + | |
- | Android Studio -> Tools -> SDK Manager -> Android SDK -> SDK Tools | + | |
- | i **activant '' | + | |
- | + | ||
- | ==== 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' | + | |
- | export JAVA_HOME=/ | + | |
- | + | ||
- | 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 / | + | |
- | + | ||
- | ==== Gradle ==== | + | |
- | Si es queixa de que li falta //gradle//, l' | + | |
- | + | ||
- | Instal·lar //gradle// per a GNU/ | + | |
- | $ sudo add-apt-repository ppa: | + | |
- | $ sudo apt install gradle | + | |
- | + | ||
- | Instal·lar //gradle// per a Windows: | + | |
- | - Descarrega [[https:// | + | |
- | - Descomprimeix Gradle a una carpeta tipus C:\Gradle | + | |
- | - Ajusta la variable d' | + | |
- | + | ||
- | Instal·lar //gradle// per a MacOS: ...coming soon... probablement brew install gradle | + | |
- | + | ||
- | + | ||
- | I ja pots tornar a provar el '' | + | |
- | + | ||
- | ==== Llicències ==== | + | |
- | Si es queixa de que li falten llicències per acceptar, entra a '' | + | |
- | $ ~/ | + | |
- | + | ||
- | ==== Apple, ios, macos ==== | + | |
- | Treballant amb Apple podem trobar alguns problemes una mica diferents. | + | |
- | + | ||
- | Les variables d' | + | |
- | export JAVA_HOME=/ | + | |
- | export ANDROID_SDK_ROOT=~/ | + | |
- | + | ||
- | També hi ha un [[https:// | + | |
- | + | ||
- | [[https:// | + | |
- | $ cordova build ios --buildFlag=' | + | |
- | $ cordova run ios --buildFlag=' | + | |
- | + | ||
- | Sembla que a partir de Xcode 11 ja no apareix aquest problema. | + | |
- | + | ||
- | Si falla amb el missatge < | + | |
- | + | ||
- | [[https:// | + | |
- | $ sudo xcode-select -s / | + | |
- | + | ||
- | \\ | + | |
- | + | ||
- | ====== Construint una App amb JavaScript ====== | + | |
- | Ara que tenim l' | + | |
- | + | ||
- | \\ | + | |
- | + | ||
- | ===== Primera App ===== | + | |
- | + | ||
- | <WRAP todo> | + | |
- | Mira l' | + | |
- | </ | + | |
- | + | ||
- | \\ | + | |
- | + | ||
- | ===== Afegint jQuery ===== | + | |
- | jQuery ens pot ajudar molt a agilitzar el desenvolupament. | + | |
- | + | ||
- | - **Instal·lació "a mà" | + | |
- | - Descarregar els arxius de la web oficial http:// | + | |
- | - Utilitzar els repositoris online (CDN). Pots veure com fer-ho en aquest tutorial: | + | |
- | - https:// | + | |
- | - Instal·lació amb el **// | + | |
- | - Està força obsolet, però té alguns // | + | |
- | - https:// | + | |
- | - Instal·la-ho a l' | + | |
- | - Configura el template. | + | |
- | * En Linux executa:< | + | |
- | * En Windows fes des del CMD:< | + | |
- | - Mira com queda la plantilla fent de nou:< | + | |
- | - Prova diversos // | + | |
- | - Ens quedarem amb el '' | + | |
- | * La [[https:// | + | |
- | + | ||
- | <WRAP important> | + | |
- | Hi ha un petit error a les plantilles. Quan arrenquis l' | + | |
- | </ | + | |
- | + | ||
- | \\ | + | |
- | + | ||
- | ===== 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 // | + | |
- | + | ||
- | Forma de solventar-ho: | + | |
- | <button id=" | + | |
- | + | ||
- | I després, en el nostre '' | + | |
- | $('# | + | |
- | + | ||
- | En aquest exemple, cridaríem a la funció '' | + | |
- | + | ||
- | 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 ''< | + | |
- | - Posar el codi d' | + | |
- | $(document).ready( function () { | + | |
- | // initialize | + | |
- | $('# | + | |
- | $('# | + | |
- | }); | + | |
- | </ | + | |
- | + | ||
- | ===== Exercici Tasklist v1 ===== | + | |
- | + | ||
- | <WRAP todo> | + | |
- | Tasklist: | + | |
- | - Inicia un projecte Cordova. | + | |
- | - Implementa una plantilla amb el [[https:// | + | |
- | * Es recomana utilitzar la plantilla '' | + | |
- | - Implementa el **botó d' | + | |
- | * Afegir elements (el text l' | + | |
- | * Tingues en compte la [[https:// | + | |
- | </ | + | |
- | + | ||
- | \\ | + | |
- | + | ||
- | + | ||
- | + | ||
- | ===== Local Storage ===== | + | |
- | '' | + | |
- | + | ||
- | Les aplicacions web no estaven pensades per emmagatzemar dades, només per ser visualitzades, | + | |
- | + | ||
- | És molt senzill d' | + | |
- | * localStorage.getItem | + | |
- | * localStorage.setItem | + | |
- | + | ||
- | Mira't la [[https:// | + | |
- | + | ||
- | <WRAP tip> | + | |
- | ==== Objectes a localStorage ==== | + | |
- | '' | + | |
- | - [[https:// | + | |
- | - [[https:// | + | |
- | </ | + | |
- | + | ||
- | \\ | + | |
- | + | ||
- | + | ||
- | ===== Exercici Tasklist v2 ===== | + | |
- | Aplicarem tot l' | + | |
- | + | ||
- | <WRAP todo> | + | |
- | Continua de l' | + | |
- | - 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' | + | |
- | * Per saber més [[https:// | + | |
- | - Implementa un **botó Edita** dins de cada element de la llista que ens porti a una altra pàgina que ens permeti editar la tasca. | + | |
- | * Mireu l' | + | |
- | - Fes la // | + | |
- | </ | + | |
- | + | ||
- | \\ | + | |
- | + | ||
- | + | ||
- | ===== 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' | + | |
- | + | ||
- | Explorarem la API externa per accedir a dades de www.musicbrainz.org | + | |
- | + | ||
- | Exploreu els següents recursos: | + | |
- | - API (respon en XML): https:// | + | |
- | - Crides en JSON: https:// | + | |
- | * Per obtenir les dades en JSON cal que adjunteu el //header// de curl " | + | |
- | - Per fer //pretty print// d'un JSON va molt bé " | + | |
- | + | ||
- | Exemple: | + | |
- | $ curl -H ' | + | |
- | + | ||
- | ==== AJAX amb jQuery ==== | + | |
- | Aquestes mateixes les podem demanar des d'un document/ | + | |
- | + | ||
- | <code javascript> | + | |
- | $.ajax({ | + | |
- | method: " | + | |
- | url: " | + | |
- | dataType: " | + | |
- | }).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(" | + | |
- | }); | + | |
- | </ | + | |
- | + | ||
- | 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:// | + | |
- | + | ||
- | [[https:// | + | |
- | + | ||
- | <WRAP important> | + | |
- | Dins la nostra aplicació cal autoritzar l' | + | |
- | + | ||
- | <WRAP prewrap> | + | |
- | Content Security Policy: Els paràmetres de la pàgina han blocat la càrrega d'un recurs a https:// | + | |
- | </ | + | |
- | + | ||
- | Per tal d' | + | |
- | + | ||
- | <WRAP prewrap> | + | |
- | <code html> | + | |
- | <meta http-equiv=" | + | |
- | </ | + | |
- | </ | + | |
- | + | ||
- | </ | + | |
- | + | ||
- | ==== Public APIs a go-go ==== | + | |
- | <WRAP tip> | + | |
- | [[https:// | + | |
- | + | ||
- | Fes-li un cop d'ull i troba el teu //hobby// en una API! | + | |
- | </ | + | |
- | + | ||
- | + | ||
- | ==== Queries a la API de MUSICBRAINZ.COM ==== | + | |
- | Documentació de musicbrainz: | + | |
- | * [[https:// | + | |
- | * [[https:// | + | |
- | + | ||
- | === Exemples === | + | |
- | Obtenir els resultats (en XML) dels grups amb " | + | |
- | $ curl https:// | + | |
- | + | ||
- | Per obtenir els resultats en format JSON cal afegir un //header// a la //request// de la query, per exemple: | + | |
- | $ curl https:// | + | |
- | + | ||
- | 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 | + | |
- | + | ||
- | \\ | + | |
- | + | ||
- | ===== Materialize CSS ===== | + | |
- | <WRAP tip> | + | |
- | MaterializeCSS és un // | + | |
- | </ | + | |
- | + | ||
- | <WRAP todo> | + | |
- | Rock band searcher: | + | |
- | - Crea un nou projecte Cordova | + | |
- | - Implementa una plantilla amb [[Materialize]]. | + | |
- | - Accedeix a la API de musicbrainz.org i fes una recerca de grups i de cançons, tal i com s' | + | |
- | - Primer prova-ho amb '' | + | |
- | - Després implementa-ho en el HTML del projecte Cordova | + | |
- | - Mostra els resultats de la cerca en una llista HTML | + | |
- | </ | + | |
- | + | ||
- | \\ | + | |
- | + | ||
- | ===== Plugins ===== | + | |
- | ... | + | |
- | + | ||
- | \\ | + | |
- | + | ||
- | ====== Depuració (debug) ====== | + | |
- | Per depurar el més fàcil és utilitzar al nostre codi missatges amb | + | |
- | console.log(" | + | |
- | 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 " | + | |
- | + | ||
- | ===== Android ===== | + | |
- | Un cop llançada la app, executem: | + | |
- | $ ./ | + | |
- | + | ||
- | 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 '' | + | |
- | $ ./ | + | |
- | + | ||
- | Potser la manera més còmoda seria posar-ho tot a la mateixa comanda: | + | |
- | $ cordova run android ; ./ | + | |
+ | ^ Heading 1 ^ Heading 2 ^ Heading 3 ^ | ||
+ | | Row 1 Col 1 | Row 1 Col 2 | Row 1 Col 3 | | ||
+ | | Row 2 Col 1 | some colspan (note the double pipe) || | ||
+ | | Row 3 Col 1 | Row 3 Col 2 | Row 3 Col 3 | |