En este post me gustaría compartir con vosotros un proyecto que he creado utilizando Node.js y WebGL. Es un globo terráqueo el cual utilizo para realizar un seguimiento de las personas que están visitando tu aplicación web, en tiempo real. Después de una instalación rápida, podrás ver la ubicación de cada una de las personas que están en tu sitio web, identificándolos en el globo y agrupados según el país. ¿Quieres saber cómo implementar esta gran idea en tu proyecto web? No te preocupes, a continuación te lo contamos todo...
Cómo lo he hecho
Para el lado del servidor de la app he utilizado unos cuanto módulos de Node.js
- Express es el framework web
- Request es para hacer peticiones ajax en Node
- Is-bot es para capturar bots de motores de búsqueda
El globo:
- El globo en si mismo lo hice gracias a WebGL Earth
- OpenStreetMap para los tiles de los mapas
El diseño
- El side menú está animado enteramente con CSS
- Algo de jQuery para el front-end
Para encontrar las coordenadas de las direcciones IP utilicé geoplugin.com, un plugin que te facilita muchísimo la tarea.
Cómo ejecutarlo
Si deseas ejecutar esta aplicación en local, lo primero que debes hacer es asegurarte de que has instalado en tu máquina Node.js. Después de eso, descarga y descomprime el archivo con el código a una carpeta llamada nodejs-visior-globe. Cuando hagas eso, abre un terminal y ve a la carpeta recién creada. Una vez allí, ejecuta el siguiente comando para instalar los paquetes NGP necesarios:
npm install
Cuando el proceso se haya completado, ejecuta el siguiente código y ve a http://localhost:8888 en tu navegador.
node app.js
Ya podrás ver el globo. Sin embargo, es posible que observes que no hay nadie en el mapa. Eso es porque estás trabajando offline y sin un servidor activo no haremos nada de nada.
Cómo integrarlo en tu sitio
Hay dos cosas que debes hacer antes de ver a los visitantes de tu sitio web en el globo terráqueo:
- Subir la aplicación a un servicio de alojamiento como heroku. Hemos visto cómo implementar código para heroku en otros artículos. Las instrucciones son exactamente las mismas. La única diferencia es que vas a terminar con la URL de tu nuevo globo terráqueo en lugar de la app de chat privado.
- Incluir una imagen de tracking especial para el seguimiento de tu sitio. Puedes hacer esto mediante la inserción de este html en el pie de cada página de tu sitio:
<img src="http://yourglobe/ping" width="1" height="1" style="display:none" />
Reemplazar yourglobe con la url de tu app en heroku. Si cargas la URL del src de la imagen en un navegador, debería ver el texto "Done".
Una imagen de tracking es una imagen invisible que está incrustada en cada página de tu sitio web, y que apunta a http://yourglobeurl.com/ping. Cuando la gente cargue tu sitio, su navegador cargará todas las imágenes automáticamente, lo que hace que la URL de seguimiento también se cargue. Nuestra aplicación detectará esa URL específica, y obtendrá la dirección IP del visitante, encontrará su ubicación y la guardará. Los usuarios se consideran online hasta 5 minutos después de visitar tu sitio (esto se puede configurar en app.js).
¡Todo listo! Ahora puedes disfrutar de tu globo terráqueo que muestra los visitantes de tu web en tiempo real.
Fuente: tutorialzine.com