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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
En el vídeo anterior hicimos un refactor del código con el fin de tener mas organizado el proyecto, el código esté mejor separado y no tengamos archivos tan grandes. En éste vídeo vamos a aprender a comunicar múltiples ventanas. en nuestra aplicación, vamos a utilizar una nueva función para crear una nueva ventana de preferencias, y vamos a aprender a usar remote que es un modulo de Electron que nos permite desde el proceso de renderizado llamar partes del API del proceso principal.
Aportes 2
Preguntas 0
En la versión 10 de electron para utilizar el módulo remote, requiere que se habilite una configuración en la window principal:
mainWindow = new BrowserWindow({
webPreferences: {
// Habilitando remote module
enableRemoteModule: true,
},
});
Version 20.0.2 de electron
npm i @electron/remote
proceso principal
require('@electron/remote/main').initialize()
require("@electron/remote/main").enable(win.webContents)
proceso de renderizado
const { BrowserWindow } = require('@electron/remote')
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?