Tableless

Busca Menu

Introdução ao Electron

Seja o primeiro a comentar por

O que é o Electron

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:

npm install -g electron-prebuilt

Entendendo a estrutura

A estrutura básica de arquivos que usaremos aqui é a seguinte:

electron-app/
├── app 
    ├── assets
        └── css
            └── main.css
    ├── main.js
    ├── index.html
    └── package.json
├── Gulpfile.js
└── package.json

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.

{
  "name"    : "olamundo",
  "version" : "0.1.0",
  "main"    : "main.js"
}

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.

npm install --save-dev electron-prebuilt fs-jetpack asar rcedit Q

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:

var app = require('app');
var BrowserWindow = require('browser-window');

require('crash-reporter').start();

var mainWindow = null;

app.on('window-all-closed', function() {
  
  if (process.platform != 'darwin') {
    app.quit();
  }

});

app.on('ready', function() {
  
  mainWindow = new BrowserWindow({width: 800, height: 600});
  
  mainWindow.loadUrl('file://' + __dirname + '/index.html');
  
  mainWindow.openDevTools();
  
  mainWindow.on('closed', function() {
    
    mainWindow = null;
  });
}); 

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:

mainWindow.loadUrl('file://' + __dirname + '/index.html'); 

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:

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8" />
      <title>Olá Mundo</title>
      <link href="assets/css/main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
      <h1>Olá Mundo</h1>
      
      <p>Bem vindos à nossa introdução ao Electron</p>
    </body>
</html>

Rodando sua aplicação

electron-prebuilt

Se você instalou o electron-prebuilt global, Acesse a pasta app e rode o seguinte comando:

electron app

Caso tenha instalado apenas localmente, então, na pasta app de seu projeto, digite o seguinte comando:

"../node_modules/.bin/electron" "./app"

Automatizando

Como citei anteriormente, usaremos o Gulp para automatizar o run da nossa aplicação, facilitando assim a criação de testes e o próprio desenvolvimento da aplicação. Para isso, deixaremos nosso Gulpfile.js da seguinte maneira:

var gulp = require('gulp'),
  childProcess = require('child_process'),
  electron = require('electron-prebuilt');
  
gulp.task('run', function () {
  childProcess.spawn(electron, ['./app'], { stdio: 'inherit' });
});

Feito isso basta rodar o seguinte comando em seu terminal:

gulp run

Criando uma distribuição

Depois de terminado todo o processo de desenvolvimento, você pode criar uma distribuição do seu app seguindo as instruções do Application Distribution guide.

Pronto! Você está pronto(a) para desenvolver aplicações Desktop com o Electron.

E caso queiram, o projeto está disponível no Github.

Publicado no dia