Noções básicas de elétrons: como configurar e executar um aplicativo Angular Electron

O Electron permite que você crie aplicativos de desktop para Windows, Mac e Linux. Ao criar um aplicativo usando o Electron, você pode visualizar e executar o aplicativo por meio de uma janela de aplicativo de desktop.

Você pode usar o Electron para configurar um aplicativo Angular para iniciar em uma janela da área de trabalho, em vez do navegador da Web normal. Você pode fazer isso usando um arquivo JavaScript dentro do próprio aplicativo.

Depois de configurar o Electron, você pode continuar o desenvolvimento como faria em um aplicativo Angular comum. As principais partes do aplicativo ainda seguirão a mesma estrutura padrão do Angular.

Como instalar o Electron como parte do seu aplicativo

Para usar o Electron, você precisa baixar e instalar o node.js e usar o npm install para adicionar o Electron ao seu aplicativo.

como baixar filmes no laptop

Baixar e instalar node.js . Você pode confirmar que o instalou corretamente verificando a versão:
```
node -v
```
O nó também inclui npm, o gerenciador de pacotes JavaScript . Você pode confirmar que o npm está instalado verificando a versão do npm:
```
npm -v
```
Crie um novo aplicativo Angular usando o de novo comando. Isso criará uma pasta que contém todos os arquivos necessários para um projeto Angular para trabalhar.
```
ng new electron-app
```
Na pasta raiz do seu aplicativo, use npm para instalar Electron.
```
npm install --save-dev electron
```
Isso criará uma nova pasta para Electron na pasta node_modules do aplicativo.
Você também pode instalar o Electron globalmente em seu computador.
```
npm install -g electron 
```

A Estrutura de Arquivos do Aplicativo Angular Electron

O Electron exigirá um arquivo JavaScript principal para criar e gerenciar a janela da área de trabalho. Esta janela exibirá o conteúdo do seu aplicativo dentro dela. O arquivo JavaScript também conterá outros eventos que podem ocorrer, como se o usuário fechar a janela.

indexar localização do arquivo HTML no projeto

Em tempo de execução, o conteúdo exibido virá do arquivo index.html. Por padrão, você pode encontrar o arquivo index.html dentro do src pasta e, em tempo de execução, uma cópia construída dela é criada automaticamente dentro do distância pasta.

Você pode conectar o bluetooth ao Xbox One?

Localização do componente principal do aplicativo na pasta

O arquivo index.html geralmente se parece com isso:

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <title> ElectronApp </title> 
  <base href="./"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="icon" type="image/x-icon" href="favicon.ico"> 
</head> 
<body> 
  <app-root> </app-root> 
</body> 
</html>

Dentro da tag body está uma tag . Isso exibirá o componente principal do aplicativo Angular. Você pode encontrar o componente principal do aplicativo no src/aplicativo pasta.

Electron em tempo de execução no navegador

Como usar o Electron para abrir um aplicativo angular em uma janela da área de trabalho

Crie o arquivo main.js e configure-o para abrir o conteúdo do aplicativo dentro de uma janela da área de trabalho.

Crie um arquivo na raiz do seu projeto chamado main.js . Nesse arquivo, inicialize o Electron para que você possa usá-lo para criar a janela do aplicativo.
```
const { app, BrowserWindow } = require('electron');
```
Crie uma nova janela da área de trabalho com uma certa largura e altura. Carregue o arquivo de índice como o conteúdo a ser exibido na janela. Certifique-se de que o caminho para o arquivo de índice corresponda ao nome do seu aplicativo. Por exemplo, se você nomeou seu aplicativo como 'electron-app', o caminho será 'dist/electron-app/index.html'.
```
function createWindow() { 
  win = new BrowserWindow({width: 800, height: 800}); 
  win.loadFile('dist/electron-app/index.html'); 
}
```
Quando o aplicativo estiver pronto, chame a função createWindow(). Isso criará a janela do aplicativo para seu aplicativo.
```
app.whenReady().then(() => { 
  createWindow() 
})
```
No src/index.html arquivo, no base , altere o atributo href para './'.
```
<base href="./">
```
Dentro pacote.json , adicione um a Principal campo e inclua o arquivo main.js como o valor. Este será o ponto de entrada para o aplicativo, para que o aplicativo execute o arquivo main.js ao iniciar o app.
```
{ 
  "name": "electron-app", 
  "version": "0.0.0", 
  "main" : "main.js", 
  .... 
}
```

No .browserslistrc arquivo, modifique a lista para remover as versões 15.2-15.3 do iOS Safari. Isso evitará que erros de compatibilidade sejam exibidos no console durante a compilação.

last 1 Chrome version 
last 1 Firefox version 
last 2 Edge major versions 
last 2 Safari major versions 
last 2 iOS major versions 
Firefox ESR 
not ios_saf 15.2-15.3 
not safari 15.2-15.3

Exclua o conteúdo padrão no src/app/app.component.html Arquivo. Substitua-o por algum conteúdo novo.

<div class="content"> 
  <div class="card"> 
    <h2> Home </h2> 
    <p> 
      Welcome to my Angular Electron application! 
    </p> 
  </div> 
</div>

Adicione algum estilo para o conteúdo no src/app/app.component.css arquivo.

.content { 
  line-height: 2rem; 
  font-size: 1.2em; 
  margin: 48px 10%; 
  font-family: Arial, sans-serif 
} 
.card { 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
  width: 85%; 
  padding: 16px 48px; 
  margin: 24px 0px; 
  background-color: whitesmoke; 
  font-family: sans-serif; 
}

Adicione algum estilo geral ao src/styles.css arquivo para remover as margens e preenchimentos padrão.
```
html { 
  margin: 0; 
  padding: 0; 
}
```

Como executar um aplicativo eletrônico

Para executar seu aplicativo em uma janela, configure um comando na matriz de scripts de package.json. Em seguida, execute seu aplicativo usando o comando no terminal.

por que meu disco está rodando a 100%

Dentro pacote.json , dentro da matriz de scripts, adicione um comando para compilar o aplicativo Angular e executar o Electron. Certifique-se de adicionar uma vírgula após a entrada anterior na matriz Scripts.
```
"scripts": { 
  ... 
  "electron": "ng build && electron ." 
},
```
Para executar seu novo aplicativo Angular em uma janela da área de trabalho, execute o seguinte na linha de comando, na pasta raiz do seu projeto:
```
npm run electron
```
Aguarde a compilação do seu aplicativo. Depois de concluído, em vez de seu aplicativo Angular abrir no navegador da Web, uma janela da área de trabalho será aberta. A janela da área de trabalho mostrará o conteúdo do seu aplicativo Angular.
Se você ainda quiser visualizar seu aplicativo no navegador da Web, ainda poderá executar o comando ng serve.
```
ng serve
```
Se você estiver usando o de servir comando, o conteúdo do seu aplicativo ainda será exibido em um navegador da Web em localhost:4200.

Criando aplicativos de desktop com o Electron

Você pode usar o Electron para criar aplicativos de desktop no Windows, Mac e Linux. Por padrão, você pode testar um aplicativo Angular usando um navegador da Web por meio do comando ng serve. Você pode configurar seu aplicativo Angular para também abrir em uma janela da área de trabalho em vez de um navegador da web.

Você pode fazer isso usando um arquivo JavaScript. Você também precisará configurar seus arquivos index.html e package.json. O aplicativo geral ainda seguirá a mesma estrutura de um aplicativo Angular regular.

Se você quiser saber mais sobre como criar aplicativos da área de trabalho, também poderá explorar os aplicativos Windows Forms. Os aplicativos Windows Forms permitem que você clique e arraste elementos da interface do usuário para uma tela, ao mesmo tempo em que adiciona qualquer lógica de codificação em arquivos C#.