Operaciones de escritorio 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. 

El electrón puede interactuar con el entorno del sistema operativo nativo, como el sistema de archivos, la bandeja del sistema, etc. Electron nos proporciona el módulo Shell integrado que ayuda a administrar archivos y direcciones URL en el entorno del sistema operativo nativo utilizando su aplicación predeterminada. Este módulo proporciona funciones relacionadas con las integraciones de escritorio, como abrir enlaces externos, crear accesos directos, leer accesos directos, etc. El módulo Shell se puede usar directamente en el proceso principal y el proceso de representación de la aplicación. Este tutorial demostrará las integraciones de escritorio usando el módulo Shell en Electron.

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:

• muestra.txt:

This is a Sample Text file

• borrar.txt:

Sample Text FIle to delete

Ejemplo: Comenzaremos construyendo la aplicación electrónica básica siguiendo los pasos dados. 

• Paso 1: navegue a un directorio vacío para configurar el proyecto y ejecute el siguiente comando,

npm init

Para generar el archivo package.json . Instale Electron usando npm si no está instalado. 

npm install electron --save-dev

Este comando también creará el archivo package-lock.json e instalará las dependencias requeridas de node_modules . Una vez que Electron se haya instalado correctamente, abra el archivo package.json y realice los cambios necesarios con la tecla «scripts» .

paquete.json: 

{
  "name": "electron-DesktopOperation",
  "version": "1.0.0",
  "description": "Desktop Operations in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron"
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.2.5"
  }
}

• Paso 2: Cree un archivo main.js de acuerdo con la estructura del proyecto. Este archivo es el Proceso Principal y actúa como un punto de entrada a la aplicación. Copie el código Boilerplate para el archivo main.js como se indica en el siguiente enlace . Modificaremos el código para adaptarlo a las necesidades de nuestro proyecto. 
  principal.js:

const { app, BrowserWindow } = require('electron')
 
function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
 
  // Load the index.html of the app.
  win.loadFile('src/index.html')
 
  // Open the DevTools.
  win.webContents.openDevTools()
}
 
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow)
 
// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // To stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
 
app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})
 
// In this file, you can include the rest of your app's specific
// main process code. You can also put them in separate files and
// require them here.

• Paso 3: Cree el archivo index.html dentro del directorio src . También copiaremos el código repetitivo para el archivo index.html del enlace mencionado anteriormente. Modificaremos el código para adaptarlo a las necesidades de nuestro proyecto. 
  índice.html:

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
   
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy"
          content="script-src 'self' 'unsafe-inline';" />
</head>
 
<body>
    <h1>Hello World!</h1> We are using node
    <script>
        document.write(process.versions.node)
    </script>, Chrome
    <script>
        document.write(process.versions.chrome)
    </script>, and Electron
    <script>
        document.write(process.versions.electron)
    </script>.
 
    <!-- Adding Individual Renderer Process JS File -->
    <script src="index.js"></script>
</body>
 
</html>

• Salida: en este punto, nuestra aplicación electrónica básica está configurada. Para iniciar la aplicación Electron, ejecute el comando:

npm start

Módulo Shell en Electron: Todos los módulos Shell se explican con el siguiente ejemplo:

1. shell.openExternal(url, opciones): Para abrir direcciones URL externas en la forma predeterminada del sistema. Podemos pasar enlaces externos o ID de correo y se resolverá según el protocolo proporcionado. 
El shell.OpenExternal(url, opciones) devuelve una Promesa . Toma los siguientes parámetros, 

• url: String La URL externa que se va a resolver. Se permite un máximo de 2081 caracteres en Windows. La URL se resolverá según el comportamiento predeterminado del sistema.
• opciones: Objeto (Opcional) Es un Objeto que consta de los siguientes parámetros, 
  • activar: booleano Solo es compatible con macOS . Se utiliza para traer la aplicación abierta al primer plano. El valor predeterminado se establece como verdadero .

índice.html:

<br>
  <h3>
   Desktop Integrations in Electron using Shell Module
  </h3>
  <button id="external">
   Open GeeksForGeeks.org in Default Browser
  </button>
   
  <br><br>
  <button id="mail">
   Open GeeksForGeeks in Default Mail
  </button>

índice.js:

const electron = require('electron');
const path = require('path');
   
// Importing the Shell Module from the electron 
// in the Renderer Process
const shell = electron.shell;
   
