Desarrollo de Aplicaciones CrossPlatform para Dispositivos Moviles
Building Cross-Platform Mobile Applications

M.S.C. Raq...
Contenido	
  
•  Manejo	
  de	
  Base	
  de	
  Datos	
  (Client	
  Side)	
  
•  Almacenamiento	
  Local	
  
–  Permanente	...
HTML 5: Data Storage
HTML5 offers two types of data storage on the client:
•  Storage via a database containing the tables...
Permanent Storage and Session Storage
Para habilitar el “Storage” se utilizan dos objetos de
JavaScript:
•  localStorage: ...
Permanent Storage
localStorage.lname = “Sarrion”;
localStorage.fname = “Eric”;

Building Cross-Plaftform Mobile Applicatio...
Session Storage
sessionStorage.lname = “Sarrion”;
sessionStorage.fname = “Eric”;

Building Cross-Plaftform Mobile Applicat...
Usando una Base de Datos
Como se puede observar el almacenamiento temporal y
permanente no provee las facilidades de las b...
Creando la Base de Datos
var	
  db	
  =	
  openDatabase	
  (“Test”,	
  “1.0”,	
  “Test”,	
  65535);	
  

Building Cross-Pl...
Transaction
db.transacKon	
  (funcKon	
  (transacKon)	
  	
  
{	
  
	
  	
  	
  	
  var	
  sql	
  =	
  SQL	
  query;	
  
	...
Usando la Base de Datos
• 
• 
• 
• 

Crear Base de Datos
Insertar
Listar (SELECT)
Eliminar Tabla

Building Cross-Plaftform...
CREATE TABLE
db.transacKon	
  (funcKon	
  (transacKon)	
  	
  
	
  	
  {	
  
	
  	
  	
  	
  var	
  sql	
  =	
  "CREATE	
 ...
DROP TABLE
db.transacKon	
  (funcKon	
  (transacKon)	
  	
  
	
  	
  {	
  
	
  	
  	
  	
  var	
  sql	
  =	
  "DROP	
  TAB...
INSERT INTO
db.transacKon	
  (funcKon	
  (transacKon)	
  	
  
	
  	
  {	
  
	
  	
  	
  	
  var	
  sql	
  =	
  "INSERT	
  ...
Base de Datos Server Side (Elementos)
var	
  sql	
  =	
  "SELECT	
  *	
  FROM	
  customers";	
  
transacKon.executeSql	
  ...
Conclusiones	
  
•  jQuery provee los elementos necesarios para
desarrollar aplicaciones para dispositivos móviles
•  Desa...
Upcoming SlideShare
Loading in …5
×

05 building cross platform mobile applications

549 views

Published on

Building cross-platform mobile applications with jQuery Mobile.
Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
549
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

05 building cross platform mobile applications

  1. 1. Desarrollo de Aplicaciones CrossPlatform para Dispositivos Moviles Building Cross-Platform Mobile Applications M.S.C. Raquel Vásquez Ramírez M.S.C. Cristian A. Rodríguez Enríquez
  2. 2. Contenido   •  Manejo  de  Base  de  Datos  (Client  Side)   •  Almacenamiento  Local   –  Permanente   –  Sesión   –  Usando  Base  de  Datos   •  Conclusiones   Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 02 of 15
  3. 3. HTML 5: Data Storage HTML5 offers two types of data storage on the client: •  Storage via a database containing the tables described in SQL •  Storage through localStorage and sessionStorage objects, to store information made up of strings. Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 03 of 15
  4. 4. Permanent Storage and Session Storage Para habilitar el “Storage” se utilizan dos objetos de JavaScript: •  localStorage: Permite el almacenamiento permanente •  sessionStorage: Permite el almacenamiento en la sesión Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 04 of 15
  5. 5. Permanent Storage localStorage.lname = “Sarrion”; localStorage.fname = “Eric”; Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 05 of 15
  6. 6. Session Storage sessionStorage.lname = “Sarrion”; sessionStorage.fname = “Eric”; Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 06 of 15
  7. 7. Usando una Base de Datos Como se puede observar el almacenamiento temporal y permanente no provee las facilidades de las bases de datos SQL. Gracias a HTML 5 es posible usar bases de SQL de forma local. Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 07 of 15
  8. 8. Creando la Base de Datos var  db  =  openDatabase  (“Test”,  “1.0”,  “Test”,  65535);   Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 08 of 15
  9. 9. Transaction db.transacKon  (funcKon  (transacKon)     {          var  sql  =  SQL  query;          transacKon.executeSql  (sql,  [parameters]  /  undefined,            funcKon  ()          {                    //  JavaScript  code  to  execute  if  the  query  was  successful          },            funcKon  ()          {                    //  JavaScript  code  to  execute  if  the  query  failed          }  );   });   Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 09 of 15
  10. 10. Usando la Base de Datos •  •  •  •  Crear Base de Datos Insertar Listar (SELECT) Eliminar Tabla Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 10 of 15
  11. 11. CREATE TABLE db.transacKon  (funcKon  (transacKon)        {          var  sql  =  "CREATE  TABLE  customers  "  +                  "  (id  INTEGER  NOT  NULL  PRIMARY  KEY  AUTOINCREMENT,  "  +                  "lname  VARCHAR(100)  NOT  NULL,  "  +                    "fname  VARCHAR(100)  NOT  NULL)"          transacKon.executeSql  (sql,  undefined,  funcKon  ()          {                alert  ("Table  created");          },  error);      });   Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 11 of 15
  12. 12. DROP TABLE db.transacKon  (funcKon  (transacKon)        {          var  sql  =  "DROP  TABLE  customers";          transacKon.executeSql  (sql,  undefined,  ok,  error);      }   Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 12 of 15
  13. 13. INSERT INTO db.transacKon  (funcKon  (transacKon)        {          var  sql  =  "INSERT  INTO  customers  (lname,  fname)  VALUES  (?,  ?)";          transacKon.executeSql  (sql,  [lname,  fname],  funcKon  ()          {                alert  ("Customer  inserted");          },  error);      }   Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 13 of 15
  14. 14. Base de Datos Server Side (Elementos) var  sql  =  "SELECT  *  FROM  customers";   transacKon.executeSql  (sql,  undefined,…     Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 14 of 15
  15. 15. Conclusiones   •  jQuery provee los elementos necesarios para desarrollar aplicaciones para dispositivos móviles •  Desarrollo Ágil •  Si se desea sincronizar datos con un servidor, se requiere usar una base de datos local y sincronizar cuando se disponga de conexión mediante una consulta constante del estado de la conexión (Push?) •  Optimización de Aplicaciones Web Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 15 of 15

×