SQL server Analysis Services & SQL Server Reporting Services.pptx
Convierte web apps en desktop apps con Node-webkit
1. CONVERTIR WEB APP`S EN DESKTOP APP`S
CON NODE-WEBKIT
APP RUNTIME BASED ON CHROMIUM AND NODE.JS
JOSE GRATEREAUX
@JGRATEREAUX
https://github.com/gratereaux
10. ¿QUE ES NODE-WEBKIT?
• Basado en Chromium y Node.js.
• Creado y desarrollado en Intel.
• Open source y publicado a github en Diciembre 2011.
• Soporta casi todas las características de HTML5.
• Audio y video soportado.
• Frameworks de juegos HTML5 como por ejemplo cocos2d trabajan
perfecto en node-webkit.
• Puedes instalar modulos de node.js usando el npm.
• Mas info en :
– https://github.com/rogerwang/node-webkit
11. EJEMPLOS - CASOS DE USO
• File explorer & file editor
– Puedes usar el modulo de node filesistem (fs) o HTML5 file API
– Puedes invocar dialogo de file select de javascript.
– Soporte de Dragging de archivos
– Demo de Node-webkit file explorer:
• https://github.com/zcbenz/nw-file-explorer
• Media applications
– getUserMedia es soportado en node-webkit.
– Camara y Audio recording es soportado (<video> y <audio> tags)
13. CREANDO NUESTRO PROYECTO
Name: representa el nombre de
directorio de configuracion del app. En
Linux el app data sera guardado en
‘~/.config/nw-demo’, en Mac OS X en
‘~/Library/Application Support/nw-
demo’.
Window contiene la configuracion
de la ventana. Donde puedes
configurar ancho, alto, toolbar,
posicion, etc…
En Main se especifica la pagina
inicial que cargará el app.
14. CREANDO NUESTRO PROYECTO
• Al finalizar los codigos solo debemos:
– Empaquetarlo y ejecutarlo:
• Comprimirlo en un Zip
• Y ejecutarlo nw app.zip
• Podemos crear un standalone package con un
ejecutable
– En linux: $ cat nw app.nw > app
– En Windows: :/ copy /b nw.exe + app.nw nombre.exe
– En Mac OS X: cp app.nw nw/Contents/Resources/
15. Vamos a ver los códigos
CREANDO NUESTRO PROYECTO
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.
Name: representa el nombre de directorio de configuracion del app. En Linux el app data sera guardado en ‘~/.config/nw-demo’, en Mac OS X en ‘~/Library/Application Support/nw-demo’
1- bajamos el node-webkit y lo extraemos en una carpeta
2- creamos una carpeta del proyecto y coremos nmp init para crear el package.json
3- ponemos los datos
4- editamos el json, cambiamos el main por un html
5- agregamos la propiedad window en el json
"window":{
"title": "Ejemplo de APP usando Node-webkit",
"toolbar": true,
"frame": true,
"width": 850,
"height": 500,
"position": "center",
"resizable": true,
"icon": "sample.png"
},
6- creamos los archivos html y css segun el gusto
7- luego comprimimos a zip y cambiamos el nombre a "nombre" con extencion nw.
8 - luego cambio a false las propiedades de toolbar y frame para mostrar que se ocultan.