Descargado 40 veces
Subido porJose Gratereaux
Node-webkit
Este documento describe Node-Webkit, una herramienta que permite convertir aplicaciones web en aplicaciones de escritorio multiplataforma. Node-Webkit integra funciones de Node.js dentro del motor de renderizado Webkit, permitiendo utilizar módulos de Node.js y crear aplicaciones de escritorio basadas en HTML5, CSS y JavaScript que se pueden ejecutar en Windows, Linux y macOS. El documento explica conceptos básicos, ejemplos de aplicaciones creadas con Node-Webkit y cómo crear un proyecto básico.
Más contenido relacionado
Node-webkit
- 1. CONVERTIR WEB APP`SEN DESKTOP APP`S CON NODE-WEBKIT APP RUNTIME BASED ON CHROMIUM AND NODE.JS JOSE GRATEREAUX @JGRATEREAUX https://github.com/gratereaux
- 2.
- 3. ALGUNAS APPS TweetDeck Sputnik(RSS reader) Kindle Cloud Reader Weather-Map
- 4. ALGUNAS APPS Popcorn TimeLexiMail A wizard`s Lizard (Game) Sqwiggle
- 5. ¿QUE ES NODE-WEBKIT? •Es un web app runtime
- 6. ¿QUE ES NODE-WEBKIT? •Integra funciones de Node.js dentro del webkit
- 7. ¿QUE ES NODE-WEBKIT? •Multiplataforma, Se puede ejecutar en OS X, Windows y Linux.
- 8. ¿QUE ES NODE-WEBKIT? •Fácil distribución y empaquetamiento
- 9. ¿QUE ES NODE-WEBKIT? •Puedes usar módulos de Node.js
- 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 - CASOSDE 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)
- 12. • Estructura deuna app CREANDO NUESTRO PROYECTO
- 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 verlos códigos CREANDO NUESTRO PROYECTO
- 16.
Notas del editor
- #5 Pop corn time
- #6 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.
- #14 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’
- #15 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.
- #17 https://github.com/zcbenz/nw-sample-apps