JavaScript en el frontend

Clase 14 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

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.

Comentarios

Efraín Girón Romero

student•

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

John Jairo Caranton Ruiz

student•

Muchas gracias funciona muy bien

jose zuñiga

student•

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

Paul Rayden

student•

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.

Jorge Diaz Gacita

student•

I like that…!!

Aaron Felipe Isaacs

student•

Genial!

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

let os = window.require('os')

José Mauricio Chavarría González

student•

Aaron me podrías decir qué estás utilizando para usar electron con react? Yo he intentado de varias formas y no lo he conseguido, gracias de antemano

Miguel Ángel Guerrero Medina

student•

Tenía problemas con el funcionamiento de los módulos nativos en específico la importación de os, sin embargo investigué y electron pide la instalación de la siguiente dependencia para que esos módulos nativos funcionen. Lo instalé con el siguiente comando

npm install --save-dev electron-rebuild

La documentación está en el siguiente link https://www.electronjs.org/docs/tutorial/using-native-node-modules

Sin embargo me empezaron a salir las siguientes advertencias en la consola [Deprecation] document.registerElement is deprecated and will be removed in M80, around

DevTools failed to parse SourceMap

Hebert lughi villafuerte ccacala

student•

que interesante!!! 😄

Camilo Alexander Velandia Velandia

student•

es genial el poder usar todo el potencial de node tambien

GARCIA CAMARENA EZEQUIEL

student•

excelente clase

function createMainWindow() {
  const win = new BrowserWindow({
    title: 'Images Resizes',
    width: isDev ? 800:1000,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
 });

JavaScript en el frontend

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