Electron: Crie aplicativos Desktop com as tecnologias da Web

Introdução - Apresentação

Introdução - Introdução ao Electron

O que é o Electron ?

O Electron é um framework para criação de aplicações nativas para Desktop que utiliza as tecnologias Web, como o Javascript, HTML e CSS. O Electron traz diversas funções e facilidades para que você não se preocupe com as partes difíceis de interagir com o sistema operacional e permite que você foque na construção da sua aplicação!

Ele foi desenvolvido pela equipe do GitHub, pois eles queriam criar um editor de textos próprio utilizando as tecnologias da Web, que é o Atom. Mas apesar de ter um grande apoio da equipe de desenvolvedores do GitHub, ele é um projeto opensource que recebe commits de diversos desenvolvedores de todo o mundo.

Para trabalhar com as tecnologias Web o Electron utiliza por debaixo dos panos o navegador Chromium, que é o projeto Open Source em que o Google Chrome se baseia, e também usa o NodeJS como plataforma para dar acesso a todo o ecossistemas de pacotes e API's ao desenvolvedor.

Aplicativos Desktop

Apesar de hoje em dia a Web ser dominante, você e qualquer usuário comum do computador ainda passa muito tempo em aplicativos Desktop. Com toda certeza você depende de um editor de textos ou uma IDE para desenvolver seus projetos, utiliza players de música ou vídeo, ou até clientes Desktop de plataformas Web que facilitam sua vida, como é o caso da aplicação Desktop do Spotify ou do Slack.

Mesmo que para tudo citado acima a sua versão em uma página Web, as aplicações Desktop trazem vantagens de poderem interagir diretamente com o sistema operacional, ou seja podemos trocar para as aplicações utilizando ALT/CMD+TAB, podemos utilizar as notificações nativas de cada sistema, acessar o sistema de arquivos, verificar o status da rede, status da bateria/energia em casos de notebooks e utilizar atalhos globais específicos de sua aplicação. Todas essas vantagens de usabilidade trazem excelentes benefícios para o usuário quando criamos um aplicativo Desktop Nativo.

Mas por quê utilizar tecnologias Web ?

Vimos as vantagens de ter uma aplicativo Desktop, mas por que escolher tecnologias Web para criação de um é uma boa escolha? Se você parar para pensar, na maioria das empresas é bastante fácil encontrar um desenvolvedor que dominem HTML, CSS e Javascript, agora ter desenvolvedores que dominem Objective C ou Swift para desenvolver para o MacOS, C# para Windows e mais alguma específica para os sistemas Linux é bastante raro.

O fato das tecnologias Web serem mais populares e terem bastante desenvolvedores hoje em dia faz com que encontrar a mão de obra seja mais fácil, e com a ajuda do Electron conseguimos utilizar estas tecnologias para desenvolver App's Nativos para os três grandes sistemas operacionais.

Introdução - Baixando e configurando o Electron

Pré-Requisitos

Para dar ínicio ao nosso projeto com o Electron precisamos antes garantir que temos todos os pré requisitos para construir nossa aplicação. Como vimos, o Electron depende do NodeJs para funcionar, então precisamos ter o Node em nossa máquina, pelo menos na versão 6.10.

Se você ainda não tem o NodeJs instalado, basta seguir o exercício de instalação do mesmo.

Se você já tem o NodeJs instalado, você consegue ver a versão do mesmo utilizando o comando:

node -v

em seu terminal.

Também precisaremos de um editor de textos, e já que o tema deste curso é o Electron, nada mais justo do que utilizar um editor de textos que foi feito com essa tecnologia, por isto neste curso o editor escolhido é o Atom.

Começando o projeto: Instalando as dependências

Crie uma pasta chamada alura-timer que será a pasta responsável por conter nossa aplicação e lá dentro vamos começar o processo de importar as dependências com o NodeJs.

Como todo bom projeto em NodeJs, precisamos primeiro iniciá-lo com o comando:

npm init

Responda as questões com um simples ENTER e o comando criará o arquivo package.json para nós.

Com o package.json criado podemos começar a importar as nossas dependências e obviamente a principal delas é o próprio Electron. Use o comando abaixo para instalar o Electron:

npm install electron@1.6.1 --save

Você verá que agora o Electron aparece como uma dependencies em seu package.json.

Utilizando o Electron

Como o Electron foi instalado como um módulo do Node podemos executá-lo de um modo fácil pelo terminal, basta adicionar um novo script no package.json para isto.

Em seu package.json, no campo scripts adicione:

//Restante do `package.json`
...
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "electron ."
},
...

Se você tentar rodar o comando npm start neste você receberá um erro dizendo:

Isto acontece por que ainda não criamos um arquivo que será o ponto de partida de nossa aplicação. Crie um arquivo chamado main.js na raiz de seu projeto e altere o seu package.json para que a entrada "main" aponte para o arquivo recém criado:

//Restante do `package.json`
...
  "main": "main.js",
 ...

Agora execute novamente o comando npm start e veja que o terminal ficará travado:

Isso significa que o Electron conseguiu achar nosso arquivo main.js e executou-o com sucesso, porém como ele não tem nada dentro dele, o terminal nada exibe.

Altere o main.js e coloque uma pequena mensagem de Olá Mundo:

//main.js
console.log("Olá Mundo");

E execute novamente o npm start:

Veja que agora nossa mensagem é exibida. O setup inicial está completo, agora vamos mergulhar de cabeça em tudo que o Electron pode nos oferecer!

Sobre o curso Electron: Crie aplicativos Desktop com as tecnologias da Web

O curso Electron: Crie aplicativos Desktop com as tecnologias da Web possui 297 minutos de vídeos, em um total de 102 atividades. Gostou? Conheça nossos outros cursos de Frameworks MVC em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Introdução:
• Comunicação entre processos e janelas
• Implementando o nosso Timer
• Salvando os dados do curso
• Adicionando a aplicação ao Tray
• Adicionando novos dados
• Criando o Menu
• Adicionado Atalhos na aplicação
• Distribuição para os três Sistemas Operacionais