Phenquestions
Este artigo cobrirá um guia sobre a instalação do Electron e a criação de um aplicativo Electron simples “Hello World” no Linux.
Sobre Electron
Electron é uma estrutura de desenvolvimento de aplicativos usada para criar aplicativos de desktop de plataforma cruzada usando tecnologias da web em um navegador da web autônomo. Ele também fornece APIs específicas do sistema operacional e um sistema de empacotamento robusto para facilitar a distribuição de aplicativos. Uma aplicação típica de Electron requer três coisas para funcionar: Nó.js runtime, um navegador autônomo baseado em Chromium que vem com APIs específicas do Electron e do sistema operacional.
Nó de instalação.js
Você pode instalar o Node.gerenciador de pacotes js e “npm” executando o seguinte comando no Ubuntu:
$ sudo apt install nodejs npmVocê pode instalar esses pacotes em outras distribuições Linux a partir do gerenciador de pacotes. Como alternativa, baixe os binários oficiais disponíveis no Node.site js.
Crie um novo nó.Projeto js
Depois de instalar o Node.js e “npm”, crie um novo projeto chamado “HelloWorld” executando os seguintes comandos em sucessão:
$ mkdir HelloWorld$ cd HelloWorld
Em seguida, acione um terminal no diretório “HelloWorld” e execute o comando abaixo para inicializar um novo pacote:
$ npm initVá até o assistente interativo no terminal e insira nomes e valores conforme necessário.
Espere que a instalação termine. Agora você deve ter um “pacote.arquivo json ”no diretório“ HelloWorld ”. Ter um “pacote.json ”no diretório do seu projeto torna mais fácil configurar os parâmetros do projeto e torna o projeto portátil para facilitar o compartilhamento.
O pacote.json ”arquivo deve ter uma entrada como esta:
"main": "índice.js ""Índice.js ”é onde toda a lógica do seu programa principal estaria localizada. Você pode criar “.js ”,“.html ”e“.arquivos css ”de acordo com suas necessidades. Para o propósito do programa “HelloWorld” explicado neste guia, o comando abaixo criará três arquivos necessários:
$ touch index.índice js.índice html.cssInstalar Electron
Você pode instalar o Electron no diretório do seu projeto executando o comando abaixo:
$ npm install electron --save-devEspere que a instalação termine. Electron 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 Electron de acordo com a documentação oficial da Electron. No entanto, se você deseja instalar o Electron globalmente em seu sistema, você pode usar o comando mencionado abaixo:
$ npm instalar elétron -gAdicione a seguinte linha à seção “scripts” em “pacote.json ”para concluir a configuração do Electron:
"start": "elétron ."Criar aplicativo principal
Abrir “índice.js ”no editor de texto de sua escolha e adicione o seguinte código a ele:
const app, BrowserWindow = require ('electron');function createWindow ()
const window = new BrowserWindow (
largura: 1600,
altura: 900,
webPreferences:
nodeIntegration: true
);
janela.loadFile ('index.html ');
aplicativo.quando estiver pronto().então (createWindow);
Abrir “índice.html ”no seu editor de texto favorito e coloque o seguinte código nele:
Olá Mundo !!
O código javascript é bastante autoexplicativo. 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 autônomo que vem com o Electron e carrega o “índice.arquivo html ”nele. A marcação no “índice.arquivo html ”cria um novo parágrafo“ Hello World !!”Embrulhado no“
" marcação. Também inclui um link de referência para o “índice.css ”arquivo de folha de estilo usado posteriormente no artigo.
Execute seu aplicativo de elétrons
Execute o comando abaixo para iniciar seu aplicativo Electron:
$ npm inícioSe você seguiu as instruções corretamente até agora, deverá obter uma nova janela semelhante a esta:
Abrir “índice.css ”e adicione o código abaixo para alterar a cor de“ Hello World !!" fragmento.
cor vermelha;
Execute o seguinte comando novamente para ver o estilo CSS aplicado a “Hello World !!" fragmento.
$ npm início
Agora você tem o conjunto mínimo de arquivos necessários para executar um aplicativo Electron básico. Você tem “índice.js ”para escrever a lógica do programa,“ índice.html ”para adicionar marcação HTML e“ índice.css ”para estilizar 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 do pacote
Você pode usar o Electron Forge para empacotar seu aplicativo, conforme recomendado pela documentação oficial da Electron.
Execute o comando abaixo para adicionar Electron Forge ao seu projeto:
$ npx @ electron-forge / cli @ importação mais recenteVocê deve ver alguma saída como esta:
✔ Verificando seu sistema✔ Inicializando o Repositório Git
✔ Escrevendo pacote modificado.arquivo json
✔ Instalação de dependências
✔ Escrevendo pacote modificado.arquivo json
✔ Reparação .gitignore
TENTAMOS converter seu aplicativo para um formato que o Electron-Forge entende.
Obrigado por usar "electron-forge"!!!
Revise o “pacote.arquivo json ”e editar ou remover entradas das seções“ criadores ”de acordo com suas necessidades. Por exemplo, se você não quiser construir um arquivo “RPM”, remova a entrada relacionada à construção de pacotes “RPM”.
Execute o seguinte comando para criar o pacote do aplicativo:
$ npm run makeVocê deve obter alguma saída semelhante a esta:
> helloworld @ 1.0.0 make / home / nit / HelloWorld> fabricação de elétron-forja
✔ Verificando seu sistema
✔ Resolvendo o Forge Config
Precisamos empacotar seu aplicativo antes de torná-lo
✔ Preparação para empacotar o aplicativo para arch: x64
✔ Preparando dependências nativas
✔ Aplicação de embalagem
Fazendo para os seguintes alvos: deb
✔ Fazendo para target: deb - Na plataforma: linux - Para arch: x64
Eu editei o “pacote.arquivo json ”para construir apenas o pacote“ DEB ”. Você pode encontrar pacotes compilados na pasta “out” localizada dentro do diretório do seu projeto.
Conclusão
Electron é ótimo para criar aplicativos de plataforma cruzada com base em uma única base de código com pequenas alterações específicas do sistema operacional. Ele tem alguns problemas próprios, o mais importante deles é o consumo de recursos. Como tudo é renderizado em um navegador autônomo e uma nova janela do navegador é iniciada com cada aplicativo Electron, esses aplicativos podem consumir muitos recursos em comparação com outros aplicativos que usam kits de ferramentas de desenvolvimento de aplicativos específicos do sistema operacional nativo.
