Crear una aplicación contenedora GeeksforGeeks usando Electron

Electron es un marco de código abierto e independiente de la plataforma que se utiliza para crear aplicaciones de escritorio nativas utilizando la potencia del motor Chromium y Node.js.

Vamos a crear una aplicación simple usando Electron que actúa como un envoltorio alrededor del sitio web GeeksforGeeks. Contiene la capacidad de navegar rápidamente a partes importantes del sitio web, abrir el ‘IDE en línea’ por separado cuando sea necesario y guardar artículos que luego se pueden leer sin conexión.

Hace uso de las diversas características del marco Electron, incluidas las ventanas del navegador, los menús nativos, el manejo de archivos y el empaquetado de la aplicación para su distribución.

requisitos previos:

• Se requiere el tiempo de ejecución de Node.js para ejecutar una aplicación de Electron. Esto incluye herramientas como npm para ayudar a construir e instalar los paquetes necesarios. Instalación de Node.js en Windows .
• Conocimientos de HTML, CSS y JavaScript
• Conocimiento introductorio de Electron y Node.js

Inicializar un nuevo proyecto de Node:

1. Navegue hasta el lugar donde desea que se cree su proyecto. Abra un símbolo del sistema y use el siguiente comando para inicializar un nuevo proyecto:

   npm init

2. Complete los detalles del proyecto como se le solicita en la ventana del símbolo del sistema. Esto creará un archivo package.json que indica todas las bibliotecas que se usarían para ejecutar la aplicación.
3. Instale el paquete Electron usando el siguiente comando npm:

   npm install electron

4. Abra el archivo package.json y cambie la parte de «scripts» a lo siguiente:

   "scripts": {
       "start": "electron ."
     }
   

   Esto facilita la ejecución de nuestra aplicación a través de la utilidad npm.

   

Creando la estructura básica de Electron: Comenzamos creando la estructura básica de nuestra aplicación. El index.js (o el archivo respectivo configurado en package.json ) es el punto de entrada donde el ejecutable de Electron intentará iniciar la aplicación. Definiremos la estructura de la aplicación en el archivo index.js con el siguiente código:

• Programa:

  const { app, BrowserWindow } = require('electron')    // Global variable that holds the app window let win    function createWindow() {      // Creating the browser window   win = new BrowserWindow({     width: 960,     height: 540,   })      // Load a redirecting url from   // login to the feed   win.loadURL( 'https://auth.geeksforgeeks.org/?to=https://auth.geeksforgeeks.org/profile.php')      win.on('closed',() => {     win = null   })      // Prevent from spawning new windows   win.webContents.on('new-window', (event, url) => {        event.preventDefault()     win.loadURL(url)   }) }    // Executing the createWindow function // when the app is ready app.on('ready', createWindow)

• La aplicación podría ejecutarse con el siguiente comando:

  npm start

• Producción:
  

Explicación:

• Hemos definido una BrowserWindow con las dimensiones de la ventana y cargado la página de inicio de sesión del sitio web usando el método loadURL() . BrowserWindow es como un navegador integrado en nuestra aplicación y se puede utilizar para navegar por las páginas web.
• Siempre que se ejecute esta aplicación, creará una instancia de BrowserWindow y cargará la URL especificada en la ventana.

Creación del menú: las aplicaciones de Electron tienen la función de crear elementos de menú que se mostrarían de forma nativa en la barra de menú de la aplicación. Estos se pueden vincular a acciones que tendrían lugar cuando se haga clic en ellos.

El menú se crea inicialmente a partir de una plantilla que define cómo debe aparecer cada menú y submenú y cuál sería su función. Nuestro menú tiene 6 partes:

• Archivo: Tiene la opción de guardar la página actual y también salir de la aplicación.
• Sitio: Tiene la opción de iniciar y cerrar sesión en el sitio web.
• Aprender: Tiene las opciones a varias partes del sitio web que tiene artículos escritos.
• Preguntas de práctica: Tiene la opción de abrir el IDE en línea en una ventana separada y también ir directamente a las preguntas según su dificultad.
• Contribuir: Tiene varias opciones que corresponden a la contribución de artículos al sitio web.
• Artículos Guardados: Permite el acceso a todos los artículos que hayan sido guardados anteriormente.

Todas las URL se obtuvieron directamente del sitio web GeekforGeeks. La parte de «Páginas guardadas» se deja vacía para que pueda actualizarse más tarde. Se crea una ventana separada para el IDE en línea creando una nueva instancia de BrowserWindow y cargando la URL en ella.

El código del menú de la plantilla final es el siguiente:

Explicación:

• Primero importaremos los espacios de nombres Menu y MenuItem . Estos contienen la definición de los métodos que vamos a utilizar.
• La propiedad de la etiqueta define cuál sería el texto de cada uno de los elementos. La propiedad del submenú especifica la array de elementos del submenú que se abrirían al hacer clic en un MenuItem.
• Después de cada etiqueta, se podría definir la acción que tendría lugar cuando se haga clic en el submenú. Por ejemplo, cargaremos otras partes del sitio web utilizando el método loadURL() . Cada vez que el usuario haga clic en un submenú, ejecutará este método y se cargará una nueva parte del sitio web.
• Se define una variable que contiene el menú que se construiría a partir de la plantilla. El espacio de nombres Menu tiene los métodos buildFromTemplate() y setApplicationMenu() para usar el menú creado en nuestra aplicación.

  // Build the template and use the menu
  const menu = Menu.buildFromTemplate(menu_template)
  Menu.setApplicationMenu(menu)

La barra de menú y los submenús

El IDE en línea en una ventana separada

Adición de la funcionalidad de guardar páginas: ahora agregaremos la funcionalidad de guardar una página en el disco para que se pueda acceder a ella más tarde, incluso sin conexión a Internet. Primero definiremos la ubicación donde se almacenarán nuestros artículos. Podemos obtener el directorio de trabajo actual y crear una carpeta para las páginas guardadas.

const savedFolder = __dirname + '\\saved\\'

Hay tres funciones que trabajan juntas para guardar y recuperar los artículos:

La función appendItemToMenu(nombre de archivo):

• Esta función agrega el título de la página dada al submenú ‘Páginas guardadas’ y también lo vincula para que las páginas se carguen cada vez que el usuario haga clic en ellas.
• El menú actualmente activo se recupera usando el método getApplicationMenu() .
• Luego usa el método append() para agregar un nuevo MenuItem. Este constructor de MenuItem recibe el nombre de archivo que se mostraría como etiqueta y también la funcionalidad que tendría lugar cuando se hiciera clic en él.
• Actualizará automáticamente el menú actual y la última página se puede utilizar inmediatamente.

• Código:

  function appendItemToMenu(filename) {   curr_menu = Menu.getApplicationMenu()         .getMenuItemById("saved").submenu      curr_menu.append(     new MenuItem({       label: path.basename(filename, '.html'),       click() {         console.log('Saved page opened')         win.loadFile(savedFolder + path.basename(filename))       }     })) }

La función savePageOffline():

• Esta función guarda la página completa junto con todas las imágenes y hojas de estilo en el disco.
• El nombre del archivo se determina utilizando el método getTitle() que devuelve el título de la página actual.
• el método contents.savePage() que tomará la página web actual y la guardará en la ubicación dada con el título anterior.
• También llama al appendItemToMenu() sobre el cual actualiza el menú.

• Código:

  function savePageOffline() {   pageTitle = win.getTitle()   console.log("Saving:", pageTitle)      win.webContents.savePage(savedFolder + pageTitle +                  '.html', 'HTMLComplete').then(() => {     appendItemToMenu(pageTitle + '.html');     console.log('Page was saved successfully.')   }).catch(err => {     console.log(err)   }) }

La función obtenerArtículosGuardados():

• Esta función recupera todos los archivos en la carpeta dada y luego los agrega al menú.
• Utiliza el método readdirSync() para devolver todos los nombres de archivo presentes en el directorio de archivos ‘guardados’.
• Los nombres de archivo se revisan para que solo se consideren los que tienen una extensión de “.html”.
• Luego se pasan a la función appendItemToMenu() para que el menú se actualice para cada elemento guardado.

• Código:

  function getSavedArticles() {   fs.readdirSync(savedFolder).forEach(file => {     if (path.extname(file) == '.html') {       appendItemToMenu(file)     }   }); }

La función savePageOffline() se invoca desde «Guardar página sin conexión» en el menú «Archivo». La función getSavedArticles() se invoca durante la creación de BrowserWindow para que las páginas anteriores estén disponibles inmediatamente. La función appendItemToMenu() se invoca cada vez que se guarda una nueva página. Esto permite guardar y recuperar sin problemas artículos que se pueden leer sin conexión.

Guardar una página y recuperar una página guardada

Empaquetado de la aplicación: dado que Electron es un marco independiente de la plataforma, las aplicaciones se pueden ejecutar en todas las plataformas principales utilizando una base de código única. La comunidad de Electron ha creado un paquete que incluye una aplicación terminada para las diversas plataformas compatibles y la prepara para su distribución.

npm install electron-packager -g

electron-packager 
    <sourcedir> 
       <appname> --platform=<platform> 
       --arch=<architecture> [optional flags...]

electron-packager . geeksforgeeks-desktop

empaquetador de electrones

La aplicación empaquetada final para la plataforma Windows

Lectura adicional: Hemos cubierto una aplicación muy básica que muestra algunas de las características de Electron. El marco tiene muchas más funciones que se pueden integrar para crear aplicaciones más complejas. Se recomienda leer más a través de los siguientes enlaces:

• Documentación oficial de electrones
• Colección de aplicaciones creadas con Electron: electron-apps
• Código de referencia para esta aplicación: geeksforgeeks-desktop