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
Chrome Apps e NodeWebkit: traga seu webapp para o Desktop
Joselito Júniorjoselitojunior.com @joselitojunior1
#outubrorosa
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
Rabiscapp.net
http://phonegapbootcamp.io
JavaScript de várzeabotões rollover joguinhos dhtml alerts irritantes anuncios com refresh
JavaScript na web 2.0bibliotecas (jquery) ajax websockets realtime
JavaScript hojenode.js e npm angularjs, blackbone, ember mobile apps
JavaScript hojenode.js e npm angularjs, blackbone, ember mobile apps desktop apps
e Desktop?
e tem pra Desktop?
e por que Desktop?
Os Porquêsmudança de hábito mobile: apps simplesmente funcionam só usam a web quando necessário mantém uma ótima experiência
Chrome Apps
Conteúdo
index.html script.js style.css
troll_face.jpg
manifest.json background.html
main.js
Estrutura
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"] } } }
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" } } }
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) } }); });
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) } }); });
main.js
chrome.app.onLaunch .onRestarted
main.js
chrome.appAPIs exclusivas do Chrome
Testando
Testando
Testando
Compilando
github.com/GoogleChrome/chrome-app-samples
Node Webkit
V8node.js
contexto
node.jsassíncrono módulos do npm usa a v8 engine performance
Conteúdo
index.html script.js style.css
tacalhepau.mp4
package.json
Estrutura
{ "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
<!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
<!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
Testando
./node-‐webkit <dir>
Testando
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() {} }));
Mais testes
Resumindomódulos do npm native gui library shell functions snapshot do V8 runtime nativo early-apis do html5 apis exclusivas (frameless, clipboard(!), webrtc)
Compilando
copy /b nw.exe+app.nw > app.exe
cp app.nw nw/Contents/Resources
cat nw app.nw > app
github.com/rogerwang/node-webkit
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
quem já usa?
Chrome Apps
Game Dev Tycoonhttp://www.greenheartgames.com/app/game-dev-tycoon/
Koala Apphttp://koala-app.com/
Popcorn Timehttp://www.time4popcorn.eu
Atom [Shell]http://atom.io
Brackets [Shell]http://brackets.io
Breachhttp://breach.cc/
Obrigado! (: Dúvidas?
Joselito Júniorjoselitojunior.com @joselitojunior1
http://jfnj.me/chromeapps-devfestne