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/10/15 18:42]
enric_mieza_sanchez [Afegint jQuery]
+++ cordova [2025/01/14 17:43] (actual)
enric_mieza_sanchez [Plugins]
@@ Línia 60: / Línia 60: @@
 \\
-===== 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 169: / 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 275: / 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 291: / 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 306: / 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