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

Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Curso de Electron: Apps de escritorio en Windows y Mac

Curso de Electron: Apps de escritorio en Windows y Mac

platzerito18092018 platzerito18092018

platzerito18092018 platzerito18092018

Nuestra primera ventana

6/52
Recursos

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:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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.

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!!