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).

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

federico forrester mango online mobile payments

Estamos muy contentos de darle la bienvenida al equipo de Mango a Federico Forrester.

Federico tiene una importante trayectoria en operaciones comerciales al haberse desempeñado en PayU Latam como Gerente Comercial, desarrollando clientes tanto locales como internacionales en verticales como turismo, games, recaudos, tecnología, venta directa y otros verticales. Previamente se desempeñó como Gerente Comercial en Bumeran.com, uno de los portales de empleo más importantes de LatAm, atendiendo a grandes empresas en mercados como FMCG, petroleras y consultoras de RRHH. Posee una amplia experiencia en ventas, tanto formando equipos como así también atendiendo clientes.

En Mango, Federico se desempeñará como Business Developer, llevando nuestro producto a clientes en diferentes puntos de Latinoamérica, generando partnerships con compañías y entidades claves para la mejora y avance de los pagos mobile/online y ayudar a nuestros clientes a ofrecer la mejor experiencia de pagos en múltiples canales.

En su tiempo libre, Federico disfruta de su familia y como ex jugador de rugby sigue a sus hijos en el deporte. Además hace unos años empezó teatro.

¡Bienvenido Federico!

¿Querés trabajar en el equipo de Mango? Tenemos todas estas búsquedas abiertas. ¡Postulate ahora!

iphone-device

Hace unos días jugando con formularios (en el equipo de front-end jugamos mucho con formularios) nos encontramos con una feature más que interesante para Safari en IOS8: la posibilidad de escanear tarjetas de crédito.

Luego de buscar un poco en Google, vimos que con el lanzamiento de IOS8, Apple agregó una nueva feature en Safari, no documentada o escondida, llamada «Scan Credit Card».

Esto nos permite escanear tarjetas de crédito desde el navegador utilizando la cámara del dispositivo y luego autocompletar los campos de un formulario con los datos de la tarjeta.

Si tienen un iPod/iPhone/iPad con IOS8, los invito a que lo prueben en la demo que armamos.

demo

Cuando entran a la demo y presionan sobre cualquiera de los inputs del formulario, Safari les va a mostrar el teclado y la opción «Scan Credit Card» (o «Escanear tarjeta de crédito»). Eligen dicha opción y los va a llevar a una pantalla aparte para escanear su tarjeta. Una vez escaneada, el navegador autocompleta el formulario con los siguientes datos:

  • el número de la tarjeta;
  • el nombre que figura en la tarjeta;
  • y la fechas de expiración de la tarjeta (mes y año, por separado).

Lo quiero implementar!

Lo más importante para activar esta feature es que la página en la que se encuentre nuestro formulario tenga un certificado SSL. Lo cual no sorprende ya que si vamos a aceptar pagos online, es algo que todos tenemos que tener.

Por otra parte, es importante entender que no es necesario utilizar JavaScript para activarlo. Al parecer es algo que Safari hace automáticamente y no tenemos forma de controlarlo.

Luego de realizar varias pruebas y gritar un poco, pudimos descubrir que Safari le «presta mucha atención» (para no decir que usa una regex que no sabemos cuál es) a los textos de los labels y a los atributos placeholder de los inputs.

A continuación, tienen el ejemplo del formulario de la demo, el cual funciona correctamente:

<div class="box">
  <header class="header">
    <img class="logo" src="assets/logo.png" alt="Logo Crucero">
    <h1>Crucero</h1>
  </header>

  <form class="form" action="/" method="POST">
    <fieldset>
      <div class="fieldLine">
        <label for="holdername">Name on card</label>
        
      </div>

      <div class="fieldLine">
        <label for="card">Credit Card Number</label>
        
      </div>

      <div class="fieldLine">
        <label for="month">Expiration Date</label>
        
        
      </div>
    </fieldset>

    <div class="form-action">
      <button type="submit" class="btn">Continue</button>
    </div>
  </form>
</div>

Pueden revisar el código completo de la demo en el repo de Github demo-scan-credit-card.

Trucos y secretos

Les tengo que confesar que hay un par de trucos y secretos por los cuales este formulario funciona:

  1. El primero es que todos los textos están en inglés.
  2. El segundo es que estamos usando un texto «mágico» en uno de los labels: «Name on card».

Cuando mencionaba que Safari «presta mucha atención» a los textos, es cierto, pero solamente a los textos que están en inglés, independientemente del lenguaje de nuestro dispositivo o del atributo lang del tag HTML.

¿Qué pasa si mi formulario está en español o portugués? Es acá cuando nos ponemos tristes y pensamos que no podemos usar esta feature, pero momento… es hora de hackear!

Lo que podemos hacer es agregar un segundo label que tenga el texto en inglés y luego ocultarlo. En este caso, vamos a usar el atributo hidden en dicho label.

<div class="fieldLine">
  <label for="holdername" hidden>Name on card</label>
  <label for="holdername">Nombre que figura en la tarjeta</label>
</div>

De esta forma, logramos que todos nuestros usuarios que tengan IOS8 no se pierdan de esta feature y puedan escanear su tarjeta de crédito mejorando su experiencia y velocidad de compra.

Cualquier duda/sugerencia o si encuentran algo nuevo me pueden contactar vía Twitter a @pazguille.

¡Hasta la próxima!