_iphone_mango_ios_sdk_b

En Mango tenemos como objetivo principal generar soluciones de pago seguras y multi­dispositivo.

Siendo mobile una de las industrias de más rápido crecimiento en nuestra región y una donde no existen soluciones de fácil integración, nuestro foco es proveer herramientas para ayudar a desarrolladores y comercios a crear aplicaciones y servicios innovadores para trasladar sus cobros al ecosistema mobile.

Con la llegada de nuestro SDK para iOS que pueden encontrar en Github y cuya documentación está publicada en nuestro sitio para desarrolladores, la implementación de Mango en aplicaciones para iOS se torna mucho más sencilla. De esta manera, elevamos la experiencia en pagos mobile para productos y compañías en Latinoamérica, haciéndola sumamente transparente.

El SDK cuenta con métodos para simplificar el proceso de tokenización de tarjetas de crédito y CCVs, así como también diferentes validadores relacionados a los datos de tarjeta.

Para los desarrolladores de Android tendremos noticias muy pronto, así que estén atentos a novedades por publicarse en este blog.

Para mejorar la calidad de nuestras herramientas es muy importante obtener feedback de la comunidad.
Si tenés alguna consulta, sugerencia o comentario sobre este SDK o querés integrar Mango en alguna plataforma que te interesa, no dudes en contactarnos.

phone

Hace unos años leí sobre la API de vibración, la cual nos permite hacer vibrar los dispositivos de nuestros usuarios utilizando solamente JavaScript.

Lo primero que se me viene a la mente al pensar en esta API son juegos. Pero si nos ponemos a pensar o a buscar un poco por la web podemos encontrar casos interesantes para usar en nuestras aplicaciones.

El objetivo principal al hacer vibrar un dispositivo es dar feedback a los usuarios cuando ocurre un evento, por ejemplo: cuando usamos el teclado, tocamos algún botón, indicar que tenemos una llamada entrante o una notificación pendiente de leer.

Teniendo en cuenta esto -y sumado a que en Mango estamos trabajando mucho con formularios- es como encontramos un caso de uso muy útil: indicarle al usuario mediante una vibración cuando un formulario contenga errores.

A continuación, vamos a ver lo simple que es implementar la API de vibración con unas pocas líneas de código.

Vibration API

La API es muy sencilla de usar, cuenta con un sólo método que nos permite hacer toda la magia:

// Genera una vibración de 2000 milisegundos.
navigator.vibrate(2000);

// Genera una vibración de 3000ms, espera 2000ms y vuelve a vibrar 1000ms
navigator.vibrate([3000, 2000, 1000]);

Para asegurarnos que el navegador soporta la API, tenemos que comprobar si el método “vibrate” está definido en el objeto “navigator”:

var hasVibration = "vibrate" in navigator;
if (hasVibration) {
  navigator.vibrate(2000);
}

Así de simple es utilizar la API de vibración.

A vibrar los formularios

Ahora vamos a incluir estas líneas de código en la validación de un formulario para lograr el efecto que les comentaba antes:

(function(window) {

  var hasVibration = 'vibrate' in navigator;

  var container = document.getElementById('demoPayment');
  var successMsg = document.getElementById('msg-success');
  var email = document.getElementById('df-email');
  var amount = document.getElementById('df-amount');
  var form = document.getElementById('d-form');

  function showError() {
    container.classList.add('shake');

    if (hasVibration) {
      navigator.vibrate(200);
    }

    setTimeout(function() {
      container.classList.remove('shake');
    }, 200);
  }

  email.addEventListener('invalid', showError);
  amount.addEventListener('invalid', showError);

  form.addEventListener('submit', function(eve) {
    eve.preventDefault();
    this.setAttribute('hidden', 'hidden');
    successMsg.removeAttribute('hidden');
  });

}(this));

Los invito a todos aquellos que tienen Android a probar la demo y ver el resultado final con algunas magias de CSS.

Pueden revisar todo el código del ejemplo en el repo de Github: demo-vibration-api.

Soporte

Por ahora podemos utilizarla en Chrome y Firefox en Android. Las pruebas que hice sobre Safari y Chrome en IOS no tuvieron resultados positivos.

Es así de simple como con una pequeña interacción podemos darle a los usuarios un guiño mientras usan nuestra aplicación.

Estas pequeñas interacciones se las conoce como micro-interacciones. Los invito a ver una excelente charla que dió @pixelbeat en la meetup BAFrontend sobre este tema.

Cualquier duda que tengan pueden consultarme vía Twitter a @pazguille.

