chrome apps e nodewebkit: traga seu webapp para o desktop - #outubrorosa
DESCRIPTION
Aprenda o básico sobre Chrome Apps e node-webkit e desenvolva aplicativos em html5 para desktop. Palestra ministrada no GDG DevFest Nordeste.TRANSCRIPT
![Page 1: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/1.jpg)
Chrome Apps e NodeWebkit: traga seu webapp para o Desktop
Joselito Júniorjoselitojunior.com @joselitojunior1
#outubrorosa
![Page 2: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/2.jpg)
Olásou fundador do Estudorama e do Rabiscapp, estudo Ciência da Computação CIn-UFPE, venci o NASA Space Apps e o Startup Jam (e +), co-fundador do GDG Recife, gerente de TI na Farol52, instrutor e palestrante, design thinker, entusiasta do html5, fã de formula 1
![Page 3: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/3.jpg)
Rabiscapp.net
![Page 4: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/4.jpg)
http://phonegapbootcamp.io
![Page 5: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/5.jpg)
![Page 6: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/6.jpg)
![Page 7: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/7.jpg)
![Page 8: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/8.jpg)
![Page 9: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/9.jpg)
![Page 10: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/10.jpg)
![Page 11: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/11.jpg)
JavaScript de várzeabotões rollover joguinhos dhtml alerts irritantes anuncios com refresh
![Page 12: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/12.jpg)
JavaScript na web 2.0bibliotecas (jquery) ajax websockets realtime
![Page 13: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/13.jpg)
JavaScript hojenode.js e npm angularjs, blackbone, ember mobile apps
![Page 14: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/14.jpg)
JavaScript hojenode.js e npm angularjs, blackbone, ember mobile apps desktop apps
![Page 15: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/15.jpg)
![Page 16: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/16.jpg)
e Desktop?
![Page 17: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/17.jpg)
e tem pra Desktop?
![Page 18: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/18.jpg)
e por que Desktop?
![Page 19: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/19.jpg)
Os Porquêsmudança de hábito mobile: apps simplesmente funcionam só usam a web quando necessário mantém uma ótima experiência
![Page 20: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/20.jpg)
![Page 21: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/21.jpg)
Chrome Apps
![Page 22: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/22.jpg)
Conteúdo
index.html script.js style.css
troll_face.jpg
manifest.json background.html
main.js
Estrutura
![Page 23: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/23.jpg)
manifest.json
{ "manifest_version": 2, "name": "Olar mundo", "version": "1.1", "minimum_chrome_version": "23", "icons": { "16": "icon_16.png", "128": "icon_128.png" }, "app": { "background": { "scripts": ["main.js"] } } }
![Page 24: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/24.jpg)
manifest-melhorzinho.json{ "name": "Olar mundo cruel", "version": "2", "manifest_version": 2, "minimum_chrome_version": "32", "app": { "background": { "scripts": ["background.js"] } }, "permissions": [ {"fileSystem": ["write", "retainEntries", "directory"]}, "storage" ], "file_handlers": { "text": { "types": [ "text/*" ], "title": "Text editor" } } }
![Page 25: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/25.jpg)
main.js
chrome.app.runtime.onLaunched.addListener(function() { var screenWidth = screen.availWidth; var screenHeight = screen.availHeight; var width = 500; var height = 300;
chrome.app.window.create('index.html', { id: "olarPlanetaID", bounds: { width: width, height: height, left: Math.round((screenWidth-‐width)/2), top: Math.round((screenHeight-‐height)/2) } }); });
![Page 26: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/26.jpg)
main.js
chrome.app.runtime.onLaunched.addListener(function() { var screenWidth = screen.availWidth; var screenHeight = screen.availHeight; var width = 500; var height = 300;
chrome.app.window.create('index.html', { id: "olarPlanetaID", bounds: { width: width, height: height, left: Math.round((screenWidth-‐width)/2), top: Math.round((screenHeight-‐height)/2) } }); });
![Page 27: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/27.jpg)
main.js
chrome.app.onLaunch .onRestarted
![Page 28: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/28.jpg)
main.js
chrome.appAPIs exclusivas do Chrome
![Page 29: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/29.jpg)
Testando
![Page 30: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/30.jpg)
Testando
![Page 31: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/31.jpg)
Testando
![Page 32: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/32.jpg)
Compilando
![Page 33: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/33.jpg)
github.com/GoogleChrome/chrome-app-samples
![Page 34: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/34.jpg)
Node Webkit
![Page 35: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/35.jpg)
![Page 36: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/36.jpg)
V8node.js
contexto
![Page 37: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/37.jpg)
![Page 38: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/38.jpg)
node.jsassíncrono módulos do npm usa a v8 engine performance
![Page 39: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/39.jpg)
Conteúdo
index.html script.js style.css
tacalhepau.mp4
package.json
Estrutura
![Page 40: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/40.jpg)
{ "name": "Mia plicativo", "main": "index.html", "window": { "toolbar": true, "fullscreen": false, "resizible": "true", "width": 800, "height": 600 }, "depedencies": { "underscore": "~1.4.1", "angular": "~1.2.0" }, "jsflags": "-‐-‐harmony-‐collections" }
package.json
![Page 41: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/41.jpg)
<!doctype html> <html lang='en'> <head> <meta charset='UTF-‐8'> <title>Modules Example (System Info and File I/O)</title> <script> var os = require('os'); var fs = require('fs'); var content = ''; content += '[Platform]' + os.EOL; content += 'OS Type : ' + os.platform() + os.EOL; // linux, darwin, win32, sunos, freebsd content += 'OS Version : ' + os.release() + os.EOL; content += 'OS Architecture: ' + os.arch() + os.EOL; content += os.EOL;
…
Módulos node
![Page 42: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/42.jpg)
<!doctype html> <html lang='en'> <head> <meta charset='UTF-‐8'> <title>Modules Example (System Info and File I/O)</title> <script> var os = require('os'); var fs = require('fs'); var content = ''; content += '[Platform]' + os.EOL; content += 'OS Type : ' + os.platform() + os.EOL; // linux, darwin, win32, sunos, freebsd content += 'OS Version : ' + os.release() + os.EOL; content += 'OS Architecture: ' + os.arch() + os.EOL; content += os.EOL;
…
Módulos node
![Page 43: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/43.jpg)
Testando
./node-‐webkit <dir>
![Page 44: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/44.jpg)
Testando
![Page 45: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/45.jpg)
API gráfica nativa
var win = gui.Window.get(); // Create a menubar for window menu var menubar = new gui.Menu({ type: 'menubar' }); // Create a menuitem var sub1 = new gui.Menu(); sub1.append(new gui.MenuItem({ label: 'GDG Aracaju', click: function() {} }));
![Page 46: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/46.jpg)
Mais testes
![Page 47: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/47.jpg)
Resumindomódulos do npm native gui library shell functions snapshot do V8 runtime nativo early-apis do html5 apis exclusivas (frameless, clipboard(!), webrtc)
![Page 48: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/48.jpg)
Compilando
copy /b nw.exe+app.nw > app.exe
cp app.nw nw/Contents/Resources
cat nw app.nw > app
![Page 49: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/49.jpg)
github.com/rogerwang/node-webkit
![Page 50: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/50.jpg)
![Page 51: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/51.jpg)
Necessário um browser Autorização on-demand do usuário Sem GUI própria APIs exclusivas do Chrome Loja Própria Obifuscação de código
Standalone Tudo liberado por padrão API de GUI Acesso completo a codigo nativo Lojas do SO/Distribuição direta Snapshot
![Page 52: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/52.jpg)
quem já usa?
![Page 53: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/53.jpg)
Chrome Apps
![Page 54: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/54.jpg)
![Page 55: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/55.jpg)
Game Dev Tycoonhttp://www.greenheartgames.com/app/game-dev-tycoon/
![Page 56: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/56.jpg)
Koala Apphttp://koala-app.com/
![Page 57: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/57.jpg)
Popcorn Timehttp://www.time4popcorn.eu
![Page 58: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/58.jpg)
Atom [Shell]http://atom.io
![Page 59: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/59.jpg)
Brackets [Shell]http://brackets.io
![Page 60: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/60.jpg)
Breachhttp://breach.cc/
![Page 61: Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa](https://reader034.vdocument.in/reader034/viewer/2022042816/5590f1f21a28ab55528b4634/html5/thumbnails/61.jpg)
Obrigado! (: Dúvidas?
Joselito Júniorjoselitojunior.com @joselitojunior1
http://jfnj.me/chromeapps-devfestne