Pré-requisitos
Esta é a parte 1 do tutorial de Electron.
Electron é um framework que te permite criar aplicações desktop com JavaScript, HTML e CSS. Ao incorporar Chromium e Node.js em um único arquivo binário, o Electron permite que você crie aplicativos multiplataformas que funcionam no Windows, macOS e Linux com um único código JavaScript.
Este tutorial irá guia-lo através do processo de desenvolvimento de uma aplicação desktop com Electron, e distribui-la aos usuários finais.
Objetivos
Este tutorial começa guiando você através do processo de construção de um aplicativo mínimo Electron a partir do zero, em seguida ensinar a você como empacotar e distribuir aos usuários usando Electron Forge.
Se você prefere começar um projeto com um único comando boilerplate, recomendamos que você inicie com o comando Electron Forge create-electron-app.
Pressupostos
Electron é uma camada wrapper nativa para aplicativos web sendo executado em um ambiente Node.js. Portanto, este tutorial presume que você está familiarizado com o Node e os conceitos básicos de desenvolvimento web de front-end. Se você precisar fazer alguma leitura em segundo plano antes de continuar, recomendamos os seguintes recursos:
Ferramentas necessárias
Editor de código
Você vai precisar de um editor de texto para escrever seu código. Recomendamos usar o Visual Studio Code, embora possa escolher qualquer um que preferir.
Linha de comando
Ao longo do tutorial, pediremos que você use várias interfaces com linha de comando (CLIs). Você pode digitar estes comandos no seu terminal padrão do sistema:
- Windows: Prompt de Comando ou PowerShell
- macOS: Terminal
- Linux: vários dependendo da distribuição (por exemplo, GNOME Terminal, Konsole)
A maioria dos editores de código também vem com um terminal integrado, que você também pode usar.
Git e GitHub
Git é um sistema comum de controle de versão para código-fonte, e o GitHub é uma plataforma de desenvolvimento colaborativa construída sobre ela. Embora nenhum seja necessário para construir uma aplicação Electron, usaremos versões GitHub para configurar atualizações automáticas mais tarde no tutorial. Portanto, precisamos que você:
Se você não estiver familiarizado com a forma que o Git funciona, recomendamos que leia o Guia Git do GitHub. Você também pode usar o aplicativo GitHub Desktop se você prefere uma interface visual em vez da linha de comando.
Recomendamos que você crie um repositório Git local e publique-o no GitHub antes de começar o tutorial, e faça um commit do seu código após cada passo.
GitHub Desktop irá instalar no seu sistema a versão mais recente do Git se você ainda não tem instalado.
Node.js e npm
Para começar a desenvolver um aplicativo Electron, você precisa instalar o Node.js runtime e seu gerenciador de pacotes npm ao seu sistema. We recommend that you use the latest long-term support (LTS) version.
Por favor, instale o Node.js usando instaladores específicos para sua plataforma. Caso contrário, você pode encontrar problemas de incompatibilidade com ferramentas de desenvolvimento diferentes. Se você estiver usando macOS, recomendamos que use um gerenciador de pacotes como Homebrew ou nvm para evitar quais problemas de permissão de diretório.
Para verificar se o Node.js foi instalando corretamente, você pode usar -v quando executando os comandos node e npm. Estas devem imprimir as versões instaladas.
$ node -v
v16.14.2
$ npm -v
8.7.0
Embora você precisa do Node.js instalado localmente para fazer um projeto Electron, Electron não usa o Node.js do seu sistema para executar o seu código. Ao invés disso, vem com seu próprio Node.js runtime. Isto significa que seus usuários finais não precisam instalar o Node.js com pré-requisito para executar seu aplicativo.
Para verificar qual versão do Node.js está sendo executada em seu aplicativo, você pode acessar a variável global process.versions no processo principal ou no script de pré-carregamento. You can also reference https://releases.electronjs.org/releases.json.