Guia Completo e Recursos de Aprendizagem

Por
Twittar
Compartilhar
Compartilhar
Pin

JavaScript está entre as linguagens de programação mais comuns. O fato de poder ser usado para desenvolvimento de back-end e front-end o tornou um queridinho para muitas pessoas.

O JavaScript tem muitas bibliotecas e estruturas que expandem seus casos de uso além do JavaScript básico (simples).

Electron.js é uma poderosa estrutura de código aberto que oferece aos desenvolvedores da Web a capacidade de desenvolver aplicativos nativos com suas habilidades existentes. Este artigo ensinará sobre o Electron.js e como ele pode ser usado para potencializar sua próxima ideia incrível.

Elétron JS

Electron JS é uma estrutura que os desenvolvedores podem usar para criar aplicativos de desktop usando HTML, CSS e JavaScript. O Electron JS foi criado e é mantido pelo GitHub.

A estrutura é uma mistura de Node.JS e Chromium, permitindo que os usuários mantenham uma base de código JavaScript e desenvolvam aplicativos de desktop multiplataforma que podem funcionar no Windows, macOS e Linux.

A história do Electron.js começou em janeiro de 2013. A ideia original era criar um editor de texto multiplataforma que pudesse funcionar com JavaScript, HTML e CSS.

Electron.js foi originalmente chamado de Atom Shell e tornou-se código aberto em 2014. O projeto foi posteriormente renomeado para Electron em abril de 2015 e sua primeira API foi lançada em 2016.

Características do Electron JS

  • Compatível com todas as bibliotecas e estruturas JavaScript. Vue.js, Angular e React.js são apenas exemplos de estruturas JavaScript que os desenvolvedores podem usar junto com o Electron JS. Essa compatibilidade facilita a utilização dos recursos/funcionalidades dessas bibliotecas e estruturas ao criar um aplicativo Electron.
  • Estrutura reutilizável. Atender às diferentes necessidades dos clientes pode ser caro. O bom do Electron JS é que ele pode ser usado para aplicativos da Web e de desktop. A base de código única significa que ele também pode ser usado em diferentes sistemas operacionais.
  • Tem acesso a APIs nativas. Os desenvolvedores que trabalham no Electron JS têm acesso às APIs nativas dos sistemas operacionais em que estão operando. Os desenvolvedores podem, assim, criar aplicativos de desktop que tenham acesso semelhante à funcionalidade de baixo nível, como exibir notificações.
  • Suporta tecnologia web. O Electron JS é adaptável, pois os desenvolvedores não precisam aprender uma nova linguagem de programação para desenvolver aplicativos. Isso significa que, se você entender um determinado pacote de idiomas que já usa para criar aplicativos da Web, também poderá usá-lo para criar um aplicativo de desktop.
  • Gerenciamento de código e aplicativo. Você não precisa manter equipes diferentes para manter aplicativos e códigos para sistemas operacionais diferentes. O Electron JS permite que você mantenha a mesma base de código para os sistemas operacionais Linux, Windows e Mac.
  • Fácil construção/implantação. O gerenciador de pacotes Electron ajuda os desenvolvedores a empacotar em seus respectivos pacotes. Assim, você pode lançar um aplicativo de desktop Linux, Mac e Windows da mesma base de código usando este gerenciador de pacotes.
  Como construir uma versão personalizada do Ubuntu com o Ubuntu Minimal

Arquitetura Electron JS

A arquitetura do Electron é muito semelhante à de um navegador da Web moderno, pois herda sua arquitetura multiprocesso do Chromium.

A arquitetura do Electron compreende V8 JavaScript Engine, Node.JS e Libchromiumcontent.

  • Node.JS– um tempo de execução JavaScript de código aberto que é executado no mecanismo JavaScript V8. O Node.JS permite que os desenvolvedores executem JavaScript fora da janela do navegador. O Node.JS também permite que os usuários executem código JavaScript bruto por meio de seu shell interativo.
  • Libchromiumcontent- uma biblioteca de renderização do Chromium que é de código aberto e mantida pelo Google Chrome. O Chrome tem uma interface de usuário minimalista e usa Blink como mecanismo de layout e V8 como mecanismo JavaScript.
  • V8 JavaScript Engine– um mecanismo JavaScript de código aberto escrito em C++ e JavaScript e desenvolvido pelo Google.

#1. Node.js

Para começar a usar o Electron JS, você precisa ter o Node.js instalado em sua máquina local.

Selecione a versão do nó correto, dependendo do sistema operacional que você está executando no seu computador.

Verifique se o Node.js foi instalado corretamente executando estes comandos;

node -v
npm -v

Se instalados corretamente, esses comandos mostrarão as versões node e npm, respectivamente.

#2. Linha de comando

Como você acessa a linha de comando dependerá do seu sistema operacional.

  • O Linux dependerá da distribuição.
  • Windows: PowerShell ou Prompt de Comando.
  • macOS: terminal.

Alguns editores de código, como o Visual Studio Code, vêm com um terminal integrado.

#3. Editor de código

Você precisa de um editor de código para escrever seu código Electron JS. O Visual Studio Code está entre os melhores que você pode experimentar.

  Como configurar o iCloud no seu Mac

Como instalar o Electron JS

Etapa 1: crie um projeto node.js.

Use estes comandos para começar;

mkdir my-electron-app && cd my-electron-app
npm init

O comando npm init solicitará que você preencha alguns campos, como nome do aplicativo, ponto de entrada e descrição.

Você pode escolher o nome padrão da sua pasta como nome do aplicativo. No entanto, lembre-se de definir o ponto de entrada do seu aplicativo como main.js.

Campos como autor e descrição podem ter qualquer valor. Seu package.json ficará mais ou menos assim quando você concluir estas etapas:

{
"name": "my-electron-app",

  "version": "1.0.0",

  "description": "Hello World!",

  "main": "main.js",

  "author": "Peter Drury",

  "license": "MIT"

}

Passo 2: Instale o elétron

Use este comando;

npm install --save-dev electron

Etapa 3: adicione o comando ‘start’ ao seu package.json

{

  "scripts": {

    "start": "electron ."

  }

}

Passo 4: Inicie seu aplicativo

Use este comando para iniciar seu aplicativo no modo de desenvolvimento

npm start

Processo de Trabalho Electron JS

Continuaremos construindo o aplicativo a partir da configuração que acabamos de fazer acima. Uma aplicação Electron tem dois tipos de processos; principal e renderizador.

O processo principal

O script principal é o ponto de entrada de qualquer aplicativo eletrônico. O aplicativo será executado em um ambiente Node.js completo. O Electron procurará o script principal no arquivo package.json que você já configurou durante o scaffolding do aplicativo.

Crie main.js na pasta raiz para inicializar o script principal. Você pode fazer isso manualmente ou usar este comando;

touch main.js

Você pode adicionar o seguinte código ao main.js 

const { app, BrowserWindow } = require('electron');

const createWindow = () => {

 const win = new BrowserWindow({

   width: 800,

   height: 600,

 });

 win.loadFile('index.html');

};

app.whenReady().then(() => {

 createWindow();

 app.on('activate', () => {

   if (BrowserWindow.getAllWindows().length === 0) {

     createWindow();

   }

 });

});

app.on('window-all-closed', () => {

 if (process.platform !== 'darwin') {

   app.quit();

 }

});

As páginas da Web no Electron podem ser carregadas de um endereço da Web remoto ou de um arquivo HTML local. Usaremos um arquivo HTML local para fins de demonstração.

Crie um arquivo index.html em sua pasta raiz. O código para index.html é sempre fornecido, mas você pode tê-lo como seu código inicial;

<!DOCTYPE html>

<html>

 <head>

   <meta charset="UTF-8" />

   <meta

     http-equiv="Content-Security-Policy"

     content="default-src 'self'; script-src 'self'"

   />

   <meta

     http-equiv="X-Content-Security-Policy"

     content="default-src 'self'; script-src 'self'"

   />

   <title>Hello from Electron renderer!</title>

 </head>

 <body>

   <h1>Hello from Electron renderer!</h1>

   <p>👋</p>

   <p id="info"></p>

 </body>

 <script src="https://wilku.top/introduction-to-electron-js-complete-guide-and-learning-resources/./renderer.js"></script>

