Como construir facilmente aplicativos de área de trabalho com HTML, CSS e Javascript

Aditya Sridhar Blocked Unblock Seguir Seguindo 4 de janeiro Foto de Robin Pierre em Unsplash

HTML, CSS e Javascript podem ser usados para criar aplicativos de desktop?

A resposta é sim. ?

Neste artigo, vamos nos concentrar principalmente em como o Electron pode ser usado para criar aplicativos de desktop com tecnologias da Web, como HTML, CSS e Javascript.

Elétron

O Electron pode ser usado para criar aplicativos de desktop com HTML, CSS e Javascript. Além disso, esses aplicativos funcionam para várias plataformas, como Windows, Mac, Linux e assim por diante.

O Electron combina o Chromium e o NodeJS em um único tempo de execução. Isso nos permite executar o código HTML, CSS e Javascript como um aplicativo de área de trabalho.

Forja de elétrons

Se o Electron for usado diretamente, será necessária alguma configuração manual antes de criar seu aplicativo. Além disso, se você quiser usar Angular, React, Vue ou qualquer outro framework ou biblioteca, você precisará configurar manualmente para isso.

O Electron Forge torna as coisas acima muito mais fáceis.

Ele fornece aplicativos de modelo com Angular, React, Vue e outras estruturas que evitam as configurações manuais extras.

Também fornece uma maneira fácil de criar e empacotar o aplicativo. Ele também fornece muitos outros recursos que podem ser encontrados em sua documentação .

Pré-requisitos

Certifique-se de ter o NodeJS instalado. Pode ser instalado a partir daqui .

Instale o Electron Forge globalmente usando o seguinte comando:

 npm install -g electron-forge 

Vamos começar com o aplicativo

Use o seguinte comando para criar seu aplicativo:

 electron-forge init simple-desktop-app-electronjs 

simple-desktop-app-electronjs é o nome do aplicativo.

O comando acima levará algum tempo para ser executado.

Quando terminar a execução, inicie o aplicativo usando os seguintes comandos:

 cd simple-desktop-app-electronjs 
npm start

Isso deve abrir uma janela como a mostrada abaixo:

Compreendendo a estrutura e o código de pasta existente

O aplicativo tem uma estrutura de pastas específica. Aqui estarei mencionando algumas das coisas importantes nessa estrutura de pastas.

package.json

Tem informações sobre o aplicativo que você está criando, todas as dependências necessárias para o aplicativo e alguns scripts. Alguns dos scripts já estão pré-configurados e você também pode adicionar novos scripts.

O caminho config.forge tem todas as configurações específicas do ElectronJS. Por exemplo, make-targets é usado para especificar os arquivos de criação de destino para várias plataformas, como Windows, Mac ou Linux.

Também package.json tem "main": "src/index.js" que indica que src / index.js é o ponto de partida do aplicativo

src / index.js

De acordo com o package.json, index.js é o script principal. O processo que executa o script principal é conhecido como o processo principal . Portanto, o processo principal executa o script index.js.

O processo principal é usado para exibir elementos da GUI. Isso é feito criando páginas da web.

Cada página da web criada é executada em um processo chamado processo de renderização.

Processo principal e processo renderizador

O objetivo do processo principal é criar páginas da Web usando uma Instância BrowserWindow .

A Instância BrowserWindow usa um processo de renderizador para executar cada página da web.

Cada aplicativo pode ter apenas um processo principal, mas pode ter muitos processos de renderizador.

Também é possível se comunicar entre o processo principal e o processador. Isso, no entanto, não será abordado neste artigo.

Arquitetura eletrônica mostrando o processo principal e renderizador. Os nomes dos arquivos podem variar.

abcd.html é mostrado como uma segunda página na arquitetura acima. Mas no nosso código não teremos uma segunda página da web.

src / index.html

index.js carrega o arquivo index.html em uma nova Instância do BrowerWindow.

O que isso basicamente significa é que o index.js cria uma nova janela da GUI e a carrega com a página da web index.html. A página da web index.html é executada em seu próprio processo de renderização.

Código em index.js explicou

A maior parte do código criado no index.js tem bons comentários explicando o que ele faz. Aqui vou mencionar alguns pontos-chave para observar no index.js:

 mainWindow = new BrowserWindow({ 
width: 800,
height: 600,
});

// and load the index.html of the app.
mainWindow.loadURL(`file://${__dirname}/index.html`);

O trecho de código acima basicamente cria uma Instância BrowserWindow e carrega index.html na BrowserWindow.

Você verá o aplicativo usado com frequência no código. Por exemplo, pegue o trecho de código abaixo:

 app.on('ready', createWindow); 

app é usado para controlar o ciclo de vida do evento do aplicativo.

O trecho de código acima diz que, quando o aplicativo estiver pronto, carregue a primeira janela.

Da mesma forma, o aplicativo pode ser usado para executar outras ações em vários eventos. Por exemplo, ele pode ser usado para executar alguma ação antes de o aplicativo ser fechado e assim por diante.

Vamos criar um aplicativo de desktop para conversão de temperatura

