img_post_desktop_a_mobile

Siguiendo con la serie de artículos relacionados a la investigación e implementación de nuevas tecnologías implementadas en el Panel de Control de Mango que empezó con un post acerca de la experiencia de usuario y el manejo de sesiones, en esta entrega nos enfocamos en el mundo de las plataformas para móviles.

Desde hace ya varios años con la llegada de los smartphones la computación móvil cobró una relevancia antes impensada. Los requerimientos a la hora de hacer aplicaciones se modificaron: las pantallas son en general más pequeñas, los recursos más escasos y la conectividad errática.

Este cambio de paradigma dejó a las aplicaciones web mal paradas. Las llamadas aplicaciones nativas coparon al mundo móvil. La capacidad de instalarse en el sistema operativo y acceder a APIs del mismo dejaron en claro la brecha entre esta nueva ola de aplicaciones específicas para la plataforma y la web. Se destaca la capacidad de respuesta ante situaciones de mala o nula conectividad y la performance a la hora de responder a patrones y eventos propios de pantallas táctiles, especialmente el scroll.

Entonces surge naturalmente la pregunta:

¿Cómo se puede adaptar la web a estos cambios?

Apps instalables

Tu ícono en la vidriera principal

Nos encanta ordenar el Homescreen de nuestro teléfono por orden alfabético, uso, categoría y hasta color. Es muy importante para las aplicaciones tener su ícono en tu pantalla y que la tengas siempre presente. Los navegadores suelen tener una opción de add to Homescreen pero es tan molesto que casi nadie lo usa. Tan así que hay documentos y widgets para ayudar a los usuarios.

Chrome para Android agrego una feature llamada Web App install banners. Si un usuario entra seguido a un sitio web que tiene un manifest.json  y un Service Worker (del cual hablaremos más adelante) declarados, el navegador le muestra al usuario un banner que permite agregar el sitio al Homescreen con un solo click.

mobile

El manifest.json nos permite entre otras cosas declarar un nombre, ícono y descripción de la app para el Homescreen. Otra propiedad muy interesante es display que al ser seteada como «standalone» quita los controles del navegador al ejecutar la app desde la pantalla de inicio, limpiando la interface.

Para que tengas, para que guardes, para que archives

El caballito de batalla que tiene la web para acercarse a las plataformas móviles son los llamados Service Workers, los cuales no vamos a explicar en detalle (existen excelentes artículos introductorios) sino a limitarnos a describir sus bondades. En un sentido muy amplio los Service Workers son scripts de JavaScript que corren en background y nos permiten hacer tareas que no requieren necesariamente de la interacción del usuario. Una cosa muy interesante que nos permiten hacer los Service Workers es manejar un caché de nuestra web.

Los Service Workers introducen el evento «install» que nos permite saber cuando una app va a ser instalada (en general es la primera vez que el usuario ingresa). En este momento podemos guardar todos los assets que queramos en un caché, permitiendo que los archivos se recuperen del dispositivo en vez de ir a internet. Los cachés son versionados y podemos gestionar y borrar cachés viejos. Esta feature permite web apps realmente instalables, que reaccionan instantáneamente al abrir, sin necesidad de ir a la web cada vez que las abrimos.

Offline first

Estado de la conexión – ¿Lobo estás?

Un problema que encontramos constantemente en el mundo móvil es la fluctuación en la conectividad. El cambio de antenas, servicios limitados y áreas sin cobertura producen incertidumbre ante el estado de conexión del usuario.

Desde IE8 tenemos disponible la propiedad navigator.onLine. Por un lado podemos consultar este booleano para saber si el usuario está conectado o no, y también podemos escuchar los eventos «online» y «offline» para detectar cambios en la conectividad. En el Panel de Control de Mango advertimos al usuario cuando se queda sin conexión y avisamos cuando se restablece.

Screen Shot 2015-09-23 at 1.14.18 PM

 

Disponible en Chrome para Android y en más navegadores en un futuro cercano se encuentra la Network Information API. Esta API nos brinda información más detallada sobre el tipo y estado de la conexión. En muchos casos bajo 3G tiene sentido que nuestras apps se comporten más parecido a un estado offline que al escenario de una conexión óptima.

Los caballeros sí tienen memoria

