Uma das preocupações ao desenvolver uma aplicação para desktop é em relação ao sistema operacional em que será executada, pois existem diferenças fundamentais entre eles. Para desenvolver um sistema que funcione em Windows e Linux, por exemplo, é preciso adaptá-lo para contemplar essa necessidade no momento do desenvolvimento. O Electron framework oferece uma maneira mais simples de desenvolver aplicações multiplataformas.

E não é só isso! Ele também permite utilizar todos os recursos de uma aplicação web, como os inúmeros frameworks para JavaScript disponíveis, dentre eles Bootstrap e React. Por isso, vale a pena entender como essa tecnologia funciona. Para que você conheça os recursos dessa ferramenta, fizemos este post que conta com os seguintes tópicos:

  • o que é o Electron?
  • Para que serve o Electron? 4 Aplicações!
  • Quais as vantagens de usar o Electron?
  • Como usar o Electron na prática? Confira o passo a passo!

Boa leitura!

O que é o Electron?

O Electron é um framework multiplataforma desenvolvido pelo GitHub. Sua primeira versão foi em 2013 e seu objetivo é permitir a construção de aplicações para desktops com a utilização de tecnologias usadas em desenvolvimento para web, como HTML, CSS e JavaScript.

Para isso, ele utiliza o Chromium, que é a versão código aberto do navegador Chrome. A ideia é que a aplicação desenvolvida seja executada sobre ele como se fosse uma aplicação web. Além disso, o Electron também utiliza o Node.js, componente que oferece recursos adicionais para acessar funções internas do sistema operacional, como permitir o acesso a diretórios e arquivos.

Para garantir a segurança dos dispositivos, as aplicações web comuns não conseguem utilizar recursos do sistema operacional. Essa é uma forma de proteger o computador de operações indevidas por sites maliciosos, por exemplo. O Electron, entretanto, permite essa interação. Por conta disso, é uma ferramenta que pode ser utilizada para construir aplicações desktop.

É importante dizer que o Electron permite a geração de um pacote de distribuição, ou seja, toda a aplicação desenvolvida é compilada e transformada em versões para rodar em diferentes sistemas operacionais, entre eles: Windows, Linus e macOS.

Para que serve o Electron? 4 Aplicações!

Como dissemos, o Electron é utilizado para desenvolver aplicações para desktops, que tanto podem acessar recursos do computador local, quanto utilizar dados externos com o uso de APIsApplication Programming Interface. Portanto, é uma tecnologia que oferece inúmeras possiblidades de desenvolver diferentes tipos de aplicação. Confira, a seguir, algumas ferramentas que foram desenvolvidas com o Electron.

1. Slack

O Slack é uma ferramenta de chat utilizada por empresas para facilitar a comunicação entre as pessoas. Ela oferece uma série de recursos, como o compartilhamento de arquivos, chamadas de voz e vídeo e muito mais. Além disso, ela permite a integração com diversos aplicativos, como Zoom, Google Drive, entre outros.

2. Visual Studio Code

O Visual Studio Code é um poderoso editor de código, desenvolvido pela Microsoft com código aberto. Ele pode ser utilizado em Windows, Linux e macOS, além de permitir o desenvolvimento de programas em diversas linguagens de programação, como PHP, Ruby, Rust, C e muitas outras.

3. Hyper

O Hyper é uma interface para linhas de comandos para as plataformas Windows, Linux e macOS. Seu objetivo é oferecer uma interface mais bonita e amigável para executar atividades como o acesso a servidores remotos e a execução de comandos diversos. Além disso, ele permite a instalação de temas e plugins, o que torna a ferramenta ainda mais amigável e funcional.

4. Atom.io

O Atom.io é um editor de texto desenvolvido pela GitHub que oferece uma série de recursos, dentre elas a instalação de temas e plugins, os quais

adicionam inúmeras funcionalidades. Uma de suas aplicações é para a edição de código fonte e oferece suporte a diversas linguagens de programação, como JavaScript, Linguagem C, Ruby e muito mais.

Quais as vantagens de usar o Electron?

Existem diversos benefícios em utilizar o Electron framework. Confira alguns deles a seguir.

Permite o desenvolvimento de aplicações multiplataforma

Qualquer aplicação desenvolvida com esse framework será um Electron app multiplataforma. Na prática, não importa se o desenvolvimento for em um ambiente Windows, pois ao criar o pacote de distribuição, podemos indicar a plataforma em que queremos utilizar o sistema.

É um framework open source

Uma das vantagens de utilizar o Electron é ele ser um framework de código aberto. Isso significa que não é preciso pagar pela licença de uso, o que contribui para a redução de custos com o desenvolvimento. Ele também conta com uma grande comunidade de pessoas desenvolvedoras que auxiliam no desenvolvimento da ferramenta, além de um fórum para trocar experiências e esclarecer dúvidas.

