APLICACIÓN ESCRITORIO Electron.js (React)
Objetivo: poder tener nuestra proyecto web como programa de escritorio
Puntos importantes:
- Instalación
- Configuración
Funcionalidad:
Electron.js
Para realizar nuetro proyecto web como programa de escritorio, usaremos el componete de React, ELECTRON.JS.
Electron es un componente que nos ayuda a crear aplicaciones multiplataforma de escritorio con JavaScript, HTML y CSS
INSTALACIÓN
- Debemos crearnos un nuevo proyecto React
npx create-react-app electron-react-app
Nos ubicamos en el proyecto, y pasaremos a instalar y añadir Electron
yarn add electron
Y abrimos nuestro proyecto con code, entramos al package.json. Donde vamos a modificar unas lineas:
- Debemos añadir, justo un linea arriba que la anotacion de debug:
«main»: «main.js»
- En el terminal añadimos concurrently, que nos añadira una linea al package:
yarn add concurrently
- Seguimos con wait-on:
yarn add wait-on
- Finalmente añadiremos una linea a mano, para llamar a la ejecucion del programa, justo debajo de la linea de eject:
«electron-react»: «concurrently \»SET BROWSER=none && yarn start\» \»wait-on http://localhost:3000 && electron .\»»
Aquí podemos observar como nos debe quedar el package después de las instalaciones y configuraciones anteriores
Creamos el main.js, que nos va a servir para la configuracion de nuestra ventana Electron.
Vamos a utilizar el quick-start que nos concede el propio electron desde su github: https://github.com/electron/electron-quick-start.git
Cambiamos la linea mainWindow.loadFile(), por loadURL(‘https.//localhost:3000’)
Para que nos carga el local host con nuestro proyecto.
Finalmente probamos nuestra primera ventana, ejecutando:
npm run electron-react
Podemos observar que todo a funcionado correctamente y vemos nuestra ventana funcionando.
CONFIGURACIONES
Como podemos ver, ya tendríamos la ventana programada, pero como nos parece fea y poca cosa vamos a darle unos retoques para que se vea más bonita
Vemos que en el BrowserWindow, se encuentra la configuración de nuestra ventana.
Este componente, tiene extensas configuraciones, pero solo vamos a tocar las más útiles.
Podemos ver el tamaño, de la pantalla con el width y el height, vamos a cambiarlo para que se vea rectangular.
Vamos a poner que no se pueda redimensionar nuestra ventana, con la propiedad resizable, es una función booleana, que por defecto es true, pero la vamos a poner false.
Además queremos que el usuario no sea capaz de maximizar la ventana, propiedad maximizable
Podemos añadir la propiedad fullscreenable, inicializada a falso, para que tampoco pueda ver la ventana en pantalla grande, con el F11
Podemos observar que la ventana, a recibido cambios, pero no se ve muy limpia, seguimos teniendo el menu, la ventana tiene la parte superior de cerrar aplicación y minimizar.
Pues le vamos a añadir un nueva propiedad que va hacer que nuestra ventana se vea mucho más limpia y comoda para la vista.
Esta propiedad es frame, al igual que las anteriores es un booleanos, que debemos igualarla a false.
Finalmente podemos observar como se ve nuestra ventana terminada, después de las configuraciones correspondientes.
El diseño es más limpio y cómodo, podemos minimizar y gestionar la ventana con el icono que encontramos en la barra de navegación.
- Posibles problemas encontrados:
Problemas no he tenido, pero he tenido que hacer un estudio y documentación previa de Electron para poder usar y configurar nuestra ventana de escritorio
- Recomendaciones
Leer la documentación, estudio previo y dedicarle tiempo a comprender las configuraciones
- Posibles interrogantes
Este componente es muy extenso, podemos hacer muchas cosas y utilidades varias. Hay casi infinidad de configuraciones y usos, pero por ejemplo también se puede gestionar la aplicación con un icono en la barra de herramientas
Post realizado por Alejandro García Vacas
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2020-2021
Repositorio del proyecto: https://github.com/alexxGV/electron-react-app.git
Video explicativo: https://web.microsoftstream.com/video/110ec01f-4d41-4184-a06b-3e5bec957420?list=studio