¡Hasta la próxima!

Performance  Javascript CSS HTML Mango Payments Pagos LATAM

La performance y velocidad, junto a la experiencia del usuario de nuestros sitios y aplicaciones son puntos claves que tenemos que tener en cuenta desde el principio de un desarrollo.

Existen varias técnicas que conocemos y utilizamos a la hora de empezar un nuevo proyecto, como por ejemplo: hacer la menor cantidad de requests, aplicar capas de caché, optimizar las imágenes, comprimir los archivos, entre otras.

Sin embargo, muchas veces olvidamos puntos básicos para evitar que los usuarios esperen una eternidad.

A continuación, vamos a revisar algunas buenas prácticas de performance que nos van a ayudar a la hora de escribir nuestro código.

(más…)

Creando módulos de front-end con browserify design UI UX javascript

En los últimos años el desarrollo de front-end creció tanto que hoy contamos con una gran variedad de herramientas, frameworks y librerías para construir aplicaciones que corren casi exclusivamente en el navegador (SPA).

La clave a la hora de hacer una SPA es trabajar con pequeños módulos. Esto nos va a ayudar a escribir código mucho más fácil de mantener, refactorizar (en caso de ser necesario) y testear sin volvernos locos.

La idea del post es que construyamos juntos un módulo de front-end utilizando Browserify (y otras herramientas), para que nuestros días como frontenders sean más felices.

Para empezar, vamos a definir que un módulo está formado por:

  • JavaScript
  • Templates (html)
  • Stylesheets (css, less, sass)
  • Assets (imágenes, fuentes)

Y vamos a utilizar la siguiente estructura de archivos y directorios:

|-- module_name/
|   |-- index.js
|   |-- template.jade
|   |-- index.css
|   |-- package.json
|   |-- Readme.md
|   |-- history.md
|   |-- assets/
|   |-- test/

JavaScript

Un módulo de JavaScript es uno o más archivos de código simple que expone solamente aquellas propiedades y métodos necesarios para su uso.

Trabajar de una manera modular nos permite que el código sea independiente, desacoplado, fácil de mantener y reutilizable (DRY).

La versión actual de JavaScript (ES5) no ofrece una forma nativa para trabajar con módulos (pronto va a ser posible!). De todos modos, gracias al aporte de la comunidad, hoy contamos con varios proyectos que nos permiten hacerlo de una forma muy simple.

Hola Browserify!

“Browserify lets you require(‘modules’) in the browser by bundling up all of your dependencies.” – Browserify.org

Browserify es una herramienta open source que nos permite crear módulos en el cliente, utilizando la misma sintaxis que en Node (CommonJS). Por lo tanto, vamos a poder requerir y exportar módulos y manejar sus dependencias como en Node pero en el browser.

Una gran ventaja es que nos permite usar npm para instalar y manejar las dependencias de nuestros módulos. Por lo que podemos “requerir” cualquier módulo que se encuentre publicado en npm, o bien, utilizar módulos privados.

@substack (la mente brillante detrás de todo esto) se tomo el trabajo de portar algunos módulos core de Node para que los podamos utilizar en el navegador y así poder reutilizar al máximo nuestro código (Isomorphic JavaScript).

Para instalarlo, tenemos que correr el siguiente comando en la consola:

$ npm install browserify -g

A modo de ejemplo, vamos a crear el módulo Modal: va a tener como dependencia al módulo “events” (que ofrece Browserify) y exponer los métodos .show() y .hide().

Ya estamos en condiciones de ponernos manos a la obra y codear:

// index.js

'use strict';

/**
 * Module dependencies.
 */
var Emitter = require('events').EventEmitter;
var inherits = require('util').inherits;

/**
 * Creates a new Modal.
 * @constructor
 * @augments Emitter
 * @returns {modal} - Returns a new instance of Modal.
 * @example var modal = new Modal(options);
 */
function Modal(options) {

  // some code

}

/**
 * Inherits
 */
inherits(Modal, Emitter);

/**
 * Shows a modal.
 * @function
 * @returns {modal}
 * @example modal.show();
 */
Modal.prototype.show = function() {

  // some code

  this.emit('show');
};

/**
 * Hides a modal.
 * @function
 * @returns {modal}
 * @example modal.hide();
 */
Modal.prototype.hide = function() {

  // some code

  this.emit('hide');
};

/**
 * Expose Modal
 */
module.exports = Modal

