Boa tarde!
Claro, vamos falar sobre o Electron JS e criar um passo a passo para desenvolver sua primeira
aplicação. O Electron JS é uma framework usada para construir aplicações desktop multiplataforma com
tecnologias web como JavaScript, HTML e CSS, utilizando [Link] no backend e Chromium para
renderização no frontend.
O que você vai aprender:
1. O que é Electron JS.
2. Como instalar Electron.
3. Estrutura básica de um projeto Electron.
4. Como criar sua primeira aplicação.
5. Executar e empacotar a aplicação.
Pré-requisitos:
Conhecimentos básicos em JavaScript, HTML e [Link].
Ter o [Link] instalado. Você pode verificar isso executando node -v no terminal.
Passo a passo para começar com Electron
1. O que é Electron JS?
O Electron JS permite criar aplicações de desktop utilizando o ecossistema de desenvolvimento web. A
mesma aplicação que você desenvolve pode rodar no Windows, macOS e Linux.
2. Instalando o Electron
1. Inicie um projeto [Link]:
Abra o terminal e crie um diretório para o projeto:
mkdir meu-projeto-electron
cd meu-projeto-electron
Agora inicialize o npm para criar um arquivo [Link]:
npm init -y
2. Instale o Electron:
No diretório do projeto, instale o Electron como dependência de desenvolvimento:
npm install electron --save-dev
PROFESSOR MARCO ANTONIO UNIVERSIDADE CRUZEIRO DO SUL
✦1/4✦
3. Estrutura básica de um projeto Electron
Seu projeto deve ter pelo menos três arquivos:
[Link] – arquivo de configuração do projeto.
[Link] – arquivo JavaScript que inicia a aplicação Electron.
[Link] – arquivo HTML que será a interface gráfica da aplicação.
1. Atualize o [Link]:
O [Link] já deve existir. Edite-o para definir o ponto de entrada da sua aplicação como
[Link]:
{
"name": "meu-projeto-electron",
"version": "1.0.0",
"main": "[Link]",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^latest"
}
}
2. Crie o arquivo [Link]:
O arquivo [Link] será o ponto de partida da aplicação. Ele cria uma janela (window) e carrega o
arquivo [Link]. Crie o arquivo [Link] com o seguinte código:
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow() {
// Cria uma janela de navegador
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: [Link](__dirname, '[Link]')
}
});
// Carrega o arquivo [Link]
[Link]('[Link]');
}
// Executa esta função quando o Electron terminar de inicializar
[Link]().then(() => {
createWindow();
PROFESSOR MARCO ANTONIO UNIVERSIDADE CRUZEIRO DO SUL
✦2/4✦
[Link]('activate', () => {
if ([Link]().length === 0) createWindow();
});
});
// Encerra o aplicativo quando todas as janelas estiverem fechadas
[Link]('window-all-closed', () => {
if ([Link] !== 'darwin') [Link]();
});
3. Crie o arquivo [Link]:
Crie o arquivo [Link], que será carregado na janela criada no [Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu App Electron</title>
</head>
<body>
<h1>Olá, mundo!</h1>
<p>Minha primeira aplicação Electron.</p>
</body>
</html>
4. (Opcional) Crie o arquivo [Link]:
Esse arquivo é usado para isolar contextos entre [Link] e o frontend (opcional, mas
recomendado):
[Link]('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = [Link](selector);
if (element) [Link] = text;
};
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, [Link][dependency]);
}
});
4. Executando sua aplicação
Agora que tudo está configurado, você pode iniciar sua aplicação.
PROFESSOR MARCO ANTONIO UNIVERSIDADE CRUZEIRO DO SUL
✦3/4✦
1. No terminal, execute o comando abaixo:
npm start
2. A janela da sua aplicação Electron aparecerá com o conteúdo do arquivo [Link].
5. Empacotando sua aplicação
Para distribuir sua aplicação como um executável, você pode usar o pacote Electron Packager ou
Electron Builder. Aqui, vamos usar o Electron Packager.
1. Instale o Electron Packager:
npm install electron-packager --save-dev
2. Crie o executável:
Execute o seguinte comando para empacotar a aplicação para sua plataforma:
npx electron-packager . meu-app --platform=win32 --arch=x64 --overwrite
Esse comando cria um diretório com um executável para Windows (use darwin para macOS ou
linux para Linux).
Próximos Passos
Customizar o frontend: Adicione CSS e JavaScript ao [Link].
Integração com [Link]: Adicione funcionalidades de backend ao [Link].
Distribuição multiplataforma: Gere pacotes para diferentes sistemas operacionais.
Com esse tutorial, você conseguiu criar sua primeira aplicação desktop com Electron JS. Se precisar de
mais detalhes ou exemplos avançados, é só me avisar!
PROFESSOR MARCO ANTONIO UNIVERSIDADE CRUZEIRO DO SUL
✦4/4✦