- Desde
- 8 Jun 2014
- Mensajes
- 281
HTML fuera de ser un lenguaje muy amigable para los desarrollares novatos como yo, nos permite, con la implementación de Javascript y CSS, crear casi cualquier cosa. Sin embargo, una de las principales restricciones es que es un lenguaje para navagedarores, quedandonos sin la oportunidad de aprovechar este maravilloso lenguaje en aplicaciones de escritorio. En base a eso se creó Node Webkit, un sistema que nos permitirá llevar HTML a ventanas de escritorio.
node-webkit es una aplicación basada en Chorium y node.js. Con esto puedes crear aplicaciones de escritorio que puedes escribir en HTML y Javascript e implementando módulos de node.js (pero no tocaré ese tema, centremosnos en aprender lo básico).
Mi manera simple de explicarlo sería que node-webkit es un navegador personalizable con el que podemos ejecutar nuestra web.
Lo principal es obviamente node-webkit para empezar a ejecutar nuestras aplicaciones, podemos desarrollar en Windows, Linux y Mac.
- Windows win32
- Linux 32bit / 64bit
- Mac 32bit, 10.7+
Ahora que ya contamos con todos nuestros recursos y ganas empezamos por crear nuestra carpeta donde empezaremos nuestro proyecto y crear un archivo index.html y package.json:
Empezemos por el index.html, una estructura básica sería:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>forobeta.com</title>
</head>
<body>
<h1>¡Hola mundo!</h1>
Soy <b>xmatias</b> y les estoy enseñando como crear una aplicación con node-webkit.
</body>
</html>No hablaré mucho sobre el HTML ya que a lo largo del foro existe bastante contenido para que puedan iniciarse o perfeccionarse en este lenguaje.
Ahora editaremos el archivo package.json:
Insertar CODE, HTML o PHP:
{
"name": "forobeta.com",
"main": "index.html"
}"name": "forobeta.com", nombre de la aplicación, en mi caso ''forobeta.com''
"main": "index.html" archivo principal, en mi caso index.html
Con esto ya tenemos lo suficiente para hacer correr nuestra app.
Para ejecutar nuestra aplicación vamos a descomprimir los archivos del node-webkit que descargamos antes en nuestra carpeta donde estamos trabajando.
Ahora ejecutamos el archivo ''nw'' y nuestra aplicación debería ya correr:
Quizás hasta el momento su única duda debe ser como personalizar la ventana con que inicia la aplicación, ya que se ve feo con la barra de navegación, el tamaño no es el adecuado, etc. Para eso usaremos distintos atributos que declaramos en el archivo package.json. Todos estos atributos se deben declarar dentro de ''window'':
Insertar CODE, HTML o PHP:
{
"name": "forobeta.com",
"main": "./index.html",
"window": {
Aqui van nuestras modificaciones.
}
}Los principales atributos son los siguientes:
- toolbar muestra la barra de navegación (true/false).
- frame muestra la ventana (true/false).
- resizable define si se puede manipular el tamaño de la ventana (true/false).
- width ancho inicial de la ventana.
- height alto inicial de la ventana.
- min_width ancho mínimo de la ventana.
- min_height alto mínimo de la ventana.
Ejemplo package.json:
Insertar CODE, HTML o PHP:
{
"name": "forobeta.com",
"main": "./index.html",
"window": {
"toolbar": false,
"frame": true,
"width": 400,
"height": 400,
"min_width": 300,
"min_height": 300,
"resizable": true
}
}
Yo diría que el único problema de node-webkit es empaquetar nuestra aplicación. Es muy incómodo y poco práctico distribuir una serie de archivos y decirle a los usuarios que ejectuten el ''nw''. Para esto usaremos un módulo de node.js llamado ''grunt-node-webkit''.
Lo primero es descargar e instalar node.js para su SO correspondiente desde aquí.
Ahora lo que aremos es crear una carpeta con lo siguiente:
- Nuestro proyecto (recomiendo cambiar el nombre del proyecto por src)
- Una carpeta llamada build
- Un archivo llamado Gruntfile.js
- Un archivo llamado package.json
Nuestro archivo package.json tendrá la siguiente estructura:
Insertar CODE, HTML o PHP:
{
"name": "Forobeta App",
"version": "2.0",
"description": "Ejemplo",
"author": "xmatias <xmatias@forobeta.com>",
"private": true,
"dependencies": {
"grunt": "~0.4.2",
"grunt-node-webkit-builder": "~0.1.14"
}
}Creo que no necesito explicar los campos que deberían editar...
Nuestro archivo Gruntfile.json tendrá lo siguiente:
HTML:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('src/package.json'),
nodewebkit: {
options: {
build_dir: './build',
mac: true,
win: true,
linux32: true,
linux64: true
},
src: './src/**/*'
},
});
grunt.loadNpmTasks('grunt-node-webkit-builder');
grunt.registerTask('default', ['nodewebkit']);
};Los valores mac, win, linux32 y linux64 especifican que ejecutables se crearán (true/false).
Ahora abrimos nuestra terminal (o cmd en Windows) y nos dirigimos a la carpeta donde estamos trabajando con el comando cd.
Ejemplo: cd /home/matias/Escritorio/grunt
Ahora tipeamos npm install para instalar los módulos del grunt y finalmente tipeamos grunt.
Ahora el proceso iniciará, esto puede tardar bastante ya que se descargarán los binarios de todos los sistemas operativos que elegimos.
Gracias por leer este tutorial, espero que te sirva de algo. Es mi primer aporte al foro y espero aprender mucho de ustedes y también que ustedes aprendan algo de mi aunque mis conocimientos sean muy vagos aún.
Si te gustó este tutorial y esperas más, dale ME AGRADA, ME GUSTA, G+1 y TWITTEA el post, me estarías haciendo un enorme favor.
Saludos
