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!

cursor

Queríamos compartir con ustedes algunas mejoras que implementamos en la nueva versión del Panel de Control de Mango.

Este es el primero de una serie de artículos en los que vamos a estar compartiendo diferentes técnicas que implementamos para mejorar la experiencia en el Panel de Mango utilizando nuevas tecnologías web.

Expiración de sesiones (es por tu bien)

Parte de las medidas de seguridad que utilizamos en el Panel de Control desde el primer momento incluyen el uso de sesiones de usuario que expiran luego de 15 minutos de inactividad.

Esta nueva versión del Panel de Control de Mango incorporó funcionalidades en las cuales los usuarios pueden estar un tiempo prolongado analizando métricas, reportes de sus transacciones o realizando acciones que pueden no necesariamente notificar a nuestros servidores.

Por dicho motivo implementamos un mecanismo de envío de mensajes de keep-alive para avisarle a los servidores de Mango que la sesión sigue activa (esto contempla eventos de mouse, teclado, etc.).

Este mecanismo también se encarga de expirar la sesión si ningún evento es disparado durante dichos 15 minutos. Antes de desactivar la sesión automáticamente, el usuario tiene la opción de “mantener viva” la sesión clickeando un modal que advierte su pronta expiración.

bert

Luego de realizar diferentes pruebas, nos dimos cuenta que la técnica utilizada para expirar la sesión tenía dos puntos débiles en relación a la experiencia del usuario:

  • Si un usuario tenía abierto el panel en más de una pestaña (tab), la actividad de una pestaña no era registrada por sus pestañas hermanas. Es decir, darle más vida a una instancia del panel en una pestaña no afectaba el tiempo de vida client-side del resto.
  • El usuario no tenía forma de saber si el tiempo estaba por agotarse en caso de estar navegando otras pestañas u otras aplicaciones que no estén relacionadas al Panel de Mango.

La experiencia de usuario es uno de nuestros pilares como compañía y es por eso que pensamos técnicas para poder mitigar estos puntos.

El problema de las “tabs hermanas”

Para conocer el uso actual de las distintas instancias del panel (tabs) al mismo tiempo y sincronizar los tiempos de vida de las sesiones, acudimos a un truco de un viejo amigo: localStorage (IE8+).

Un uso poco conocido de la API de localStorage es que el objeto window emite el evento storage al resto de los tabs con el mismo esquema (según CSP).

Este truco es muy útil a la hora de enviar mensajes entre las tabs que controlamos. Utilizando esta API del navegador es muy simple notificar a las otras instancias de la aplicación cada vez que un evento de keep-alive se dispara en un tab.

// Para que se ejecute el evento 'storage', se debe setear un valor distinto al anterior.
// Es por eso que usamos 'new Date()'.
localStorage.setItem('keep-alive', (+new Date()) + '');

...

// En otra parte de la aplicación
window.addEventListener('storage', function(eve) {
  if (eve.key === 'keep-alive' && isActive()) {
    refreshSession();
  }
}, false);

De este modo, manteniendo “viva” una sola sesión nos aseguramos de mantener el resto “vivas” también.

Notificaciones para todos

Gran cantidad de navegadores ya implementaron un método para poder notificar a los usuarios de eventos importantes cuando no están activamente usando nuestra aplicación o incluso cuando tienen el navegador minimizado.

Se llaman Web Notifications y varias aplicaciones ya están comenzando a utilizar este patrón aprovechando su gran poder para mejorar la experiencia de aquellos usuarios que utilizan navegadores modernos.

Las Web (o Desktop) Notifications nos permiten disparar notificaciones nativas del sistema operativo a través del navegador. A continuación podrán ver nuestra notificación previo a que expire la sesión:

desktop-notification-v2

Con una porción muy pequeña de código (como la del ejemplo a continuación) lograremos captar la atención del usuario para que realize la acción de “mantener viva” la sesión en caso de que quiera hacerlo. Adicionalmente, tenemos la posibilidad de redireccionar al usuario directamente a la pestaña en la que se emitió el evento cuando hace click en la notificación.

const desktopNotification = (title, options={}) => {
  if (document.hidden && 'Notification' in window) {
    const notification = new Notification(title, options);
    notification.onclick = () => { try { window.focus(); } catch(e) {} };
    return notification;
  }
};

Conclusión

Es muy importante conocer y tener en cuenta las tecnologías disponibles hoy en día y aprovecharlas al máximo para mejorar la experiencia de nuestros usuarios. En nuestro caso, de manera simple pudimos implementar dos soluciones que tienen un valor agregado para la experiencia de los usuarios en nuestro producto.

En el próximo artículo hablaremos sobre como utilizando nuevas tecnologías podemos achicar la brecha entra las aplicaciones web y el mundo móvil.

Cualquier duda/comentario o experiencias que quieran compartir, nos pueden contactar vía Twitter a @impronunciable o @pazguille.

Las compras con tarjeta de crédito a través de internet y en aplicaciones móviles se encuentran en constante crecimiento. En nuestra región también existen otros medios de pago alternativos muy utilizados. Es importante entender la idiosincrasia de cada país y atacar los problemas particulares a la hora de realizar pagos.

Nuestro objetivo es que Mango pueda ofrecer una solución integral a las necesidades de cobro que tienen las empresas y organizaciones. Hoy damos un paso en la dirección correcta en pos de este objetivo, permitiendo -además de aceptar cobros con tarjetas de crédito- la posibilidad de crear cupones de pago.

Esta funcionalidad se encuentra disponible a partir de hoy en modo beta para Argentina, permitiendo la creación de cupones tanto para Pago Fácil como Rapipago. Los cupones se presentan tanto en formato png como pdf, facilitando tanto la previsualización en un navegador como así también la impresión.

Adicionalmente, estamos trabajando para ampliar la oferta a proveedores locales de cupones de pago en otros países de América Latina.

Ejemplo de cupón

ejemplo-cupon

¿Por qué en BETA?

Los códigos de barra utilizados en este tipo de servicios pueden llegar a ser muy heterogéneos por el hecho de que se prestan a satisfacer necesidades muy variadas. Internamente tomamos la dirección de establecer un punto medio donde haya una estandarización de la estructura de la barra, sin perder la flexibilidad que necesita cada empresa u organización.

Esta primera iteración contempla lo que consideramos una implementación flexible y de simple uso, validada con múltiples clientes. Sin embargo el objetivo es realizar mejoras progresivas a partir de nuevas inquietudes y casos de uso comunes en la región.

Implementación

Pueden encontrar en nuestra API de pago un nuevo recurso llamado Coupons. Como figura en la referencia del recurso, la representación de un cupón contiene en su campo media los vínculos a los archivos pdf y png correspondientes. Además de crear cupones, la API contiene otros endpoints adicionales para consultar un cupón específico, obtener un listado o actualizar su estado (pago/impago).

Con la intención de hacer más simple el trabajo de los desarrolladores, las librerías oficiales ya se encuentran actualizadas, ofreciendo los recursos necesarios para implementar cupones de pago en el lenguaje de su preferencia.

Adicionalmente, en el Panel de Control se pueden consultar los cupones de pago generados por el comercio con el detalle de cada uno.

screencapture-panel-getmango-com-stores-673-coupons-1437678050318

screencapture-panel-getmango-com-stores-673-coupons-coupon_2at70j19fet6zor6xb7orn0d6g9qp8x2-1437678073245

Consultas y sugerencias

Cualquier consulta o sugerencia sobre esta funcionalidad, no duden en escribirnos a soporte@getmango.com