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 [2024/01/10 17:22]
enric_mieza_sanchez [Exercici Tasklist v0.2]
+++ cordova [2025/01/14 17:43] (actual)
enric_mieza_sanchez [Plugins]
@@ Línia 52: / Línia 52: @@
 ===== Afegint jQuery =====
-jQuery ens pot ajudar molt a agilitzar el desenvolupament.
+jQuery és una biblioteca de codi que opera sobre el DOM de JavaScript i facilita moltes operacions.
 <WRAP info>
 Podeu aprendre més sobre [[jQuery]] <- en aquesta wiki.
-</WRAP>
-Com afegir jQuery a la meva pàgina HTML:
-  - **Instal·lació "a mà"**. Cal incloure els arxius de jQuery al nostre projecte. Ho pots fer de diverses maneres:
-    - Descarregar els arxius de la web oficial http://jquery.com
-    - Utilitzar els repositoris online (CDN). Pots veure com fer-ho en aquest tutorial:
-    - https://www.w3schools.com/jquery/jquery_get_started.asp
-  - Instal·lació amb el **//package// ''cordova-jquery'' de NodeJS** que, a més, ens facilita plantilles bàsiques típiques de apps mòbils.
-    - Està força obsolet, però té alguns //templates// que permeten començar ràpid.
-    - https://www.npmjs.com/package/cordova-jquery
-    - Instal·la-ho a l'arrel del teu projecte Cordova:<code>$ npm install cordova-jquery</code>
-    - Configura el template.
-      * En Linux executa:<code>$ node_modules/cordova-jquery/cordova-jquery</code>
-      * En Windows fes des del CMD:<code>node node_modules/cordova-jquery/cordova-jquery</code>
-  - Mira com queda la plantilla fent de nou:<code>$ cordova run browser</code>
-  - Prova diversos //templates// (per exemple: multipage, accordion, listview). Observa el codi que ens genera per cadascun d'ells, en particular el ''index.html''.
-  - Ens quedarem amb el ''listview'' ja que ens anirà bé com a base per a fer un exercici de //tasklist//.
-    * La [[https://api.jquerymobile.com/listview/|documentació oficial de jQuery mobile listview]] ens serà útil per a saber com utilitzar-la.
-<WRAP important>
-Hi ha un petit error a les plantilles. Quan arrenquis l'aplicació mira la consola (CTRL+SHIFT+K) i veuràs un error a la línia 28 del ''index.js''. Elimina aquesta línia ja que no ens cal i ens atura l'execució de la nostra aplicació.
 </WRAP>
 \\
-===== 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// 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//):
-<code javascript index.html>
-  <button id="boto1">Prem per afegir</button>
-</code>
-I després, en el nostre ''index.js'', ja li afegim el //onclick// (jQuery version):
-<code javascript index.js>
-  $('#boto1').click(addElem);
-</code>
-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:
-  - Posar el tag ''<script src=...'' al final del doc (just després del //button//).
-  - Posar el codi d'inicialització dins la funció onclick del document, perquè s'executi al acabar de carregar (exemple segueix):<sxh javascript>
-$(document).ready( function ()  {
-	// initialize
-	$('#addButton').click(addElem);
-	$('#apiButton').click(callAPI);
-});
-</sxh>
-\\
 ==== Exercici Tasklist v0.1 ====
@@ Línia 127: / Línia 67: @@
 Tasklist:
   - Inicia un projecte Cordova.
-  - Implementa una plantilla amb el [[https://www.npmjs.com/package/cordova-jquery|package NPM cordova-jquery]], tal i com es descriu mes amunt (secció [[#afegint_jquery]]).
+  - Crea una llista de tasques d'exemple amb un senzill OL o UL.
-    * Es recomana utilitzar la plantilla ''listView''.
   - Implementa el **botó d'afegir tasca**.
-    * 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 amb:
-      * [[https://developer.mozilla.org/es/docs/Web/API/Window/prompt|prompt del navegador]] (és el més senzill).
+      - El [[https://developer.mozilla.org/es/docs/Web/API/Window/prompt|prompt del navegador]] (és el més senzill).
-      * ''input form'' a part.
+      - Un [[https://jqueryui.com/dialog/#modal-form|modal form de jQuery UI]], que quedarà més vistós :)
-      * Posar el ''input form'' dins un [[https://demos.jquerymobile.com/1.4.5/pages-dialog/|Dialog de jQuery Mobile]].
+    * Tingues en compte la documentació oficial de la jQuery UI. Cal fer-ho correctament per tal que ens apliqui els estils CSS adequats quan insertem un nou element.
-    * 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 149: / Línia 85: @@
 Continua de l'anterior exercici Tasklist v0.1:
   - 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'element ''jQuery''.
-    * Per saber més [[https://demos.jquerymobile.com/1.4.3/listview/|sobre jQuery UI listview]].
     * Per eliminar un element del DOM caldrà saber //quin// element està cridant (caller). [[https://stackoverflow.com/questions/945201/how-to-get-the-caller-event-and-dom-element-id|Aquest post explica com obtenir el caller]]:<code javascript>function Hello(e){
     var caller = e.target || e.srcElement;
@@ Línia 195: / Línia 130: @@
 Fes la //tasklist// persistent utilitzant el ''localStorage'', tal i com s'explica més amunt.
 </WRAP>
+\\
+===== 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// com aquest.
+<WRAP alert>
+Aquesta solució funcionaria en una web normal, però **no funciona en Cordova si utilitzem la plantilla que ve quan creem un projecte**:
+<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//):
+<WRAP prewrap>
+<code html>
+<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
+</code>
+</WRAP>
+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//):
+<code javascript index.html>
+  <button id="boto1">Prem per afegir</button>
+</code>
+I després, en el nostre ''index.js'', ja li afegim el //onclick// (jQuery version):
+<code javascript index.js>
+  $('#boto1').click(addElem);
+</code>
+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:
+  - Posar el tag ''<script src=...'' al final del doc (just després del //button//).
+  - Posar el codi d'inicialització dins la funció onclick del document, perquè s'executi al acabar de carregar (exemple segueix):<sxh javascript>
+$(document).ready( function ()  {
+	// initialize
+	$('#addButton').click(addElem);
+	$('#apiButton').click(callAPI);
+});
+</sxh>
 \\
@@ Línia 301: / Línia 280: @@
 </WRAP>
-==== Public APIs lists ====
+==== Public API 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.
+[[https://api.spaceflightnewsapi.net/v4/docs/|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!
@@ Línia 317: / Línia 296: @@
 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.
+    * Utilitza les [[https://materializeweb.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>
+    * Per saltar al //tab2// necessitaràs consultar la [[https://materializeweb.com/tabs.html|doc dels tabs de Materialize i anar a la secció "Methods"]] i cridar el mètode "select". Segons la doc es faria així:<WRAP prewrap><code javascript>
-$('.tabs').tabs("select","test-swipe-2");
+var elems = document.getElementsByClassName('tabs');
+var instance = M.Tabs.getInstance(elems[0]);
+instance.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é.
+  * Al **tab3** carregarem la llista de notícies amb [[https://materializeweb.com/cards.html|Materialize Cards]] o bé utilitzant la [[https://materializeweb.com/grid.html|Grid de Materialize amb containers, row i col]], l'exemple "Example Promotion Table" ens anirà molt bé.
 </WRAP>
@@ Línia 332: / Línia 313: @@
 ===== Plugins =====
-  * [[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/|cordova-camera-plugin]] permet capturar fotos amb la càmera del dispositiu mòbil.
+  * **cordova-plugin-camera**: permet capturar fotos amb la càmera del dispositiu mòbil (o del //browser//).
+    * [[https://github.com/apache/cordova-plugin-camera|cordova-camera-plugin doc a Github.com]]
+    * [[https://www.npmjs.com/package/cordova-plugin-camera|cordova-camera-plugin doc a NPM]]
+    * [[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/|cordova-camera-plugin doc a cordova.org]] DEPRECATED
     * [[https://github.com/apache/cordova-plugin-camera/issues/761|Solució a l'error "Not allowed to load..."]]. Necessitaràs també el [[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/index.html|file plugin]].
-  * [[https://github.com/bitpay/cordova-plugin-qrscanner|cordova-plugin-qrscanner]]
+  * **cordova-plugin-qrscanner**: per capturar codis QR
+    * [[https://github.com/bitpay/cordova-plugin-qrscanner|doc oficial de cordova-plugin-qrscanner]]
     * Necessitaràs [[https://github.com/bitpay/cordova-plugin-qrscanner/issues/356|parxejar el codi del plugin]] pq funcioni amb Cordova >= v10.0

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina