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

Chrome Apps e NodeWebkit: Traga seu WebApp para...

Chrome Apps e NodeWebkit: Traga seu WebApp para o Desktop

Palestra no Palco Galileu da #CPRecife3

joseli.to

July 25, 2014
Tweet

More Decks by joseli.to

Other Decks in Programming

Transcript

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

    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, co-fundador do GDG Recife, instrutor e palestrante, design thinker, entusiasta do html5, fã de formula 1
  3. • Acabou de nascer • Comunidade endorsada pelo Google •

    Busca discutir e aprender tecnologias Google • Pessoas que gostam, usam, desenvolvem com tecnologias Google • Curtam experimentar e criar! gdgrecife.com
  4. 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
  5. 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"]          }      }   }  
  6. 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"          }      }   }
  7. 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)          }      });   });
  8. 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)          }      });   });
  9. {     "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
  10. <!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
  11. <!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
  12. 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:  'Galileu',   click:  function()  {      var  element  =  document.createElement('div');      element.appendChild(document.createTextNode('Teste'));      document.body.appendChild(element);   }   }));
  13. Resumindo módulos do npm native gui library shell functions snapshot

    do V8 runtime nativo early-apis do html5 apis exclusivas (frameless, clipboard(!), webrtc)
  14. 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