Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa

062400e92afd08f0cd9304a5b4730297?s=47 Joselito
October 18, 2014

Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa

Aprenda o básico sobre Chrome Apps e node-webkit e desenvolva aplicativos em html5 para desktop

062400e92afd08f0cd9304a5b4730297?s=128

Joselito

October 18, 2014
Tweet

More Decks by Joselito

Other Decks in Programming

Transcript

  1. Chrome Apps e NodeWebkit: traga seu webapp para o Desktop

    Joselito Júnior
 joselitojunior.com @joselitojunior1 #outubrorosa
  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
  3. Rabiscapp.net

  4. http://phonegapbootcamp.io

  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  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
  15. None
  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
  20. None
  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

  33. github.com/GoogleChrome/chrome-app-samples

  34. Node Webkit

  35. None
  36. V8 node.js contexto

  37. None
  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. {     "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
  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
  43. Testando ./node-­‐webkit  <dir>

  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
  49. github.com/rogerwang/node-webkit

  50. None
  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

  54. None
  55. Game Dev Tycoon http://www.greenheartgames.com/app/game-dev-tycoon/

  56. Koala App http://koala-app.com/

  57. Popcorn Time http://www.time4popcorn.eu

  58. Atom [Shell] http://atom.io

  59. Brackets [Shell] http://brackets.io

  60. Breach http://breach.cc/

  61. Obrigado! (: Dúvidas? Joselito Júnior
 joselitojunior.com @joselitojunior1 http://jfnj.me/chromeapps-devfestne