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

1. 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

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. 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.

4. 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

5. Permanent Storage
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 05 of 15
localStorage.lname = “Sarrion”;
localStorage.fname = “Eric”;

6. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 06 of 15
Session Storage
sessionStorage.lname = “Sarrion”;
sessionStorage.fname = “Eric”;

7. 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.

8. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 08 of 15
Creando la Base de Datos
var
db
=
openDatabase
(“Test”,
“1.0”,
“Test”,
65535);

9. 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
}
);
});

10. 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

11. 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);
});

12. 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);
}

13. 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);
}

14. 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,…

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