var external = document.getElementById('external');
var externalOptions = {
   
    // Supported by macOS only
    activate: true,
}
   
external.addEventListener('click', (event) => {
       
    // Returns a Promise<void>, Hence we can use 
    // the .then( function() {} )
    shell.openExternal(
        'https://www.geeksforgeeks.org/', externalOptions)
        .then(() => {
            console.log('Link Opened Successfully');
        });
});
   
var mail = document.getElementById('mail');
   
mail.addEventListener('click', (event) => {
   
    // Resolving the External URL to the Default Mail Agent
    // Because we have specified 'mailto'
    shell.openExternal(
        'mailto: https://www.geeksforgeeks.org/', externalOptions)
        .then(() => {
        console.log('Link Opened Successfully');
    });
});

Producción:

2. shell.showItemInFolder(ruta): para resolver la ruta del archivo de string dada y mostrar el archivo en Windows/Explorador de archivos. Si es posible, seleccione el archivo también. Este método no tiene ningún tipo de retorno. 

index.html: agregue el siguiente fragmento en ese archivo. 

<br><be>
  <button id="show">
    Show sample.txt in File Explorer
  </button>

index.js: agregue el siguiente fragmento en ese archivo. 

var show = document.getElementById('show');
 
show.addEventListener('click', (event) => {
    // Providing a dynamic file path to the 'sample.txt'
    // file in the 'assets' Folder. Using the path Module.
    // '__dirname' automatically detects current working directory
    shell.showItemInFolder(path.join(__dirname, '../assets/sample.txt'));
});

Producción:

3. shell.openItem(ruta): para resolver la ruta del archivo de string dada y abrir el archivo de la manera predeterminada del sistema. Devuelve un valor booleano que indica si el archivo se abrió correctamente o no. 

index.html: agregue el siguiente fragmento en ese archivo. 

<br><br>
  <button id="open">Open sample.txt</button>

index.js: agregue el siguiente fragmento en ese archivo. 

var open = document.getElementById('open');
 
open.addEventListener('click', (event) => {
    var success = shell.openItem(path.join(__dirname,
         '../assets/sample.txt'));
 
    console.log('File Opened Successfully - ', success);
});

Producción:

4. shell.beep(): para reproducir el sonido nativo del sistema operativo. Este método no tiene ningún tipo de retorno. En este tutorial, se usa en combinación con el método shell.moveItemToTrash() .

5. shell.moveItemToTrash(path, deleteFailure): para resolver la ruta del archivo de string dada y mover el archivo especificado a la Papelera/Papelera. Devuelve un valor booleano que indica si el archivo se movió con éxito a la papelera o no.

Shell.moveItemToTrash (ruta, eliminar) devuelve un valor booleano . Toma los siguientes parámetros, 

• ruta: String La ruta del archivo que se va a resolver.
• deleteFailure: booleano (opcional) Solo es compatible con macOS . Significa si eliminar o no el archivo por completo del sistema en caso de que la papelera esté deshabilitada o no admitida en el sistema.

índice.html:

<br><br>
  <button id="delete">Delete delete.txt</button>

índice.js:

var deleteItem = document.getElementById('delete');
   
deleteItem.addEventListener('click', (event) => {
    // Play the Native OS Beep Sound
    shell.beep();
       
    // Returns a Boolean Value
    var success = shell.moveItemToTrash(path.join(__dirname, 
             '../assets/delete.txt'), true);
   
    console.log('File Deleted Successfully - ', success);
});

Producción:

6. shell.writeShortcutLink(ruta, operación, opciones): esta operación solo se admite en Windows . Para resolver la ruta de la string dada y crear/actualizar el enlace de acceso directo en esa ruta. Devuelve un valor booleano que indica si la operación especificada se realizó con éxito o no. 

Shell.writeShortcutLink (ruta, operaciones, opciones) devuelve un valor booleano . Toma los siguientes parámetros, 

• ruta: String Definición de la ruta del atajo para la Operación a realizar.
• operaciones: String (Opcional) Especifica la Operación a realizar. El valor predeterminado de la operación es crear . Puede tener cualquiera de los siguientes valores, 
  • crear: crea un nuevo acceso directo. Realiza Sobrescribir si es necesario.
  • actualizar: actualiza las propiedades especificadas de un acceso directo existente.
  • reemplazar: sobrescribe un acceso directo existente. Esta operación falla si el acceso directo no existe.
