http://foros.cristalab.com/almacenamiento-de-datos-phonegap.-aplicacion-nativa-en-html5-css3-t106610/#647227
Después de investigar llegue a la conclusión que para mi caso en especifico la mejor manera de mantener todo actualizado era utlizando MySQL (para web) y convertir automáticamente la información a JSON para poder ser manipulada con JQuery y esta manera tanto la aplicación web como la móvil (nativa con PhoneGap) se mantendrían actualizadas y administrables.
Ya he creado el archivo JSON y validado utilizando www.jsonlint.com y he sido capaz de leer la información, almacenarla en una variable y mostrarla en el body por utilizando append(). Hasta aqui todo muy bien, hasta que me encuentro con la tarea de crear el diseño e insertar la data en cada uno de los DIV's correspondientes.
Ejemplo: en el <h1> de <div data-role="header">
Código HTML :
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Cuponaria</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="description" content="Cupones de Descuento en tu Smartphone.">
<link rel="stylesheet" href="Jquery/jquery.mobile-1.0.1.min.css">
<script src="Jquery/jquery.js"></script>
<script src="Jquery/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON('cupones.json', function(data) {
var cupon = $('<div><img src="' + data.social.logo + '" width="240px" height="110px"/></div><div><h1>' + data.empresa + '</h1></div><div><h2>' + data.promocion.titulo + '</h2></div><div><img src="' + data.promocion.banner + '" width="400px"/></div><a href="#" data-role="button" data-icon="home">' + data.telefono + '</a>');
$('div[data-role=page]').append(cupon);
console.log(data.empresa)
console.log(data.telefono)
console.log(data.giro)
console.log(data.email)
console.log(data.promocion.banner)
console.log(data.social.twitter)
});
});
</script>
</head>
<body>
<div data-role="page" id="pagina1">
<div data-role="header">
<h1></h1>
</div>
<div data-role="content"></div>
<div data-role="footer" class="ui-bar"></div>
</div>
</body>
</html>Archivo JSON:
Código XML :
{
"empresa": "DepilArte",
"telefono": 2124714,
"giro": "Salud y Belleza",
"email": "[email protected]",
"dirección": {
"calle": "Navarrete #25. Raquet Club",
"ciudad": "Hermosillo",
"estado": "Sonora"
},
"promocion": {
"titulo": "25% de Descuento",
"descripcion": "Obten el 25% de Descuento en toda la tienda",
"valor": 25,
"banner": "images/clientes/depilarte_banner.jpg"
},
"social": {
"logo": "images/clientes/depilarte_logo.jpg",
"facebook": "http://www.facebook.com/depilarte/",
"twitter": "http://www.twitter.com/depilarte/"
}
}Si alguien es tan amable de ayudarme con esta cuestion, podemos completar un tutorial de como manipular JSON en JQuery Mobile para desarrollo de apps moviles. Saludos.
