Programando con Node-Webkit. 1: empezando

nodewebkitPodría inventarme excusas más técnicas sobre por qué me ha dado por probar a desarrollar con node-webkit, pero la realidad se reduce a “porque puedo”.

Por eso, y porque siempre me ha picado la curiosidad de diseñar interfaces de escritorio con CSS, y aunque node-webkit no es la única opción para ello (ni seguramente la mejor) sí tiene un cierto interés particular por lo rebuscada que es.

A fin de cuentas programar una aplicación de escritorio con funciones asíncronas es un poco como partir el filete con el tenedor y comerlo con el cuchillo: un desafío absurdo de consecuencias potencialmente interesantes.

Pero empecemos por el principio…

¿Qué es node-webkit?

Como su nombre indica (más o menos) es node.js corriendo sobre webkit… que dicho así no parece especialmente particular excepto porque resulta que el motor webkit va incluido dentro de tu aplicación.

Node.js te proporciona un framework basado en javascript con el que desarrollar tu aplicación, y webkit te da el entorno “runtime” sobre el que ejecutarlo. En forma resumida: estás creando una página web sin tener que preocuparte de hacks para diferentes navegadores, ya que éste va dentro de tu app.

El motor webkit que usarás está modificado para adaptarse al uso en aplicaciones de escritorio, donde muchas de las limitaciones de seguridad no son necesarias (no será un navegador de uso general a merced de ataques desde las webs por las que navegues) y por tanto tienes más libertad para acceder a recursos del sistema (como por ejemplo el sistema de ficheros).

Además dado que dispones de versiones de node-webkit para distintas plataformas, el código que desarrolles en cualquiera de ellas será totalmente portable al resto.

¿Qué necesito para usarlo?

Además de tiempo libre, para empezar necesitamos descargar el node-webkit adecuado para el ordenador donde vayamos a crear la aplicación:

 https://s3.amazonaws.com/node-webkit/v0.9.2/node-webkit-v0.9.2-osx-ia32.zip
 https://s3.amazonaws.com/node-webkit/v0.9.2/node-webkit-v0.9.2-win-ia32.zip
 https://s3.amazonaws.com/node-webkit/v0.9.2/node-webkit-v0.9.2-linux-ia32.tar.gz
 https://s3.amazonaws.com/node-webkit/v0.9.2/node-webkit-v0.9.2-linux-x64.tar.gz

Aunque quieras que tu aplicación se ejecute después en varias plataformas diferentes no necesitas descargar más que el node-webkit apropiado para la tuya ahora.

En mi caso usaré un linux de 64 bits así que descargo el cuarto enlace.

No es necesario instalar nada, sólo extraerlo, pero por comodidad puedes seguir los siguientes pasos.

1.- Mis proyectos los organizo dentro de ~/code agrupados por lenguaje o framework, así que en este caso he creado una carpeta ~/code/node-webkit y he descargado ahí el tar.gz desde el enlace de arriba.

2.- Extraigo el archivo y me crea una carpeta que renombro a “node-webkit”.

3.- Edito mi ~/.profile y añado este párrafo para que el ejecutable nw de node-webkit esté en el PATH:


# node-webkit
if [ -d "$HOME/code/node-webkit/node-webkit" ] ; then
    PATH="$HOME/code/node-webkit/node-webkit:$PATH"
fi

 Creando nuestro primer proyecto

Créate una carpeta donde más te guste. Esta carpeta contendrá todos los archivos de tu aplicación.

En mi caso como decía antes agrupo todo en ~/code así que crearé por ejemplo ~/code/node-webkit/testproject

Dentro de esta carpeta realmente podemos organizar las cosas como nos de la gana ya que realmente estaremos creando una página web y basta con que referenciemos correctamente los archivos entre sí.

Por cuestión de claridad puedes por ejemplo crear las siguientes subcarpetas:

 html
 css
 images
 fonts
 js
 node_modules

Exceptuando la última el resto no necesitan explicación, como decía puedes organizarlas como prefieras para separar tus achivos html, css, javascript, imágenes…

La carpeta node_modules sin embargo es algo particular: aquí será donde se instalarán los módulos “node” extra que queramos utilizar en nuestro proyecto. Más adelante hablaré de cómo se instalan, de momento saber que son librerías que nos pueden permitir por ejemplo agregar funciones para el guardado de configuración de nuestra aplicación sin tener que crear nosotros mismos el código para ello.

El archivo package.json

Dentro de la estructura que hemos creado en esta carpeta podemos desarrollar nuestra aplicación/página web como nos de la gana, con todos los archivos html, css o javacript que necesitemos. Tendremos sin embargo que indicar a node-webkit alguna información sobre nuestra app, y esto lo hacemos con el archivo package.json.

Creamos un archivo de texto vacío en la carpeta raíz de nuestro proyecto (en mi caso sería ~/code/node-webkit/testproject/package.json), lo renombramos a package.json y lo editamos. Dentro pondremos algo como esto:


{
  "name": "testproject",
  "version": "0.0.1",
  "main": "./html/index.html",
  "window": {
    "toolbar": false,
    "width": 800,
    "height": 500
  }
}

Los campos realmente imprescindibles ahí son:

  • name: el nombre de nuestra aplicación
  • main: el punto de entrada o página principal. Lo que se cargará inicialmente cuando ejecutemos la aplicación.

La opción toolbar nos permite activar o desactivar una barra de navegación, que puede ser útil mientras desarrollamos pero que seguramente no querremos en la versión final.

