Executando primeira aplicação Electron

O que é Electron?

Electron é um framework de código aberto criado por Cheng Zhao, e agora desenvolvido pelo GitHub. Permite desenvolver aplicações para desktop com interface gráfica usando componentes frontend e backend originalmente criados para aplicações web: Node.js para o backend e Chromium para o frontend.

Estrutura de uma aplicação Electron

Um aplicativo Electron básico consiste em três arquivos: package.json (metadata), main.js (código) e index.html (ambiente gráfico com frontend) e o framework é fornecido pelo arquivo executável (electron.exe no Windows, electron.app no macOS e electron no Linux).

Se desejar adicionar ícones customizados podem renomear ou editar o arquivo executável.

O arquivo mais importante é o package.json. Nele mantém as informações sobre os pacotes. As informações mais comuns são:

• "name", nome da aplicação;
• "version", versão da aplicação;
• "main", nome do script principal da aplicação;

package.json é um arquivo npm.

Aplicações que usam Electron

Um número significativo de aplicativos desktop é construído com o Electron, dentre os quais:

• Atom
• GitHub Desktop
• Visual Studio Code
• Discord
• Entre outros

Criando primeira aplicação com Electron

Ps: Necessário instalar antes o Nodejs

Crie um diretório para a aplicação Electron, acesse esse diretório e execute npm init

$ mkdir -p electron/first-app
$ cd electron/first-app
$ npm init


O NPM guiará o arquivo package.json com base das perguntas solicitadas. O script especificado por main é onde inicializa o aplicativo.

package.json

{
  "name": "first-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "Reginaldo",
  "license": "MIT"
}

Instalar o Electron de forma global

$ sudo npm install -g electron

main.js

const { app, BrowserWindow } = require('electron')

function createWindow () {
// Create the browser window.
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: { nodeIntegration: true
}
})

// and load the index.html of the app.
win.loadFile('index.html')

// Open the DevTools.
//win.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})

app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.


Finalmente o arquivo index.html de exemplo

< !DOCTYPE html>
< html>
< head>
< meta charset="UTF-8">
< title>Hello World!

< meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
< /head>
< body>

Hello World!

We are using node , Chrome , and Electron .
< /body>
< /html>

Executar a aplicação Electron

$ npm start

Feito!