Introdução ao Electron – faça aplicativos desktop com HTML, JS e CSS!!

Fala pessoal, hoje vou falar um pouco sobre o Electron , mas neste caso não é a partícula de carga negativa que fica girando ao redor do núcleo atômico, mas sim de um framework que possibilita criar aplicativos desktop para os três grandes  sistemas operacionais (MacOs, Linux e Windows)  com o uso de HTML, CSS e Javascript, com isso você pode ter uma alternativa ao WPF e Windows Forms do .NET, ao JavaFX e o Swing do mundo Java.

desconectadoUma das maiores vantagens ao meu ver no uso do Electron é poder trabalhar desconetado, ou seja desenvolva seu aplicativo “Offline First” porque sempre temos que levar em conta que seu usuário não está constantemente on-line.

O Electron foi desenvolvido pelo pessoal do GitHub, mas trata-se de um projeto open-source então você pode contribuir para o projeto também.

Ele trabalha com o Chronium que é o projeto em que o Google Chrome se baseia e também usa o NodeJs para dar ao desenvolvedor Apis para o desenvolvimento.

tela13

A vantagem deste framework é unir todos os benefícios de uma aplicação desktop com a facilidade de desenvolvimento web, ou seja você pode utilizar todo seu conhecimento em HTML, CSS e Javascript para desenvolver aplicativos desktop, usar frameworks javascript como o Angular ou o Vue e com o NodeJs através de suas API’s vc pode consumir serviços ou até mesmo utilizar diretamente um banco de dados sem necessitar de uma linguagem server-side como C# ou Java.

Para maiores informações acesse o site do projeto, aproveite para verificar quais são os projetos e empresas que utilizam essa tecnologia, leia a documentação e veja os exemplos que lá se encontram.

Vou tentar demonstrar uma aplicação bem simples, somente para exemplificar e estimular a você leitor a começar seus estudos como estou fazendo. Vamos lá então.

Primeiro você precisa ter o ambiente do NodeJs instalado e funcionando em sua maquina, para verificar se o NodeJs está ok digite no terminal (estou usando o mac, mas todas as operações podem ser realizadas no windows sem problemas usando o Command Prompt):

node -v

se estiver ok vc deverá ver uma tela igual a esta:

tela1

Caso contrário, você terá que instalar o NodeJs, para isso acesse o link do projeto e faça a instalação, caso tenha problemas me mande um email ou entre em contato que ajudo com prazer, não vou explicar essa instalação aqui porque senão o artigo vai ficar enorme e vamos fugir do assunto em questão.

Depois de instalar o NodeJs, crie uma pasta em seu computador chamada electron-teste que será responsável por conter a nossa aplicação de exemplo.

Abra um terminal e entre na pasta criada, digite o comando:

npm init

Este comando irá criar na sua pasta o arquivo package.json é neste arquivo que serão listados os detalhes e as dependências do aplicativo.

Para editar os arquivos estou utilizando o Visual Studio Code que pode ser baixado neste link. Inclusive o próprio Visual Studio Code foi feito em Electron para se ter idéia do poder da ferramenta!

Fique a vontade para utilizar o editor de sua preferência.

Instalação do arquivo package.json:

tela2Quando efetuar essa instalação o npm vai emitir várias perguntas como o nome da aplicação, a versão, descrição, etc, basta ir dando o enter e deixe tudo com o valor default.

Depois de finalizar, veja o arquivo gerado no Visual Studio Code:

tela3

Agora vamos instalar o Electron, para isso retorne ao terminal e digite o comando:

npm install electron@1.4.15 –save

tela4

Depois de terminar o comando volte ao Visual Studio Code e veremos que o arquivo package.json foi alterado inserindo as dependências do electron:

tela5

Estamos prontos para começar o desenvolvimento agora, crie um arquivo chamado main.js na raiz da pasta electron-teste com o seguinte bloco de código:

tela6

Este é o arquivo principal do seu aplicativo, nele vai ser determinado as ações quando o aplicativo iniciar, quando finalizar, etc.

Agora crie uma pasta chamada app dentro da pasta electron-teste com a seguinte estrutura:

tela7

Na raiz da pasta app crie o arquivo index.html:

tela8

Na raiz da pasta css crie um arquivo de estilos com o nome de index.css com a seguinte estrutura:

tela9

Na raiz da pasta js crie um arquivo com o nome render.js com a seguinte estrutura:

tela10
Com toda a estrutura pronta vamos rodar o aplicativo, volte ao terminal e digite o seguinte comando:
npm start

Se tudo correu bem vc verá seu primeiro aplicativo escrito em Electron:

tela11

Quando clicar no botão deverá receber a mensagem do alerta:

tela12

Agora basta desenvolver seu aplicativo em HTML, CSS e Javascript e ter no final um software Cross Platform, e ainda poder utilizar menus nativos e notificações do sistema operacional.

No decorrer dos meus estudos vou publicando mais artigos por aqui.

Fui!! e se ajudou comenta ae!

3 Comments on “Introdução ao Electron – faça aplicativos desktop com HTML, JS e CSS!!”

  1. Alguma indicação de um curso atual?
    Não encontro mtos cursos para a ferramenta. Será que a ferramenta eata sendo bem aceita no mercado? E quanto desenvolver softwares comerciais. É viavel?

    1. Oi Marcela
      Não acho que exista um curso focado em Electron, neste momento estou um pouco por fora como anda essa tecnologia. Digo a vc hoje que para desenvolver algo
      comercial nessa linha de aplicativo desktop eu ainda optaria por utilizar WPF (Windows Presentation Fundation) ou até mesmo um aplicativo windows form com algum
      framework para auxiliar na parte visual como o BUNIFU. E ainda utilizar alguma
      tecnologia de atualização como o ClickOnce para atualizar e versionar seus aplicativos desktop. Pode também mesclar isso com um backend de serviços para facilitar.
      Preciso revisitar o Electron para ver como anda hoje em dia.

      Bom fica ae minha opinião! desculpe a demora para responder mas antes tarde do que nunca

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *