Electron

Desenvolvendo aplicações desktop
com Electron
Guilherme Santos Follow
Mar 13, 2017 · 4 min read
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 especi camente
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 noti caçõ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 ca para o nal, 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
1 {
2 "name": "electron-hello-world",
3 "version": "0.1.0",
4 "main": "main.js",
5 "author": "telles",
6 "scripts": {
7 "start": "electron main.js"
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 de nimos
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
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>TH Desenvolvedores</title>
6 <style>
7 /* CSS básico */
8 body {
9 background-color: #1a75ff;
10 font-family: sans-serif;
11 color: white;
12 }
13 </style>
14 </head>
15 <body>
Agora vamos criar o arquivo JavaScript para controlar tudo isso.
main.js
1 const electron = require('electron');

2
3 // Módulo utilizado para controlar o ciclo de vida da
4 const app = electron.app;
5
6 // Módulo para criar uma janela nativa do seu sistema
7 const BrowserWindow = electron.BrowserWindow;
8
O módulo app dispara um evento quando a aplicação está pronta para

ser iniciada, então vamos usar um listener.
1 app.on('ready', function() {
2
3 // Uma das opções que é possível definir ao criar
4 mainWindow = new BrowserWindow({width: 800, height
5
6 // Depois apontamos a janela para o HTML que criam
7 mainWindow.loadURL('file://' + __dirname + '/index
8
9 // Escutamos para quando a janela for fechada
10 mainWindow.on('closed', function() {
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 de nido 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 nalmente
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á de nimos 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.
Links
Links relacionados interessantes que irão te ajudar nesse começo:
• Site o cial
• Documentação o cial
• FAQ — Importante!
• Comunidade do Electron — Ótimo lugar para tirar dúvidas.
• Community e Awesome Electron — Lugares perfeitos para

aprender mais sobre Electron. Possuem aplicações inteiras, demos,
ferramentas, vídeos e etc.
• Devtron — Extensão do DevTools para Electron, com diversas

funcionalidades.
• Spectron — Framework de testes para o Electron.
Gostou? Não se esqueça de Recomendar e Compartilhar!

Electron

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Electron

Uploaded by

Copyright:

Available Formats

Desenvolvendo aplicações desktop

Você que sempre desenvolveu sistemas para web e recentemente viu a

Por que usar?

• 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 noti cações nativas;

• Instaladores para sua aplicação.

Nele, escrevemos as características e dependências do seu projeto. Bem

Agora vamos criar o arquivo JavaScript para controlar tudo isso.

1 const electron = require('electron');

O módulo app dispara um evento quando a aplicação está pronta para

Para sermos breves, criamos apenas um arquivo. Mas em um sistema

• Main process: processo responsável por criar as janelas da

• Renderer process: cada instância do BrowserWindow criada no

Tem várias formas de comunicação entre janelas diferentes, como

$ npm install -g electron-prebuilt

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

Mas lembra do package.json que criamos? Lá de nimos um script

Porém, uma das formas recomendadas pelo Electron para executá-lo é

$ npm install --save-dev electron-prebuilt

Assim você pode desenvolver e executar sua aplicação em diferentes

Além disso, a empresa disponibiliza uma aplicação com diversos demos

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

Quanto pelo pacote

• Comunidade do Electron — Ótimo lugar para tirar dúvidas.

• Community e Awesome Electron — Lugares perfeitos para

• Devtron — Extensão do DevTools para Electron, com diversas

• Spectron — Framework de testes para o Electron.

Gostou? Não se esqueça de Recomendar e Compartilhar!

You might also like