La plataforma PhoneGap facilita la transición de la web a aplicaciones nativas (mientras que también brinda acceso a características del dispositivo como la cámara, el micrófono y el acelerómetro), pero aún hay cosas que los desarrolladores deben hacer por sí mismos. Una de las áreas primarias de importancia para una aplicación móvil es el almacenamiento de datos.
Almacenamiento de datos en aplicaciones móviles
Cuando construyes aplicaciones que permiten al usuario final el almacenar contenido, debes encontrar una solución para almacenar los datos en una forma persistente. Tienes algunas cuantas opciones:
- Puedes almacenar todos los datos localmente en el dispositivo. PhoneGap proporciona acceso a una base de datos del lado del cliente a través de su API de Base de Datos. Funciona bien, especialmente con desarrolladores que hay trabajado con bases de datos de SQL. Pero los datos están confinados en el dispositivo. Si el usuario instala la aplicación en otro dispositivo (como en una tableta), entonces el usuario no podrá acceder a los mismos datos.
- Puedes almacenar los datos en un servidor remoto. Es fácil configurar AJAX para conectarse a un servidor remoto para enviar o recibir datos. Pero esto requiere la configuración de un servidor, instalar algún tipo de intermediario (ColdFusion, PHP, Node, u otros) y configurar un API en el servidor para manejar la identificación de los usuarios, la creación de datos, consultas, y más. Si eliges esta opción, serás responsable del mantenimiento del servidor. Puedes salir a caminar, adoptar a un perro o regar tus plantas mientras estás en ello.
- Puedes descargar el mantenimiento del servidor, la creación del API, los requerimientos de almacenamiento, y delegar esencialmente todas esas tareas al almacenar datos con una solución de terceros. Todo esto está disponible si usas la plataforma de aplicaciones móviles Parse.
Parse permite que los usuarios almacenen datos en sus servidores. Los datos pueden ser de cualquier tipo. ¿Quieres construir una plataforma para un blog? Puedes almacenar las entradas del blog. ¿Quieres construir un foro? Puedes almacenar los posts de los foros. ¿Quieres diseñar una red de compras especializada en las necesidades de los Zombis? Parse lo hace fácil.
La compra de Parse está estructurada en tres planes. El plan más básico, es 100% gratuito y proporciona capacidades importantes como parte de este servicio gratuito. Como desarrollador te puedes registrar gratis. Si evalúas Parse y decides que no es para ti, Parse incluye la posibilidad de exportar tus datos. No estas forzado a usar Parse, puedes usar una estrategia diferente. Parse es un asunto casual que rápidamente crece en el amor de muchos desarrolladores.
Parse ofrece muchas formas de usar su servicio. Puedes usar un conjunto de APIs que están escritas como librerías nativas. Mientras que los desarrolladores de PhoneGap comúnmente evitan trabajar con el lenguaje nativo de cada plataforma, aquellos que desean crear sus aplicaciones usando tecnologías nativas pueden tomar ventaja de los SDKs completamente especializados para su plataforma de desarrollo. (Por el momento hay SDKs disponibles para Android, iOS y Windows).
Además puedes usar un API sencilla basada en REST. Mientras que puedes usar esta plataforma desde PhoneGap, comúnmente se usa para el desarrollo del lado del servidor. Uno de los beneficios de Parse es la posibilidad de omitir por completo el trabajo con un servidor, aunque aún puedes usar un servidor web tradicional. Con el API de REST, tu servidor puede comunicarse con Parse para buscar y trabajar con datos.
Y finalmente, puedes usar el API de JavaScript. Esto permite a los desarrolladores de JavaScript el hacer uso completo del API de Parse desde PhoneGap o aplicaciones web. En la siguiente sección, aprenderás como usar el API de JavaScript y veras como agregar Parse a tu aplicación.
Trabajando con Parse
Para comenzar, regístrate en el sitio web de Parse.
- Visita parse.com y crea una cuenta gratuita.
Después de haberte registrado, Parse mostrara el formulario de inicio para construir una nueva aplicación:
Ingresa el nombre de tu elección. Para los propósitos de este artículo, el nombre de la aplicación será ADCApp.
Después de haber completado el proceso de registro, aparecerá una página de bienvenida.
- Da clic al enlace Dashboard (en el menú superior de la página de bienvenida).
Este dashboard proporciona muchas características. Por ahora, nos enfocaremos en las características relacionadas a la búsqueda de datos y configuración.
- Revisa las opciones en la pestaña Information del lado izquierdo:
Esta pestaña contiene varias claves para la integración con el API de JavaScript. Para este ejemplo, solo necesitaras el ID de la Aplicación y la clave de JavaScript. Después, cuando se edite el código, se copiaran estos valores.
- Da clic al enlace de Descargas en la parte superior de la página.
La sección de JavaScript incluye muchos enlaces, incluyendo una versión minified del SDK.
- Descarga el SDK y colócalo en una nueva carpeta.
- Descarga los archivos de ejemplo proporcionados aquí para obtener el código de esta aplicación y colocar los archivos en esta nueva carpeta.
Antes de ir más allá, deberíamos decidir lo que queremos construir. Parse nos permite almacenar datos de cualquier tipo. Para mantener las cosas sencillas en nuestra aplicación de ejemplo, diseñaremos una aplicación de notas. La aplicación te permite escribir nuevas notas así como ver las notas previamente creadas.
Creando una aplicación de notas
Para hacer las cosas lo más sencillas como sea posible, la aplicación no usara ningún framework de interfaz de usuario en particular. Esta no es la forma más elegante de desarrollar la aplicación, pero su objetivo principal es ilustrar como trabajar con el API de Parse.
- Ejecuta el editor de HTML de tu elección, y crea un archivo HTML en la tura principal del sitio del proyecto.
- Copia el código de abajo, pégalo en el archivo HTML y guárdalo.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!doctype html><br /> <html lang="en"><br /> <head><br /> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br /> <script type="text/javascript" src="jquery.min.js"></script><br /> <script src="parse.min.js"></script><br /> <script src="main.js"></script><br /> </head><br /> <body><br /> <h2>Note Application</h2><br /> <div id="notes"></div><br /> <form id="addNote"><br /> <p><input type="text" id="noteTitle" placeHolder="Note Title"></p><br /> <p><textarea id="noteBody" placeHolder="Enter note text here."></textarea></p><br /> <p><input type="submit" id="addNoteBtn" value="Add Note"></p><br /> </form><br /> </body><br /> </html> |
Nota: El código de arriba hace referencia a parse.min.js. La copia del archivo que debes de haber descargado desde Parse.com incluye su versión, por ejemplo: parse-1.1.12.min.js. Puedes renombrar el archivo o solo editar el código de ejemplo para que sea el mismo nombre que el de tu archivo.
Esta aplicación carga jQuery, el SDK de Parse, y un archivo llamado main.js. El HTML consiste en una etiqueta DIV vacía y un formulario. La etiqueta DIV vacía contiene el contenido para cargar desde Parse, el cual vendrá al usuario después de publicar algo texto de contenido. El formulario en la aplicación permitirá que los usuarios ingresen nuevo contenido. En este caso, el formulario contiene dos campos para ingresar el título de la nota y el cuerpo de texto de la nota. Recuerda, Parse permite guardar cualquier cosa. Si tu concepto de notas incluye un campo relacionado al nivel de felicidad de la nota -solo agrégalo.
- Toma un momento para revisar main.js, el cual contiene mucha de la lógica de la aplicación.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
//Parse related keys var PARSE_APP = "[Parse.com Application ID]"; var PARSE_JS = "[Parse.com JavaScript Key]"; $(document).ready(function() { Parse.initialize(PARSE_APP, PARSE_JS); NoteObject = Parse.Object.extend("NoteObject"); $("#addNoteBtn").on("touchend", function(e) { e.preventDefault(); //Grab the note details, no real validation for now var title = $("#noteTitle").val(); var body = $("#noteBody").val(); var note = new NoteObject(); note.save({title:title, body:body}, { success:function(object) { console.log("Saved the object!"); }, error:function(object,error) { console.dir(error); alert("Sorry, I couldn't save it."); } }); }); }); |
- Edita el código, reemplazando las variables PARSE_APP y PARSE_JS con el ID de la aplicación y la clave de JavaScript desde el dashboard de Parse.
Puedes usar la función de jQuery document.ready() para ejecutar código cuando se haya terminado de cargar la página. Antes de que podamos usar Parse, primero debemos inicializarla. Es un simple llamado que hace uso de las variables creadas con anterioridad.
La siguiente línea es importante:
|
1 |
NoteObject = Parse.Object.extend("NoteObject"); |
Cuando decides el tipo de dato que quieres crear, debes nombrarlo. En el código proporcionado, se llama NoteObject. Una vez se llama al objeto Parse, puedes pedirle al SDK de Parse que cree un tipo de objeto para extender la clase Object. El resultado es NoteObject que actúa como una clase nueva.
Así como leas el código, veras la lógica sencilla vinculada al formulario. Cuando se presione el botón, el código capturara el texto contenido en los campos del formulario.
Nota: Para probar los eventos táctiles en un navegador de escritorio, se puede cambiar temporalmente el código a clic, o usar las Herramientas de Desarrollo de Chrome para habilitar la simulación táctil. Para usar estas herramientas, actualiza las opciones al dar clic al icono de configuración en la esquina inferior derecha de la caja de dialogo de las herramientas de desarrollo, y entonces selecciona la pestaña Overrides. Desplaza hacia abajo la página y habilita la opción Emulate Touch Events.
A continuación, se hará una nueva instancia de NoteObject y se ejecutara el método save en esta. El primer argumento del método save son los datos. En este ejemplo, hay una clave llamada title y una clave llamada body. Estas dos claves representan los campos de entrada del NoteObject. Sin embargo, puedes usar los nombres que prefieras, debido a que Parse es flexible. Cuando sea necesario, incluso puedes cambiar los nombres de las claves en otro momento (aunque las mejores prácticas sugieren mantener consistentes los nombres).
El siguiente argumento es un objeto genérico de JavaScript que contiene las claves success y error. Ambas son funciones que representan la lógica que es llamada basada en el resultado de la operación save. En caso de error, se mostrara una alerta. Cuando el contenido de la nota se ha guardado correctamente, el código mostrara un mensaje de éxito directamente en la consola de JavaScript. Después podrás mejorar estos comportamientos.
Probando la aplicación
Después de haber editado la aplicación de ejemplo, es hora de probarla.
- Abre el archivo HTML en tu navegador. Ingresa algún texto a los campos y da clic a Save.
Si la consola de JavaScript está abierta en tu navegador, podrás ver el resultado.
- Para confirmar que el contenido se guardó correctamente en el framework Parse, visita el dashboard de Parse, da clic a la pestaña Data Browser, y veras el texto guardado.
Nota que la lista incluye propiedades adicionales que fueron almacenados con los datos. Parse captura información útil relacionada con los campos, como createdAt y updatedAt. Además nota que ha sido asignado un objectId a los datos almacenados.
Tu aplicación HTML solo crea contenido y lo almacena, gratis y sin un servidor (bueno, sin requerir la configuración de un servidor).
Visualizando los datos almacenados en Parse
A continuación, veras como listar objetos. Revisa la siguiente versión actualizada de main.js que lista el contenido almacenado cuando se carga la aplicación.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
//Parse related keys var PARSE_APP = "[Parse.com Application ID]"; var PARSE_JS = "[Parse.com JavaScript Key]"; $(document).ready(function() { Parse.initialize(PARSE_APP, PARSE_JS); NoteObject = Parse.Object.extend("NoteObject"); function getNotes() { var query = new Parse.Query(NoteObject); query.find({ success:function(results) { console.dir(results); var s = ""; for(var i=0, len=results.length; i<len; i++) { var note = results[i]; s += "<p>"; s += "<b>"+note.get("title")+"</b><br />"; s += "<b>Written "+note.createdAt + "</b><br />"; s += note.get("body"); s += "</p>"; } $("#notes").html(s); }, error:function(error) { alert("Error when getting notes!"); } }); } $("#addNoteBtn").on("touchend", function(e) { e.preventDefault(); //Grab the note details, no real validation for now var title = $("#noteTitle").val(); var body = $("#noteBody").val(); var note = new NoteObject(); note.save({title:title, body:body}, { success:function(object) { console.log("Saved the object!"); $("#noteTitle").val(""); $("#noteBody").val(""); getNotes(); }, error:function(object,error) { console.dir(error); alert("Sorry, I couldn't save it."); } }); }); //call getNotes immediately getNotes(); }); |
En esta sección, nos enfocaremos en actualizar el archivo de la aplicación.
- Revisa la función getNotes que inicia creando una instancia del objeto Parse.Query.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
function getNotes() { var query = new Parse.Query(NoteObject); query.find({ success:function(results) { console.dir(results); var s = ""; for(var i=0, len=results.length; i<len; i++) { var note = results[i]; s += "<p>"; s += "<b>"+note.get("title")+"</b><br />"; s += "<b>Written "+note.createdAt + "</b><br />"; s += note.get("body"); s += "</p>"; } $("#notes").html(s); }, error:function(error) { alert("Error when getting notes!"); } }); } |
El código anterior ilustra cómo puedes consultar datos desde Parse. La clase NoteObject es enviada, así que la consulta funciona solo con esa clase en particular. Cuando se ejecuta el método find, los resultados están en un arreglo. (En el ejemplo de arriba, esta es la propiedad createdAt). Aquí hay un ejemplo de cómo se muestran los datos en Chrome:
El manejador para agregar notas también esta actualizado para limpiar al formulario y llamar de nuevo a la función getNotes. Ese no es el enfoque más elegante, pero funciona. Parse tiene un API de consulta increíblemente poderoso que permite muchas formas de filtrar las opciones. Si quieres hacer que esta aplicación funcione mejor, puedes modificar el código para obtener resultados de objetos creados después del timestamp, basado en el momento en que fue enviado el formulario.
Recomendaciones para extender la aplicación
Este articulo solo rosa la superficie de lo que se puede hacer utilizando Parse. Para obtener más información lee la Guía de JavaScript. Algunas características interesantes son:
- Manejo de usuarios: Esto incluye la lógica de almacenamiento de usuarios que de otra forma es difícil de configurar. Por ejemplo, puedes asegurarte de que las direcciones de correo no se dupliquen, manejar el reinicio de contraseñas, y cachar las credenciales de identificación para la funcionalidad de login automático.
- Seguridad completa: En este proyecto de ejemplo, todos los objetos son retornados al dispositivo móvil. Pero en el mundo real de las aplicaciones, las notas estarían asociadas con sus creadores. Parse tiene un modelo de usuarios robusto, con soporte para asociar los objetos a los usuarios. Además puedes crear grupos y conjuntos de permisos para los objetos.
- Integración con Twitter y Facebook: Nunca he escuchado de otro sitio, pero si en tu caso lo has hecho, Parse te ayuda a la integración con estos.
- Geolocalización: Mientras que Parse no agrega soporte directo para geolocalización, incluye una forma especial de manejar objetos que tienen datos de GPS. Así que si tu aplicación accede a la ubicación del usuario, puedes simplemente almacenar esos datos con un objeto. Puedes usar el API de consulta para ver los datos cercanos a la ubicación.
A dónde ir desde aquí
En este artículo, aprendiste como usar Parse para almacenar datos de aplicaciones móviles. Puedes estar pensando en cómo encaja PhoneGap en este flujo de trabajo. PhoneGap ofrece la oportunidad de aprovechar librerías de JavaScript y APIs para llevarlas a los dispositivos móviles. Toda la información proporcionada acerca de Parse trabaja bien con PhoneGap. Puedes usar el código de este artículo, cargarlo a PhoneGap Build, y crear una aplicación móvil en un tiempo de casi un minuto.
La versión original de este artículo está publicada en Adobe Devnet bajo licencia Creative Commons, fue traducido y adaptado en nuestro blog por Jesús Macedo.
hola, buen día me parece maravillosa esta documentación y quisiera implementar el ejemplo para darme una idea mas clara de lo que se maneja, tratando de descargar el código fuente me tope con el pequeño problema en el cual me indicaban que la pagina no esta disponible, deseo saber si me podrías mandar el código fuente de este ejemplo y así poder comprenderlo uno poco mas.
De antemano gracias por el articulo, esperando una pronta respuesta.
Hola Pily, puedes intentar en este link http://download.macromedia.com/pub/developer/phonegap/parse-phonegap.zip
Me va de maravilla, todo funciona como quiero pero en la web, cuándo compilo la app con phonegap buil el parse no funciona, que debo hacer? muchas gracias.
ya solucioné el problema debía darle permisos en el config.xml así
pero ahora tengo otra duda, cuándo pincho en el botón del formulario, las notas quedan guardadas en parse, pero cuando pincho en el boton del teclado del dispositivo android no funciona, hay manera de hacer que funcione en ambos botones? 60mil millones de gracias 🙂
Muy buenas tardes,
¿Se puede usar perfectamente Phonegap y Xcode verdad?
Hola me gustaría saber cómo puedo configurar CORS en parse ..
Hola Ari, aquí tienes un link del mismo blog de parse aplicado con JavaScript http://blog.parse.com/2012/01/19/javascript-and-user-authentication-for-the-rest-api/
El link de los archivos de ejemplo proporcionados esta roto
hola buen tutorial, logre conectarme a Parse pero no se cómo hacer para mostrar los datos se que debo utilizar query y query.find pero me cuesta esa parte del script
Está muy bueno, pero solo funciona si el usuario oprime el botón, cómo puedo hacer para que funcione si el usuario oprime «Enter» o la tecla «Ir» en Android
Gracias por el aviso, ya se actualizó el link para descarga de los archivos del tutorial.
Gracias por el aviso. Ya actualizamos la url para la descarga de los archivos del tutorial, los archivos pueden ser descargados desde el siguiente enlace: http://download.macromedia.com/pub/developer/phonegap/parse-phonegap.zip
Para realizar lo que requieres debemos agregar un listener a nuestos inputs para que cuando se presione la tecla «Enter» (que tiene un keycode = 13) se envíe el formulario, esto se hace de la siguiente manera en el javascript:
$(‘input’).on(‘keydown’, function(e){
if(e.which === 13) {
$(«#addNote»).submit();
}
});
Esperamos te sirva esta implementación
Hola, tu problema puede ser ocasionado por diversas causas, tal vez podrías darnos una explicación más extensa de tu problema para atacar el conflicto. De igual modo te recomendamos esperar, pues tendremos un post actualizado sobre esta tecnología en el próximo par de semanas, ya que este data de haca casi 2 años.