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 APIs — Application 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.
O Electron é 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!
