Electron (anteriormente conhecido como Atom Shell) é uma estrutura de software gratuita e de código aberto desenvolvida e mantida pela OpenJS Foundation.
O framework é projetado para criar aplicações desktop usando tecnologias web (principalmente HTML, CSS e JavaScript ,embora outras tecnologias como frameworks front-end e WebAssembly sejam possíveis) que são renderizadas usando uma versão do motor do navegador Chromium e um back-end usando o ambiente de execução Node.js.
Ele também usa várias APIs para habilitar funcionalidades como integração nativa com serviços Node.js e um módulo de comunicação entre processos .
Electron foi originalmente construído para Atom e é a principal estrutura GUI por trás de vários projetos de código aberto, incluindo Atom, GitHub Desktop, Light Table, Visual Studio Code, WordPress Desktop e Eclipse Theia.
Dependências
Faça download direto do site dos links abaixo ou use o gerenciador de pacotes do seu sistema operacional.
Exemplo de instalação das dependências no Ubuntu:
sudo apt install nodejs npmCriando uma Janela básica
Vamos criar um exemplo mais básico possível!
01. Crie uma pasta e entre na mesma:
mkdir myapp
cd myapp02. Crie um arquivo de nome: package.json:
E insira o conteúdo abaixo:
{
"name": "Meu Primeiro Projeto Electron",
"version": "1.0.0",
"description": "Um exemplo básico de uso!",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "Marcos Oliveira",
"license": "GNU GPLv3"
}Essa etapa pode ser substituída pelo comando:
npm initcom edições conforme você desejar!
03. Instale o Electron para ser adicionado ao seu projeto:
npm install --save-dev electronNote que seu
package.jsonfoi alterado e adicionado suporte ao Electron!
04. Crie um arquivo de nome: index.html
E insira o conteúdo abaixo dentro do arquivo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Meu Primeiro Projeto com Electron</title>
</head>
<body>
<h1>Meu Primeiro Projeto com Electron</h1>
<h2>Nós estamos usando as tecnologias(e versões):</h2>
<ul>
<li>Node.js: <span id="node-version"></span></li>
<li>Chromium: <span id="chrome-version"></span></li>
<li>Electron: <span id="electron-version"></span></li>
</ul>
</body>
</html>05. Crie um arquivo de nome: main.js
E insira o conteúdo abaixo dentro do arquivo:
No exemplo abaixo é criada uma janela com resolução de 1280x720.
const { app, BrowserWindow } = require('electron')
const path = require('node:path')
function createWindow () {
const win = new BrowserWindow({
width: 1280,
height: 720,
autoHideMenuBar: true, // Esconde a Barra de Menu: File, ...
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})06. Crie o arquivo preload.js
E insira o conteúdo abaixo dentro do arquivo:
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})07. Agora é só rodar o projeto
Quando abrir a janela você pode até acessar o console com: Ctrl + Shift + i.
npm startExemplo do App que criamos rodando na imagem abaixo:
Clique na imagem para ver em uma resolução maior!
Para mais informações acesse:
