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

Transcript

1. Chrome Apps e NodeWebkit:
   traga seu webapp para o Desktop
   Joselito Júnior

   joselitojunior.com
   @joselitojunior1
   #outubrorosa
   

   View 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 Slide

3. Rabiscapp.net
   

   View Slide

4. http://phonegapbootcamp.io
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. View Slide

16. e Desktop?
    

    View Slide

17. e tem pra Desktop?
    

    View Slide

18. e por que Desktop?
    

    View Slide

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
    

    View Slide

20. View Slide

21. Chrome
    Apps
    

    View Slide

22. Conteúdo

    

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. main.js
    chrome.app
    .onLaunch  .onRestarted
    

    View Slide

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

    View Slide

29. Testando
    

    View Slide

30. Testando
    

    View Slide

31. Testando
    

    View Slide

32. Compilando
    

    View Slide

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

    View Slide

34. Node
    Webkit
    

    View Slide

35. View Slide

36. V8
    node.js
    contexto
    

    View Slide

37. View Slide

38. node.js
    assíncrono

    módulos do npm
    usa a v8 engine
    performance
    

    View Slide

39. Conteúdo

    

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

    View Slide

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
    

    View Slide

41.  
     
     
             
           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 Slide

42.  
     
     
             
           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 Slide

43. Testando
    ./node-­‐webkit  
    

    View Slide

44. Testando
    

    View Slide

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

    View Slide

46. Mais testes
    

    View Slide

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)
    

    View Slide

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

    View Slide

49. github.com/rogerwang/node-webkit
    

    View Slide

50. View Slide

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
    

    View Slide

52. quem já usa?
    

    View Slide

53. Chrome Apps
    

    View Slide

54. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

60. Breach
    http://breach.cc/
    

    View Slide

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

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

    View Slide