El frontend y Electron

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

Resumen

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.

CIRO VLADIMIR ARREOLA CAMACHO

student•

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

Juan Escobar

student•

intenta añadir "file://" en la parte en la que cargas el index

Brian Sánchez Izquierdo

student•

Intenta con la función loadFile

Aaron Felipe Isaacs

student•

¿Es posible y recomendable realizar aplicaciones con de escritorio con Electron Js y React?

Oscar Barajas Tavares

Team Platzi•

Sí, Slack es un ejemplo de este caso que mencionas.

Iulian Gafiu

student•

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?

Efraín Gómez Tapia

student•

Tengo el mismo problema :/

Moises Samuel Urias Moreno

student•

En linux lo hice correr de la siguiente forma:

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

Laura Monserrat Romero Hernández

student•

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'

claudio vargas alejos

student•

Si tengo una aplicación web desarrollada con JS , HTML y CSS debo reescribirla para funcione con Electron?

Hebert lughi villafuerte ccacala

student•

alguien me explica como hacer esta cosa ( ` ) xd en ubuntu

Hebert lughi villafuerte ccacala

student•

psdt:antes de preguntar ise todas las pruebas en mi teclado… y nada 😦 tmbn busque en internet … nohay rpta 😦

Diego Forero

Team Platzi•

Eso depende mucho de la configuración de teclado, en los teclados en ingles esta a la izquierda de la tecla número 1, en los teclados españoles esta a la derecha de la tecla P

Guillermo Quiñones Villarreal

student•

no me funciona la sintaxis ${} para concatenar strings, alguien me puede ayudar?

Diego Forero

Team Platzi•

Tienes que usar las backtics o comillas inversas

let saludo = "Hola";
`${saludo} mundo`;

Aaron Felipe Isaacs

student•

Compañero, le recomiendo buscar información sobre template literals, aquí la documentación de mozilla:

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/template_strings

Juan Escobar

student•

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

El frontend y Electron

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