Accesando recursos de la máquina

Clase 19 de 52 • Curso de Electron: Apps de escritorio en Windows y Mac

Contenido del curso

Introducción a Electron

Comenzando con Electron

Comenzando con nuestro aplicativo

Agregando interacción a nuestra aplicación

Interactuando con el sistema operativo

Generando un ejecutable para nuestra aplicación

Creando paquetes para distribuir nuestro aplicativo

Bonus

Desafios

Tomar examen

Resumen

Electron nos permite usar recursos nativos del sistema operativo, por esta razón es que tenemos dos procesos diferentes, el main process es el que tiene acceso a recursos como los diálogos del sistema, mensajes de error, portapapeles, etc. Usamos el procesos principal para abrir diálogos del sistema para cargar imágenes a PlatziPics. En la documentación de Electron revisamos lo relacionado con el objeto dialog https://electron.atom.io/docs/api/dialog/

Comentarios

Raphael Hinostroza

student•

En el 2020, al parecer el dialog.showOpenDialog no es un callback sino una promesa. Dejo la solución:

Miguel Ángel Guerrero Medina

student•

Esto me funcionó.

Usuario anónimo

user•

me funciono igual :)

Adonis Perez Perez Farias

student•

FANTASTICO!!

Francisco Javier Rodriguez Gomez

student•

Hasta aquí ha sido GENIAL ELECTRON

Esdras Benjamín Pavón

student•

Concuerdo! 😄

Hebert lughi villafuerte ccacala

student•

en este video se me rompio todo mi codigo 😦

Luis Gutiérrez

student•

Mira ambas consolas (CMD y Developer Tools), si puedes comparte algo de tu código.

Francisco Javier Rodriguez Gomez

student•

Es recomendable utilizar git e ir haciendo commits, por si se nos enloquece la aplicación poder regresar a un punto donde todo era feliz.

Otra es hacerlo más manual e ir haciedo copias cada que finalice un tema.

CIRO VLADIMIR ARREOLA CAMACHO

student•

Hola, ¿por qué, si importó directamente el ipcRenderer en el archivo frontend.js me da el error Uncaught TypeError: _electron2.default.send is not a function?

pero si lo importó como una función del módulo exportado -ipcRendererEvents- funciona correctamente.

frontend.js

...
import { setIpc, openDirectory, sendPing } from './ipcRendererEvents'
import ipcRenderer from 'electron'

window.addEventListener('load', () => {
  // esto funciona 
  // sendPing()

  // esto *no* funciona
  ipcRenderer.send('ping', new Date())

  // buttonEvent('open-directory', openDirectory)
})

ipcRenderer.js

import { ipcRenderer } from 'electron'

function sendPing() {
  ipcRenderer.send('ping', new Date())
}

module.exports = {
  setIpc: setIpc,
  openDirectory: openDirectory,
  sendPing: sendPing
}

Favio Náquira

student•

La importación de ipcRenderer no es por defecto, debe ser así

import {ipcRenderer} from 'electron'

jose zuñiga

student•

ipcRender hace parte de las funcionalidades de Node. Cuando creas un modulo estas usando Node directamente. Si intentas ejecutar el comando en JavaScript no entiende que deseas hacer ya que la funcionalidad ni la sintaxis hacen parte de JavaScript como tal.

Es por ese motivo que se crean estas funciones en un script aparte y se exportan como modulos de Node.

Si bien Node es basado en JavaScript y su sintaxis es igual las funciones que ejecuta por debajo son mas especializadas. No confundas las dos plataformas de desarrollo.

Mauricio Hernan Cabrera

student•

No se si a alguno mas le pasa, pero al hacer lo de ping y pong en windows, sucede que aveces sale en la consola lo de ping y aveces no, tengo que estar reiniciando el server cada rato hasta que funcione
¿A alguno mas le pasa?

daniel kant

student•

dialog.showOpenDialog

daniel kant

student•

main process & renderer process

Usuario anónimo

user•

vamos avanzando gracias.. igual tiene su grado de dificultad actualizar a la actualidad un curso de años atrás.. pero se aprende más :)

GUIFOR PAUL PLAZA AGUIRRE

student•

con cada clase se pone mejor el curso excelente, excelente !!

...
import { setIpc, openDirectory, sendPing } from './ipcRendererEvents'
import ipcRenderer from 'electron'

window.addEventListener('load', () => {
  // esto funciona 
  // sendPing()

  // esto *no* funciona
  ipcRenderer.send('ping', new Date())

  // buttonEvent('open-directory', openDirectory)
})

Accesando recursos de la máquina

Introducción a Electron

Paso a paso para construi aplicaciones con Electron

¿Qué es Electron?

¿Cómo funciona Electron?

Herramientas necesarias

Comenzando con Electron

Creando nuestro proyecto

Nuestra primera ventana

Propiedades de una ventana de Electron

Comenzando con nuestro aplicativo

El frontend y Electron

Configurando nuestro frontend

Herramientas de desarrollo para Electron

Algunos frameworks recomendados

Construyendo el layout

Completar elementos del Layout

Agregando interacción a nuestra aplicación

JavaScript en el frontend

Selecciona imágenes

Buscar imágenes

Añadir filtros a la imagen

Comunicación entre procesos