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!

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

Deixe uma resposta

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