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 Següent revisió Ambdós costats nova versio | ||
cordova [2023/02/08 20:14] enric_mieza_sanchez [AJAX amb jQuery] img-src explicació |
cordova [2024/01/10 17:13] enric_mieza_sanchez [Exercici Tasklist v0.1] tasklist image |
||
---|---|---|---|
Línia 19: | Línia 19: | ||
Per instal·lar Cordova necessites un bon plegat d' | Per instal·lar Cordova necessites un bon plegat d' | ||
- **Android Studio** que ens facilitarà les eines de l' | - **Android Studio** que ens facilitarà les eines de l' | ||
- | - **Java | + | - **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 | - **NodeJS** que ens facilitarà el gestor de paquets NPM amb el què podrem instal·lar Cordova | ||
- **Gradle** en la darrera versió. | - **Gradle** en la darrera versió. | ||
Línia 82: | Línia 82: | ||
===== Cordova no vol inlines ===== | ===== 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 // | + | 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 // |
+ | |||
+ | <WRAP alert> | ||
+ | Aquesta solució funcionaria en una web normal, però **no funciona en Cordova**: | ||
+ | |||
+ | <code html>< | ||
+ | |||
+ | Això es deu al tag META que hi ha l' | ||
+ | |||
+ | <code html>< | ||
+ | |||
+ | 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: | Forma de solventar-ho: | ||
Línia 119: | Línia 131: | ||
- Implementa el **botó d' | - Implementa el **botó d' | ||
* Necessitaràs conèixer [[jQuery|com utilitzar el DOM amb jQuery]]: | * Necessitaràs conèixer [[jQuery|com utilitzar el DOM amb jQuery]]: | ||
- | * Afegir elements. El text el podem agafar | + | * Afegir elements. El text el podem agafar |
+ | * [[https:// | ||
+ | * '' | ||
+ | * Posar el '' | ||
* Tingues en compte la [[https:// | * Tingues en compte la [[https:// | ||
</ | </ | ||
+ | |||
+ | |||
+ | {{tasklist2.png? | ||
+ | |||
\\ | \\ | ||
Línia 176: | Línia 195: | ||
\\ | \\ | ||
+ | ===== Framework CSS : MaterializeCSS ===== | ||
+ | |||
+ | <WRAP tip> | ||
+ | MaterializeCSS és un // | ||
+ | |||
+ | É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' | ||
+ | |||
+ | La // | ||
+ | |||
+ | Segueix aquest [[Materialize|tutorial sobre Materialize]] per iniciar un nou projecte Cordova amb aquesta eina. | ||
+ | </ | ||
+ | |||
+ | \\ | ||
===== Utilitzant APIs amb AJAX ===== | ===== Utilitzant APIs amb AJAX ===== | ||
Treballar aplicacions en HTML+JS accedir a dades externes és molt còmode utilitzant crides asíncrones 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' | + | 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 | Explorarem la API externa per accedir a dades de www.musicbrainz.org | ||
- | Exploreu els següents recursos: | + | ==== Queries a la API de musicbrainz.org |
- | - API (respon en XML): https://musicbrainz.org/ | + | musicbrainz.org |
- | - Crides en JSON: https://musicbrainz.org/ | + | |
- | * Per obtenir les dades en JSON cal que adjunteu el //header// de curl " | + | |
- | - Per fer //pretty print// | + | |
- | Exemple: | + | Documentació de musicbrainz: |
- | | + | |
+ | * [[https:// | ||
+ | |||
+ | === Exemples === | ||
+ | Obtenir els **resultats en XML** dels grups amb " | ||
+ | <code bash> | ||
+ | |||
+ | Per obtenir els **resultats en format JSON** cal afegir un //header// a la //request// de la query, per exemple: | ||
+ | <WRAP prewrap> | ||
+ | <code bash> | ||
+ | </ | ||
+ | |||
+ | Si volem mostrar els resultats de forma mes clara en la //shell//, podem utilitzar una **eina per tenir una correcta indentació**: | ||
+ | <code bash> | ||
+ | |||
+ | Un altre exemple per cercar la informació d'un artista concret. De qui estem parlant? | ||
+ | <WRAP prewrap> | ||
+ | <code bash>curl -H ' | ||
+ | </ | ||
==== AJAX amb jQuery ==== | ==== AJAX amb jQuery ==== | ||
Línia 237: | Línia 284: | ||
</ | </ | ||
- | ==== Public APIs a go-go ==== | + | |
+ | |||
+ | ==== Exericici ==== | ||
+ | |||
+ | <WRAP todo> | ||
+ | Rock band searcher: | ||
+ | - Crea un nou projecte Cordova | ||
+ | - Implementa una plantilla amb [[Materialize]]. | ||
+ | - Accedeix | ||
+ | | ||
+ | - Després implementa-ho en el HTML del projecte Cordova | ||
+ | - Mostra els resultats de la cerca en una llista HTML | ||
+ | </ | ||
+ | |||
+ | ==== Public APIs lists ==== | ||
<WRAP tip> | <WRAP tip> | ||
[[https:// | [[https:// | ||
Línia 245: | Línia 306: | ||
Fes-li un cop d'ull i troba el teu //hobby// en una API! | 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 ===== | + | ==== Exercici |
- | <WRAP tip> | + | |
- | MaterializeCSS és un // | + | |
- | </ | + | |
<WRAP todo> | <WRAP todo> | ||
- | Rock band searcher: | + | Aprofitant el codi que hem fet amb l'API de musicbrainz.com , fes una nova app que utilitzi la [[https:// |
- | | + | |
- | - Implementa | + | * Utilitza les [[https:// |
- | - Accedeix | + | * Per saltar al //tab2// necessitaràs consultar la [[https:// |
- | | + | $(' |
- | - Després implementa-ho en el HTML del projecte Cordova | + | </ |
- | | + | |
+ | | ||
+ | <a href="#" | ||
+ | | ||
</ | </ | ||