Electron.js: Criando o Seu Primeiro App

em
Como criar um app com Electron js


O ElectronJs é uma framework Javascript voltada para o desenvolvimento de aplicativos para desktop, permitindo que você use HTML, CSS e Javascript na criação das suas aplicações e é multiplataforma, ou seja, com o mesmo código você pode criar um app para diferentes sistemas. Apesar de usar tecnologias web para isso, ele não se limita a criar interfaces bonitas e apps simples, na verdade ele permite acesso a diversas funções nativas, podendo assim ser possível criar os mais diversos tipos de apps. Alguns apps criados com Electron: Atom, VSCode, Skype, e vários outros, que estão listados aqui. Neste tutorial, mostrarei como instalar o Electron e como criar o primeiro app, que você verá como é simples, deixando a build do projeto para um outro post (que você pode acompanhar na categoria Javascript ou ElectronJS).

 

Iniciando

Primeiramente, é preciso cumprir alguns requisitos. Apenas o básico de HML/CSS e Javascript é necessário para este tutorial. Tendo isso em mente, agora você precisa instalar o NodeJs, que é bem simples e intuitiva. Após isso, agora é hora de criar a pasta para o app, com os seguintes arquivos dentro:

  • index.html
  • main.js
  • package.json

Nessa pasta que você criou para esses arquivos, abra a linha de comando e rode o comando

npm init

Depois disso, digite as informações que serão solicitadas (nem todas são necessárias), e elas serão colocadas no arquivo package.json. Uma observação: por padrão, o arquivo principal de inicialização será “index.js“, que não fica explícito no package.json, então você pode alterar o nome do main.js para index.js, ou adicionar a linha de código especificando o arquivo main, dentro do package.json, ficando por fim assim:

{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js"
}

Agora, é a vez de instalar o Electron, que é muito simples. Para isso, basta rodar o seguinte comando na linha de comando:

npm install --save-dev electron

 

Escrevendo o código

Vamos agora escrever o código do projeto. Primeiramente abra o arquivo main.js (ou index.js), é nele que tudo começa, e coloque o código que está abaixo. Nele, carregamos duas classes do Electron, o app e o BrowserWindow. O ciclo de vida da aplicação é controlada pelo app enquanto que o BrowserWindow é responsável por abrir a tela do app quando ele é carregado.

const { app, BrowserWindow } = require('electron')

function createWindow () {
  // Função para criar a janela
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // Carrega o index.html do app.
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

Nesse código, a função createWindow é responsável por carregar o app, nela apenas as propriedades width e height são realmente necessárias, pois elas dizem o comprimento e a largura da janela a ser aberta quando o app iniciar. O nodeIntegration permite que você use o Node em qualquer parte da aplicação, se estiver como true, então se não quiser usar o Node basta colocar como false ou retirar essa parte código.

Vamos fazer agora algumas configurações extras, escrevendo mais algumas linhas nesse mesmo arquivo (main.js). Coloque o código abaixo:

// Permite criar telas depois que o Electron estiver carregado
app.whenReady().then(createWindow)

// Configurações extras das janelas
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

Finalmente é hora de mexermos com o index.html, um código HTML básico é suficiente, mas se você quiser testar o funcionamento do Electron (além de apenas carregar o app), você pode inserir esse código:

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </head>
  <body>
    <h1>Hello World!</h1>
    Versão do Node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    e Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

 

Estamos prontos para rodar o app! Para isso basta rodar o seguinte comando:

electron .

Assim, você pode ver como criar uma aplicação Electron é simples, praticamente nada que faça tanta diferença. Se você consegue criar sites usando, por exemplo, Bootstrap, Angular, VueJs, ou outros, você também pode utilizar estas ferramentas no Electron, podendo criar apps excelentes e com um ótimo visual. Dessa forma, para um desenvolvedor web trata-se de uma ferramenta incrível para criar aplicações desktop multiplataforma!

Comentários

Postar um comentário