El objecto app
Todo app de Electron es controlada por el objecto app, el cual permite controlar y responder a todos los eventos del ciclo de vida del app y acciones como las de cerrar, obtener foco, ocultar, entre otros.
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
Crea una cuenta o inicia sesi贸n
隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera
Nuestra primera ventana
6/52Recursos
En esta parte del curso iniciamos con la creaci贸n de nuestra primera ventana en Electron, para esto es importante entender muy bien el uso del objeto App, es un objeto que nos permite controlar el ciclo de vida de la aplicaci贸n.
El objeto **BrowserWindow ** es el que nos permite cargar todo el contenido visual de la aplicaci贸n de escritorio.
La documentaci贸n oficial de Electron esta en: https://electron.atom.io/docs/
Aportes 7
Preguntas 4
Ordenar por:
Que buen profesor, lo s茅 porque usa el modo estricto de Javascript.
C贸digo para crear tu primera ventana:
'use strict'
// El objeto app permitir谩 controlar eventos
const { app, BrowserWindow } = require('electron')
//console.dir(app)
// Imprimir谩 en consola saliendo despu茅s de quitar
app.on('before-quit', () => {
console.log("saliendo..");
})
// Construye nuestra primera ventana
app.on('ready', () => {
let win = new BrowserWindow()
win.on('closed', () => {
win = null
app.quit()
})
})
//app.quit()
Hola, les dejo mi resumen el proceso global de Electron:
Electron est谩 basado cobre Chromium y Nodejs, por lo que hereda la particularidad multi-proceso (no multi-hilo) por lo que un solo proceso (NodeJs) controlo todos los demas procesos as铆 como el ciclo de vida en general.
El proceso principal corre sobre nodeJs lo que permite hacer uso de sus caracter铆sticas como require
BroserWindow
El proceso principal se encarga de hacer el render de una p谩gina web en una instancia de la Clase BrowserWindow, la cual es un EventListener por lo que expone eventos como minimizar o maximizar pantalla. Adem谩s se puede interactuar con el contenido de BrowserWindow (HTML elements?) a traves de su propiedad BrowserWindow.webContents
Application lifecycle
El proceso principal interact煤a con el ciclo de vida de la aplicacion a trav茅s del m贸dulo app
Native APIs
Para extender el prop贸sito de Electron m谩s all谩 de una envoltura para web apps, se exponen m贸dulos que controlan funcionalidad nativa del computador.
Se puede acceder al tipo de plataforma mediante el global process con el key platform.
Tengo el mismo c贸digo, tal cual, hasta ahora no he tenido ning煤n error, pero al ejecutar el ultimo npm run dev la ventana se cierra instantaneamente y no la alcanzo a ver
genial 馃槂
super. 馃槂 gracias!!
驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?
o inicia sesi贸n.