Desarrollo de Aplicaciones Cross-Platform 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

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

HTML 5: Data Storage

Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 03 of 15

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.

Permanent Storage and Session Storage

Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 04 of 15

Para habilitar el “Storage” se utilizan dos objetos de JavaScript: •  localStorage: Permite el almacenamiento permanente •  sessionStorage: Permite el almacenamiento en la sesión

Permanent Storage

Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 05 of 15

localStorage.lname = “Sarrion”; localStorage.fname = “Eric”;

Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 06 of 15

Session Storage

sessionStorage.lname = “Sarrion”; sessionStorage.fname = “Eric”;

Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 07 of 15

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 08 of 15

Creando la Base de Datos

var  db  =  openDatabase  (“Test”,  “1.0”,  “Test”,  65535);  

Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 09 of 15

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 10 of 15

Usando la Base de Datos

•  Crear Base de Datos •  Insertar •  Listar (SELECT) •  Eliminar Tabla

Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 11 of 15

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 12 of 15

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 13 of 15

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 14 of 15

Base de Datos Server Side (Elementos)

var  sql  =  "SELECT  *  FROM  customers";  transacKon.executeSql  (sql,  undefined,…    

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