La recepción celular es tu talón de Aquiles
Tan poderoso como nuestros pequeños dispositivos móviles, tienen una debilidad. No, no es la criptonita roja. Es la fuerza de la señal. Yo vivo en una ciudad de tamaño medio y todavía encuentro áreas donde mi teléfono misteriosamente deja de cargar datos. Es frustrante, pero lo que hace más frustrante situaciones como ésta, son aplicaciones que no manejan correctamente el estado offline.
Ciertamente algunas aplicaciones no pueden hacer mucho realmente si no están online. Siendo capaz de reconocer tu conexión de red y manejar los cambios es la marca de una aplicación superior. Vamos a empezar haciendo algunas modificaciones básicas en nuestra aplicación para manejar la comprobación de la conexión inicial, así como un cambio en la conexión.
|
1 2 3 4 5 6 7 8 9 |
function onDeviceReady(e) { $(document).on("online", onlineFunc); $(document).on("offline", offlineFunc); if(!(navigator.connection.type === Connection.UNKNOWN && navigator.connection.type === Connection.NONE)) { $(document).trigger("online"); } else { $(document).trigger("offline"); } } |
El anterior fragmento de código es una porción del evento onDeviceReady. Si no has usado PhoneGap antes, esto puede ser nuevo para ti. Básicamente, cualquier código que hace uso de las características del dispositivo necesita esperar por un evento "device-ready" para ser disparado por el framework fundamental de PhoneGap. En la aplicación del ejemplo anterior, confiamos en el evento ready del documento jQuery. En este ejemplo, remplazaremos el código JavaScript, en main.js, con el código anterior.
Comienza agregando dos manejadores de eventos para el objeto del documento: uno para online y otro para offline. Como tú probablemente adivinaras, estos manejadores responden al cambio de estado de tu conexión.
Primero, necesitamos revisar el estatus actual. El objeto Connection de PhoneGap proporciona una manera sencilla para comprobar la conectividad del dispositivo. El valor de navigator.connection.type es uno de
- Connection.UNKNOWN
- Connection.ETHERNET
- Connection.WIFI
- Connection.CELL_2G
- Connection.CELL_3G
- Connection.CELL_4G
- Connection.NONE
Con estos valores, puedes ver si el usuario tiene alguna conectividad así como fuerza relativa de la conexión. Esto es útil para decidir si tiene sentido descargar grandes archivos multimedia por ejemplo. Que es una buena idea en una conexión 4G o no necesariamente en una conexión 2G. Para nuestras necesidades simplemente nos preocuparemos si no hay conexión en absoluto. También tomamos la visión pesimista si no podemos determinar la conexión en todos (Connection.UNKNOWN) entonces asumimos que el dispositivo no está conectado. Ahora vamos a revisar los manejadores.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var parse_init = false; var online; function offlineFunc(e) { console.log('offline'); online=false; navigator.notification.alert("You are offline. Posting notes have been disabled.", null, "Offline!"); addNoteButton.attr("disabled","disabled"); if(geoWatch) navigator.geolocation.clearWatch(geoWatch); } function onlineFunc(e) { console.log('online'); online=true; if(!parse_init) { initParse(); getNotes(); } geoWatch = navigator.geolocation.watchPosition(onGeo, onGeoError, { timeout: 30000 }); addNoteButton.removeAttr("disabled"); } |
Tenemos unas cuantas cosas pasando en ambos manejadores, así que tomémoslo paso a paso. El manejador de la primera línea establece una variable global (online) en false. Esta será usada en otra parte. (Si, podemos revisar y re-utilizar la conexión que teníamos antes, pero esto parecía una solución más simple). Después, notificamos al usuario que, debido a que el dispositivo está offline, la funcionalidad se ha desactivado. PhoneGap tiene una API de Notificación que es perfecta para esto.(Como un bono adicional, puedes usar la misma API para hacer vibrar el teléfono para asegurarse de que el usuario realmente reciba el mensaje). Después de la notificación, se deshabilitara el botón que se usa para agregar notas. Y por último, se limpiaran todas las actividades de geolocalización que el dispositivo puede estar haciendo.
Ahora dirige tu atención a la línea del manejador. Como antes, se actualiza una variable global que refleja el estado de conexión. El siguiente bloque se encarga de la inicializacin Parse. Como esto sólo se puede ejecutar una vez, se comprueba el valor de parse_init para ver si ya se ha establecido. Como hemos mencionado anteriormente sería parte de nuestra actualización, la llamada de watchPosition aquí le pedirá al dispositivo reportar la posición actual del usuario y sus cambios. Finalmente, removemos el atributo disabled´(si se encuentra) desde el botón utilizado para agregar notas.
La función de initParse() simplemente contiene la lógica de la configuración de análisis que se detalla en el artículo anterior:
|
1 2 3 4 5 |
function initParse() { Parse.initialize(PARSE_APP, PARSE_JS); NoteObject = Parse.Object.extend("NoteObject"); parse_init=true; } |
Agregar Geolocalización
Ya has visto que el apoyo de geocalización se añadió, tanto a los manejadores online y offline, pero echemos un vistazo a cómo estos datos se utilizan realmente en la aplicación. El manejador online hace uso de la característica "watch" en la Geolocalización. Este usara el GPS del dispositivo para averiguar la ubicación del usuario así como el manejo de cualquier cambio en la ubicación. Cuando configuro el watch, especifico onGeo para el manejo exitoso y onGeoError para cualquier error. Porque nosotros queremos agregar la ubicación a los objetos de nota como enhancement, el manejador onGeoError actualmente no hace nada en absoluto (en lugar de causar un error, simplemente dejamos datos de geolocalización).
|
1 2 3 |
function onGeoError() { //So yeah, do nothing and I'm ok with that. } |
Obviamente podría hacer algo más aquí si quisieras, pero por ahora lo dejaremos así. El manejador de éxito copiara los valores dentro de una variable global.
|
1 2 3 4 |
var geoPoint; function onGeo(g) { geoPoint = {latitude:g.coords.latitude, longitude:g.coords.longitude}; } |
Ahora que hemos obtenido la ubicación del usuario, ¿cómo la usamos?. Podríamos simplemente pasarla dentro de datos almacenados con Parse. Recuerda, Parse te permite almacenar cualquier cosa. Pero en su lugar, tomaremos ventaja del soporte especial de Parse para manejar objetos de ubicación. Veamos el manejador disparado cuando el usuario da clic al botón Add Note.
|
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 |
$("#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.set("title", title); note.set("body", body); //if we have _some_ data if(geoPoint.longitude) { note.set("position", new Parse.GeoPoint({latitude:geoPoint.latitude, longitude:geoPoint.longitude})); } note.save(null, { 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."); } }); }); |
Hemos hecho dos cambios importantes al manejador. Primero, ya no se pasan los datos en una estructura para el primer argumento de save() -nota que es nulo ahora. En su lugar, usamos el API set() en el objeto nota para establecer nuestros valores. Podemos entonces usar un condicional sencillo para ver si tenemos la ubicación del usuario. Si es así, la pasamos a una nueva instancia de Parse.GeoPoint. Usando un GeoPoint, permite que la aplicación haga un número de geolozaclizaciones basadas en consultas. Mientras que no se usara esta aplicación de prueba, podríamos usar el API de Parse para consultar las notas publicadas dentro de cierta distancia de una ubicación. Esto es muy interesante y Parse lo hace increíblemente fácil.
Mostrar la ubicación de la nota
Ahora que tenemos datos de ubicación disponibles con nuestra nota de texto básica, ¿cómo hacemos uso de estos? Una forma seria mostrarlos en un mapa. Google proporciona soporte de mapeo comprehensivo, pero para nuestros propósitos podemos hacer uso del API de Mapas Estáticos. Esta API proporciona un mapeo básico que no requiere interactividad. Al crear una URL que incluye la ubicación y otros parámetros, se puede crear un mapa sencillo que muestra una imagen básica. Pero, ¿dónde lo hacemos?.
Uno de las adiciones más recientes a PhoneGap (en la versión 2.3.0) es el API InAppBrowser. Esencialmente, permite la creación de una ventana encima de tu aplicación. Esto es útil para tareas como visualizar paginas en un contexto fuera de la aplicación. Incluso proporciona múltiples ‘ganchos’ que notifican cuando se carga una página y cuando el usuario cierra la ventana. Por suerte para nosotros, nuestras necesidades son mucho más sencillas. Revisemos la versión modificada de la función getNotes.
|
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 |
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 />"; //Do we have a geo point? if(note.has("position")) { var pos = note.get("position"); s += "<a href="" class="navLink">View on Map</a><br />"; } s += note.get("body"); s += "</p>"; } $("#notes").html(s); }, error:function(error) { alert("Error when getting notes!"); } }); } |
El cambio comienza en el resultado del ciclo. He agregado nuevo código para manejar la existencia de un valor de posición. Recuerda, no todos nuestros datos deben tenerla. Si existe, se agrega más HTML al resultado. Esto incluye un simple enlace HTML con una clase de navLink. Además, nota el uso de atributos de datos para almacenar los valores de posición. Para hacer que estos enlaces funcionen he agregado un manejador de eventos solo para los eventos táctiles sobre estos.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(document).on("touchend", ".navLink", function(e) { e.preventDefault(); //If we are offline, say we're sorry and move on.. if(!online) { navigator.notification.alert("Maps can only be viewed online.", null, "Offline!"); return; } //Get the position from the data attribute var long = $(this).data("longitude"); var lat = $(this).data("latitude"); //Generate Google Static Map API link var link = "http://maps.googleapis.com/maps/api/staticmap?center="+lat+","+long+"&zoom=13&size=400x400&maptype=roadmap&markers=color:red%7Ccolor:red%7C"+lat+","+long+"&sensor=false"; window.open(link, "blank"); }); |
Después de bloquear los eventos normales para enlaces, el código se asegura de que el usuario este online. Si no lo está, se le notifica al usuario. A continuación, tomamos los datos de ubicación desde el HTML y creamos un link usando el API de Mapas Estáticos. Incluso si es tu primera vez viendo esta API, deberías tener una buena idea de lo que hace este enlace. Finalmente, el enlace se abre usando el API tradicional window.open. Así es como se ve el contenido en el simulador de iOS:
Así se ve el contenido cuando el usuario presiona en enlace «View on Map»:
Nota como el API InAppBrowser crea el navegador típico de manera automática. También hay un botón "Done" para cerrar la ventana. Lo que no es obvio en las imágenes de arriba, es la transición cuando se abre y cierra la ventana.
A dónde ir desde aquí
Para carga de datos offline con Parse, hay una forma simple de mantener un respaldo de los datos del usuario para que sean accesibles incluso si pierde su dispositivo. Al usar PhoneGap, se tiene acceso al estado de la conexión del dispositivo así como su ubicación por GPS. Puedes tomar este código de ejemplo para subirlo a PhoneGap Build y usarlo en tu propia aplicación!
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 Margarita García.
Interesante y bien explicado me gustaría probar este ejemplo y ver su funcionalidad para empezar a usar parse, alguien me podría proporcionar un link al código fuente de este ejemplo.
Hola Ander,
Con gusto! Te comparto los dos links con el código fuente para que los puedas implementar.
a). http://download.macromedia.com/pub/developer/phonegap/parse-phonegap.zip
b). http://download.macromedia.com/pub/developer/phonegap/parse-phonegap-part2.zip
Saludos!
-S