O Electron é uma estrutura de desenvolvimento que permite a criação de aplicações desktop multiplataforma usando tecnologias web como HTML, CSS e JavaScript. Neste guia, exploraremos os fundamentos do desenvolvimento de aplicações desktop com Electron.
1. Instalação do Electron:
Antes de começar, certifique-se de ter o Node.js instalado. Em seguida, instale o Electron globalmente usando o npm:
npm install -g electron
2. Estrutura do Projeto:
Crie um diretório para o seu projeto e navegue até ele:
mkdir MinhaAppElectron
cd MinhaAppElectron
Em seguida, inicie um novo projeto Node.js:
npm init -y
3. Instalação do Electron como Dependência de Desenvolvimento:
Instale o Electron como uma dependência de desenvolvimento:
npm install electron --save-dev
4. Arquivo Principal e Configuração:
Crie um arquivo chamado main.js na raiz do seu projeto. Este será o ponto de entrada principal para a sua aplicação Electron.
// main.js
const { app, BrowserWindow } = require('electron');
let mainWindow;
function criarJanela() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
mainWindow.loadFile('index.html');
mainWindow.on('closed', function () {
mainWindow = null;
});
}
app.on('ready', criarJanela);
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit();
});
app.on('activate', function () {
if (mainWindow === null) criarJanela();
});
5. Estrutura da Página HTML:
Crie um arquivo index.html na mesma pasta do main.js:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minha App Electron</title>
</head>
<body>
<h1>Olá, Electron!</h1>
</body>
</html>
6. Executando a Aplicação:
No arquivo package.json, adicione um script de inicialização:
{
"scripts": {
"start": "electron main.js"
}
}
Agora, você pode iniciar sua aplicação usando:
npm start
7. Empacotamento da Aplicação:
Para distribuir sua aplicação, você pode usar ferramentas de empacotamento como electron-builder ou electron-packager. Estas ferramentas permitem criar executáveis para diferentes sistemas operacionais.
Conclusão:
O Electron oferece uma abordagem eficiente para o desenvolvimento de aplicações desktop usando tecnologias web familiares. Com sua capacidade de criar aplicativos multiplataforma, o Electron se tornou uma escolha popular para desenvolvedores que desejam estender suas habilidades web para o ambiente desktop. Este guia fornece uma introdução básica, mas há muitos recursos e bibliotecas disponíveis para criar aplicações desktop robustas e interativas com Electron. Explore a documentação oficial e a comunidade para aprofundar seus conhecimentos e expandir suas habilidades.