Oferece diferentes formas de distribuição

As aplicações desenvolvidas podem ser compiladas para distribuição em pacotes por meio de diferentes recursos disponíveis, como o electron-package ou electron-builder, e serem instaladas por meio de gerenciadores de pacotes, como o NPM. Além disso, as atualizações do aplicativo também são efetuadas de forma simples e rápida.

Utiliza tecnologia de aplicações web

As aplicações desenvolvidas em Electron utilizam HTML, CSS e JavaScript. Portanto, é possível utilizar muitos recursos dessas ferramentas nas aplicações desktop, além de elas serem mais conhecidas entre as pessoas programadoras. De acordo com a pesquisa da StackOverflow, de 2020, JavaScript é utilizado por 67,7%, enquanto HTML e CSS, por 63,1% das pessoas entrevistadas.

Desenvolve aplicações nativas

Para utilizar as aplicações desenvolvidas em Electron não é preciso abrir um navegador e acessar um site específico. Em vez disso, elas ficam instaladas no computador como um Electron app e podem ser acessadas pela barra de tarefas do Windows ou do sistema em que estiver instalada.

Como usar o Electron na prática? Confira o passo a passo!

Nada melhor que colocar a mão na massa para ver como o Electron funciona. Por isso, vamos mostrar um guia prático com os passos essenciais para começar a utilizar a ferramenta. 

Inicie o projeto e instale o Electron

Para que o Electron js funcione, é preciso instalar o Node.js no computador. Ele pode ser baixado em versões para Windows, Linux e macOS. A forma de instalação recomendada pelo Electron é adicioná-lo como uma dependência do projeto que será desenvolvido.

Os projetos em Electron devem conter uma estrutura básica, que não é criada automaticamente. Portanto, crie dois arquivos vazios na pasta escolhida para o projeto com os seguintes nomes: main.js e index.html. Agora, vamos iniciar a aplicação e adicionar o Electron como dependência. Então, digite o seguinte comando:

O arquivo do configuração em formato JSON, chamado package.json, será adicionado na pasta e será usado para relacionar as dependências utilizadas no projeto. A primeira dependência que vamos incluir é o framework Electron. Para isso, digite o seguinte:

Esse comando fará a instalação do Electron na pasta node_modules, que é utilizada para armazenar as dependências do projeto, e adicionará um registro no arquivo package.json para indicar a dependência. Também devemos alterar o campo scripts para adicionar a indicação para a inicialização do Electron. Portanto, adicione o comando a seguir nesse campo.

Confira como ficará o arquivo package.json.

Crie os arquivos da aplicação

O próximo passo é configurar o arquivo main.js para que ele execute o framework Electron JavaScript e aplique as definições indicadas — como o tamanho da janela —, além de chamar a página inicial da aplicação. Confira, a seguir, um exemplo básico de seu conteúdo.

O próximo passo é desenvolver o conteúdo do arquivo HTML. Vamos simular uma aplicação que calcula o valor do IMC. Portanto, teremos um formulário com dois campos e um botão para executar o cálculo. A seguir, o resultado será exibido na tela. Veja o código abaixo.

Teste a aplicação

Agora podemos fazer um teste da aplicação. Para isso, basta digitar o comando a seguir:

npm start

Perceba que será aberta uma janela com a execução da aplicação que escrevemos no código HTML.

Crie o pacote de distribuição

Por fim, vamos criar a distribuição do aplicativo. Existem diferentes formas de executar essa tarefa. Uma delas é com a utilização do electron-package, que faz a compilação de todos os arquivos do projeto e gera o arquivo executável. Entretanto, é preciso primeiro instalar o pacote por meio do seguinte comando:

A próxima etapa é criar a aplicação, que é feita da seguinte forma:

Pronto! O aplicativo foi criado na pasta da aplicação. Vale dizer que, com esse comando, a versão é criada para o sistema operacional utilizado, que nesse exemplo foi o Windows. Para criar o pacote para outras plataformas, é preciso especificá-las após o parâmetro <nome_da_aplicação>.

O framework Electron é uma poderosa ferramenta para a criação de aplicações para desktops, as quais podem ser distribuídas para diferentes sistemas operacionais. Além de HTML, CSS e JavaScript, também é possível adicionar utilizar outros frameworks para aprimorar ainda mais o desenvolvimento da aplicação, como o Bootstrap, Vue.js e muito mais.

Gostou do nosso conteúdo sobre o que é o Electron framework? Então, confira este post sobre o que é low-code e quais os benefícios dessa metodologia de desenvolvimento!      

0 Shares:
Você também pode gostar