Configure Electron y cree la aplicación Hello World en Linux

Este artículo cubrirá una guía sobre la instalación de Electron y la creación de una sencilla aplicación de Electron "Hello World" en Linux.

Sobre Electron

Electron es un marco de desarrollo de aplicaciones que se utiliza para crear aplicaciones de escritorio multiplataforma utilizando tecnologías web en un navegador web independiente. También proporciona API específicas del sistema operativo y un sistema de empaquetado robusto para facilitar la distribución de aplicaciones. Una aplicación típica de Electron requiere tres cosas para funcionar: Nodo.js runtime, un navegador independiente basado en Chromium que viene con API específicas de Electron y OS.

Instalar nodo.js

Puede instalar Node.js y el administrador de paquetes "npm" ejecutando el siguiente comando en Ubuntu:

$ sudo apt install nodejs npm

Puede instalar estos paquetes en otras distribuciones de Linux desde el administrador de paquetes. Alternativamente, descargue los binarios oficiales disponibles en Node.js sitio web.

Crear un nodo nuevo.Proyecto js

Una vez que haya instalado Node.js y "npm", cree un nuevo proyecto llamado "HelloWorld" ejecutando los siguientes comandos en sucesión:

$ mkdir HelloWorld
$ cd HelloWorld

A continuación, inicie una terminal en el directorio "HelloWorld" y ejecute el siguiente comando para inicializar un nuevo paquete:

$ npm init

Vaya a través del asistente interactivo en la terminal e ingrese los nombres y valores según sea necesario.

Espere a que finalice la instalación. Ahora debería tener un "paquete.json ”en el directorio“ HelloWorld ”. Tener un "paquete.json ”en el directorio de su proyecto facilita la configuración de los parámetros del proyecto y hace que el proyecto sea portátil para facilitar la compartición.

El paquete.json ”debe tener una entrada como esta:

"principal": "índice.js "

"Índice.js ”es donde se ubicaría toda la lógica de su programa principal. Puede crear ".js ”,“.html ”y“.css ”de acuerdo a sus necesidades. A los efectos del programa "HelloWorld" que se explica en esta guía, el siguiente comando creará tres archivos obligatorios:

$ índice táctil.índice js.índice html.css

Instalar Electron

Puede instalar Electron en el directorio de su proyecto ejecutando el siguiente comando:

$ npm instalar electron --save-dev

Espere a que finalice la instalación. Electron ahora se agregará a su proyecto como una dependencia y debería ver una carpeta "node_modules" en el directorio de su proyecto. La instalación de Electron como una dependencia por proyecto es la forma recomendada de instalar Electron de acuerdo con la documentación oficial de Electron. Sin embargo, si desea instalar Electron globalmente en su sistema, puede usar el comando que se menciona a continuación:

$ npm instalar electron -g

Agregue la siguiente línea a la sección "scripts" en "paquete.json ”para finalizar la configuración de Electron:

"inicio": "electrón ."

Crear aplicación principal

Abrir "índice.js ”en el editor de texto de su elección y agregue el siguiente código:

const app, BrowserWindow = require ('electron');
function createWindow ()
ventana constante = nueva ventana del navegador (
ancho: 1600,
altura: 900,
webPreferences:
nodeIntegration: verdadero

);
ventana.loadFile ('índice.html ');

aplicación.cuando esté listo().luego (createWindow);

Abrir "índice.html ”en su editor de texto favorito y coloque el siguiente código en él:

Hola Mundo !!

El código javascript es bastante autoexplicativo. La primera línea importa los módulos Electron necesarios para que la aplicación funcione. A continuación, crea una nueva ventana del navegador independiente que viene con Electron y carga el "índice.html ”en él. El marcado en el "índice.html "crea un nuevo párrafo" Hola mundo !!"Envuelto en el"

" etiqueta. También incluye un enlace de referencia al "índice.css "archivo de hoja de estilo utilizado más adelante en el artículo.

Ejecute su aplicación de Electron

Ejecute el siguiente comando para iniciar su aplicación Electron:

$ npm inicio

Si ha seguido las instrucciones correctamente hasta ahora, debería obtener una nueva ventana similar a esta:

Abrir "índice.css "y agregue el siguiente código para cambiar el color de" Hello World !!" cuerda.

#hworld
color rojo;

Ejecute el siguiente comando nuevamente para ver el estilo CSS aplicado a "Hello World !!" cuerda.

$ npm inicio

Ahora tiene el conjunto mínimo de archivos necesarios para ejecutar una aplicación básica de Electron. Tienes "índice.js ”para escribir la lógica del programa,“ index.html "para agregar marcado HTML y" index.css ”para diseñar varios elementos. También tienes un "paquete.json "y la carpeta" node_modules "que contienen las dependencias y los módulos necesarios.

Aplicación de paquete de electrones

Puede utilizar Electron Forge para empaquetar su aplicación, según lo recomendado por la documentación oficial de Electron.

Ejecute el siguiente comando para agregar Electron Forge a su proyecto:

$ npx @ electron-forge / cli @ última importación

Debería ver un resultado como este:

✔ Comprobando su sistema
✔ Inicializando el repositorio de Git
✔ Escritura de paquete modificado.archivo json
✔ Instalar dependencias
✔ Escritura de paquete modificado.archivo json
✔ Fijación .gitignore
Hemos INTENTADO convertir su aplicación en un formato que comprenda electron-forge.
Gracias por usar "electron-forge"!!!

Revisar "paquete.json ”y edite o elimine las entradas de las secciones de“ creadores ”de acuerdo con sus necesidades. Por ejemplo, si no desea crear un archivo "RPM", elimine la entrada relacionada con la creación de paquetes "RPM".

Ejecute el siguiente comando para compilar el paquete de la aplicación:

$ npm ejecutar hacer

Debería obtener un resultado similar a este:

> hola mundo @ 1.0.0 hacer / inicio / nit / HelloWorld
> marca de forja electrónica
✔ Comprobando su sistema
✔ Resolviendo la configuración de Forge
Necesitamos empaquetar su solicitud antes de poder hacerlo
✔ Preparación para empaquetar la aplicación para arch: x64
✔ Preparando dependencias nativas
✔ Aplicación de embalaje
Haciendo para los siguientes objetivos: deb
✔ Haciendo para el objetivo: deb - En la plataforma: linux - Para el arco: x64

Edité el "paquete.json "para compilar solo el paquete" DEB ". Puede encontrar paquetes construidos en la carpeta "out" ubicada dentro del directorio de su proyecto.

Conclusión

Electron es ideal para crear aplicaciones multiplataforma basadas en una única base de código con cambios menores específicos del sistema operativo. Tiene algunos problemas propios, el más importante de ellos es el consumo de recursos. Dado que todo se representa en un navegador independiente y se abre una nueva ventana del navegador con cada aplicación de Electron, estas aplicaciones pueden consumir muchos recursos en comparación con otras aplicaciones que utilizan kits de herramientas de desarrollo de aplicaciones específicas del sistema operativo nativo.