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

Primeiros passos com Electron

Primeiros passos com Electron

5f51f5e3a3eaf72c461f8eef73be8a13?s=128

Raphael Porto

November 23, 2015
Tweet

More Decks by Raphael Porto

Other Decks in Programming

Transcript

  1. Electron JS Primeiros passos

  2. Quem sou? Raphael Porto @raphaelpor Cofundador da Desenvolvedor na Concrete

    solutions Lithium
  3. O que é o Electron? Framework para criar aplicações desktop,

    usando tecnologias web como HTML, CSS e JavaScript.
  4. Quem criou? GitHub

  5. Para quê? Por isso, também é conhecido como Atom Shell

    Atom Editor
  6. Do que é feito? io.js + Chromium

  7. Quem usa?

  8. Instalação npm install ‐g electron‐prebuild

  9. Estrutura do Projeto electron­testapp/ ├── package.json ├── main.js └── index.html

  10. package.json { "name" : "electron­testapp" "version" : "0.1.0", "main" :

    "main.js" }
  11. index.html <!DOCTYPE html> <html> <head> <meta charset="utf­8"> <title>Olá Mundo!</title> </head>

    <body> <h1>Olá mundo!</h1> <small> io.js <script> </script> <br> Electron v<script> </script> <br> <script> </script> </small> </body> </html> document.write(process.version) document.write(process.versions['electron']) document.write(process.platform)
  12. main.js var app = require('app'); var BrowserWindow = require('browser­window'); require('crash­reporter').start();

    var mainWindow = null; app.on('window­all­closed', function() { if (process.platform != 'darwin') { app.quit(); } }); app.on('ready', function() { mainWindow = new BrowserWindow({width: 800, height: 600}); mainWindow.loadUrl('file://' + __dirname + '/index.html'); mainWindow.on('closed', function() { mainWindow = null; }); });
  13. None
  14. Acesse o código https://github.com/raphaelpor/electron-CS

  15. Conheça mais - Electron Adventures - Awesome Electron - Electron

    website