• Opciones: es un objeto de detalles de acceso directo que consta de los siguientes parámetros, 
  • target: String El archivo de destino que se supone que debe iniciarse desde este acceso directo.
  • cwd: string (opcional) especifica el directorio de trabajo actual. El valor predeterminado está vacío .
  • args: string (opcional) Los argumentos que se pasarán y aplicarán al archivo de destino cuando se inicie desde el acceso directo. El valor predeterminado está vacío .
  • descripción: String (Opcional) La descripción del acceso directo. El valor predeterminado está vacío . El valor se muestra como información sobre herramientas al pasar el mouse sobre el acceso directo creado.
  • icono: string (opcional) La ruta al icono que se utilizará. Puede ser un archivo .dll o .exe . La propiedad icon y la propiedad iconIndex deben especificarse juntas. El valor predeterminado de la propiedad del ícono está vacío , que a su vez usa el ícono de destino predeterminado o el ícono que se supone que debe usarse según lo definido en el sistema. En este tutorial, hemos creado un acceso directo para un archivo .txt . Tiene un ícono predefinido según el Sistema, pero lo hemos cambiado al ícono del archivo del bloc de notas especificando la ruta de notepad.exe en el Sistema.
  • iconIndex: número (opcional) El ID de recurso del icono cuando la propiedad del icono es un archivo .dll o .exe . El valor predeterminado de la propiedad iconIndex es 0. En este tutorial, mantendremos la propiedad iconIndex en 0 para que el icono del archivo notepad.exe surta efecto.
  • appUserModelId: string (opcional) El ID del modelo de usuario de la aplicación. El valor predeterminado está vacío .

índice.html:

<br><br>
  <button id="create">
   Create sample.txt Shortcut
  </button>
<br><br>

índice.js:

var create = document.getElementById('create');
   
var shortcutDetails = {
    // Defining the target File as the 'sample.txt' File 
    target: path.join(__dirname, '../assets/sample.txt'),
   
    // Current Working Directory is 'assets' folder
    cwd: path.join(__dirname, '../assets/'),
    args: "Passing Arguments",
    // Shown as Tooltip 
    description: "Shortcut for sample.txt file",
       
    // Defining the icon for shortcut as the 
    // 'notepad.exe' file 
    // Instead of the System Default icon
    icon: "C://Windows//System32//notepad.exe", 
   
    // Keeping the default value of iconIndex for the 
    // 'notepad.exe' file icon to take effect  
    iconIndex: 0,
    appUserModelId: "",
}
create.addEventListener('click', (event) => {
   
    // Desktop - C:\\Users\\radhesh.khanna\\Desktop\\sample-shortcut.lnk
    // Specifying the name of the Shortcut while creation
    var success = shell.writeShortcutLink(path.join(__dirname, 
     '../assets/sample-shortcut.lnk'), 'create', shortcutDetails);
   
    console.log('Shortcut Created Successfully - ', success);
});

Producción:

7. shell.readShortcutLink(ruta): esta operación solo se admite en Windows . Para resolver la ruta de string dada y leer el acceso directo especificado en la ruta. Este método devuelve el objeto ShortDetails . Este objeto se explica anteriormente al crear un acceso directo. Se lanzará una excepción si ocurre un error. En este tutorial, leeremos y mostraremos el objeto shortDetails para el mismo acceso directo (sample-shortcut.lnk) que hemos creado anteriormente para el archivo sample.txt .

index.html: agregue el siguiente fragmento en ese archivo. 

<div>
 <textarea name="Shortcut Details"
           id="textarea" cols="30"
           rows="10">
 </textarea>
</div>
 
<button id="read">
   Read sample.txt Shortcut Details
</button>

index.js: agregue el siguiente fragmento en ese archivo. 

var read = document.getElementById('read');
 
// Defining a textarea to display the 'shortcutDetails' Object
var textArea = document.getElementById('textarea');
 
read.addEventListener(('click'), (event) => {
    var object = shell.readShortcutLink(path.join(__dirname,
             '../assets/sample-shortcut.lnk'));
 
    // Object Returned is in JSON format, using 'JSON.stringify()'
    // method to convert to String
    console.log(object);
    textArea.innerHTML = JSON.stringify(object);
});

Producción: