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/08 20:17]
enric_mieza_sanchez exercicis
+++ 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 176: / Línia 196: @@
 \\
+===== Framework CSS : MaterializeCSS =====
+<WRAP tip>
+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 [[Materialize|tutorial sobre Materialize]] per iniciar un nou projecte Cordova amb aquesta eina.
+</WRAP>
+\\
 ===== 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ó.
+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 237: / Línia 285: @@
 </WRAP>
-==== Public APIs a go-go ====
+==== Exericici ====
+<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'explica més amunt.
+    - Primer prova-ho amb ''curl''
+    - 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.
@@ Línia 245: / Línia 307: @@
 Fes-li un cop d'ull i troba el teu //hobby// en una API!
 </WRAP>
-==== 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 ===
-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 =====
+==== Exercici ====
 <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://api.spaceflightnewsapi.net/v3/documentation|API de spaceflight news]]:
-  - Crea un nou projecte Cordova
+  * Al **tab1** posa un botó que carregui una llista de notícies (mostrant només el títol).
-  - Implementa una plantilla amb [[Materialize]].
+    * 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.
-  - 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.
+    * 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>
-    - Primer prova-ho amb ''curl''
+$('.tabs').tabs("select","test-swipe-2");
-    - Després implementa-ho en el HTML del projecte Cordova
+</code></WRAP>
-  - Mostra els resultats de la cerca en una llista HTML
+  * 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