bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí:
cordova

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ó

Ambdós costats versió prèvia Revisió prèvia
Següent revisió 		Revisió prèvia
cordova [2023/02/16 18:40]
enric_mieza_sanchez [Queries a la API de MUSICBRAINZ.COM] 		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: 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.   - **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   - **NodeJS** que ens facilitarà el gestor de paquets NPM amb el què podrem instal·lar Cordova
   - **Gradle** en la darrera versió.   - **Gradle** en la darrera versió.
Línia 82: Línia 82:
  
 ===== Cordova no vol inlines ===== ===== 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//): 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**.   - 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 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.     * 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> </WRAP>
  
 \\ \\
 +
 +{{tasklist2.png?200}} {{tasklist1.png?200}}
  
 ==== Exercici Tasklist v0.2 ==== ==== 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 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).     * 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 eleganṭ]] 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 eleganṭ]] per eliminar el text dels botons i deixar el de la task sola.
 </WRAP> </WRAP>
  
Línia 267: Línia 287:
  
  
-==== Exericicis ====+==== Exericici ====
  
 <WRAP todo> <WRAP todo>
Línia 279: Línia 299:
 </WRAP> </WRAP>
  
-==== Public APIs a go-go ====+==== Public APIs lists ====
 <WRAP tip> <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://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 287: Línia 307:
 Fes-li un cop d'ull i troba el teu //hobby// en una API! Fes-li un cop d'ull i troba el teu //hobby// en una API!
 </WRAP> </WRAP>
 +
 +\\
 +
 +==== Exercici ====
  
 <WRAP todo> <WRAP todo>
cordova.1676572836.txt.gz · Darrera modificació: 2023/02/16 18:40 per enric_mieza_sanchez

Eines de la pàgina

Excepte on es digui una altra cosa, el contingut d'aquest wiki està subjecte a la llicència següent: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki