El otro día vi la campaña de ING Direct y UNICEF, llévalos a la escuela. Me pareció muy interesante, se trata de una web con un montón de niños esperando ir a la escuela y una aplicación móvil de 0,79€, que se donarán a UNICEF, donde se encuentra la escuela. Mejor os dejo el vídeo que es más ilustrativo.

ING Direct y Unicef – Llévalos a la escuela

Pero, sinceramente, la implementación técnica me decepcionó. Resulta que está hecho en Flash, tarda una barbaridad en cargar para lo simple que es la web. Hubiera sido una gran demostración del poder de HTML5 y una manera de ahorrarse muchos costes de implementación. Como habéis visto es un buen ejemplo sockets y como tenía ganas de meterla mano a NodeJS me he puesto manos a la obra y he realizado una demo de cómo sería la campaña usando tecnología HTML5. Para hacer la demo he elegido Socket.io por ofrecer todas las opciones de transporte de datos con lo que se consigue compatibilidad con un gran número de navegadores. Obviamente como primera opción usa Sockets de HTML5, pero ofrece la implementación de sockets de flash y así sucesivamente hasta lo menos óptimo que es el JSONP Polling.

NodeJS

Lo primero que hemos de hacer es descargar NodeJS 4.7 (es la versión que tienen en Heroku, donde subiremos la App). Podéis hacerlo usando la siguiente secuencia de comandos en Terminal:

curl -O http://nodejs.org/dist/node-v0.4.7.tar.gz tar xvf node-v0.4.7.tar.gz cd node-v0.4.7make -j4 make install

Después instalamos Node Package Manager (NPM):

curl http://npmjs.org/install.sh | sh

Una vez tenemos el entorno básico, creamos el fichero package.json, que definirá nuestra aplicación y le servirá a NPM para instalar las dependencias, las cuales son Express y Socket.io. Express  es un framework de desarrollo web MVC y Socket.io, es un módulo para NodeJS, para hace que las aplicaciones en tiempo real sean posibles en todos los navegadores y dispositivos móviles.

{ "name": "llevalos-a-la-escuela", "description": "Demo en HTML5 con Sockets de la campaña LLévalos a la escuela de ING Direct y UNICEF", "version": "0.0.1", "dependencies": { "express": "< 2.5", "socket.io": ">= 0.0.1" }, "engine": "node 0.4.7" }

Como veis las dependencias se indican con un sistema semántico de versiones, permitiéndonos seleccionar una versión, subversión o parche concretos. Por ejemplo:

• 0.x.x → última actualización de la versión 0
• 0.4.x → tener actualizados todos los parches de la versión 0.4
• 0.4.7 → la versión exacta 0.4.7

Sabiendo esto, vamos a instalar una versión de Express menor que la 2.5, esto es porque las versiones siguientes no son compatibles con NodeJS 4.7 y dará fallo la instalación de dependencias. Sin embargo, Socket.io podemos instalar la última, y por ello lo indicamos de esa manera. Para instalar estas dependencias usamos:

npm install -d

Ahora que tenemos todo preparado en servidor y ya podemos empezar a escribir nuestra aplicación y simplemente nos centraremos en el uso de los Sockets, ya que el resto de código es Javascript corriente y moliente. Habéis visto en el video que desde el móvil te pide tu nombre y luego en el navegador de escritorio aparece un texto “Jorge ha llevado a este niño a la escuela”. Pues para ello vamos a usar los sockets, desde el móvil envias el nombre al servidor y el servidor envía a todos los sockets dicho nombre para que lo muestren. Lo primero es crear el servidor y añadir el escuchador para los sockets:

var express = require('express'); var app = module.exports = express.createServer(); var io = require('socket.io').listen(app);

El siguiente paso es añadir los eventos, en este caso sólo tendremos 2 eventos. El que envía la escuela solicitando un niño, el cual envía el nombre del solicitante y el evento que reciben todos los navegadores de escritorio con dicha solicitud. Para ello en servidor simplemente escuchamos “bringChild” y emitimos “childToSchool” para que se ejecute en cliente, de esta forma:

io.sockets.on('connection', function (socket) { socket.on('bringChild', function (data) { socket.broadcast.emit('childToSchool', data); }); });

En cuanto a la parte de cliente tenemos 2 páginas, la que se abre en los navegadores de escritorio y la que se abre en los dispositivos móviles.

En el dispositivo móvil tendremos la conexión con el socket y la emisión del evento con el nombre del solicitante:

var socket = io.connect(window.location.origin); socket.emit('bringChild', name);

En el navegador de escritorios simplemente tendremos la conexión con el socket y el evento “childToSchool”, el cual llamará a la función concreta de la aplicación pasándole como parámetro el nombre del solicitante.

io.connect(window.location.origin).on(‘childToSchool’, childToSchool);

Por último para hacerla funcionar en Heroku podéis seguir el sencillo manual que ofrecen en el centro de desarrolladores de Heroku llamado “Introducción a Node.js en Heroku/Cedar“. El único paso raro es la creación del archivo Procfile, que en nuestro caso simplemente hay que poner web seguido del comando a ejecutar, es decir, node y el nombre del script de servidor.

web: node app.js

Y aquí os dejo el enlace para que veáis la demo al completo: Campaña Llévalos a la escuela en HTML5