Electronjs y los emuladores

Buenas!!!, seguro que te estas preguntado, ¿que tiene que ver Electronjs con los emuladores?, ¿que es Electronjs?, ¿Es un nuevo emulador?….

Bien, Electronjs es una herramienta que nos permite crear aplicaciones multiplataforma de escritorio usando JavaScript, HTML y CSS, aunque nada nos impide usar otras herramientas como Vuejs, Reactjs o Angular.

Como me parece una herramienta interesante, he creado una pequeña aplicación que nos sirve para unificar todos los emuladores de consolas en nuestro ordenador.

La aplicación es bastante sencilla,  nos muestra un listado de emuladores de consolas, y nos permite ejecutar cada emulador desde un único sitio.

A continuación un pequeño vídeo de la aplicación en funcionamiento:

Configurando Electronjs y mostrando el código

Para realizar esta prueba he usado únicamente JavaScript, HTML y CSS ya que me interesa saber como funciona Electronjs y prefiero centrarme en la herramienta.

El funcionamiento y la configuración inicial es muy sencilla, debemos instalar Electronjs usando el siguiente comando:

npm install electron
npm install electron-packager

Una vez instalado, lo recomendable es añadir unos scripts al fichero package.json para facilitar su uso.

script: {
   "start": "electron ."
   "build": "electron-packager . --icon=icon.ico tecnoEmulator"
}

Con esto ya podríamos empezar a usar Electronjs.

A continuación la configuración del proyecto de Electronjs:

const { app, BrowserWindow } = require('electron');

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      devTools: false
    },
  });

  win.loadFile('index.html');
  win.removeMenu();
  win.setTitle('TecnoEmulator');
  win.maximize();
};

app.whenReady().then(createWindow);

Y con este pequeño código ya tendríamos la configuración de nuestra aplicación de escritorio, para el resto un poco de JavaScript, HTML y CSS.

Probando y creando nuestro ejecutable

Para probar y compilar nuestro código debemos usar los scripts que añadimos en el package.json.

Usando npm run start ejecutamos nuestra aplicación y con el comando npm run build obtenemos la carpeta con todo lo necesario para ejecutar nuestra aplicación.

La estructura final de la aplicación generada es la siguiente:

Para finalizar esta entrada, podéis descargar desde aquí la aplicación, extraer el contenido en el disco duro y ejecutar el fichero tecnoEmulator.exe.

Cualquier duda sobre el manejo de la aplicación se resuelve siguiendo las instrucciones que se muestran en el vídeo anterior.