Tweet
Tweet

Slide 1

Slide 1 text

Chrome Apps e NodeWebkit: traga seu webapp para o Desktop Joselito Júnior
 joselitojunior.com @joselitojunior1 #outubrorosa

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Rabiscapp.net

Slide 4

Slide 4 text

http://phonegapbootcamp.io

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

JavaScript na web 2.0 bibliotecas (jquery) ajax websockets realtime

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

e Desktop?

Slide 17

Slide 17 text

e tem pra Desktop?

Slide 18

Slide 18 text

e por que Desktop?

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Chrome Apps

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

main.js chrome.app .onLaunch  .onRestarted

Slide 28

Slide 28 text

main.js chrome.app APIs exclusivas do Chrome

Slide 29

Slide 29 text

Testando

Slide 30

Slide 30 text

Testando

Slide 31

Slide 31 text

Testando

Slide 32

Slide 32 text

Compilando

Slide 33

Slide 33 text

github.com/GoogleChrome/chrome-app-samples

Slide 34

Slide 34 text

Node Webkit

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

V8 node.js contexto

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

node.js assíncrono
 módulos do npm usa a v8 engine performance

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

                       Modules  Example  (System  Info  and  File  I/O)              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

Slide 42

Slide 42 text

                       Modules  Example  (System  Info  and  File  I/O)              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

Slide 43

Slide 43 text

Testando ./node-­‐webkit  

Slide 44

Slide 44 text

Testando

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Mais testes

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

github.com/rogerwang/node-webkit

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

quem já usa?

Slide 53

Slide 53 text

Chrome Apps

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

Popcorn Time http://www.time4popcorn.eu

Slide 58

Slide 58 text

Atom [Shell] http://atom.io

Slide 59

Slide 59 text

Brackets [Shell] http://brackets.io

Slide 60

Slide 60 text

Breach http://breach.cc/

Slide 61

Slide 61 text

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