Electron: estrutura mínima de uma aplicação
Hoje venho trazer pra vocês um post bastante rápido, contendo a estrutura mínima para rodar uma aplicação com Electron.
Para quem não conhece, o Electron é uma tecnologia que permite criar aplicações desktop multi-plataforma (que rodam em Windows, Linux, Mac e alguns outros sistemas operacionais) utilizando apenas tecnologias web (HTML, CSS e JavaScript).
Este artigo pode te ajudar a criar a sua primeira aplicação em Electron de maneira bastante simples e vai te ajudar a entender o papel de cada arquivo dentro da estrutura da aplicação.
Muito importante: antes de começar, você precisa ter o Node.js instalado no seu sistema operacional. Os comandos do Node são executados no Terminal (ou prompt de comando, no Windows).
Estrutura mínima
Para montar a estrutra mínima, você precisa de apenas três arquivos: package.json, main.js e index.html.
Cada um desses arquivos tem responsabilidades únicas dentro da aplicação Electron e precisam ser estruturados corretamente.
package.json
Esse é o arquivo que o npm ou o electron irão procurar antes de iniciar o seu aplicativo.
O mínimo necessário a esse arquivo é a indicação do main, o arquivo que possui todas as rotinas iniciais da aplicação que você está desenvolvendo. É o arquivo descrito no próximo passo.
Para indicar ao Electron onde está o main, basta criar, em notação JSON, uma chave “main” apontando para o arquivo, dessa forma:
{
"main": "main.js"
}
main.js
Este é o arquivo que é executado quando sua aplicação inicia. Nele você tem acesso à API do Electron para poder criar janelas, menus, interagir com o sistema etc.
Separei um exemplo bastante básico que apenas importa as bibliotecas necessárias (app e BrowserWindow), cria uma janela e carrega o arquivo index.html.
Optei por inserir comentários junto ao código para explicar o que é feito em cada linha.
// Importa 'app' e 'BrowserWindow', de dentro do Electron, para variáveis com o mesmo nome
const {app,BrowserWindow} = require('electron');
// Cria uma variável janelaPrincipal e deixa ela na espera
let janelaPrincipal = null;
// Quando a aplicação estiver pronta para ser executada, chama essa função anônima
app.on('ready', () => {
// Cria na variável janelaPrincipal uma nova janela com 800x600
janelaPrincipal = new BrowserWindow({width:800, height:600});
// Carrega na nova janela criada o arquivo local chamado 'index.html'
janelaPrincipal.loadURL('file://' + __dirname + '/index.html');
});
index.html
Esse arquivo se chama index, mas poderia ter qualquer nome. Basta que você chame o arquivo correto no seu main.
O código também é bem simples. Apenas criei um HTML básico contendo um pequeno texto e tudo está pronto para ser executado.
<html>
<head>
<title>Exemplo Electron</title>
</head>
<body>
<h1>Fala, galera!</h1>
<p>Palestra do Rafa Jaques sobre Electron</p>
</body>
</html>
Depois que todos os arquivos estão prontos, já é possível rodar a sua aplicação.
Rodando a aplicação Electron
É possível fazer isso de várias formas. Acredito que a maneira mais prática seja por meio do npm (gerenciador de pacotes do Node, que foi instalado junto com ele).
Abra o terminal (ou cmd, se estiver no Windows) e navegue até o diretório onde está o seu projeto.
Rode os seguintes comandos:
$ npm install -g electron-prebuilt $ electron .
O primeiro comando instala o Electron globalmente na sua máquina, assim você pode executá-lo de qualquer lugar. Já o segundo, executa o Electron no diretório atual (.), o que fará com que ele procure pelo package.json.
Se tudo der certo, você deve ver uma tela como essa:
Isso quer dizer que o Electron está OK e sua aplicação já está rodando. Parabéns!
Considerações finais
Criar sua primeira aplicação com Electron é relativamente fácil. Você pode encontrar alguns exemplos de código Electron em um dos meus repositórios do GitHub: rafajaques/electron-exemplos.
Espero que o texto tenha ajudado a compreender melhor como o Electron funciona e como é possível começar a sua primeira aplicação. Em caso de dúvidas, fiquem à vontade para entrar em contato pelos comentários ou pelo Twitter (@rafajaques).
Um abraço a todos e fiquem com Deus.
Rafael jaques
