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

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. 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
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. 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. Permanent Storage
localStorage.lname = “Sarrion”;
localStorage.fname = “Eric”;
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 05 of 15

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

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