logo

Creación de su primera aplicación de escritorio con HTML, JS y Node-WebKit

En estos días puedes hacer casi cualquier cosa con JavaScript y HTML. Gracias a Node-WebKit, incluso podemos crear aplicaciones de escritorio que se sientan nativas y tengan acceso completo a todas las partes del sistema operativo. En este breve tutorial, le mostraremos cómo crear una aplicación de escritorio simple usando Node-WebKit, que combina jQuery y algunos módulos de Node.js.

Node-WebKit es una combinación de Node.js y un navegador WebKit incorporado. El código JavaScript que escribe se ejecuta en un entorno especial y tiene acceso tanto a las API estándar del navegador como a Node.js. ¿Suena interesante? ¡Sigue leyendo!

Instalación de Node-WebKit

Para desarrollar aplicaciones, deberá descargar el ejecutable node-webkit y llamarlo desde su terminal cuando desee ejecutar su código. (Más tarde, puede empaquetar todo en un solo programa para que sus usuarios solo puedan hacer clic en un ícono para iniciarlo).

Dirígete a la página del proyecto y descarga el ejecutable creado para tu sistema operativo. Extraiga el archivo en algún lugar de su computadora. Para iniciarlo, debe hacer esto en su terminal:

# If you are on linux/osx

/path/to/node-webkit/nw /your/project/folder

# If you are on windows

C:\path\to\node-webkit\nw.exe C:\your\project\folder

# (the paths are only for illustrative purposes, any folder will do)

Esto abrirá una nueva ventana de nodo-webkit e imprimirá un montón de mensajes de depuración en su terminal.

Opcionalmente, puede agregar la carpeta de nodo-webkit extraída a su RUTA, para que esté disponible como nw Comando desde tu terminal.

Tu primera solicitud

Hay una Descarga cerca de la parte superior de este artículo. Haz clic y obtén un zip con una aplicación de muestra que preparamos para ti. Obtiene los artículos más recientes en Tutorialzine de nuestro feed RSS y los convierte en un carrusel 3D de apariencia atractiva usando jQuery Flipster.

Una vez que lo extraiga, verá los archivos de arriba. Desde aquí, parece un sitio web estático estándar. Sin embargo, no funcionará si simplemente hace doble clic en index.html; requiere módulos Node.js, que no son válidos en un navegador web. Para ejecutarlo, CD en esta carpeta e intente ejecutar la aplicación con este comando:

/path/to/node-webkit/nw .

Esto mostrará nuestra gloriosa aplicación de escritorio.

Cómo se hizo

Todo comienza con el archivo package.json, que node-webkit busca al iniciar. Describe qué nodo-webkit debe cargar y varios parámetros de la ventana.

paquete.json

{
  "name": "nw-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "window": {
    "toolbar": false,
    "width": 800,
    "height": 500
  },
  "license": "ISC",
  "dependencies": {
    "pretty-bytes": "^1.0.2"
  }
}

El window La propiedad en este archivo le dice a node-webkit que abra una nueva ventana de 800 por 500 px y oculte la barra de herramientas. El archivo apuntado por el main se cargará la propiedad. En nuestro caso, este es index.html:

index.html

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Tutorialzine Node-Webkit Experiment</title>

    <link rel="stylesheet" href="./css/jquery.flipster.min.css">
    <link rel="stylesheet" href="./css/styles.css">

</head>
<body>

    <div class="flipster">
        <ul>
            <!-- Tutorialzine's latest articles will show here -->
        </ul>
    </div>

    <p class="stats"></p>

    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery.flipster.min.js"></script>
    <script src="./js/script.js"></script>
</body>
</html>

Y finalmente, aquí está nuestro archivo JavaScript. ¡Aquí es donde se pone interesante!

js/script.js

// Mixing jQuery and Node.js code in the same file? Yes please!

$(function(){

    // Display some statistic about this computer, using node's os module.

    var os = require('os');
    var prettyBytes = require('pretty-bytes');

    $('.stats').append('Number of cpu cores: <span>' + os.cpus().length + '</span>');
    $('.stats').append('Free memory: <span>' + prettyBytes(os.freemem())+ '</span>');

    // Node webkit's native UI library. We will need it for later
    var gui = require('nw.gui');

    // Fetch the recent posts on Tutorialzine

    var ul = $('.flipster ul');

    // The same-origin security policy doesn't apply to node-webkit, so we can
    // send ajax request to other sites. Let's fetch Tutorialzine's rss feed:

    $.get('http://feeds.feedburner.com/Tutorialzine', function(response){

        var rss = $(response);

        // Find all articles in the RSS feed:

        rss.find('item').each(function(){
            var item = $(this);

            var content = item.find('encoded').html().split('</a></div>')[0]+'</a></div>';
            var urlRegex = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?/g;

            // Fetch the first image of the article
            var imageSource = content.match(urlRegex)[1];

            // Create a li item for every article, and append it to the unordered list

            var li = $('<li><img /><a target="_blank"></a></li>');

            li.find('a')
                .attr('href', item.find('link').text())
                .text(item.find("title").text());

            li.find('img').attr('src', imageSource);

            li.appendTo(ul);

        });

        // Initialize the flipster plugin

        $('.flipster').flipster({
            style: 'carousel'
        });

        // When an article is clicked, open the page in the system default browser.
        // Otherwise it would open it in the node-webkit window which is not what we want.

        $('.flipster').on('click', 'a', function (e) {

            e.preventDefault();

            // Open URL with default browser.
            gui.Shell.openExternal(e.target.href);

        });

    });

});

Tenga en cuenta que estamos accediendo a la fuente RSS de Tutorialzine directamente con jQuery, aunque esté en un dominio diferente. Esto no es posible en un navegador, pero Node-WebKit elimina esta limitación para facilitar el desarrollo de aplicaciones de escritorio.

Estos son los módulos de nodo que hemos usado:

  • Shell:un módulo de webkit de nodo que proporciona una colección de API que realizan trabajos relacionados con el escritorio.
  • OS:el módulo integrado de Node.js OS, que tiene un método que devuelve la cantidad de memoria libre del sistema en bytes.
  • Bytes bonitos:convierte bytes en una cadena legible por humanos:1337 → 1,34 kB.

Nuestro proyecto también incluye jQuery y el complemento jQuery-flipster, ¡y eso es todo!

Embalaje y Distribución

Seguramente no querrá que sus usuarios sigan los mismos pasos para ejecutar su aplicación. Desea empaquetarlo en un programa independiente y abrirlo simplemente haciendo doble clic en él.

Empaquetar aplicaciones de nodo-webkit para múltiples sistemas operativos requiere mucho trabajo manual. Pero hay bibliotecas que hacen esto por ti. Probamos este módulo npm:https://github.com/mllrsohn/node-webkit-builder, y funcionó bastante bien.

La única desventaja es que los archivos ejecutables tienen un tamaño grande (pueden alcanzar fácilmente los 40-50 mb), porque incluyen un navegador webkit simplificado y node.js junto con su código y activos. Esto lo hace poco práctico para aplicaciones de escritorio pequeñas (como la nuestra), pero vale la pena echarle un vistazo a aplicaciones más grandes.

Conclusión

Node-webkit es una poderosa herramienta que abre muchas puertas a los desarrolladores web. Con él, puede crear fácilmente aplicaciones complementarias para sus servicios web y crear clientes de escritorio que tengan acceso total a la computadora de los usuarios.

Puede leer más sobre node-webkit en su wiki.