Consideraciones para múltiples plataformas

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

Resumen

Una de las grandes ventajas de Electron es que soporta múltiples plataformas Linux, Windows y Mac pero evidentemente cada plataforma tiene grandes diferencias en los componentes nativos. En éste vídeo aprenderemos cómo controlar los componentes del API de Electron para garantizar que nuestra aplicación funcione correctamente en diferentes plataformas.

Andrés Felipe Martínez Salazar

student•

Se puede hacer esto para que funcione en windows:

const openPreferences = () => {
  const BrowserWindow = remote.BrowserWindow
  const mainWindow = remote.getGlobal('win')
  const preferencesWindow = new BrowserWindow({
    width: 400,
    height: 400,
    title: 'Preferencias',
    center: true,
    modal: true,
    frame: false,
    show: false,
    resizable: false,
    parent: mainWindow
  })
  
  if (os.platform() !== 'win32'){
    preferencesWindow.setParentWindow(mainWindow)
  }
  preferencesWindow.loadURL(url.format({
    protocol: 'file:',
    pathname: path.join(path.join(__dirname, '..'), 'preferences.html'),
    slashes: true
  }))
  preferencesWindow.once('ready-to-show', () => {
    preferencesWindow.show()
    preferencesWindow.focus()
  })
}

Al crear la ventana el atributo parent: mainWindow hace que la ventana tenga como “padre” a la ventana principal, de esta forma no te deja interactuar con la ventana principal a menos que cierres la de preferencias.

Erick Navarro

student•

Al 2020, ya funciona en todos los sistemas operativos. Revisar documentación

Miguel Ruiz Moreno

student•

No me quedó claro una cosa. Entonces, ¿en el caso de Windows habría que establecer otro método o simplemente se quedaría sin definir?

Yesica Lizeth Cortés Pineda

teacher•

En electron hay métodos que no están soportados en todas las plataformas por las características nativas de la plataforma, hay que tener muchas consideraciones a la hora de usar el API, primero debes identificar si los métodos son soportados en todas las plataformas, luego si encuentras que no esa soportado en alguna quiere decir que no va a funcionar en esa plataforma y no vas a poder usarla, lo que debes hacer en este caso es prevenir que la app falle cuando lo estés usando en ese SO, para eso importas el modulo de detección del sistema operativo y condicionas la función.

Marco Elizalde

student•

Conocer el sistema operativo en que esta corriendo

daniel kant

student•

discriminar componentes y pantallas de acuerdo a los distintos sistemas operativos

Consideraciones para múltiples plataformas

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

Accesando recursos de la máquina

Leer archivos de directorios

Generar listas de imagenes

Refactor del proyecto

Usando el diálogo de guardar

Guardar imágenes en disco

Usando cajas de mensajes

Detectando errores

Interactuando con el sistema operativo

Organizando el código del proceso principal

Múltiples ventanas y comunicación entre ellas

Creando assets para una nueva ventana

Consideraciones para múltiples plataformas

Manejo de preferencias

Usuario y contraseña

Creando un ícono en la bandeja del sistema

Imprimiendo

Subir una imagen

Portapapeles con texto o imágenes

Emitiendo notificaciones

Agregando un Menú

Atajos

Protocolos personalizados

Generando un ejecutable para nuestra aplicación

A tener en cuenta para generar ejecutables

Configurando el entorno para construcción

Configurando el entorno para construcción 2

Personalizando nuestro ejecutable

Creando paquetes para distribuir nuestro aplicativo

Considerando instaladores para múltiples plataformas

Firmas digitales con Code Signing

Cierre del curso

Bonus

Integración continua

Escribiendo tests con Ava y Spectron

Desafios

Crear un filtro personalizado

Leer las imágenes ubicaciones remotas (Cloudup)

Previsualización de filtros