Angular && Electron
Segundo a documentação, o Electron é um framework para construir aplicativos de desktop usando JavaScript, HTML e CSS. Ao incorporar Chromium e Node.js em seu binário, o Electron permite manter uma base de código JavaScript e criar aplicativos de plataforma cruzada que funcionam em Windows, macOS e Linux .
Isso já nos mostra o poder desse framework, que nos permite usar Angular, por exemplo, para desenvolver aplicações desktop multiplataforma reaproveitando os conhecimentos do desenvolvimento web.
Vamos ver um exemplo de como utilizar o Electron em um projeto Angular. Lembrando que para utilizar o Electron é preciso ter o node instalado na sua maquina.
1. Criar o projeto
Vamos criar um projeto padrão utilizando Angular (Precisa de ajuda? Veja aqui mais dicas). No seu terminal, execute:
ng new electron-app2. Instalar o Electron no seu projeto
Com o projeto já criado, abra o terminal na raiz do seu projeto e execute o comando abaixo.
// npm
npm install --save-dev electron// or yarn
yarn add --dev electron
3. Criar o arquivo main.js
Vamos criar, na raiz do projeto, um arquivo com o nome main.js. A estrutura do seu projeto estará similar a imagem abaixo.
Sempre seguindo a documentação, iremos adicionar ao arquivo main.js o seguinte conteúdo:
p.s.: Note que na linha 18 referenciamos o arquivo index.html que será executado ao iniciar o projeto, quando utilizamos o Electron. No nosso exemplo, o local desse arquivo é dist/electron-app pois para executarmos nosso projeto utilizando Electron precisamos antes gerar um build do projeto. (Não entendeu nada!? :O Ficará mais claro nas próximas etapas :D)
4. Configurando package.json
Agora precisamos adicionar a referência ao arquivo main nas propriedades do package.json e adicionar o script para executar nosso projeto.
Adicione no seu package.json as linhas 5 e 14 do código abaixo.
Agora basta executar o comando npm run electron ou yarn electron! =D
Foi fácil essa, não foi!? :)
Existem muitas possibilidades e muito conteúdo sobre o que abordamos nesse artigos, então lembre sempre de pesquisar na documentação suas duvidas e aprofunde seus conhecimentos.
