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 [2025/10/24 13:50]
enric_mieza_sanchez [Exercici Tasklist v0.1]
+++ cordova [2025/11/06 19:00] (actual)
enric_mieza_sanchez [Inicialitzacions HTML]
@@ Línia 80: / Línia 80: @@
 ==== Exercici Tasklist v0.2 ====
+{{tasklist2.png?200}} {{tasklist1.png?200}}
 <WRAP todo>
@@ Línia 133: / Línia 135: @@
 \\
-===== Cordova no vol inlines =====
+===== Seguretat en Cordova =====
-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 important>
+Cordova ens deixa crear qualsevol pàgina HTML amb el codi que ens sembli bé. Però si ens fixem en la plantilla al crear de zero un projecte, ens trobem algunes particularitats que cal parar atenció, sobretot el **tag META amb el Content-Security-Policy**:
-<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>
+Aquest tag META bàsicament ens limita certes accions de l'HTML que podrien fer vulnerable el nostre codi. Entre d'altres, no ens deixa connectar a webs externes si no les validem dins del tag. I tampoc ens permet posar codi //inline//.
 </WRAP>
-i que veurem més endavant com a mesura de seguretat, per evitar injeccions de codi extern a la nostra app.
+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 si posem el tag META de Content-Security-Policy**:
+<code html><button id="boto_esborrar" onclick="esborra()">Esborra</button></code>
 </WRAP>
 Forma de solventar-ho: fer els botons més senzills, sense //onclick// (però amb //id//):
-<code javascript index.html>
+<code html index.html>
   <button id="boto1">Prem per afegir</button>
+  <!-- al final del body carreguem les llibreries de Cordova i la de la nostra app -->
+  <script src="cordova.js"></script>
+  <script src="js/index.js"></script>
 </code>
-I després, en el nostre ''index.js'', ja li afegim el //onclick// (jQuery version):
+I després, en el nostre ''index.js'', ja li afegim el //onclick// per cridar la funció ''addElem'':
-<code javascript index.js>
-  $('#boto1').click(addElem);
-</code>
-En aquest exemple, cridaríem a la funció ''addElem()''.
+<tabbox JavaScript>
+<code javascript index.js>document.getElementyById('boto1').onclick(addElem);</code>
+<tabbox jQuery>
+<code javascript index.js>$('#boto1').click(addElem);</code>
+</tabbox>
-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>
+===== Inicialitzacions =====
+==== Inicialitzacions HTML ====
+Abans d'executar codi JavaScript sol convenir esperar a que estigui carregat tot el document. Tenim 2 estratègies bàsiques:
+  - Posar el tag ''<script src=...'' al final del document HTML.
+  - Posar el codi d'inicialització dins la funció onclick del document, perquè s'executi al acabar de carregar (exemple segueix):<tabbox jQuery>
+Estil jQuery amb la funció ''ready'':
+<code javascript>
 $(document).ready( function ()  {
-	// initialize
+    // inicialitzar: assignar events
-	$('#addButton').click(addElem);
+    $('#addButton').click(addElem);
-	$('#apiButton').click(callAPI);
+    $('#apiButton').click(callAPI);
 });
-</sxh>
+</code>
+<tabbox JavaScript>
+<code javascript>
+function inicialitza() {
+    // inicialitzar: assignar events
+    document.getElementById("addButton").onclick = addElem;
+    document.getElementById("apiButton").onclick = callAPI;
+}
+// associem l'event "onload" del document a la funció inicialitza
+window.addEventListener("load", inicialitza, false);
+</code>
+</tabbox>
+==== Inicialitzacions Cordova ====
+Cordova necessita inicialitzar el //hardware// del dispositiu. Per això és important que al nostre codi carreguem les llibreries. Si és una aplicació com la //tasklist// que només dibuix per pantalla segurament no li caldria. Però si volem accedir a la càmera o al sistema d'arxius del dispositiu serà imprescindible carregar aquestes llibreries:
+<code html index.html>
+<body>
+  ...
+  <!-- carreguem les llibreries de Cordova i la de la nostra app -->
+  <script src="cordova.js"></script> <!-- dispara event ondeviceready -->
+  <script src="js/index.js"></script>
+</body>
+</code>
+La línia del HTML que carrega ''cordova.js'' dispararà un event "ondeviceready" propi de Cordova. Al nostre codi podem començar a realitzar accions quan es rebi aquest event:
+<code javascript index.js>
+document.addEventListener('deviceready', onDeviceReady, false);
+function onDeviceReady() {
+    // aquí ja podem fer accions amb la càmera, arxius, etc.
+}
+</code>
+<WRAP todo>
+Fes una **versió v0.4 de la Tasklist** aplicant el tag META de seguretat i les inicialitzacions pertinents.
+</WRAP>
 \\

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina