Prerequisites
Esta es la parte 1 del tutorial de Electrón.
Electron es un framework para crear aplicaciones de escritorio usando JavaScript, HTML y CSS. Juntando Chromium y Node.js en un solo archivo binario, Electron le permite crear aplicaciones multiplataforma que funcionen en Windows, macOS y Linux con una misma base de código JavaScript.
Este tutorial le guiará a través del proceso de desarrollar una aplicación de escritorio con Electron y distribuirla a los usuarios finales.
Metas
Este tutorial comienza guiándolo a través del proceso de unir las piezas juntos de una aplicación básica de Electron desde cero, a continuación enseña cómo empaquetarla y distribuirla a los usuarios usando Electron Forge.
Si prefiere comenzar un proyecto con un solo comando de boilerplate, le recomendamos que inicie con el comando de Electron Forge create-electron-app.
Supuestos
Electron es una capa de envoltorio nativa para aplicaciones web y se ejecuta en un entorno Node.js. Por lo tanto, este tutorial asume que generalmente estás familiarizado con Node y los conceptos básicos de desarrollo web del front-end. Si necesita leer un poco antes de continuar, le recomendamos los siguientes recursos:
Herramientas necesarias
Editor de código
Necesitará un editor de texto para escribir tu código. Recomendamos usar Visual Studio Code, aunque puede elegir el que prefiera.
Línea de comandos
A lo largo del tutorial le pediremos que utilice varias interfaces de la línea de comandos (CLIs). Puede teclear estos comandos en la terminal predeterminada de su sistema:
- Windows: Command Prompt or PowerShell
- macOS: Terminal
- Linux: varía dependiendo de la distribución (ej: Terminal GNOME, Konsole)
La mayoría de los editores de código también vienen con una terminal integrada, que también puede utilizar.
Git y GitHub
Git es un sistema de control de versiones usado comúnmente para código fuente, y GitHub es una plataforma de desarrollo colaborativa construida encima de esta. Aunque ninguno de los dos es estrictamente necesario para construir una aplicación Electron, usaremos lanzamientos de GitHub para configurar actualizaciones automáticas más adelante en el tutorial. Por lo tanto, requeriremos que:
Si no está familiarizado con como funciona Sinatra, le recomendamos leer la guía de Sinatra. También puede usar la aplicación GitHub Desktop si prefiere usar una interfaz visual en lugar de la línea de comandos.
Le recomendamos que cree un repositorio Git local y lo publique en GitHub antes de iniciar el tutorial y que haga un commit de su código después de cada paso.
GitHub Desktop instalará la última versión de Git en su sistema si todavía no lo tiene instalado.
Node.js y npm
Para comenzar a desarrollar una aplicación Electron necesita instalar el Node.js runtime junto con su incluido gestor de paquetes npm en su sistema. Le recomendamos que utilice la última versión de soporte a largo plazo (LTS).
Por favor instala Node.js usando instaladores precompilados para su plataforma. De lo contrario, puedes encontrar problemas de incompatibilidad con diferentes herramientas de desarrollo. Si está usando macOS, recomendamos usar un gestor de paquetes como Homebrew o nvm para evitar cualquier problema de permisos de directorio.
Para comprobar que Node.js fue instalado correctamente, puede usar la bandera -v cuando ejecute los comandos node y npm. Estos deben imprimir las versiones instaladas.
$ node -v
v16.14.2
$ npm -v
8.7.0
Aunque necesita Node.js instalado localmente para montar un proyecto de Electron, Electron no utiliza la instalación de Node.js de su sistema para ejecutar su código. En cambio, viene empaquetado con su propio Node.js runtime. Esto significa que los usuarios finales no necesitan instalar Node.js como requisito previo para ejecutar su aplicación.
Para verificar qué versión de Node.js se está ejecutando en su aplicación, puede acceder a la variable process.versions en el proceso principal o script de precarga. También puede hacer referencia a https://releases.electronjs.org/releases.json.