Aplicaciones de escritorio multiplataforma en HTML5, CSS y JavaScript Desktop Apps usando tecnologías web gracias a Node Webkit y Chromium

Apps, Node.js

Logo Node WebkitNode.js se basa en el motor V8 de Chrome JavaScript. V8 es uno de los motores JavaScript más potentes que se ejecuta en el navegador Chrome.

Las bondades de Node no acaban en la web, si no que mediante una implementación del propio motor V8 con un WebView (Chromium) y unas librerías de acceso al sistema operativo podemos crear aplicaciones de escritorio totalmente funcionales usando tecnologías web como HTML5, CSS3 y JavaScript.

Y lo mejor de todo, funcionarán en Windows, Linux y Mac.

Instalación y prueba

Partiendo de la base de tener correctamente instalado NodeJS procederemos a instalar el paquete de node-webkit y todo lo necesario con nuestra línea de comandos, esto se puede aplicar a cualquier sistema operativo:

  1. Instalar Node Webkit de forma global npm -g install nw
  2. Descargar las aplicaciones de prueba del repositorio de Node Webkit, hay muchos y muy variados y nos ayudarán a entender un poco como funciona todo:
    • camera Visualización de la cámara web que haya conectada en el equipo.
    • custom-tray-menu Mostrar un icono en el área de notificación con un sub-menu interactivo.
    • file-explorer Un sencillo explorador de ficheros.
    • frameless-window Ejemplo de como hacer una aplicación sin usar los frames del sistema operativo.
    • menus Solo muestra un pequeño grid de colores adaptable al tamaño de la pantalla.
    • mini-code-edit Sencillo editor de código que permite guardar y abrir archivos JS.
    • mp3-encoder Codifica ficheros WAV en MP3 permitiendo seleccionar la calidad o bitrate.
    • notifications Muestra notificaciones en el área de notificación del SO usando formas diferentes.
    • webgl Demostración de la tecnología WebGL para mostrar gráficos en 3D.
  3. Probar una de ellas y ver el resultado, para ello navegamos hasta la carpeta donde tenemos todos los proyectos y entramos en uno, por ejemplo file-explorer.
    • cd file-explorer
    • Instalamos las dependencias npm install & bower install
    • Ejecutar la aplicación nw

Instalando un paquete de NodeJS de forma global con el modificador -g tendrémos la posibilidad usarlo en cualquier directorio.

Crear un ejecutable

Para ello usaremos un generador de Yeoman, generator-node-webkit, que nos provee la estructura de directorios necesaria para tenerlo todo organizado de la siguiente manera:
yo-yeoman-logo
├── app // Aquí irá todo el HTML, CSS y JS
├── dist
│   └── MacOS64_v0.12.0 // Esta será la salida compilada en .exe o .app
├── grunt-tasks
├── node_modules
├── nwjs
│   └── nwjs-v0.12.0-osx-x64
├── resources
│   └── mac

Para compilarlo todo en un paquete, en mi caso una app para Mac lo que hay que hacer es ejecutar una tarea de grunt que viene con el código generado, en mi caso grunt MacOS64_v0.12.0 pero que puede ser diferente dependiendo el sistema operativo (Ejemplo: grunt Windows32_v0.12.0). En la carpeta dist dispondremos del código ya compilado y listo para ejecutar.

13 comentario

  1. Ya instale el generator-node-webkit y ejecuto el codigo que dejaste para windows “grunt Windows32_v0.12.0”, me sale “grunt no se reconoce como un comando interno o externo” ¿Que puedo hacer?

    • Escribe en tu consola npm install grunt Para instalar Grunt y correr el comando.

      • Gracias por Responder, pero del modo que expones no lo pude hacer me toco descargar un zip desde github que crea el ejecutable.

  2. Para usarlo se debe de tener instalado NODE.JS podrias pasar un enlace donde se explique como hacerlo para windows por favor.

    • Te falta instalar bower, puedes hacerlo escribiendo npm install -g bower. Después ya puedes correr el otro comando.

      OJO! Estás trabajando bajo Windows/system32!! te recomiendo que muevas tu espacio de trabajo a otro sitio.

  3. Ameo, no tienes de casualidad un tutorial de como compilar una aplicacion en nw 0.13?
    Tengo muchos problemas para hacerlo en windows, casi todo esta para la version anterior
    Gracias salu2

Enviar un comentario