Introducción a Electron

1

Paso a paso para construi aplicaciones con Electron

2

¿Qué es Electron?

3

¿Cómo funciona Electron?

4

Herramientas necesarias

Comenzando con Electron

5

Creando nuestro proyecto

6

Nuestra primera ventana

7

Propiedades de una ventana de Electron

Comenzando con nuestro aplicativo

8

El frontend y Electron

9

Configurando nuestro frontend

10

Herramientas de desarrollo para Electron

11

Algunos frameworks recomendados

12

Construyendo el layout

13

Completar elementos del Layout

Agregando interacción a nuestra aplicación

14

JavaScript en el frontend

15

Selecciona imágenes

16

Buscar imágenes

17

Añadir filtros a la imagen

18

Comunicación entre procesos

19

Accesando recursos de la máquina

20

Leer archivos de directorios

21

Generar listas de imagenes

22

Refactor del proyecto

23

Usando el diálogo de guardar

24

Guardar imágenes en disco

25

Usando cajas de mensajes

26

Detectando errores

Interactuando con el sistema operativo

27

Organizando el código del proceso principal

28

Múltiples ventanas y comunicación entre ellas

29

Creando assets para una nueva ventana

30

Consideraciones para múltiples plataformas

31

Manejo de preferencias

32

Usuario y contraseña

33

Creando un ícono en la bandeja del sistema

34

Imprimiendo

35

Subir una imagen

36

Portapapeles con texto o imágenes

37

Emitiendo notificaciones

38

Agregando un Menú

39

Atajos

40

Protocolos personalizados

Generando un ejecutable para nuestra aplicación

41

A tener en cuenta para generar ejecutables

42

Configurando el entorno para construcción

43

Configurando el entorno para construcción 2

44

Personalizando nuestro ejecutable

Creando paquetes para distribuir nuestro aplicativo

45

Considerando instaladores para múltiples plataformas

46

Firmas digitales con Code Signing

47

Cierre del curso

Bonus

48

Integración continua

49

Escribiendo tests con Ava y Spectron

Desafios

50

Crear un filtro personalizado

51

Leer las imágenes ubicaciones remotas (Cloudup)

52

Previsualización de filtros

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Convierte tus certificados en títulos universitarios en USA

Antes: $249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

18 Días
22 Hrs
45 Min
7 Seg
Curso de Electron: Apps de escritorio en Windows y Mac

Curso de Electron: Apps de escritorio en Windows y Mac

platzerito18092018 platzerito18092018

platzerito18092018 platzerito18092018

Detectando errores

26/52
Recursos

Vamos a ver los tipos de errores que se pueden presentar y el manejo de éstos errores, la forma de controlar la mayoría de los errores es con throw sin embargo Electron tiene sus propios errores, para esto nos ayuda tener las Devtools de Electron y específicamente la extensión que instalamos al comienzo del curso Devtron, esta extensión nos muestra en la opción Lint los errores que se están presentando en nuestra aplicación.

Aportes 7

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Es genial la manera en como se manejan estos 3 errores, en si debería ser un standard de cualquier app que se programe tener este manejador desde el principio

Algunos errores han cambiado en su definición puedes actualizar con el siguiente script para manejar los errores: ```js const { app, dialog } = require('electron'); async function relaunchApp(win) { try { await dialog.showMessageBox(win, { type: 'error', title: 'Error de Aplicación', message: 'Ocurrió un error inesperado, se reiniciará el aplicativo', buttons: ['Aceptar'], defaultId: 0 }); app.relaunch(); app.exit(0); } catch (error) { console.error('Error al reiniciar la aplicación:', error); } } function setupErrors(win) { // Manejo de crash del proceso de renderizado win.webContents.on('crashed', async (event, killed) => { console.error('Proceso de renderizado crasheado:', { killed }); await relaunchApp(win); }); // Manejo de ventana no responsiva win.on('unresponsive', async () => { try { const response = await dialog.showMessageBox(win, { type: 'warning', title: 'Aplicación No Responde', message: 'Un proceso está tardando demasiado', detail: 'Puede esperar o reiniciar el aplicativo manualmente', buttons: ['Esperar', 'Reiniciar'], defaultId: 0, cancelId: 0 }); if (response.response === 1) { await relaunchApp(win); } } catch (error) { console.error('Error al mostrar diálogo:', error); } }); // Manejo de excepciones no capturadas process.on('uncaughtException', async (error) => { console.error('Excepción no capturada:', error); await relaunchApp(win); }); // Nuevo: Manejo de rechazos de promesas no capturados process.on('unhandledRejection', async (reason, promise) => { console.error('Promesa rechazada no manejada:', reason); await relaunchApp(win); }); // Nuevo: Manejo de errores del proceso principal app.on('render-process-gone', async (event, webContents, details) => { console.error('Proceso de renderizado terminado:', details); await relaunchApp(win); }); } module.exports = setupErrors; ```

Para el evento chrashed: “Deprecated: This event is superceded by the render-process-gone event which contains more information about why the render process disappeared. It isn’t always because it crashed. The killed boolean can be replaced by checking reason === ‘killed’ when you switch to that event.”

Con el paso del tiempo, a mejorado electron el consumo de memoria?
Soy nuevo con esta libreria, me esta gustando, pero me asusta el excesivo consumo que tiene.

buen curso, que pasaria si quiero interactuar con bases de datos

Estoy armando una aplicación en base a esta. Me sucede que aveces tengo que dar mas de 1 o 2 clicks para abrir una ventana, ¿Tengo un problema con los procesos?

devtron