Nos enfocaremos solo en Android y el cómo almacenar datos con Web SQL Database y JQuery Mobile.
En un tutorial anterior vimos como desarrollar una aplicación simple con Apache Cordova, Jquery mobile, html5 y css que nos permitiera añadir registros a una base de datos Sqlite, en este caso veremos que hace cada función dentro del código.
Mientras inicia la aplicación, llamamos a la función que crea la base de datos
Algunos eventos que podemos utilizar disponibles en Android son:
deviceready: este evento ocurre cuando la aplicación se ha iniciado.
pause: este evento se activa cuando una aplicación se pasa a ejecutarse en segundo plano.
resume: este evento se produce cuando la aplicación pasa a ejecutarse de segundo a primer plano.
online y offline: este evento se produce cuando la aplicación se conecta o desconecta de una red.
Existen otros eventos referidos a interacción con el teléfono pero veremos estos que están mas asociados al control del código.
La función de consulta se realizara mediante el método ExecuteSQL. Crearemos tres funciones para ejecutar en cadena al iniciar la aplicación estas son:
consultarDB: con la consulta sql
errorCDB(): mostrara si hay un error en la consulta sql
exitoCDB(): mostrara un mensaje si la consulta se realizo con éxito.
En un tutorial anterior vimos como desarrollar una aplicación simple con Apache Cordova, Jquery mobile, html5 y css que nos permitiera añadir registros a una base de datos Sqlite, en este caso veremos que hace cada función dentro del código.
Función Opendatabase()La función opendatabase sirve para crear una base de datos o abrirla si ya estuviese creada, necesitamos cuatro parámetros, nombre de la base de datos, versión, nombre de la base de datos que se vera y el tamaño en bytes. Cuando creamos a abrimos una base de datos es se guarda en la variable que asignamos en este caso db.
function CreartDB() {
db = window.openDatabase(“Clientes”, “1.0″, “Lista Clientes”, 1000000);}También podemos ejecutar la función cuando inicia la aplicación en el dispositivo AndroidMientras inicia la aplicación, llamamos a la función que crea la base de datos
//Añadimos un evento cuando la aplicación se ha iniciado
document.addEventListener("deviceready", InicioDispositivo, false);
function InicioDispositivo() {
db = window.openDatabase(“Clientes”, “1.0″, “Lista Clientes”, 1000000);
}
También podemos necesitar hacer alguna tarea mientras la aplicación esta iniciando en el caso anterior vimos como llamar a una función cuando la aplicación ya se había iniciado.
function Iniciando() {
document.addEventListener("deviceready", ConfigurarApp(), false);
}
function ConfiguraAPP() {
document.addEventListener("resume", OtraFuncion(), false);
}
<body onload="Iniciando()">
Desde el HTML con el evento onload es decir al cargar la pagina llamamos a la función Iniciando, mientras al iniciarse (deviceready) llama a la función ConfigurarAPP que pasara a ejecutarse en segundo plano (resume).Algunos eventos que podemos utilizar disponibles en Android son:
deviceready: este evento ocurre cuando la aplicación se ha iniciado.
pause: este evento se activa cuando una aplicación se pasa a ejecutarse en segundo plano.
resume: este evento se produce cuando la aplicación pasa a ejecutarse de segundo a primer plano.
online y offline: este evento se produce cuando la aplicación se conecta o desconecta de una red.
Existen otros eventos referidos a interacción con el teléfono pero veremos estos que están mas asociados al control del código.
Función Transaction()Cuando queremos realizar una transacción de tipo SQL utilizamos el método transaction. La función consta de tres parámetros una función con la consulta sql, una función para mostrar error si falla la consulta y una función para mostrar si la consulta se realizo con éxito.
La función de consulta se realizara mediante el método ExecuteSQL. Crearemos tres funciones para ejecutar en cadena al iniciar la aplicación estas son:
consultarDB: con la consulta sql
errorCDB(): mostrara si hay un error en la consulta sql
exitoCDB(): mostrara un mensaje si la consulta se realizo con éxito.
script type="text/javascript" charset="utf-8">
//Al iniciar la aplicación realizamos alguna consultas sql
document.addEventListener("deviceready", IniciaSQL, false);
function IniciaSQL() {
var db = window.openDatabase("Contactos", "1.0", "Lista de contactos", 400000);
db.transaction(consultarDB, errorCB,exitoCB);
}
function consultaDB(tx) {
//Crear la tabla contactos si no esta creada
tx.executeSql('CREATE TABLE IF NOT EXISTS Contactos (id, nombre, email)');
//Insertar datos en la tabla
tx.executeSql('INSERT INTO Contactos (id, nombre, email) VALUES (1, "José Cordova”,”jc@gmail.com”)');
tx.executeSql('INSERT INTO Contactos (id, nombre, email) VALUES (2, "Maria Alpei”,”ma@gmail.com”)');
}
// función para capturar el error en la transacción
function errorCDB(error) {
alert("Error en la consulta SQL: "+error.code);
}
// Funcion para mostrar un mensaje de exito
function exitCDB() {
alert("Consulta exitosa!");
}
Como consultar datos y mostrarlos mediante una consulta sql que devuelve un array o matriz tipo SQLResultSetList
function consultaDB(tx) {
tx.executeSql('SELECT * FROM Contactos', [], exitoCDB, errorCDB);
}
function exitoDB(tx, results) {
//obtenemos la cantidad de filas
var totalcontactos = results.rows.length;
//mostramos la cantidad de contactos
console.log("Total Contactos: " + totalcontactos);
//Mostramos los registros en un bucle donde mostramos cada campo del array
for (var i=0; i<len; i++){
console.log(" Nombre = " +results.rows.item(i).nombre + " Email = " + results.rows.item(i).email);
}
}
//función que captura el error
function errorCDB(error) {
alert("Error en la consulta SQL: "+error.code);
}
//Al iniciar ejecutamos la apertura de la base de datos y la transacción
var db = window.openDatabase("Contactos", "1.0", "Lista de contactos", 400000);
db.transaction(consultaDB, errorCDB);
La función SQLResultSetList tiene la propiedad rows que contiene los registros cada fila de la tabla consultada. Este array se recorre con la función rows.item(i) y el numero de fila. Además debemos indicar que campo de esa fila queremos mostrar. Ejemplo results.rows.item(i).nombre.También podemos mostrar este campo en algún elemento html como por ejemplo un campo de texto haciendo referencia a su identificador.
function querySuccess(tx, results) {
var len = results.rows.length;
document.getElementById("divmostrar").innerHTML += "<tr><td>Id</td><td>Nombre</td></tr>";
for (var i=0; i<len; i++){
document.getElementById("divmostrar").innerHTML += "<tr><td>" + results.rows.item(i).id + "</td><td>" + results.rows.item(i).n ombre + "</td></tr>";
}
}
Luego en el código html deberemos tener en este caso el div con el identificador divmotrar para que se muestre la tabla con los datos de la consulta.<div id=”#divmostrar”></div>Los corchetes en la función executeSQL sirven para enviar parámetros esta propiedad es opcional ya que no siempre necesitaremos enviar parámetros a la consulta SQL Si queremos enviar parámetros a una consulta por ejemplo para actualizar datos de la base de datos:
function Actualizar(id, nombre) {
db.transaction(function(tx) {
tx.executeSql("UPDATE Contactos SET nombre " = ? WHERE id = ?",
[nombre, id], errorCDB);
});
También podemos acceder desde html a las funciones con evento como clic en un botón. Veamos un ejemplo como si tenemos el archivo index por defecto de un proyecto Apache Cordova podemos añadir el código para la base de datos y el código html con el botón Grabar, al hacer clic en el botón Grabar se ejecutara una función que insertara datos en la base de datos.
<head>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script>
function onDeviceReady() {
var db = window.openDatabase("Contactos", "1.0", Amigos", 200000);
db.transaction(consultaDB, errorCB, successCB);
//Cuando se hace clic en el botón nuevo se ejecuta la funcion para grabar datos
$("#grabar").click(function() {
db.transaction(grabarDB, errorCDB, exitCDB);
});
}
function consultaDB(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS Contactos (id, nombre, email)');
}
function grabarDB(tx) {
//Tomamos los valores de los elementos html según sus identificadores, los asignamos a variables y luego ejecutamos la transacción, en este caso insertar un registro en la tabla.
var id = document.getElementById("id").value;
var nombre = document.getElementById("nombre").value;
var email = document.getElementById("email").value;
var sql = "INSERT INTO Contactos (id, nombre, email) VALUES (?, ?, ?)";
db.transaction(function(tx) {tx.executeSql(sql, [id, nombre, email])}, errorCDB, exitoCDB);
}
</script>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<br/><button id="grabar">Grabar</button><br/>
</div>
</body>
</html>
Ventajas de desarrollar con WEB SQL Database
No es necesario que el programador o los desarrolladores conozcan todas las plataformas ya que se ejecuta en cualquier plataforma o dispositivo. Navegadores, Android, IOS, etc, en algunos casos con mínimos cambios. Esto permite ahorrar mucho tiempo ya que incluso pueden trabajar diseñadores gráficos o webmaster sin que necesariamente sean programadores, inclusive los conocimientos de Jquery que se aplican al desarrollo web se utilizan completamente en el desarrollo de aplicaciones Apache Cordova.
Desventajas de desarrollar con WEB SQL Database
Web Sql database utiliza el plugin Sqlite como medio para procesar la información y para transacciones de datos con la plataforma nativa, utiliza JSON, por lo que vuelve complejo el uso de diferentes funciones y parámetros para manejar los datos.
Es un proyecto distinto de Android por lo que incorpora funcionalidades mucho desde de la versión nativa.
Es un proyecto distinto de Android por lo que incorpora funcionalidades mucho desde de la versión nativa.
Como hacerlo con una base de datos sqlite existente???