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

El frontend y Electron

8/52
Recursos

Electron nos permite trabajar con tecnologías Web para crear aplicaciones de escritorio, Adrian nos muestra como crear una aplicación de prueba en la que usaremos HTML, CSS y JavaScript.
Comenzamos con el desarrollo de Platzipics, veamos como crear una estructura de directorios en nuestro proyecto que nos va a ayudar a mantenerlo organizado.

Aportes 5

Preguntas 3

Ordenar por:

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

pues a mi me apareció el siguiente error:

Not allowed to load local resource:

al parecer ahora tienes que incluir el atributo nodeIntegration a la configuración de la ventana y utilizar el método loadFile en vez de loadURL.

let win = new BrowserWindow({
        show: false,
        webPreferences: {
            nodeIntegration: true
        }
    })

win.loadFile(`${__dirname}/index.html`)

además en el archivo package.json especificar el archivo de entrada de la app de electron y en el listado de scripts ya no especificar el archivo, sino el directorio.

{
  "name": "electron-platzi",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "dev": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^4.1.3"
  }
}

fuentes:
https://electronjs.org/docs/tutorial/first-app
https://github.com/electron/electron-quick-start/blob/master/main.js

Buenas, estoy haciendo el curso pero veo que electron-compile está @deprecated y no sé por dónde seguir. ¿Alguien me puede echar una mano?

En linux lo hice correr de la siguiente forma:

    win.loadFile(`${__dirname}/renderer/index.html`)

No aparecía el texto mandado por la parte del frontend y lo solucione así
Al parecer en mi caso causa problema que en la parte index se use doble comilla (" ")para escribir mensaje y en la parte de frontend se use comilla simple (’ '), solamente use el mismo tipo de comilla en ambos
En el minuto 3:42
index.html

<code>
<p id="mensaje"></p>

frontend.js

<code>

document.getElementById(‘mensaje’).innerHTML = ‘este es un mensaje instertado por JS’

El console.log(’ ') no me funciona en el frontend.js