</html>

processo de renderização

O renderizador renderiza o conteúdo da web. Os scripts de pré-carregamento vêm com código que é executado em um processo de renderização antes que o conteúdo da web comece a ser carregado.

Crie preload.js em sua pasta raiz e adicione este código;

window.addEventListener('DOMContentLoaded', () => {

  const replaceText = (selector, text) => {

    const element = document.getElementById(selector)

    if (element) element.innerText = text

  }

  for (const type of ['chrome', 'node', 'electron']) {

    replaceText(`${type}-version`, process.versions[type])

  }

})

Execute o servidor de desenvolvimento usando npm start, e é isso que será exibido

  Como encontrar e remover duplicatas no Planilhas Google

Exemplos de aplicativos: Electron JS

#1. Aplicativo de desktop Slack

O Slack é uma das ferramentas de colaboração remota mais populares. Os usuários podem enviar e receber mensagens, fazer chamadas e compartilhar arquivos usando este aplicativo. O Slack tem aplicativos baseados na Web e de desktop nos sistemas operacionais Mac, Linux e Windows. O aplicativo de desktop do Slack usa o mecanismo Chromium e Node.js para renderizar código de alta qualidade.

#2. Aplicativo de área de trabalho do WordPress

O WordPress é o maior sistema de gerenciamento de conteúdo. O fato de você poder lançar um site mesmo sem habilidades básicas de codificação atraiu muitos usuários. O WordPress pode ser acessado pelo navegador e por meio de aplicativos de desktop no Mac, Linux e Windows. A área de trabalho renovada do WordPress usa Electron JS.

#3. aplicativo de área de trabalho WhatsApp

O WhatsApp está entre os aplicativos de mensagens mais populares do mundo moderno, já que é usado por mais de 2 bilhões de pessoas. O WhatsApp foi originalmente projetado como um aplicativo móvel, mas agora passou a ser uma plataforma entre dispositivos. A área de trabalho do WhatsApp utiliza o Electron JS e está disponível nos principais sistemas operacionais.

#4. Código do Visual Studio

O Visual Studio Code, de propriedade da Microsoft, está entre os editores de código mais populares. O Visual Studio Code oferece suporte a HTML, CSS e código escrito em várias linguagens de programação, como JavaScript, Python, PHP, Java e Ruby, para citar algumas. O aplicativo de desktop, criado usando o Electron JS, está disponível para os sistemas operacionais Windows, Mac e Linux.

Recursos de aprendizagem: Electron JS

#1. Documentação Oficial Electronjs

A documentação do Electronjs é criada e mantida por Electronjs.org. Você aprenderá o que é o Electron JS, como configurar seu primeiro aplicativo Electron e como criar aplicativos de desktop multiplataforma usando várias tecnologias. A documentação é sempre atualizada sempre que uma melhoria ou uma nova funcionalidade é introduzida.

#2. Master Electron: aplicativos de desktop com HTML, JavaScript e CSS

Master Electron é um curso pago na Udemy que apresenta o Electron JS. Você aprenderá como criar aplicativos de desktop para diferentes sistemas operacionais, como Mac, Linux e Windows. O Master Electron também é o recurso perfeito se você quiser entender todo o processo da API do Electron.

#3. Tutorial de reação eletrônica

Electron React é um curso pago na Udemy que ensina aos desenvolvedores como criar aplicativos Electron usando React.js. React é uma das bibliotecas JavaScript mais famosas e foi criada pela Meta (anteriormente Facebook).

Empacotando

O Electron JS é uma incrível biblioteca JavaScript para criar aplicativos de desktop em um mundo moderno, onde os aplicativos de plataforma cruzada devem ser adotados. O fato de você poder usar HTML, CSS e JavaScript significa que os desenvolvedores não precisam aprender novas pilhas de tecnologia para criar esses aplicativos. A presença de uma comunidade grande e solidária também é uma vantagem, pois você sempre terá suporte garantido.

Você também pode explorar algumas das melhores estruturas JavaScript para criar um aplicativo moderno em menos tempo.