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

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

joseli.to
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

joseli.to

October 18, 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
    #outubrorosa

    View full-size slide

  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

    View full-size slide

  3. Rabiscapp.net

    View full-size slide

  4. http://phonegapbootcamp.io

    View full-size slide

  5. JavaScript de várzea
    botões rollover
    joguinhos dhtml
    alerts irritantes
    anuncios com refresh

    View full-size slide

  6. JavaScript na web 2.0
    bibliotecas (jquery)
    ajax
    websockets
    realtime

    View full-size slide

  7. JavaScript hoje
    node.js e npm
    angularjs, blackbone, ember
    mobile apps

    View full-size slide

  8. JavaScript hoje
    node.js e npm
    angularjs, blackbone, ember
    mobile apps
    desktop apps

    View full-size slide

  9. e tem pra Desktop?

    View full-size slide

  10. e por que Desktop?

    View full-size slide

  11. 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

    View full-size slide

  12. Conteúdo


    index.html
    script.js
    style.css
    troll_face.jpg
    manifest.json
    background.html
    main.js
    Estrutura

    View full-size slide

  13. 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"]  
           }  
       }  
    }  

    View full-size slide

  14. 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"  
           }  
       }  
    }

    View full-size slide

  15. 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)  
           }  
       });  
    });

    View full-size slide

  16. 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)  
           }  
       });  
    });

    View full-size slide

  17. main.js
    chrome.app
    .onLaunch  .onRestarted

    View full-size slide

  18. main.js
    chrome.app
    APIs exclusivas do Chrome

    View full-size slide

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

    View full-size slide

  20. V8
    node.js
    contexto

    View full-size slide

  21. node.js
    assíncrono

    módulos do npm
    usa a v8 engine
    performance

    View full-size slide

  22. Conteúdo


    index.html
    script.js
    style.css
    tacalhepau.mp4
    package.json
    Estrutura

    View full-size slide

  23. {  
      "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

    View full-size slide

  24.  
     
     
             
           Modules  Example  (System  Info  and  File  I/O)  
         <br/>      var  os  =  require('os');  <br/>                var  fs  =  require('fs');  <br/>    <br/>                var  content  =  '';  <br/>    <br/>                content  +=  '[Platform]'  +  os.EOL;  <br/>                content  +=  'OS  Type                :  '  +  os.platform()  +  os.EOL;  //  <br/>linux,  darwin,  win32,  sunos,  freebsd  <br/>                content  +=  'OS  Version          :  '  +  os.release()    +  os.EOL;  <br/>                content  +=  'OS  Architecture:  '  +  os.arch()          +  os.EOL;  <br/>                content  +=  os.EOL;  <br/>…<br/>Módulos node<br/>

    View full-size slide

  25.  
     
     
             
           Modules  Example  (System  Info  and  File  I/O)  
         <br/>      var  os  =  require('os');  <br/>                var  fs  =  require('fs');  <br/>    <br/>                var  content  =  '';  <br/>    <br/>                content  +=  '[Platform]'  +  os.EOL;  <br/>                content  +=  'OS  Type                :  '  +  os.platform()  +  os.EOL;  //  <br/>linux,  darwin,  win32,  sunos,  freebsd  <br/>                content  +=  'OS  Version          :  '  +  os.release()    +  os.EOL;  <br/>                content  +=  'OS  Architecture:  '  +  os.arch()          +  os.EOL;  <br/>                content  +=  os.EOL;  <br/>…<br/>Módulos node<br/>

    View full-size slide

  26. Testando
    ./node-­‐webkit  

    View full-size slide

  27. 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()  {}  
    }));

    View full-size slide

  28. Resumindo
    módulos do npm
    native gui library
    shell functions
    snapshot do V8
    runtime nativo
    early-apis do html5
    apis exclusivas (frameless, clipboard(!), webrtc)

    View full-size slide

  29. Compilando
    copy  /b  nw.exe+app.nw  >  app.exe
    cp  app.nw  nw/Contents/Resources
    cat  nw  app.nw  >  app

    View full-size slide

  30. github.com/rogerwang/node-webkit

    View full-size slide

  31. 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

    View full-size slide

  32. quem já usa?

    View full-size slide

  33. Game Dev Tycoon
    http://www.greenheartgames.com/app/game-dev-tycoon/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. Breach
    http://breach.cc/

    View full-size slide

  39. Obrigado! (:
    Dúvidas?
    Joselito Júnior

    joselitojunior.com
    @joselitojunior1
    http://jfnj.me/chromeapps-devfestne

    View full-size slide