Ahora, tenemos que generar el archivo “.js” que vamos a incluir en nuestro HTML. Para eso, corremos el siguiente comando en la consola:

$ browserify -r ./index.js:modal -o bundle.js

Nota: les recomiendo que lean la documentación para conocer todos los parámetros que podemos utilizar.

Ya podemos agregar en nuestro HTML el archivo “bundle.js” y empezar a utilizar el Modal.

// index.html

<script src="bundle.js"></script>
<script>
  var Modal = require(‘modal’);
  var dialog = new Modal(options);
  dialog.show();
</script>

Transformaciones

Antes de incluir los diferentes archivos de JavaScript en el bundle (archivo) final, Browserify nos permite pre-procesarlos utilizando una serie de transformaciones. Son muy útiles a la hora de compilar CoffeeScript, minificar el código o compilar templates.

Para utilizarlas, primero tenemos que instalarlas y luego indicar su nombre mediante el parámetro “-t” al generar el bundle.

Supongamos que el código anterior lo escribimos en CoffeScript y ahora necesitamos compilar los “.coffee” a “.js” para poder utilizarlos. Para esto, hay una transformación que se llama coffeeify.

$ npm install coffeeify
$ browserify -t coffeeify index.coffee -o bundle.js

Templates

Como sistema de templates vamos a utilizar Jade, ya que ofrece una sintaxis muy simple y ágil, además de ser muy potente.

Si bien, Jade es un sistema de templates que fue diseñado para funcionar en el server, para nosotros es una ventaja ya que el día de mañana podríamos renderizar las vistas de nuestra aplicación tanto en el cliente, como desde el server, utilizando los mismos templates.

Algo que tenemos que tener en cuenta es que Browserify solamente nos permite requerir archivos cuya extensión sea “.js” o “.json”. Es por eso, que para requerir los templates tenemos que utilizar una transformación para compilar los archivos “.jade” a funciones de JavaScript: jadeify.

Primero, instalamos la transformación:

$ npm install jadeify -g

Ahora, vamos a crear el template del Modal:

// template.jade

.modal.modal-hide
  .modal-container
    i.modal-close &times;
    .modal-content

Requerimos el template en el JavaScript del Modal:

// index.js

... 

/**
 * Template
 */
var template = require(‘./template.jade’);

...

/**
 * Expose Modal
 */
module.exports = Modal;

Y por último, generamos el nuevo bundle utilizando la transformación para compilar los templates:

$ browserify -r ./index.js:modal -t jadeify -o bundle.js

Stylesheets

Para trabajar con los archivos CSS estamos utilizando un fork de npm-css. Éste módulo nos permite manipular archivos de CSS y sus dependencias, de la misma forma que npm con módulos de JavaScript. En vez de usar “require()”, vamos a usar “@import” poder requerir el CSS de otros módulos.

$ npm install npm-css -g

Vamos a agregar normalize.css como dependencia del Modal para luego poder importarlo.

// package.json

...
  "dependencies": {
    "normalize.css": "^3.0.1"
  },
...
// index.css

@import 'normalize.css';

.modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: table;
  height: 100%;
  width: 100%;
  z-index: 9999;
}

...

Ya podemos crear el “bundle.css” con el siguiente comando:

$ npm-css index.css -o bundle.css

¡Con esto ya tendríamos terminado nuestro primer módulo! Pueden revisar en detalle el código del ejemplo completo en Github.

Automatización y Testeos

En este momento, estamos trabajando para automatizar estos procesos y ser mucho más ágiles. De todos modos, podemos usar Grunt o Gulp, ya que ambos ofrecen una gran variedad de plugins o tasks para trabajar con Browserify, Jade y CSS (en la versión que subí a Github, utilicé Gulp).

En Mango, además de CasperJS, usamos Mocha e Istanbul (code coverage) para testear los módulos. Mocha es un framework de testeo que corre en el navegador y también desde la consola, al igual que Istanbul.

Utilizamos scripts de npm para automatizar algunos tests. Lamentablemente no es posible con todos ya que a veces es necesario que se ejecuten sí o sí en el browser (en un futuro post contaremos más detalles).

Esperamos que haya sido de interés y puedan empezar a escribir los módulos de sus front-ends utilizando Browserify.

Cualquier duda que tengan sobre las herramientas que usamos o de front-end en general pueden consultarme vía Twitter a @pazguille.

En las próximas semanas, vamos a seguir compartiendo experiencias y herramientas, así que seguimos en contacto.

¡Bueno, esto fue todo; espero que les haya gustado y hasta la próxima!

🙂