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

Curso de Electron: Apps de escritorio en Windows y Mac

Curso de Electron: Apps de escritorio en Windows y Mac

platzerito18092018 platzerito18092018

platzerito18092018 platzerito18092018

JavaScript en el frontend

14/52
Recursos

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.

Aportes 6

Preguntas 0

Ordenar por:

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

o inicia sesi贸n.

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
    }
  })```

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
    }
 });

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.

Genial!

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

let os = window.require('os')

es genial el poder usar todo el potencial de node tambien

excelente clase