JavaScript en el frontend

Clase 14 de 52 • Curso de Electron: Apps de escritorio en Windows y Mac

Resumen

Cuando usamos Electron en el frontend tenemos acceso al API del navegador el API de Node.js, y el API de Electron.
Es decir podemos tener acceso a las propiedades del Sistema Operativo, lo que es una ventaja muy significativa comparado con el desarrollo de aplicaciones Web.

Efraín Girón Romero

student•

SI esto no les funciona deben agregar la integración de node en su ventana. De esta forma:

 let win = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true
    }
  })```

John Jairo Caranton Ruiz

student•

Muchas gracias funciona muy bien

jose zuñiga

student•

Actualización curso 2023

Cuando usamos Electron en el frontend tenemos acceso al API del navegador el API de Node.js, y el API de Electron.

Es decir podemos tener acceso a las propiedades del Sistema Operativo, lo que es una ventaja muy significativa comparado con el desarrollo de aplicaciones Web.

Notas

Activar la integración de node con el frontend no es recomendable. La integración da opciones al cliente (frontend) de ejecutar sentencias de código node mediante la terminal. La activación de estas opciones ha ido cambiando entre las versiones de Electron.

Con os podemos obtener información del sistema operativo. Información que nos ayuda a usar el potencial del computador o adecuar nuestra aplicación para administrar de manera adecuada sus recursos.

Electron hasta Version 6

El siguiente fragmento de código nos permite obtener información del hardware donde estamos corriendo nuestra aplicación.

import os from 'os'
window.addEventListener('load', () => {
	console.log(os.cpus())
})

Electron hasta la versión 8

Para agregar node en versiones hasta la 8 requiere activar su integración en las opciones de creación de la ventana.

function createMainWindow() {
  const win = new BrowserWindow({
    title: 'Images Resizes',
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

Electron versiones superior a la 8

Como habilitar la integración de node en las ventanas es un fallo de seguridad en versiones superior a la 8 es necesario desactivar las opciones de seguridad además de activar la activación de la integración de node.

function createMainWindow() {
  const win = new BrowserWindow({
    title: 'Images Resizes',
    width: isDev ? 800:1000,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
 });

Paul Rayden

student•

No logre hacerlo funcionar en el devtools, pero si en la consola del node. Desde que empecé el curso que tengo problemas con requiere, const, etc. Ahora se hace diferente, y no encuentro ejemplos muy claros que me hagan entender como y cuando usar cada cosa. Este curso se viene cada vez más a pique, siendo tan importante electron hoy en día.

Jorge Diaz Gacita

student•

I like that…!!

Aaron Felipe Isaacs

student•

Genial!

Si están intentando replicar el ejemplo con React, la manera de realizarlo sería de la forma

let os = window.require('os')

José Mauricio Chavarría González

student•

Aaron me podrías decir qué estás utilizando para usar electron con react? Yo he intentado de varias formas y no lo he conseguido, gracias de antemano

Miguel Ángel Guerrero Medina

student•

Tenía problemas con el funcionamiento de los módulos nativos en específico la importación de os, sin embargo investigué y electron pide la instalación de la siguiente dependencia para que esos módulos nativos funcionen. Lo instalé con el siguiente comando

npm install --save-dev electron-rebuild

La documentación está en el siguiente link https://www.electronjs.org/docs/tutorial/using-native-node-modules

Sin embargo me empezaron a salir las siguientes advertencias en la consola [Deprecation] document.registerElement is deprecated and will be removed in M80, around

DevTools failed to parse SourceMap

Hebert lughi villafuerte ccacala

student•

que interesante!!! 😄

Camilo Alexander Velandia Velandia

student•

es genial el poder usar todo el potencial de node tambien

GARCIA CAMARENA EZEQUIEL

student•

excelente clase

JavaScript en el frontend

Introducción a Electron

Paso a paso para construi aplicaciones con Electron

¿Qué es Electron?

¿Cómo funciona Electron?

Herramientas necesarias

Comenzando con Electron

Creando nuestro proyecto

Nuestra primera ventana

Propiedades de una ventana de Electron

Comenzando con nuestro aplicativo

El frontend y Electron

Configurando nuestro frontend

Herramientas de desarrollo para Electron

Algunos frameworks recomendados

Construyendo el layout

Completar elementos del Layout

Agregando interacción a nuestra aplicación

JavaScript en el frontend

Selecciona imágenes

Buscar imágenes

Añadir filtros a la imagen

Comunicación entre procesos

Accesando recursos de la máquina

Leer archivos de directorios

Generar listas de imagenes

Refactor del proyecto

Usando el diálogo de guardar

Guardar imágenes en disco

Usando cajas de mensajes

Detectando errores

Interactuando con el sistema operativo

Organizando el código del proceso principal

Múltiples ventanas y comunicación entre ellas

Creando assets para una nueva ventana

Consideraciones para múltiples plataformas

Manejo de preferencias

Usuario y contraseña

Creando un ícono en la bandeja del sistema

Imprimiendo

Subir una imagen

Portapapeles con texto o imágenes

Emitiendo notificaciones

Agregando un Menú

Atajos

Protocolos personalizados

Generando un ejecutable para nuestra aplicación

A tener en cuenta para generar ejecutables

Configurando el entorno para construcción

Configurando el entorno para construcción 2

Personalizando nuestro ejecutable

Creando paquetes para distribuir nuestro aplicativo

Considerando instaladores para múltiples plataformas

Firmas digitales con Code Signing

Cierre del curso

Bonus

Integración continua

Escribiendo tests con Ava y Spectron

Desafios

Crear un filtro personalizado

Leer las imágenes ubicaciones remotas (Cloudup)

Previsualización de filtros