Vamos usar o mesmo aplicativo que usamos antes e modificá-lo um pouco para criar um aplicativo conversor de temperatura.

Primeiro, vamos instalar o Bootstrap com o seguinte comando:

 npm install bootstrap --save 

Copie o seguinte código em src / index.html:

 <!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>Temperature Converter</title>
<link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">

</head>
<body>
<h1>Temperature Converter</h1>
<div class="form-group col-md-3">
<label for="usr">Celcius:</label>
<input type="text" class="form-control" id="celcius" onkeyup="celciusToFahrenheit()">
</div>
<div class="form-group col-md-3">
<label for="pwd">Fahrenheit:</label>
<input type="text" class="form-control" id="fahrenheit" onkeyup="fahrenheitToCelcius()">
</div>
<script src='./renderer.js'></script>
</body>
</body>
</html>

O código acima faz o seguinte:

  1. Cria uma caixa de texto com o ID Celcius . Sempre que algo é digitado nessa caixa de texto, a função celciusToFahrenheit () é chamada.
  2. Cria uma caixa de texto com o ID Fahrenheit . Sempre que algo é digitado nessa caixa de texto, a função fahrenheitToCelcius () é chamada.
  3. Sempre que um novo valor é digitado na caixa de texto Celcius, o valor na caixa de texto Fahrenheit exibe a mesma temperatura em Fahrenheit
  4. Sempre que um novo valor é digitado na caixa de texto Fahrenheit, o valor na caixa de texto Celcius exibe a mesma temperatura em Celcius

As duas funções que fazem a conversão de temperatura estão presentes no renderer.js.

Crie um arquivo chamado renderer.js dentro do src . Copie o seguinte código para ele:

 function celciusToFahrenheit(){ 
let celcius = document.getElementById('celcius').value;
let fahrenheit = (celcius * 9 / 5) + 32;
document.getElementById('fahrenheit').value = fahrenheit;

}

function fahrenheitToCelcius(){
let fahrenheit = document.getElementById('fahrenheit').value;
let celcius = (fahrenheit - 32) * 5 / 9
document.getElementById('celcius').value = celcius;
}

A função celciusToFahrenheit () lê o valor na caixa de texto Celcius , converte-a para Fahrenheit e grava a nova temperatura na caixa de texto Fahrenheit .

A função fahrenheitToCelcius () faz exatamente o oposto disso.

Executando o aplicativo

Execute o aplicativo usando o seguinte comando:

 npm start 

Isso deve exibir a seguinte janela. Experimente com valores diferentes.

Empacotando o aplicativo

O comando para empacotar o aplicativo é:

 npm run package 

Este comando levará algum tempo para ser executado. Quando terminar, verifique a pasta de saída dentro da pasta do projeto.

Eu testei isso em uma máquina Windows. Isso cria uma pasta chamada simple-desktop-app-electronjs-win32-x64 dentro da pasta out

Portanto, na pasta out / simple-desktop-app-electronjs-win32-x64 , o comando cria um arquivo .exe para esse aplicativo. Clicar no arquivo exe inicia automaticamente o aplicativo da área de trabalho.

O nome da pasta simple-desktop-app-electronjs-win32-x64 pode ser dividido em appname-platform-architecture onde

  • appname = simples-desktop-app-electronjs
  • plataforma = win32
  • arquitetura = x64

Quando você executa este comando sem nenhum parâmetro, por padrão ele empacota para a plataforma que você está usando para desenvolvimento.

Digamos que você queira empacotar uma plataforma e arquitetura diferentes. Então você pode usar a seguinte sintaxe:

 npm run package -- --platform=<platform> arch=<architecture> 

Por exemplo, para empacotar o linux, você pode usar o seguinte comando:

 npm run package -- --platform = linux --arch = x64 

Isso criará uma pasta chamada simple-desktop-app-electronjs-linux-x64 dentro da pasta out .

Criando um arquivo make

Para criar um arquivo de criação ou um instalador para o aplicativo, use o seguinte comando:

 npm run make 

Este comando levará algum tempo para ser executado. Quando terminar, verifique a pasta de saída dentro da pasta do projeto.

A pasta out / make terá um instalador do Windows para o aplicativo desktop.

Quando você executa este comando sem nenhum parâmetro, por padrão, ele cria o instalador para a plataforma que você está usando para desenvolvimento.

Código

O código para esta aplicação desktop está disponível no meu repositório GitHub:

https://github.com/aditya-sridhar/simple-desktop-app-electronjs

Parabéns ?

Agora você sabe como criar aplicativos de desktop usando HTML, CSS e Javascript.

Este artigo abordou conceitos muito básicos de Electron e Electron-Forge.

Para saber mais sobre eles, você pode conferir a documentação deles.

Sobre o autor

Adoro tecnologia e acompanho os avanços no campo. Eu também gosto de ajudar os outros com o meu conhecimento tecnológico.

Sinta-se à vontade para se conectar comigo na minha conta do LinkedIn https://www.linkedin.com/in/aditya1811/

Você também pode me seguir no twitter https://twitter.com/adityasridhar18

Meu site: https://adityasridhar.com/