Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa
•
1 gostou•704 visualizações
1) O documento discute como aplicativos web podem ser trazidos para o desktop usando Chrome Apps e NodeWebkit. 2) Chrome Apps permitem que aplicativos sejam compilados para o Chrome e rodem como aplicativos nativos do sistema, enquanto NodeWebkit permite executar aplicativos web como aplicativos desktop nativos usando o motor V8 do Node.js. 3) Ambas as tecnologias fornecem APIs para interface gráfica e acesso a recursos do sistema, permitindo que aplicativos web sejam empacotados e distribuídos
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (12)
Semelhante a Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa
Semelhante a Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa (20)
Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa
- 1. Chrome Apps e NodeWebkit: traga seu webapp para o Desktop #outubrorosa Joselito Júnior joselitojunior.com @joselitojunior1
- 2. 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
- 11. JavaScript de várzea botões rollover joguinhos dhtml alerts irritantes anuncios com refresh
- 12. JavaScript na web 2.0 bibliotecas (jquery) ajax websockets realtime
- 13. JavaScript hoje node.js e npm angularjs, blackbone, ember mobile apps
- 14. JavaScript hoje node.js e npm angularjs, blackbone, ember mobile apps desktop apps
- 16. e Desktop?
- 17. e tem pra Desktop?
- 18. e por que Desktop?
- 19. Os Porquês mudança de hábito mobile: apps simplesmente funcionam só usam a web quando necessário mantém uma ótima experiência
- 21. Chrome Apps
- 22. Conteúdo index.html script.js style.css troll_face.jpg manifest.json background.html main.js Estrutura
- 23. 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"] } } }
- 24. 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" } } }
- 25. 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) } }); });
- 26. 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) } }); });
- 27. main.js chrome.app .onLaunch .onRestarted
- 28. main.js chrome.app APIs exclusivas do Chrome
- 29. Testando
- 30. Testando
- 31. Testando
- 32. Compilando
- 34. Node Webkit
- 38. node.js assíncrono módulos do npm usa a v8 engine performance
- 39. Conteúdo index.html script.js style.css tacalhepau.mp4 package.json Estrutura
- 40. package.json { "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" }
- 41. <!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
- 42. <!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
- 44. Testando
- 45. 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() {} }));
- 46. Mais testes
- 47. Resumindo módulos do npm native gui library shell functions snapshot do V8 runtime nativo early-apis do html5 apis exclusivas (frameless, clipboard(!), webrtc)
- 48. Compilando copy /b nw.exe+app.nw > app.exe cp app.nw nw/Contents/Resources cat nw app.nw > app
- 51. 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
- 52. quem já usa?
- 53. Chrome Apps
- 55. Game Dev Tycoon http://www.greenheartgames.com/app/game-dev-tycoon/
- 61. Obrigado! (: Dúvidas? http://jfnj.me/chromeapps-devfestne Joselito Júnior joselitojunior.com @joselitojunior1