O Electron foi desenvolvido para permitir que o desenvolvimento de aplicações desktop usando JavaScript, HTML e CSS fosse muito mais fácil. Criado pela equipe do Github, ficou conhecido no começo como Atom Shell. O Electron foi criado usando tecnologias como o Node.js e o Chromium, e atualmente roda em ambiente de produção de vários projetos, como o próprio Atom editor e outros, como o Slack e o Visual Studio Code. Ele é um framework bem simples de trabalhar e de rápida configuração, para construção de pequenas e grandes aplicações desktop.
Para todos que queiram se aventurar mais, ou já conhecem o Electron, a documentação completa é traduzida para vários idiomas, inclusive o português. Para acessá-la é só clicar aqui.
Mãos à obra
Nesta Introdução iremos abordar os primeiros passos para começar a trabalhar com o Electron e desenvolver aplicações desktop.
Além do Node.js presente em sua máquina, é necessário que você também instale globalmente o pacote electron-prebuilt. Para isto, basta digitar o seguinte comando:
Entendendo a estrutura
A estrutura básica de arquivos que usaremos aqui é a seguinte:
Vamos falar um pouco de cada arquivo e pasta inseridos no exemplo acima:
app
É a pasta onde todos os arquivos referentes à aplicação são inseridos.
main.js
É o arquivo de inicialização da aplicação. Nele vão as configurações do tipo: tamanho da tela, posicionamento, manipular eventos do sistema, etc…
index.html
É a pagina HTML que será nossa view inicial para essa introdução.
app/package.json
O arquivo package.json que vai dentro da pasta app é o arquivo que leva todos as dependências que sua aplicação precisará para rodar. Sendo assim, qualquer pacote npm a ser usado diretamente por sua aplicação deverá ser instalado nesse package.
Gulpfile.js
Optei usar Gulp por escolha própria mesmo, mas fiquem livres para escolher seu “task runner” favorito.
package.json
O package.json que fica na raiz do seu projeto é responsável pelas configurações, dependências para seu ambiente de desenvolvimento. Tudo que for incluso neste arquivo não estará presente na build de produção da sua app.
Declarando as dependências
Após criar a estrutura de pastas que foi citada no tópico anterior. Iremos atribuir os mesmos valores para os atributos de ambos package.json presentes no projeto. Levando em consideração que "your-app" será o nome da sua aplicação.
Nota: Caso o campo main não tenha sido preenchido, o Electron automaticamente procurará pelo arquivo index.js. É importante que preencha este campo com o arquivo que usará na inicialização da aplicação.
Após feito isso, instale as dependências que utilizaremos nesta introdução, no arquivo package.json que se encontra diretamente na raiz do seu projeto.
Criando seu arquivo de inicialização
Depois de configurar as pastas e instalar as dependências da nossa aplicação, vamos abrir o nosso arquivo main.js . Nele vamos incluir todo o código de configuração:
Nota: a Função mainWindow.openDevTools é chamada apenas para iniciar o Inspetor de Elementos junto com a aplicação. Caso não precisem, fiquem à vontade para removê-la do seu projeto.
Primeira view
Finalmente a parte mais fácil. Note que em nosso arquivo main.js existe a seguinte função:
Ela será responsável por carregar o arquivo index.html. No exemplo a seguir, criei um exemplo bem simples de um arquivo HTML. Esta página que foi criada, tem os mesmos aspectos de uma janela aberta de um navegador. Ou seja, podemos carregar todos os arquivos CSS e JavaScript que utilizaremos normalmente. Veja:
Bem vindos à nossa introdução ao Electron