Configurar Electron y crear 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 simple aplicación de electrones "Hello World" en Linux.

Acerca de Electron

Electron es un marco de desarrollo de aplicaciones utilizado 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 empaque robusto para una distribución más fácil de aplicaciones. Una aplicación de electrones típica requiere tres cosas para funcionar: nodo.JS Runtime, un navegador a base de cromo independiente que viene con API específicas de Electron y OS.

Instalar nodo.js

Puedes instalar nodo.JS y "NPM" Administrador de paquetes ejecutando el siguiente comando en Ubuntu:

$ sudo apt instalación nodejs npm

Puede instalar estos paquetes en otras distribuciones de Linux desde el Administrador de paquetes. Alternativamente, descargue binarios oficiales disponibles en el nodo.Sitio web de JS.

Crear un nuevo nodo.proyecto JS

Una vez que haya instalado el nodo.JS y "NPM", cree un nuevo proyecto llamado "Helloworld" ejecutando los siguientes comandos en sucesión:

$ mkdir helloworld
$ CD Helloworld

A continuación, enciende una terminal en el directorio "Helloworld" y ejecute el comando a continuación para inicializar un nuevo paquete:

$ npm init

Pasar por el asistente interactivo en la terminal e ingrese nombres y valores según sea necesario.

Espere a que finalice la instalación. Ahora deberías tener un "paquete.JSON "Archivo en el directorio" Helloworld ". Tener un "paquete.El archivo JSON ”en su directorio de proyecto facilita la configuración de los parámetros del proyecto y facilita la capacidad de compartir el proyecto.

El paquete.El archivo JSON ”debe tener una entrada como esta:

"Principal": "Índice.JS "

"Índice.JS "es donde se ubicaría toda la lógica para su programa principal. Puedes crear adicional ".JS ",".html "y".Archivos de CSS "de acuerdo con sus necesidades. A los fines del programa "Helloworld" explicado en esta guía, el siguiente comando creará tres archivos requeridos:

Índice de $ touch.índice JS.índice HTML.CSS

Instalar electrones

Puede instalar Electron en el directorio de su proyecto ejecutando el comando a continuación:

$ npm de instalación de electrones --save-defev

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

$ npm de instalación de electrones -g

Agregue la siguiente línea a la sección "Scripts" en "Paquete.Archivo JSON "para finalizar la configuración de electrones:

"Inicio": "Electron ."

Crear aplicación principal

Abrir "índice.Archivo JS "en el editor de texto de su elección y agrégase el siguiente código:

const app, browserwindow = request ('Electron');
function createwindow ()
Const Window = new BrowserWindow (
Ancho: 1600,
Altura: 900,
WebPreferences:
Nodeintegration: verdadero

);
ventana.LoadFile ('Índice.html ');

aplicación.cuando esté listo().Entonces (createwindow);

Abrir "índice.Archivo HTML "en su editor de texto favorito y coloque el siguiente código:

Hola Mundo !!

El código JavaScript se explica por sí mismo. La primera línea importa los módulos de electrones necesarios para que la aplicación funcione. A continuación, crea una nueva ventana del navegador independiente que viene con electrones y cargue el "índice.archivo html "en él. El marcado en el "índice.El archivo html "crea un nuevo párrafo" Hola mundo !!"Envuelto en el"

" etiqueta. También incluye un enlace de referencia al "índice.Archivo Stylesheet de CSS "utilizado más adelante en el artículo.

Ejecute su aplicación de electrones

Ejecute el comando a continuación para iniciar su aplicación Electron:

Inicio de $ npm

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

Abrir "índice.Archivo CSS "y agregue el siguiente código para cambiar el color de" Hello World !!" cadena.

#hworld
color rojo;

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

Inicio de $ npm

Ahora tiene el conjunto mínimo de archivos requeridos para ejecutar una aplicación básica de electrones. Tienes "índice.JS "para escribir la lógica del programa," Índice.HTML "para agregar marcado HTML y" índice.CSS "para diseñar varios elementos. También tienes un "paquete.Archivo JSON "y carpeta" Node_Modules "que contiene dependencias y módulos requeridos.

Aplicación de electrones de paquete

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

Ejecute el comando a continuación para agregar Electron Forge a su proyecto:

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

Deberías ver alguna salida como esta:

✔ Comprobación de su sistema
✔ Inicialización del repositorio de git
✔ Escribir paquete modificado.archivo json
✔ Instalar dependencias
✔ Escribir paquete modificado.archivo json
✔ Arreglo .gitignore
Hemos intentado convertir su aplicación para que esté en un formato que Electron-Forge entiende.
Gracias por usar "Electron-Forge"!!!

Revisar "Paquete.JSON "Archivo y editar o eliminar entradas de las secciones" creadores "de acuerdo con sus necesidades. Por ejemplo, si no desea construir un archivo "RPM", elimine la entrada relacionada con la construcción de paquetes "RPM".

Ejecute el siguiente comando para crear el paquete de aplicación:

$ npm run make

Debería obtener alguna salida similar a esta:

> [email protected] make/home/nit/helloworld
> Electron-Forge Make
✔ Comprobación de su sistema
✔ Resolución de la configuración de Forge
Necesitamos empaquetar su aplicación antes de poder hacerlo
✔ Preparación para el paquete Aplicación para Arch: x64
✔ Preparación de dependencias nativas
✔ Aplicación de embalaje
Hacer los siguientes objetivos: Deb
✔ Making for Target: Deb - On Platform: Linux - Para Arch: x64

Edité el "paquete.archivo json "para construir solo el paquete" deb ". Puede encontrar paquetes construidos en la carpeta "fuera" ubicada dentro de su directorio de proyecto.

Conclusión

Electron es excelente para crear aplicaciones multiplataforma basadas en una única base de código con cambios específicos de sistema operativo menor. Tiene algunos problemas propios, lo más importante de ellos es el consumo de recursos. Dado que todo se representa en un navegador independiente y se inicia una nueva ventana del navegador con cada aplicación de electrones, estas aplicaciones pueden ser intensivas en recursos en comparación con otras aplicaciones utilizando kits de herramientas de desarrollo de aplicaciones específicos de SO Native OS nativos.