Cómo crear fácilmente aplicaciones de escritorio con HTML, CSS y Javascript

¿Se pueden utilizar realmente HTML, CSS y Javascript para crear aplicaciones de escritorio?

La respuesta es sí.

En este artículo nos centraremos principalmente en cómo se puede utilizar Electron para crear aplicaciones de escritorio con tecnologías web como HTML, CSS y Javascript.

Electrón

Electron se puede utilizar para crear aplicaciones de escritorio con HTML, CSS y Javascript. Además, estas aplicaciones funcionan para múltiples plataformas como Windows, Mac, Linux, etc.

Electron combina Chromium y NodeJS en un solo tiempo de ejecución. Esto nos permite ejecutar el código HTML, CSS y Javascript como una aplicación de escritorio.

Forja de electrones

Si Electron se usa directamente, entonces se necesita alguna configuración manual antes de construir su aplicación. Además, si desea utilizar Angular, React, Vue o cualquier otro marco o biblioteca, deberá configurarlo manualmente para eso.

Electron Forge hace las cosas anteriores mucho más fáciles.

Proporciona aplicaciones de plantilla con Angular, React, Vue y otros marcos que evitan las configuraciones manuales adicionales.

También proporciona una forma sencilla de crear y empaquetar la aplicación. También proporciona muchas otras características que se pueden encontrar en su documentación.

Prerrequisitos

Asegúrese de tener NodeJS instalado. Se puede instalar desde aquí.

Instale Electron Forge globalmente usando el siguiente comando:

npm install -g electron-forge

Empecemos con la aplicación.

Utilice el siguiente comando para crear su aplicación:

electron-forge init simple-desktop-app-electronjs

simple-desktop-app-electronjs es el nombre de la aplicación.

El comando anterior tardará algún tiempo en ejecutarse.

Una vez que termine de ejecutarse, inicie la aplicación usando los siguientes comandos:

cd simple-desktop-app-electronjsnpm start

Esto debería abrir una ventana como la que se muestra a continuación:

Comprensión del código y la estructura de carpetas existentes

La aplicación tiene una estructura de carpetas particular. Aquí mencionaré algunas de las cosas importantes en esta estructura de carpetas.

package.json

Tiene información sobre la aplicación que está creando, todas las dependencias necesarias para la aplicación y algunos scripts. Algunos de los scripts ya están preconfigurados y también puede agregar nuevos scripts.

La ruta config.forge tiene todas las configuraciones que son específicas de ElectronJS. Por ejemplo, make-targets se usa para especificar los archivos de make de destino para varias plataformas como Windows, Mac o Linux.

También tiene package.json, lo "main": "src/index.js"que indica que src / index.js es el punto de partida de la aplicación

src / index.js

Según package.json, index.js es el script principal. El proceso que ejecuta el script principal se conoce como proceso principal . Entonces, el proceso principal ejecuta el script index.js.

El proceso principal se utiliza para mostrar elementos de la GUI. Lo hace creando páginas web.

Cada página web creada se ejecuta en un proceso llamado proceso de renderizado.

Proceso principal y proceso de renderizado

El propósito del proceso principal es crear páginas web utilizando una BrowserWindowinstancia.

La BrowserWindowinstancia utiliza un proceso de renderizado para ejecutar cada página web.

Cada aplicación puede tener solo un proceso principal, pero puede tener muchos procesos de renderizado.

También es posible comunicarse entre el proceso principal y el renderizador. Sin embargo, esto no se tratará en este artículo.

abcd.html se muestra como una segunda página web en la arquitectura anterior. Pero en nuestro código no tendremos una segunda página web.

src / index.html

index.js carga el archivo index.html en una nueva instancia de BrowerWindow.

Lo que esto significa básicamente es que index.js crea una nueva ventana GUI y la carga con la página web index.html. La página web index.html se ejecuta en su propio proceso de representación.

Explicación del código en index.js

La mayor parte del código creado en index.js tiene buenos comentarios que explican lo que hace. Aquí mencionaré algunos puntos clave a tener en cuenta en index.js:

mainWindow = new BrowserWindow({ width: 800, height: 600, }); // and load the index.html of the app. mainWindow.loadURL(`file://${__dirname}/index.html`);

The above code snippet basically creates a BrowserWindow Instance and loads index.html into the BrowserWindow.

You will see app used often in the code. For example take the below code snippet:

app.on('ready', createWindow);

app is used to control the application’s event life cycle.

The above code snippet says that when the application is ready, load the first window.

Similarly, app can be used to perform other actions on various events. For example it can be used to perform some action right before the application closes and so on.

Let’s create a Temperature Converter Desktop Application

Let us use the same application we used before and modify it slightly to create a temperature converter application.

First let us install Bootstrap with the following command:

npm install bootstrap --save

Copy the following code into src/index.html:

    Temperature Converter    

Temperature Converter

Celcius: Fahrenheit:

The above code does the following:

  1. Creates a text box with id Celcius. Whenever anything is typed in this textbox, the celciusToFahrenheit() function is called.
  2. Creates a text box with id Fahrenheit. Whenever anything is typed in this textbox, the fahrenheitToCelcius() function is called.
  3. Whenever a new value is typed in the Celcius text box, the value in the Fahrenheit text box displays the same temperature in Fahrenheit
  4. Whenever a new value is typed in the Fahrenheit text box, the value in the Celcius text box displays the same temperature in Celcius

The 2 functions which do the temperature conversion are present in renderer.js.

Create a file called renderer.js inside src. Copy the following code into it:

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; }

The celciusToFahrenheit() function reads the value in the Celcius text box, converts it to Fahrenheit, and writes the new temperature into the Fahrenheit text box.

The fahrenheitToCelcius() function does the exact opposite of this.

Running the application

Run the application using the following command:

npm start

This should display the following window. Try it out with different values.

Packaging the application

The command to package the application is:

npm run package

This command will take some time to run. Once it finishes check the out folder within the project folder.

I tested this in a Windows machine. This creates a folder called simple-desktop-app-electronjs-win32-x64 inside the out folder

So in the out/simple-desktop-app-electronjs-win32-x64 folder, the command creates an .exe file for this application. Clicking on the exe file automatically starts the desktop application.

The folder name simple-desktop-app-electronjs-win32-x64 can be broken down as appname-platform-architecture where

  • appname = simple-desktop-app-electronjs
  • platform = win32
  • architecture = x64

When you run this command without any parameters, by default it packages for the platform which you are using for development.

Let’s say you want to package for a different platform and architecture. Then you can use the following syntax:

npm run package -- --platform= arch=

For example, in order to package for linux you can use the following command:

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

This will create a folder called simple-desktop-app-electronjs-linux-x64 inside the out folder.

Creating a make File

In order to create a make file or an installer for the application, use the following command:

npm run make

This command will take some time to run. Once it finishes check the out folder within the project folder.

The out/make folder will have a Windows installer for the desktop application.

When you run this command without any parameters, by default it creates the installer for the platform which you are using for development.

Code

The code for this desktop application is available in my GitHub repo:

//github.com/aditya-sridhar/simple-desktop-app-electronjs

Congrats ?

You now know how to create desktop applications using HTML, CSS and Javascript.

This article covered very basic concepts of Electron and Electron-Forge.

To know more about them, you can check out their documentation.

About the author

I love technology and follow the advancements in the field. I also like helping others with my technology knowledge.

Feel free to connect with me on my LinkedIn account //www.linkedin.com/in/aditya1811/

You can also follow me on twitter //twitter.com/adityasridhar18

My Website: //adityasridhar.com/

Read more of my articles on my blog at adityasridhar.com.