En esta publicación, nos gustaría compartir con ustedes un proyecto genial que creamos usando Node.js y WebGL. Es un globo terráqueo mapeado que puede usar para realizar un seguimiento de las personas que usan sus aplicaciones web en tiempo real. Después de una configuración rápida, podrá ver la ubicación de todos los que están en su sitio web, señalados en el mundo y agrupados por país. La demostración también responde completamente y funciona en dispositivos móviles (siempre que admitan webgl).
Cómo lo hicimos
- Para el lado del servidor de la aplicación, hemos usado algunos módulos de Node.js:
- Express es el framework web.
- Solicitud para hacer solicitudes ajax en Node.
- Is-bot para detectar rastreadores de motores de búsqueda.
- El globo terráqueo:
- El globo en sí fue posible gracias a WebGL Earth.
- OpenStreetMap para los mosaicos del mapa.
- El diseño:
- El menú lateral está animado completamente con CSS.
- Algo de jQuery para el front-end.
- La búsqueda de las coordenadas de las direcciones IP se realizó con la ayuda de
freegeoip.netgeoplugin.com.
Cómo ejecutarlo
Si desea ejecutar esta aplicación localmente, lo primero que debe hacer es asegurarse de tener instalado node.js en su máquina. Después de eso, descargue y descomprima el archivo con el código (puede descargarlo desde un botón de arriba) a una carpeta llamada nodejs-visior-globe . Cuando haya terminado, abra una terminal y navegue hasta la carpeta recién creada. Una vez allí, ejecute el siguiente comando para instalar los paquetes npm necesarios:
npm install
Cuando se complete este proceso, ejecute el siguiente código y vaya a http://localhost:8888 en su navegador.
node app.js
Allí verás el globo. Sin embargo, puede notar que no hay nadie en el mapa. Esto se debe a que todo funciona sin conexión y, dado que necesitamos un servidor activo, esto no será suficiente.
Integrándolo con su sitio
Hay dos cosas que debe hacer antes de ver a los visitantes de su sitio web en el mundo:
- Cargue la aplicación en un servicio de alojamiento como heroku. Hemos cubierto cómo implementar su código en heroku anteriormente. Las instrucciones son exactamente las mismas. La única diferencia es que terminará con la URL de su nuevo globo en lugar de la aplicación de chat privado.
- Incluya una imagen de seguimiento especial en su sitio. Puede hacerlo agregando este html al pie de página de cada página de su sitio
<img src="http://yourglobe/ping" width="1" height="1" style="display:none" />. Reemplazaryourglobecon la url de heroku de tu aplicación. Si carga la URL src de la imagen en un navegador, debería ver el texto "Listo".
Una imagen de seguimiento es una imagen invisible que está incrustada en cada página de su sitio web y que apunta a http://yourglobeurl.com/ping. Cuando las personas cargan su sitio, su navegador carga todas las imágenes automáticamente, lo que hace que también se cargue la URL de seguimiento. Nuestra aplicación escucha esa URL específica y obtiene la dirección IP del visitante, encuentra su ubicación y la guarda. Se considera que los usuarios están en línea hasta 5 minutos después de visitar su sitio (esto se puede configurar en app.js).
¡Todo listo! ¡Ahora puede disfrutar de su globo de visitantes en tiempo real!
El diseño
¡El PSD para el diseño está disponible de forma gratuita para todos los suscriptores de nuestro boletín informativo! Únase o inicie sesión desde aquí para descargarlo.
Y esto resume nuestro globo de visitantes. ¡Esperamos que os guste! Si tiene alguna sugerencia o pregunta, no dude en dejar un comentario a continuación.