Administrar entornos de prueba en ElectronJS

ElectronJS es un marco de código abierto que se utiliza para crear aplicaciones de escritorio nativas multiplataforma utilizando tecnologías web como HTML, CSS y JavaScript que pueden ejecutarse en los sistemas operativos Windows, macOS y Linux. Combina el motor Chromium y NodeJS en un solo tiempo de ejecución.

En una aplicación de escritorio compleja o empresarial, los desarrolladores necesitan diferentes entornos de prueba para probar e implementar la aplicación. Según el alcance de la aplicación, se configuran varios entornos de ensayo para probar y verificar la aplicación antes de que finalmente esté disponible para el usuario final. El entorno de ensayo final en el que se implementa la aplicación y se pone a disposición del público se conoce como Producción . Cuando finaliza el desarrollo de la aplicación o se agrega una nueva función a la aplicación, generalmente se implementa en el entorno de prueba de desarrollo . en el desarrolloentorno, los desarrolladores realizan pruebas unitarias básicas y ven las nuevas características de la aplicación en acción. Dependiendo de la empresa, puede haber varios otros entornos de preparación, como QA (Garantía de calidad) , Sandbox , Preproducción , etc. antes de que la aplicación finalmente llegue a la etapa de producción. Cada entorno de prueba tiene un propósito específico dentro del ciclo de vida de la aplicación. Por ejemplo, en el entorno de control de calidad , la aplicación se somete a pruebas de integración y pruebas de regresión. En la Preproducciónentorno, la aplicación se somete a pruebas de rendimiento y carga. Una vez que la aplicación pasa por todos estos pasos, finalmente se puede implementar en el entorno de producción donde se pone a disposición de la audiencia. Otra ventaja de estos entornos de prueba es que los desarrolladores pueden habilitar útiles funciones de utilidad y depuración dentro de la aplicación que no deberían estar visibles en la etapa de producción. Esto ayuda a encontrar errores y evaluar el rendimiento de la aplicación. 

Hay varias formas en las que podemos habilitar estos entornos de prueba dentro de la aplicación Electron. Ya sabemos que Electron es compatible con el objeto de proceso global NodeJS , que nos proporciona acceso a las variables de entorno, específicamente NODE_ENV . Podemos definir el entorno de ensayo a través de esta propiedad del objeto de proceso . Para obtener información más detallada sobre el objeto de proceso y NODE_ENV .

• Consulte el artículo: Procesar objeto en ElectronJS .
• Consulte el artículo: Hot Reload en ElectronJS . 

Otra forma de definir el entorno de ensayo es utilizar variables de entorno como ELECTRON_ENV . Electron admite una serie de variables ambientales, y también se clasifican en variables de producción y desarrollo . Para obtener información más detallada sobre las variables de entorno.

• Consulte el artículo: Variables de entorno en ElectronJS .

Sin embargo, el problema es que algunas de estas variables de entorno no son compatibles con todas las plataformas de SO. Por lo tanto, debe haber una forma en la que podamos distinguir entre los diferentes entornos de ensayo que funcionan en todas las plataformas de SO y que no sea complejo ni requiera cambios de configuración. Esto se puede lograr usando el paquete npm externo electron-is-dev . Vamos a explicar las diferencias entre los diferentes entornos de ensayo en una aplicación de Electron utilizando este paquete npm externo. 

Suponemos que está familiarizado con los requisitos previos que se describen en el enlace mencionado anteriormente. Para que Electron funcione, node y npm deben estar preinstalados en el sistema.

• Estructura del proyecto:

Ejemplo: Siga los pasos dados en Estilo dinámico en ElectronJS para configurar la aplicación electrónica básica. Copie el código estándar para el archivo main.js y el archivo index.html como se indica en el artículo. Continuaremos construyendo nuestra aplicación usando la misma base de código. Además, instale el paquete electron-is-dev usando npm . El objetivo principal de este paquete es simplemente detectar si la aplicación Electron está ejecutando el entorno de DESARROLLO o PRODUCCIÓN . Para obtener más información sobre electron-is-dev , consulte el enlace: https://www.npmjs.com/package/electron-is-dev . 

npm install electron-is-dev --save

Además, realice los cambios necesarios mencionados para el archivo package.json para iniciar la aplicación Electron. Continuaremos construyendo nuestra aplicación usando la misma base de código. Los pasos básicos necesarios para configurar la aplicación Electron siguen siendo los mismos. 
paquete.json: 

{
  "name": "electron-stage",
  "version": "1.0.0",
  "description": "Manage Staging Environments in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0",
    "electron-is-dev": "^1.2.0"
  }
}

Producción:  

Administrar entornos de prueba en Electron: como se mencionó anteriormente, este paquete simplemente se usa para verificar si Electron se está ejecutando en el entorno de desarrollo o no. Esto es extremadamente útil para agregar funciones de depuración y utilidades, como registro, creación de código genérico, etc. Este paquete se puede usar directamente en el proceso principal y los procesos de representación de la aplicación. Este paquete requiere Electron 3+ para funcionar correctamente. Antes de saltar al código, nos gustaría hacer ciertos cambios en el archivo main.js de la aplicación. 
En el archivo main.js , comente las líneas: 

• principal.js:

Open the DevTools.
win.webContents.openDevTools()

• index.js : Activaremos Chrome DevTools desde el proceso Renderer, es decir, el archivo index.js solo si la aplicación se ejecuta en modo de desarrollo .

const electron = require('electron');
// Importing BrowserWindow using Electron Remote
const BrowserWindow = electron.remote.BrowserWindow;
 
const isDev = require('electron-is-dev');
let win = BrowserWindow.getFocusedWindow();
 
if (isDev) {
    console.log('Running in Development Environment');
    win.webContents.openDevTools();
} else {
    console.log('Running in Production Environment');
}

Explicación: De forma predeterminada, la aplicación se inicia en el entorno de ensayo de desarrollo . El paquete electron-is-dev npm devuelve un valor booleano que indica si la aplicación se ejecuta en modo de desarrollo o de producción. De forma predeterminada, el valor devuelto es true . En el código anterior, hemos activado Chrome DevTools solo en el modo de desarrollo utilizando el método de instancia openDevTools() de la propiedad webContents del objeto BrowserWindow . 

Producción: 

Aquí surge la pregunta de cómo se supone que debemos activar el entorno de ensayo de producción en la aplicación Electron. El paquete electron-is-dev npm debería devolver falso o indefinido indicando que la aplicación se está ejecutando en modo de producción y que la ventana Chrome DevTools no debería activarse al iniciar la aplicación. Podemos alternar entre los diferentes entornos utilizando la variable de entorno ELECTRON_IS_DEV . Establecer esta variable de entorno en 1 alternará el modo de desarrollo y establecer esta variable de entorno en cualquier otro valor, como 0 , iniciará la aplicación enmodo de producción . Para iniciar la aplicación en modo de producción , realice los siguientes cambios en el script  de inicio del archivo package.json .

paquete.json:

{
  "name": "electron-stage",
  "version": "1.0.0",
  "description": "Manage Staging Environments in Electron",
  "main": "main.js",
  "scripts": {
    "start": "set ELECTRON_IS_DEV=0 && electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0",
    "electron-is-dev": "^1.2.0"
  }
}

Explicación: Dado que estamos en el sistema operativo Windows , no podemos configurar la variable de entorno e iniciar la aplicación desde el mismo comando. Por lo tanto, primero debemos configurar ELECTRON_IS_DEV=0 y luego iniciar la aplicación Electron. 

Nota: Esta variable de entorno se restablecerá al reiniciar el sistema si se configuró desde la Consola de Windows como se muestra en el ejemplo anterior. 

Producción: