Organizando el código del proceso principal

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

Resumen

Ya casi tenemos completa nuestra aplicación, sin embargo aun tenemos un pequeño problema, si guardamos una imagen a la que no se le ha aplicado algún filtro, la aplicación abre el dialogo de guardado y nos muestra que todo fue correcto, sin embargo cuando vamos a revisar la imagen veremos que la imagen esta corrupta. Adrian nos enseña en este vídeo el porque de este error y como podemos controlarlo.

René corona valdés

student•

A modo de experiencia personal, cuando se manejan archivos con caracteres especiales o espacios en el nombre del fichero, ocurren diversas fallas al manipular las rutas dado a que retorna valores a código es decir por ejemplo: file:///C://imagenes/mi%20%imagen.png para ello la solución que he encontrado es utilizar la función unescape “unscape(ruta)” y con ello se obtiene el resultado deseado, espero y les sirva. Saludos a todos !!!

Francisco Javier Rodriguez Gomez

student•

Gracias por el aporte @DevCrown, estuve revisando porque me falló al inicio (tienes un typo, es unescape no unscape), y adicional recomiendan en MDN utilizar decodeURI en este caso.

MDN unescape()

The unescape() function computes a new string in which hexadecimal escape sequences are replaced with the character that it represents. The escape sequences might be introduced by a function like escape. Usually, decodeURI or decodeURIComponent are preferred over unescape.

Note: Do not use unescape to decode URIs, use decodeURI instead.

Aunque en una prueba sencilla dan el mismo resultado

  console.log(unescape('file:///F:/Google%20Drive/Entorno/Fotos%20Perfil/'))
  console.log(decodeURI('file:///F:/Google%20Drive/Entorno/Fotos%20Perfil/'))
  
> "file:///F:/Google Drive/Entorno/Fotos Perfil/"
> "file:///F:/Google Drive/Entorno/Fotos Perfil/"

Byron Mesias Cueva Cabrera

student•

El error del dataset.original, se podia solucionar también llamando a la función selectFirstImage(), en el vento load del window, así:

window.addEventListener('load', () => {
  setIpc();
  addImageEvents();
  searchImagesEvent();
  selectEvent();
  selectFirstImage();
  handleClickEvent('open-directory', openDirectory);
  handleClickEvent('save-button', saveFile);
});

JUAN CARLOS RAMIREZ CONSTANTINO

student•

Si tienen un problema en Windows en guardar la imagen sin filtro, en el archivo filters.js > Function saveImages, mi solución fue esta:

function saveImages(fileName, callback) {
	let fileSrc = document.getElementById('image-displayed').src
	if(fileSrc.indexOf(';base64,') !== -1){
		fileSrc = fileSrc.replace(/^data:([A-Za-z-+/]+);base64,/, '')
		fs.writeFile(fileName, fileSrc, 'base64', callback)
	} else {
		fileSrc = fileSrc.replace('file:///', '')
		console.log(fileSrc, fileName, callback)
		fs.copy(fileSrc, fileName, callback)
	}
}

David E Lares S

student•

Presento el mismo error en Ubuntu, pero tienes un typo en el file:///
En mi caso el código corre, guarda la imagen, pero lanza un error de ‘crashed’ apenas se guarda, lógicamente detiene toda la operación y se aplica el relaunchApp().

JUAN CARLOS RAMIREZ CONSTANTINO

student•

Que raro, a mi me corre bien en Windows. Deja lo reviso en Ubuntu y checo errores. Gracias.

Jorge Miguel Triana Gorozabel

student•

Felicidades por el curso, muy bien explicado. Quiero comentarles que estoy siguiendo el curso desde mi pc con linux fedora, cuando se graba la imagen sin ningún filtro se graba correctamente, pero al aplicar cualquier filtro, aparentemente se graba bien pero la imagen no se abre. He probado en windows y el grabado con y sin filtro funciona correctamente. Alguna pista de lo que puede estar pasando? Hay alguien que lo está haciendo en alguna distribución de Linux?
Electron permite generar apps también para GNU linux o solo para windows y mac?

Gracias.

Konstanza Tiniacos

student•

Tuve el mismo error en linux, me decía que la imagen no era jpg y solo se abría desde la aplicación de electron, para solucionarlo guardé las imágenes como png.

Lucas Tobon

student•

Hola, sigo el curso desde Linux Mint 18.2. Hasta el momento todo va perfectamente. Saludos.

Organizando el código del proceso principal

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