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

Comunicaci贸n entre procesos

18/52
Recursos

Antes de poder guardar una imagen en PlatziPics veamos como funciona la comunicaci贸n entre los procesos usando los recursos de la maquina.
El procesos principal es el proceso de Node.js (main process) que interactua con los recursos nativos de la maquina, y el otro proceso de Electron es el procesos de renderizado (rendered process), los dos procesos corren en dos hilos diferentes.

Para comunicar estos dos procesos se usan los procesos ipcRender y ipcMain. En este v铆deo Adrian nos ense帽a c贸mo se comunican los procesos de Electron en una aplicaci贸n.

Aportes 3

Preguntas 1

Ordenar por:

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

o inicia sesi贸n.

En las versiones actuales de electron para poder usar estos procesos en especial ipcRenderer, es necesario crear un puente con contextBridge.exposeInMainWorld, es la nueva forma segura de exponer estos procesos para ser usados en el renderer.
Les dejo la documentaci贸n

Actualizaci贸n 2023

Repositorio de esta clase:

https://github.com/joseluis1061/imagepics/tree/c18_comunicacionEntreProcesos

Notas del curso:

https://alert-creator-660.notion.site/Electron-Image-Filters-5d101b019b264d1eb3adb95e33f28a21

Resumen de la clase:

  • Electron corre sobre dos hilos
  • El renderizado corre sobre su propio browser embebido de Chrome
  • El main process que es su backend se ejecuta sobre node

Para ver como se envia y recibe informaci贸n entre el frontend y el backend construiremos dos funciones que nos muestren esta interacci贸n.

ipcMain

https://www.electronjs.org/es/docs/latest/api/ipc-main

Se comunica de forma asincr贸nica desde el proceso principal a los procesos de renderizado.

El m贸dulo聽ipcMain聽es un聽Event Emitter. Cuando se utiliza en el proceso principal, maneja mensajes asincr贸nicos y sincr贸nicos enviados desde el proceso de renderizado (p谩gina web). Los mensajes enviados desde el renderizador ser谩n emitidos a este m贸dulo.

Ejemplo:聽IPC tutorial.

ipcRenderer

https://www.electronjs.org/es/docs/latest/api/ipc-renderer

Comunica asincr贸nicamente desde un proceso de renderizado al proceso principal.

Proceso:聽Renderer

El m贸dulo聽ipcRenderer聽es un聽EventEmitter. Proporciona un par de m茅todos para enviar mensajes sincr贸nicos y asincr贸nicos desde el proceso de renderizado (p谩gina web) al proceso principal. Tambi茅n puede recibir respuestas del proceso principal.

Ejemplo IPC tutorial

Comunicando nuestro render y main

Objetivo: Crear dos funciones de tipo ipcRender y ipcMain para comunicar nuestro frontend y nuestro backend.

Archivos y cambios necesarios

  1. Crearemos un modulo ipcRendererEvents.js con funcionalidades ipcRender para que detecten dos eventos 鈥榩ink鈥 que indica que se env铆a informaci贸n y pong para indicar que lo recibimos. Para ello tenemos dos funciones dentro del modulo:
    a. sendIpc 鈬 Env铆a un mensaje al backend con la fecha como dato adicional (Fecha)
    b. setIpc 鈬 Recibe un mensaje desde el backend de node JS con datos (Fecha)

    //import { ipcRenderer } from "electron";
    
    const { contextBridge, ipcRenderer } = require('electron')
    
    // Recibe un mensaje desde el backend de node JS
    function setIpc () {
        // Si se produce un evento pong recibira el evento y un argumento
        // El argumento esperado es la fecha desde el backend
        ipcRenderer.on('pong', (event, arg) => {
            console.log(`pong recibido en el frontend \n${arg}`);
        })
    }
    
    // Envia un mensaje al backend con la fecha como dato adicional
    function sendIpc () {
        console.log('sendIpc')
    
        // Al ejecutar esta funci贸n enviamos un mensaje y la fecha cuando se produjo
        ipcRenderer.send('ping', new Date());
    }
    
    module.exports={
        setIpc: setIpc,
        sendIpc: sendIpc
    }
    
  2. El modulo renderer lo vamos a ligar a la ventana html de tal forma que al dar click sobre un bot贸n open-directory me des encadene los eventos de envi贸 y recepci贸n de informaci贸n.

<button **id="open-directory"** class="btn btn-default">
  <span class="icon icon-folder icon-text"></span>
  Abrir ubicaci贸n
</button>
  1. Como el evento lo des encadenamos desde el html debemos crear una funci贸n que escuche el evento click. Esta funci贸n llamara las funciones sendIpc() que enviara nuestro mensaje y datos al backend. Por ahora estos eventos los hemos creado en el script frontend.js
// Comunicaci贸n entre procesos frontend a backend
function openDirectory () {
  // Detectamos el bot贸n
  const openDirectory = document.getElementById('open-directory')
  // Si damos click sobre el 
  openDirectory.addEventListener('click', () => {
    // Enviamos un mensaje al backend
    sendIpc();
  })
}
  1. Es necesario agregar el evento setIpc() en primer lugar cuando la ventana este cargada. Esto con la finalidad que este activo siempre que la pagina se cargue.
window.addEventListener('load', () => {
  setIpc(); //Comunicaci贸n entre eventos
  addImagesEvents();
  serchImagesEvent();
  selectEvent();
  openDirectory();
})
  1. En nuestro archivo index.js tenemos las acciones del backend de nuestra aplicaci贸n.
  2. Vamos a llamar el modulo ipcMain de electron para poder hacer la transmisi贸n de informaci贸n hacia nuestro proceso renderer.
const { app, BrowserWindow, ipcMain } = require('electron');
  1. Vamos a crear un evento que escucha si desde el frontend nos env铆an informaci贸n. Para ello lo hacemos detectando un evento llamado ping ipcMain.on(鈥檖ink鈥, () 鈬抺acciones})
// Evento desde el backend
// Si desde el backend detecto un evento ping en el front
ipcMain.on('ping', (event, arg) => {
  // Verifico la informaci贸n que me llego desde el frontend
  console.log(`ping recibido en el backend: \n ${arg}`);

  // Envia una respuesta del backend al frontend
  event.sender.send('pong', new Date());
})
  1. El evento se llama pink porque es el evento que creamos en nuestro frontend y se des encadena por el click de un bot贸n.
    a. La funci贸n lee el mensaje y de el toma los argumentos
    b. Y retorna una respuesta. Pong

El main process es el que siempre se est谩 ejecutando en background (ipcMain), y el render process es la ventana (ipcRender).