Configurar elétron e criar um aplicativo Hello World no Linux

Este artigo abordará um guia sobre a instalação do elétron e a criação de um aplicativo de elétrons “Hello World” simples no Linux.

Sobre elétron

Electron é uma estrutura de desenvolvimento de aplicativos usada para criar aplicativos de desktop cruzados usando tecnologias da web em um navegador independente. Ele também fornece APIs específicas do sistema operacional e um sistema de embalagem robusto para facilitar a distribuição de aplicativos. Uma aplicação de elétrons típica requer três coisas para funcionar: nó.JS Runtime, um navegador baseado em cromo independente que vem com APIs específicos de elétrons e OS.

Instale o nó.JS

Você pode instalar o nó.JS e “NPM” Gerenciador de pacotes executando o seguinte comando no Ubuntu:

$ sudo apt install nodejs npm

Você pode instalar esses pacotes em outras distribuições Linux do gerenciador de pacotes. Como alternativa, baixe binários oficiais disponíveis no nó.Site JS.

Crie um novo nó.Projeto JS

Depois de instalar o nó.JS e "NPM", criam um novo projeto chamado "Helloworld", executando os seguintes comandos em sucessão:

$ mkdir helloworld
$ CD Helloworld

Em seguida, inicie um terminal no diretório "Helloworld" e execute o comando abaixo para inicializar um novo pacote:

$ npm init

Passe pelo mago interativo no terminal e insira nomes e valores conforme necessário.

Aguarde a instalação terminar. Agora você deveria ter um “pacote.arquivo json "no diretório" helloworld ". Tendo um “pacote.O arquivo JSON ”no diretório do seu projeto facilita a configuração dos parâmetros do projeto e facilita o projeto portátil para facilitar a compartilhamento.

O pacote.O arquivo JSON ”deve ter uma entrada como esta:

"Main": "índice.js "

"Índice.JS ”é onde toda a lógica do seu programa principal seria localizada. Você pode criar adicionais “.JS ",".html "e".arquivos CSS de acordo com suas necessidades. Para os fins do programa “Helloworld” explicado neste guia, o comando abaixo criará três arquivos necessários:

$ Touch Index.ÍNDICE JS.Índice HTML.CSS

Instale o elétron

Você pode instalar o elétron no diretório do seu projeto executando o comando abaixo:

$ npm Install Electron-Save-dev

Aguarde a instalação terminar. O elétron será agora adicionado ao seu projeto como uma dependência e você deve ver uma pasta "Node_modules" no diretório do seu projeto. Instalar o Electron como uma dependência por projeto é a maneira recomendada de instalar o elétron de acordo com a documentação oficial de elétrons. No entanto, se você deseja instalar a elétron globalmente em seu sistema, poderá usar o comando mencionado abaixo:

$ npm Instale Electron -g

Adicione a seguinte linha à seção "Scripts" em "Pacote.Arquivo JSON ”para concluir a configuração de elétrons:

"Start": "Electron ."

Crie aplicativo principal

Abra “Índice.Arquivo JS ”no editor de texto de sua escolha e adicione o seguinte código a ele:

const App, BrowSerWindow = requer ('Electron');
função createwindow ()
Const Window = New BrowSerWindow (
Largura: 1600,
Altura: 900,
Webpreferências:
Nodeintegração: Verdadeiro

);
janela.loadfile ('índice.html ');

aplicativo.quando estiver pronto().então (createWindow);

Abra “Índice.Arquivo HTML ”em seu editor de texto favorito e coloque o seguinte código nele:

Olá Mundo !!

O código JavaScript é bastante auto -explicativo. A primeira linha importa os módulos de elétrons necessários para o aplicativo funcionar. Em seguida, você cria uma nova janela do navegador independente que vem com elétron e carrega o “Índice.arquivo html ”nele. A marcação no “índice.O arquivo html ”cria um novo parágrafo“ Hello World !!”Envolvido no“

" marcação. Ele também inclui um link de referência para o “Índice.Arquivo de folha de estilo CSS ”usado posteriormente no artigo.

Execute seu aplicativo Electron

Execute o comando abaixo para iniciar seu aplicativo Electron:

$ NPM START

Se você seguiu as instruções corretamente até agora, deve obter uma nova janela semelhante a esta:

Abra “Índice.Arquivo CSS ”e adicione o código abaixo para alterar a cor de“ Hello World !!" corda.

#hworld
cor vermelha;

Execute o seguinte comando novamente para ver o estilo CSS aplicado ao “Hello World !!" corda.

$ NPM START

Agora você tem o conjunto mínimo de arquivos necessários para executar um aplicativo básico de elétrons. Você tem “índice.js ”para escrever a lógica do programa,“ Índice.HTML ”para adicionar marcação HTML e“ índice.CSS ”para modelar vários elementos. Você também tem um “pacote.Arquivo JSON ”e pasta“ Node_modules ”contendo dependências e módulos necessários.

Aplicação de elétrons de embalagem

Você pode usar o Electron Forge para empacotar seu aplicativo, conforme recomendado pela documentação oficial de elétrons.

Execute o comando abaixo para adicionar o Electron Forge ao seu projeto:

$ npx @electron-forge/cli @ @mais recente importação

Você deve ver alguma saída como esta:

✔ Verificando seu sistema
✔ Inicializando o repositório Git
✔ Escrevendo pacote modificado.arquivo json
✔ Instalando dependências
✔ Escrevendo pacote modificado.arquivo json
✔ Fixação .Gitignore
Tentamos converter seu aplicativo para estar em um formato que Electron-Forge entende.
Obrigado por usar "Electron-Forge"!!!

Revise “Pacote.JSON ”Arquivo e edite ou remova entradas das seções“ Makers ”de acordo com suas necessidades. Por exemplo, se você não deseja criar um arquivo "rpm", remova a entrada relacionada à construção de pacotes "RPM".

Execute o seguinte comando para construir o pacote de aplicativos:

$ NPM Run Make

Você deve obter alguma saída semelhante a isso:

> [email protected] Make/Home/Nit/Helloworld
> Electron-Forge Make
✔ Verificando seu sistema
✔ Resolver a configuração forge
Precisamos empacotar seu aplicativo antes que possamos fazê -lo
✔ Preparação para o aplicativo de embalagem para arco: x64
✔ Preparando dependências nativas
✔ Aplicação de embalagem
Fazendo para os seguintes alvos: Deb
✔ Fazendo para o Target: Deb - On Platform: Linux - Para Arch: X64

Eu editei o “pacote.arquivo JSON "para construir apenas o pacote" Deb ". Você pode encontrar pacotes construídos na pasta "Out" localizada dentro do seu diretório de projeto.

Conclusão

O Electron é ótimo para criar aplicativos de plataforma cruzada com base em uma única base de código com alterações específicas de OS menores. Ele tem alguns problemas próprios, o mais importante deles é o consumo de recursos. Como tudo é renderizado em um navegador independente e uma nova janela do navegador é lançada com todos os aplicativos de elétrons, esses aplicativos podem ser intensivos em recursos em comparação com outros aplicativos usando kits de ferramentas de desenvolvimento de aplicativos específicos do SO nativos.