Electron: desarrollo de aplicaciones de escritorio usando HTML, CSS y JavaScript

¿Es posible crear aplicaciones de escritorio usando HTML, CSS y JavaScript? El autor del artículo, cuya traducción publicamos hoy, da una respuesta afirmativa a esta pregunta. Aquí hablará sobre cómo, usando tecnologías web y usando las capacidades del marco Electron, crear aplicaciones multiplataforma para sistemas operativos de escritorio.

Electrón

Electron es un marco para desarrollar aplicaciones de escritorio usando HTML, CSS y JavaScript. Dichas aplicaciones pueden ejecutarse en varias plataformas. Entre ellos están Windows, Mac y Linux.

Electron se basa en proyectos de Chromium y Node.js, combinados en un solo entorno que proporciona aplicaciones. Esto hace posible el uso de tecnologías web en el desarrollo de programas de escritorio.

Electron es un proyecto serio que se utilizó para crear muchas aplicaciones populares. Entre ellos están los mensajeros de Skype y Discord, los editores de Visual Studio Code y Atom code, así como más de 700 aplicaciones , cuya información se publica en el sitio web de Electron.

Forja de electrones

Para desarrollar una aplicación usando Electron, este marco debe estar configurado. Esto también se aplica a los casos en que la aplicación planea usar otros marcos o bibliotecas, por ejemplo, Angular, React, Vue u otra cosa.

La herramienta de línea de comandos Electron Forge puede simplificar drásticamente el proceso de configuración de Electron. Proporciona al desarrollador plantillas de aplicación basadas en Angular, React, Vue y otros marcos. Esto elimina la necesidad de que el programador configure todo manualmente.

Además, Electron Forge simplifica el ensamblaje y empaque de aplicaciones. De hecho, esta herramienta tiene muchas otras características útiles, de las que puede aprender a partir de su documentación .

Considere el proceso de desarrollar una aplicación simple de Electron usando Electron Forge.

Preparación preliminar

Para comenzar a desarrollar aplicaciones Electron utilizando Electron Forge, necesitará un sistema con la plataforma Node.js instalada. Puedes descargarlo aquí .

Para instalar Electron Forge a nivel mundial, puede usar el siguiente comando:

npm install -g electron-forge 

Crear una aplicación con plantilla

Para crear una aplicación de plantilla usando Electron Forge, ejecute el siguiente comando:

 electron-forge init simple-desktop-app-electronjs 

Este comando inicializa un nuevo proyecto de aplicación, cuyo nombre es simple-desktop-app-electronjs . Este comando tardará un tiempo en completarse. Después de crear la aplicación de plantilla, puede iniciarla así:

 cd simple-desktop-app-electronjs npm start 

Aquí vamos a su carpeta y llamamos al script npm correspondiente.

Después de eso, se debe abrir una ventana, cuyo contenido es similar al que se muestra en la siguiente figura.


Ventana de aplicación de Electron Forge

Hablemos sobre cómo funciona esta aplicación.

Estructura de aplicación de plantilla

Los materiales que componen la aplicación de plantilla creada por Electron Forge están representados por un conjunto de archivos y carpetas. Considere los componentes más importantes de la aplicación.

▍File package.json

Este archivo contiene información sobre la aplicación que se está creando, sus dependencias. Contiene una descripción de varios scripts, uno de los cuales, start , se utilizó para iniciar la aplicación. Puede agregar nuevos scripts a este archivo usted mismo.

En la config.forge archivo config.forge puede encontrar la configuración específica para Electron. Por ejemplo, la sección make_targets contiene subsecciones que describen los objetivos de compilación del proyecto para las plataformas Windows ( win32 ), Mac ( darwin ) y Linux ( linux ).

En package.json puede encontrar la siguiente entrada: "main": "src/index.js" , que indica que el punto de entrada a la aplicación es el archivo ubicado en src/index.js .

Archivo rSrc / index.js

De acuerdo con la información en package.json , el script principal de la aplicación es index.js . El proceso que ejecuta este script se llama proceso principal. Este proceso controla la aplicación. Se utiliza en la formación de la interfaz de la aplicación, que se basa en las capacidades del navegador. También tiene la responsabilidad de interactuar con el sistema operativo. La interfaz de la aplicación está representada por páginas web. El proceso de representación es responsable de la salida de las páginas web y de la ejecución de su código.

▍ Proceso principal y proceso de renderizado

El objetivo del proceso principal es crear ventanas de navegador utilizando una instancia del objeto BrowserWindow . Este objeto utiliza el proceso de representación para organizar el funcionamiento de las páginas web.

Cada aplicación de Electron puede tener solo un proceso principal, pero puede haber varios procesos de renderizado. Además, puede establecer la interacción entre el proceso principal y los procesos de representación, pero no hablaremos de esto aquí, sin embargo. Aquí hay un diagrama de la arquitectura de una aplicación basada en electrones que muestra el proceso principal y dos procesos de representación.


Arquitectura de aplicación de electrones

Este diagrama muestra dos páginas web: index.html y abcd.html . En nuestro ejemplo, solo se utilizará una página, representada por el archivo index.html .

▍ archivo src / index.html

El script de index.js carga el archivo index.html en una nueva instancia de BrowserWindow . Si describe este proceso en palabras simples, resulta que index.js crea una nueva ventana del navegador y carga la página descrita en index.html . Esta página se ejecuta en su propio proceso de representación.

▍ Código de análisis del archivo index.js

El código para index.js bien comentado. Considere sus partes más importantes. Entonces, el siguiente fragmento de código de la función createWindow() crea una instancia del objeto BrowserWindow , carga el archivo index.html en la ventana representada por este objeto y abre las herramientas del desarrollador.

 //   . mainWindow = new BrowserWindow({ width: 800, height: 600, }); //       index.html. mainWindow.loadURL(`file://${__dirname}/index.html`); //   . mainWindow.webContents.openDevTools(); 

En una aplicación terminada, una línea de código que abre las herramientas del desarrollador tiene sentido para comentar.

El código para este archivo a menudo contiene un objeto de app . Por ejemplo, en el siguiente fragmento:

 //      ,  Electron  //        . //  API       . app.on('ready', createWindow); 

El objeto de la app se usa para administrar el ciclo de vida de la aplicación. En este caso, después de completar la inicialización de Electron, se llama a la función responsable de crear la ventana de la aplicación.

El objeto de la app también se usa para realizar otras acciones cuando ocurren varios eventos. Por ejemplo, con su ayuda, puede organizar la ejecución de ciertas operaciones antes de cerrar la aplicación.

Ahora que nos hemos familiarizado con la estructura de la aplicación Electron, consideremos un ejemplo del desarrollo de dicha aplicación.

Desarrollo de aplicaciones de escritorio: convertidor de temperatura

Como base para esta aplicación de capacitación, utilizaremos el proyecto de plantilla creado anteriormente simple-desktop-app-electronjs .

Primero, instale el paquete Bootstrap usando el siguiente comando en la carpeta del proyecto:

 npm install bootstrap --save 

Ahora reemplace el código para el archivo index.html con lo siguiente:

 <!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <title>Temperature Converter</title>   <link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"> </head> <body>   <h1>Temperature Converter</h1>   <div class="form-group col-md-3">     <label for="usr">Celcius:</label>     <input type="text" class="form-control" id="celcius" onkeyup="celciusToFahrenheit()">   </div>   <div class="form-group col-md-3">     <label for="pwd">Fahrenheit:</label>     <input type="text" class="form-control" id="fahrenheit" onkeyup="fahrenheitToCelcius()">   </div>   <script src='./renderer.js'></script> </body> </body> </html> 

Así es como funciona este código:

1. Esto crea un campo de texto con el identificador celcius . Cuando el usuario ingresa un cierto valor en este campo, que debería ser la temperatura en grados Celsius, se celciusToFahrenheit() función celciusToFahrenheit() .
2. El campo de texto con el identificador fahrenheit , también creado en este código, recibe datos del usuario, que debe ser la temperatura en grados Fahrenheit, después de lo cual se llama a la función fahrenheitToCelcius() .
3. La función celciusToFahrenheit() convierte la temperatura, expresada en grados Celsius e ingresada en el campo celcius , en la temperatura en grados Fahrenheit, y luego muestra lo que resultó en el campo fahrenheit .
4. La función fahrenheitToCelcius() realiza la transformación inversa: toma el valor de temperatura expresado en grados Fahrenheit y se ingresa en el campo fahrenheit , lo convierte al valor expresado en grados Celsius y luego escribe lo que resultó en el campo elcius .

