Desenvolvendo aplicações desktop com Electron

Published in

thdesenvolvedores

4 min readMar 13, 2017

Você que sempre desenvolveu sistemas para web e recentemente viu a necessidade de fazer um sistema para desktop (ou só por curiosidade, por que não?), talvez tenha pensado qual tecnologia você teria que aprender a usar. Tecnologias como C++, C#, VB.NET, JavaFX, talvez algo como Qt também… Apesar de todo conhecimento ser bem-vindo, o tempo pode não estar do seu lado ou você simplesmente prefere usar tecnologias que você já conhece para criar uma aplicação multiplataforma de forma rápida e sem dor de cabeça. Bom, nesse caso, o Electron pode ser seu novo brinquedo favorito.

O que é?

Electron, antes conhecido como Atom Shell, foi criado pelo GitHub (uma pequena startup, conhece?) e usado para desenvolver o Atom, seu editor de texto open source. Desenvolvido com Chromium e Node.js, ele é um framework utilizado para criar aplicações multiplataformas desktop com tecnologias web (mais especificamente HTML, JavaScript e CSS). Agora, imagine criar seu sistema com todas as facilidades do Bootstrap, jQuery, Angular.js, React, MDL, ou qualquer outra que quiser. Interessante, não? Então, se você sabe fazer um website, agora você sabe fazer uma aplicação desktop, parabéns!
Bom, talvez daqui a pouco, vamos lá.

Por que usar?

Multiplataforma, seu programa rodará em Windows, Mac e Linux;
Aplicações são desenvolvidas com HTML, JavaScript e CSS;
Open source, mantida pelo GitHub;
Updates automáticos para sua aplicação;
Envio automático de relatórios de erros dos usuários;
Menus e notificações nativas;
Instaladores para sua aplicação.

Quem usa?

Apesar de ter apenas dois anos, Electron já é utilizado no mercado por empresas de peso. Provavelmente, você inclusive já conhece alguma aplicação feita com ele. Alguns destaques são: Slack, Microsoft Visual Studio Code, WordPress e muitos outros.

Criando a aplicação

Esse artigo assume que você tem conhecimentos básicos em HTML, CSS, JavaScript, Node.js e npm. (Para quem quiser um rápido overview sobre Node.js, clique aqui.)

Como o melhor fica para o final, vamos ver como funciona tudo isso e criar algo simples. E não precisa de muito não, somente três arquivos. Primeiro vamos criar o arquivo que descreve nossa aplicação, o package.json, arquivo habitual para quem já usou npm.

package.json

Nele, escrevemos as características e dependências do seu projeto. Bem simples, não?
Além de nome, versão, arquivo principal e autor, é aqui que definimos as bibliotecas para serem usadas e baixadas no projeto (algo como o pom.xml em comparação com o Maven), scripts customizados, entre outros. Depois, vamos fazer a interface da nossa aplicação, e como eu disse antes, vamos usar simplesmente um HTML.

index.html

Agora vamos criar o arquivo JavaScript para controlar tudo isso.

main.js

O módulo app dispara um evento quando a aplicação está pronta para ser iniciada, então vamos usar um listener.

Para sermos breves, criamos apenas um arquivo. Mas em um sistema Electron real, são utilizados dois processos:

Main process: processo responsável por criar as janelas da aplicação e lidar com seus respectivos eventos. É a porta de entrada do sistema, ele executa o arquivo definido na propriedade main do package.json. No nosso exemplo, o main.js.
Renderer process: cada instância do BrowserWindow criada no main process (main.js), tem seu próprio processo independente. Ele apenas lida com a página que representa, ao contrário do main process, que gerencia todas as páginas e seus respectivos renderer processes.

Tem várias formas de comunicação entre janelas diferentes, como localStorage e sessionStorage, mas o Electron tem uma solução própria, os módulos ipc. Existe um item no FAQ sobre isso.

Rodando a aplicação

Se você chegou até aqui, provavelmente está ansioso para finalmente rodar seu programa. Felizmente, isso é muito fácil. Para instalar o Electron, não é necessário nada mais do que baixá-lo como pacote do npm.

$ npm install -g electron-prebuilt

Depois disso, é só ir para a pasta do seu projeto e executar:

$ electron main.js

Mas lembra do package.json que criamos? Lá definimos um script chamado start que faz justamente isso, então você pode simplesmente executar:

$ npm start

Porém, uma das formas recomendadas pelo Electron para executá-lo é colocando-o como dependência do seu projeto:

$ npm install --save-dev electron-prebuilt

Assim você pode desenvolver e executar sua aplicação em diferentes versões do Electron. Lembre-se, no entanto, que você precisará rodá-lo de dentro do seu projeto:

$ ./node_modules/.bin/electron main.js

Se tudo deu certo, você deve estar vendo uma janela como essa:

Conclusão

De forma simples e rápida, usando somente HTML e Javascript, construímos uma aplicação desktop. Claro que ainda teríamos trabalho pela frente, como por exemplo, a distribuição do sistema. Para saber mais sobre isso, veja aqui, no próprio site do Electron.

Além disso, a empresa disponibiliza uma aplicação com diversos demos de suas API. Nesse começo, é recomendado baixá-la e ver como são feitas várias das features do framework. Você pode fazer o download tanto pelo:

git

$ git clone https://github.com/electron/electron-api-demos

$ cd electron-api-demos

$ npm install

$ npm start

Quanto pelo pacote
https://github.com/electron/electron-api-demos/releases

Download do projeto

Para fazer o download do projeto feito neste artigo, clique aqui.