Uma Rápida Introdução ao Electron
Definição
Anteriormente chamado de Atom Shell, desenvolvido pelo GitHub, Electron é um framework para criação de aplicações multiplataforma (Mac, Window e Linux) utilizando tecnologias web.
Electron utiliza nativamente o Node.js e o navegador Chromium para renderizar os elementos HTML e CSS em tela e a interpretação de seus códigos é em JavaScript.
Vale a pena destacar algumas aplicações construídas utilizando esse framework, entre elas estão: o software de bate-papo Slack e o editor de texto Atom.
Primeiros Passos
Pré-requisitos
Para prosseguir precisamos ter previamente instalados na máquina:
- Git (Sistema de controle de versão)
- Node.js, e seu gerenciador de pacotes Npm (que é instalado automaticamente ao instalar o Node.js).
Executando Alguns Exemplos
Quick Start
Clone o repositório do projeto electron-quick-start com o seguinte comando:
git clone https://github.com/electron-quick-start
Entre na pasta do repositório e caso já tenha instalado o Node.js, use o seguinte comando para instalar a framework Electron:
npm install electron
Instale as dependências e execute a aplicação
npm install && npm start
Neste momento será aberta a janela de aplicação de exemplo “Hello World!”, exibindo as versões do Node, Chromium e Electron.
Entendendo o conteúdo do projeto Quick Start
Observe que os seguintes arquivos estão presentes na pasta electron-quick-start:
- README.md — Arquivo de ajuda contendo instruções sobre o projeto.
- LICENSE.mb — Detalhamento da licença Creative Commons (CC0 1.0 Universal) do projeto.
- package.json — JSON que aponta para o arquivo principal (neste caso é o main.js) do aplicativo e lista suas dependências.
- main.js — Inicia o aplicativo e cria a janela do navegador Chromium para renderizar o HTML. Responsável pelo processo principal (main process).
- index.html — Página web em HTML para ser renderizada (render process).
Criando Sua Própria Aplicação
Agora que tivemos uma visão geral do projeto electron-quick-start vamos criar um do zero, que no caso será uma espécie de calculadora que exibe os resultados através de notificações desktop.
Saia da pasta do projeto electron-quick-start e crie uma nova pasta chamada projeto-calculadora para trabalharmos nela.
Abra seu editor de texto favorito e vamos criar nosso arquivo package.json, ele deve ficar dessa forma:
Agora vamos criar nossa página web com o nome de “calculadora.html”.
Digite o seguinte código:
Resumidamente, o código acima adiciona uma caixa de texto e um botão que irá receber um EventListener para chamar a função notificar() ao ser clicado. Logo, este botão irá executar o cálculo através da função global eval() e irá exibir uma notificação.
Agora vamos criar nosso arquivo principal em JavaScript com o nome de “main.js”, ele deverá ficar da seguinte forma:
Na primeira linha temos o comando require(‘electron’), este comando pertence ao Node.js e é responsável por carregar módulos. Neste caso, ele carregará o módulo do Electron.
Declaramos uma constante calculadora como um objeto app (do módulo), para que através dele possamos controlar a vida da aplicação através de eventos. No exemplo utilizamos apenas o evento “ready”, que representa o momento em que o Electron é inicializado.
Além disso, nós atribuímos uma nova instância de Janela na variável janelaPrincipal, que ocasiona a abertura de uma janela de navegador. Caso você queira, é possível instanciar e controlar múltiplas janelas.
Por fim chamamos a função loadURL() para que a janelaPrincipal renderize o código contido no arquivo “calculadora.html”.
Ao executar:
npm start
O resultado será este:
Para mais informações sobre Electron consulte a documentação:
Análise Pessoal
Para utilizar de forma eficiente este framework é necessário um prévio conhecimento sobre desenvolvimento web utilizando HTML e JavaScript, além de Node.js. Entretanto, é notável a facilidade no entendimento de seu funcionamento, sua flexibilidade e portabilidade de aplicações web para Desktop.