Con esto listo, podemos crear un index.html en la carpeta html dentro de nuestro proyecto y empezar a echar un vistazo a cómo iría quedando la cosa:

[code language=”html”]


testproject



Hola!


[/code]

Abrimos una consola y nos vamos a la carpeta raíz de nuestra aplicación:

cd ~/code/node-webkit/testproject

Y la arrancamos con nw:

nw ./

testproject

Y ahí está nuestra aplicación en toda su gloria. Ningún misterio como veis: es una web corriendo en su propia ventana.

La gracia, como comentaba al principio, está en que el motor que ejecuta la web nos va a permitir muchas más cosas de las que nos permitiría un navegador normal. Además al final podemos empaquetar la aplicación para que se instale y ejecute como cualquier otra aplicación normal de escritorio.

node modules

Podemos desarrollar nuestra aplicación por nuestra cuenta sin ningún módulo, pero hay un montón de módulos disponibles y es posible que encontremos alguno que nos resulte útil.

Podemos navegar por la lista de módulos en la web https://www.npmjs.org/ y buscar por palabras clave para encontrar alguno interesante.

Para instalarlo podríamos hacerlo a mano pero es mucho más fácil usar npm:

sudo apt-get install npm

Con esta utilidad sólo tenemos que situarnos en la carpeta raíz de nuestro proyecto e indicarle qué módulo queremos instalar. Por ejemplo si queremos algo muy sencillo para el almacenamiento de la configuración de nuestro programa:

npm install configstore

En la misma página de npmjs.org tenéis para cada módulo el comando necesario para instalarlo.

Happy coding

A partir de aquí, hasta donde queráis llegar: reproductores de vídeo, navegadores de ficheros, aplicaciones cliente-servidor, juegos… es posible desarrollar prácticamente cualquier cosa en node-webkit.

En algún momento publicaré una segunda parte de este artículo con más cosillas de node-webkit, como por ejemplo como hacer un build de vuestra aplicación ya terminada para poder distribuirla con todos los recursos necesarios (incluyendo el motor webkit) y para todas las plataformas.

  • Marco Antonio V.A.

    Que tal. Buen aporte.
    Pregunta: ¿Qué otras opciones aparte de éstas existen? y ¿ podría usarse angular o backbone aqui o en cualquier otro?

    • Puedes usar Angular, Backbone, Bootstrap, JQuery, Jade, Compass/Sass… prácticamente cualquier cosa que se ejecute del lado del cliente debería funcionar.

      Sobre alternativas, es posible usar CSS con aplicaciones GTK. Ganas poder elegir entre más lenguajes para desarrollar la aplicación (y no tener que lidiar con funciones asíncronas) pero pierdes el poder transladar directamente la experiencia que tengas en desarrollo web.

  • Pedro

    Se ve que eres un ignorante, la programación asíncrona no es mala si tu pequeña cabeza no puede con ello no le pongas cruces.

    • Nunca he dicho que sea mala, pero en cualquier caso si quieres exponer cualquier opinión o comentario creo que es perfectamente posible hacerlo sin insultar.

      Un saludo.

  • Jose M Torres

    Excelente artículo, te agradezco que tomes el tiempo de difundir tu investigación.

  • Sergio Daniel Calvo Hidalgo

    Muy buen artículo, me sirvió de mucha ayuda.

  • Juan Manuel Fernandez

    La verdad me salvaste la vida. Aunque era investigar un poco, hay poco material sobre como instalar nw.
    Acabo de conocer el proyecto y me parece mas que revolucionario aún leyendo tu crítica. Gracias gracias!

  • Jonatan Stiven Herran Arias

    Excelente!
    muy buen articulo, tengo una pregunta para imprimir de forma directa en la impresora como puedo hacerlo, por que me abre una ventana popup y me descarga el pdf, como se puede manejar esta parte de impresiones

    • Tendrías que acceder al sistema de impresión que use el sistema operativo para comunicarse con la impresora (por ejemplo CUPS si tu aplicación funciona el Linux) y mandar el job de impresión a través de éste.

      En npmjs tienes módulos para esto, por ejemplo https://www.npmjs.com/package/printer

  • Nelson

    Hola buenos dias, excelente articulo. Alguna forma grabar audio y video que se esté reproduciendo en un tag html5???

    • Directamente vídeo y audio no creo (sólo el audio, al menos el Linux, sí podrías grabarlo configurando la opción Monitor como fuente de grabación en la configuración de PulseAudio) aparte de usar un programa de grabación del escritorio que también capture sonido.

      De todas formas normalmente si un vídeo está en un tag , examinando el código fuente de la página podrás ver la URL del archivo de vídeo y descargarlo directamente, con lo que no habría necesidad de grabarlo, supongo.

  • Juan Pablo Videla

    Excelente artículo.
    Pregunta: qué librería podemos incorporar para utilizar la impresora de forma directa, sin pasar por un cuadro de diálogo, para así de esta forma, por ejemplo, imprimir comprobantes en un sistema de facturación si que sea tedioso por culpa de este cuadro

  • pepe

    Buenas una consulta a ver si me pueden ayudar, yp realice una simple aplicacion y la empaquete con node webkit, lo hice con la de 32 en mi sistema operativo windows de 64, la aplicación corría pero no sonaba, entonces la volví a crear con el node web de 64 y si sonaba en mi windows de 64, mi duda es que entonces el de 32 no corre bien en un sistema operativo de 64, es decir que para que corra sin problemas debo crear el de 32 para windows con el node de 32 y el de 64 con el node de 64?, gracias…