Las dos funciones de las que acabamos de hablar se declaran en el archivo renderer.js . Este archivo debe crearse en la carpeta src y colocar el siguiente código:

 function celciusToFahrenheit(){   let celcius = document.getElementById('celcius').value;   let fahrenheit = (celcius* 9/5) + 32;   document.getElementById('fahrenheit').value = fahrenheit; } function fahrenheitToCelcius(){   let fahrenheit = document.getElementById('fahrenheit').value;   let celcius = (fahrenheit - 32) * 5/9   document.getElementById('celcius').value = celcius; } 

Como puede ver, cada una de estas funciones recibirá el valor del campo de página correspondiente, convertirá el valor recibido y escribirá lo que sucedió en otro campo. Las funciones son muy simples, en particular, los valores con los que trabajan no se verifican de ninguna manera, pero en nuestro caso no importa.

Suponemos que la aplicación está lista. Lo probaremos

Lanzamiento de la aplicación

Para iniciar la aplicación, use el siguiente comando:

 npm start 

Después de su ejecución exitosa, se abrirá una ventana de aplicación con los siguientes contenidos.


Ventana de aplicación del convertidor

Experimente con la aplicación ingresando varios valores en los campos.
Ahora que nos hemos asegurado de que la aplicación funcione como se esperaba, es hora de empacarla.

Embalaje de la aplicación

Para empacar la aplicación, use el siguiente comando:

 npm run package 

El sistema necesitará algo de tiempo para ejecutar este comando. Después de completar su trabajo, busque en la carpeta de out , que aparecerá en la carpeta del proyecto.

El experimento para desarrollar la aplicación Electron descrita aquí se llevó a cabo en una computadora con Windows. Por lo tanto, en la carpeta de out , se creó la carpeta simple-desktop-app-electronjs-win32-x64 . En esta carpeta, entre otras cosas, puede encontrar el .exe aplicación .exe . En nuestro caso, se llama simple-desktop-app-electronjs.exe . Para iniciar la aplicación, basta con hacer doble clic en este archivo.

Analicemos el nombre de la carpeta en la que se encuentra el archivo ejecutable de la aplicación. A saber, está construido de acuerdo con el - - plantilla - - . En nuestro caso, su estructura se revela de la siguiente manera:

• El nombre de la aplicación es simple-desktop-app-electronjs .
  
• La plataforma es win32 .
  
• Arquitectura - x64 .
  

Tenga en cuenta que cuando llama al npm run package sin parámetros, de manera predeterminada, se crea un archivo ejecutable de la aplicación para la plataforma que se utiliza durante el desarrollo.

Suponga que necesita empaquetar una aplicación para alguna otra plataforma y arquitectura. Para hacer esto, puede usar la versión extendida del comando anterior. La estructura de este comando se ve así:

 npm run package -- --platform=<platform> arch=<architecture> 

Por ejemplo, para formar un paquete de aplicación para Linux, puede usar el siguiente comando:

 npm run package -- --platform=linux --arch=x64 

Después de completar su trabajo, el directorio simple-desktop-app-electronjs-linux-x64 con los contenidos correspondientes aparecerá en la carpeta del proyecto.

Crear archivos de instalación de aplicaciones

Para crear el archivo de instalación de la aplicación, use el siguiente comando:

 npm run make 

Los resultados de su trabajo estarán en la carpeta que ya conoce. Es decir, ejecutar este comando en el formulario anterior en una máquina con Windows conducirá a la creación de un archivo de instalación de la aplicación de Windows en la carpeta out\make\squirrel.windows\x64 . Al igual que el comando package , el make , invocado sin parámetros, crea un instalador para la plataforma utilizada durante el desarrollo.

Resumen

En este artículo, examinamos los conceptos básicos de la arquitectura de las aplicaciones Electron y escribimos un programa simple . Si estaba pensando en desarrollar su propia aplicación basada en Electron, ahora tiene los conocimientos básicos, expandiéndose y completándose, puede crear lo que desee.

Estimados lectores! ¿Utiliza el marco de desarrollo de escritorio Electron?