Anteriormente hablamos un poco de los Service Workers y la capacidad de manipular cachés. ¿Qué pasa si utilizamos este poder para guardar los recursos necesarios a la hora de inicializar la app? El resultado son web apps o sitios web que funcionan offline. El caché nos permite guardar todo tipo de recursos que necesitemos más adelante. Si queremos guardar un artículo para ver más tarde, una font o un script, podemos hacerlo. Un ejemplo de ello es la landing page de BAFrontend.

Screen Shot 2015-09-23 at 3.00.50 PM

Más interesante aún, podemos manejar el evento «fetch» desde un Service Worker y decidir por cada request que haga nuestro sitio que decisión tomar. Podemos devolver un recurso de caché, hacer el request a nuestro servidor o incluso devolver un resultado totalmente nuevo basado en información relevante que nos da el navegador.

«Quedate tranquilo/a nosotros te llamamos»

Una gran ventaja que vemos en las apps nativas es la posibilidad de ejecutar tareas en background, sin necesidad de tener la aplicación abierta y las notificaciones push.

Estas funcionalidades llegan a la web a través de la Push y Task Scheduler APIs. Esto nos permite una mayor conciencia y capacidad de respuesta ante eventos que ocurren en momentos donde no necesariamente el usuario interactúa con la app pero que son realmente relevantes y/o que requieren acciones.

Mirando para adelante

Creo que es un buen momento para plantearnos como podemos adaptar nuestras aplicaciones y sitios web a los requerimientos derivados del uso de dispositivos móviles. Los navegadores están sumando características que nos permiten interacciones muy interesantes con usuarios con nuevas necesidades y que intentan eliminar esta dicotomía entre aplicaciones nativas y web para pasar a un contexto de cooperación mutua. Como se suele decir, utilizar «la herramienta correcta para el trabajo», conociendo las fortalezas que tiene la web y sumando estas nuevas APIs que ayudan a hacer nuestro trabajo.

Un tema muy importante que no fue incluído en este artículo pero seguramente lo será en futuras entregas son las técnicas que podemos utilizar para mejorar la performance a la hora de dibujar la UI e interactuar con navegadores en estos dispositivos.

Esta es una entrega de nuestra serie sobre Front End y nuevas tecnologías web, seguí nuestra cuenta de Twitter (@getmango) para conocer nuevos artículos del tema.

Toda duda o sugerencia es bienvenida. Te podés contactar conmigo vía Twitter (@impronunciable).

Calendar

En Mango siempre nos encontramos en la búsqueda de nuevas funcionalidades que aporten un mayor valor agregado a los comercios, de manera adicional al funcionamiento meramente transaccional.

En esta oportunidad, les quiero presentar nuestra nueva funcionalidad: Calendario de cobro; una forma más flexible y fácil para los comercios de tener un panorama más amplio con respecto al ingreso de sus fondos.

Cada comercio tiene sus propios acuerdos con las tarjetas de crédito y buscamos que nuestro producto sea lo suficientemente flexible para ajustarse a dichos acuerdos. Hasta el día de hoy, Mango tomaba en cuenta las fechas estándar de pago a los comercios por parte de las tarjetas de crédito: 22 días hábiles para transacciones en un pago y 48hs hábiles para transacciones de más de una cuota.

En nuestra API, el campo deposit_eta presente en el recurso /charges contiene el timestamp correspondiente relacionado a dichas fechas.

Ahora, estas fechas son personalizables por comercio.

Configuración de fechas de cobro

Fechas de Cobro

Por cada emisor, se puede configurar la cantidad de días hábiles.
Es posible cambiar sólo un valor o ambos.

Una vez realizado este cambio, las próximas transacciones (charges) que se realicen a través de la API, tendrán un timestamp en deposit_eta acorde a dicha configuración.

Cronograma de cobro

Como una propuesta de valor adicional, en el Panel de Control proveemos un calendario donde se pueden observar por día y por semana, los valores a cobrar.

Calendario de Cobro

Haciendo clic sobre un día específico, se puede ver el monto discriminado por emisor:

calendar_5

Estamos seguros que esta nueva funcionalidad dará una visibilidad más clara del ingreso de fondos y colaborará con simplificar y optimizar los procesos administrativos de cada comercio.

Para sugerencias sobre esta funcionalidad, como siempre, pueden escribirnos a soporte@getmango.com. Anunciaremos nuevas funcionalidades adicionales muy pronto. Stay tuned!