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!
