Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

--- cordova [2023/02/10 17:42]
enric_mieza_sanchez [Public APIs a go-go] canvi de lloc
+++ cordova [2024/01/10 17:22] (actual)
enric_mieza_sanchez [Exercici Tasklist v0.1]
@@ Línia 19: / Línia 19: @@
 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 8 JDK** no ens servirà cap altra versió.
+  - **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ó.
@@ Línia 82: / Línia 82: @@
 ===== 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//.
+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.
+<WRAP alert>
+Aquesta solució funcionaria en una web normal, però **no funciona en Cordova**:
+<code html><button id="boto_esborrar" onclick="esborra()">Esborra</button></code>
+Això es deu al tag META que hi ha l'inici del HTML (secció //head//):
+<code html><meta http-equiv="Content-Security-Policy" ...></code>
+i que veurem més endavant com a mesura de seguretat, per evitar injeccions de codi extern a la nostra app.
+</WRAP>
 Forma de solventar-ho: fer els botons més senzills, sense //onclick// (però amb //id//):
@@ Línia 119: / Línia 131: @@
   - Implementa el **botó d'afegir tasca**.
     * Necessitaràs conèixer [[jQuery|com utilitzar el DOM amb jQuery]]:
-    * Afegir elements. El text el podem agafar d'un [[https://developer.mozilla.org/es/docs/Web/API/Window/prompt|prompt del navegador (recomanat)]] o bé amb un //input form// a part (és mes elaborat).
+    * Afegir elements. El text el podem agafar amb:
+      * [[https://developer.mozilla.org/es/docs/Web/API/Window/prompt|prompt del navegador]] (és el més senzill).
+      * ''input form'' a part.
+      * Posar el ''input form'' dins un [[https://demos.jquerymobile.com/1.4.5/pages-dialog/|Dialog de jQuery Mobile]].
     * Tingues en compte la [[https://api.jquerymobile.com/listview/|documentació oficial de la jQuery mobile listview]]. En particular mira el mètode ''refresh()'' que ens aplicarà els estils perquè quan insertem un nou element a la listview quedi amb els estils CSS adequats.
 </WRAP>
 \\
+{{tasklist2.png?200}} {{tasklist1.png?200}}
 ==== Exercici Tasklist v0.2 ====
@@ Línia 137: / Línia 154: @@
     * 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).
-  - 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.
+  - Implementa un **botó Edita** dins de cada element de la llista.
-    * 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//.
+  - La funció d'edició la podem realitzar de diverses formes:
-    * É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). [[https://stackoverflow.com/questions/3442394/using-text-to-retrieve-only-text-not-nested-in-child-tags|En aquest post s'explica una solució molt eleganṭ]] per eliminar el text dels botons i deixar el de la task sola.
+    - Buidant l'element ''<li>'' que volem editar i creant a dins un ''<input>'' 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 <a>) 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 eleganṭ]] per eliminar el text dels botons i deixar el de la task sola.
 </WRAP>
@@ Línia 193: / Línia 213: @@
 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ó.
+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:
+==== Queries a la API de musicbrainz.org ====
-  - API (respon en XML): https://musicbrainz.org/doc/Development/XML_Web_Service/Version_2
+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.
-  - Crides en JSON: https://musicbrainz.org/doc/Development/JSON_Web_Service
-    * Per obtenir les dades en JSON cal que adjunteu el //header// de curl "Accept:application/json"
-  - Per fer //pretty print// d'un JSON va molt bé "empipar-lo" a aquesta comanda:<code>$ curl ... | python3 -m json.tool</code>
-Exemple:
+Documentació de musicbrainz:
-  $ curl -H 'Accept:application/json'  http://musicbrainz.org/ws/2/artist/5b11f4ce-a62d-471e-81fc-a69a8278c7da | python3 -m json.tool
+  * [[https://musicbrainz.org/doc/Development/XML_Web_Service/Version_2|Doc oficial API Musicbrainz]]. Els exemples ens venen en XML.
+  * [[https://musicbrainz.org/doc/Development/JSON_Web_Service|Instruccions per obtenir resultats en format JSON]].
+=== Exemples ===
+Obtenir els **resultats en XML** dels grups amb "queen" al seu nom:
+<code bash>curl https://musicbrainz.org/ws/2/artist?query=queen</code>
+Per obtenir els **resultats en format JSON** cal afegir un //header// a la //request// de la query, per exemple:
+<WRAP prewrap>
+<code bash>curl https://musicbrainz.org/ws/2/artist?query=queen -H "Accept:application/json"</code>
+</WRAP>
+Si volem mostrar els resultats de forma mes clara en la //shell//, podem utilitzar una **eina per tenir una correcta indentació**:
+<code bash>curl ...url_query... | python -m json.tool</code>
+Un altre exemple per cercar la informació d'un artista concret. De qui estem parlant?...
+<WRAP prewrap>
+<code bash>curl -H 'Accept:application/json' http://musicbrainz.org/ws/2/artist/5b11f4ce-a62d-471e-81fc-a69a8278c7da | python3 -m json.tool</code>
+</WRAP>
 ==== AJAX amb jQuery ====
@@ Línia 251: / Línia 286: @@
-==== Queries a la API de MUSICBRAINZ.COM ====
-Documentació de musicbrainz:
-  * [[https://musicbrainz.org/doc/Development/XML_Web_Service/Version_2|Doc oficial API Musicbrainz]]. Els exemples ens venen en XML.
-  * [[https://musicbrainz.org/doc/Development/JSON_Web_Service|Instruccions per obtenir resultats en format JSON]].
-=== Exemples ===
+==== Exericici ====
-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
-\\
-===== Exericicis =====
 <WRAP todo>
@@ Línia 278: / Línia 297: @@
     - Després implementa-ho en el HTML del projecte Cordova
   - Mostra els resultats de la cerca en una llista HTML
+</WRAP>
+==== Public APIs lists ====
+<WRAP tip>
+[[https://github.com/public-apis/public-apis|En aquest repositori hi ha un llistat de public APIs]] per poder fer aplicacions amb les seves dades.
+[[https://api.spaceflightnewsapi.net/v3/documentation#/|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!
+</WRAP>
+\\
+==== Exercici ====
+<WRAP todo>
+Aprofitant el codi que hem fet amb l'API de musicbrainz.com , fes una nova app que utilitzi la [[https://api.spaceflightnewsapi.net/v3/documentation|API de spaceflight news]]:
+  * Al **tab1** posa un botó que carregui una llista de notícies (mostrant només el títol).
+    * Utilitza les [[https://materializecss.com/collections.html|Collections de MaterializeCSS]] per donar-li una formatació adequada. Cada ítem de la llista ha de tenir un //link// que carregui les dades complertes al tab2 i hi salti al clicar.
+    * Per saltar al //tab2// necessitaràs consultar la [[https://materializecss.com/tabs.html|doc dels tabs de Materialize i anar a la secció "Methods"]] i cridar el mètode "select". La versió jQuery seria així:<WRAP prewrap><code javascript>
+$('.tabs').tabs("select","test-swipe-2");
+</code></WRAP>
+  * 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í:<WRAP prewrap><code html>
+<a href="#" onclick="window.open('http://www.nasa.com/abc.html', '_system'); return false;">Notícia original.</a></code></WRAP>
+  * Al **tab3** carregarem la llista de notícies amb [[https://materializecss.com/cards.html|Materialize Cards]] o bé utilitzant la [[https://materializecss.com/grid.html|Grid de Materialize amb containers, row i col]], l'exemple "Example Promotion Table" ens anirà molt bé.
 </WRAP>

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina