Usando el diálogo de guardar

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

Vamos a crear los eventos y a escribir la lógica requerida para guardar las imágenes modificadas en nuestra aplicación de escritorio PlatziPics.

Comentarios

Oscar Javier Alvarez Jimenez

student•

Solo estoy empezando a programar así que puede ser un error mio, pero el código parece tener una excepción, al momento de abrir la aplicación, no puedo guardar la primera imagen seleccionada sin ningún filtro ya que no ha pasado por la función changeImage, por ende path no tiene una ruta. Proceso para llegar al error:

Abrir aplicación.
Presionar botón "Guardar" Si alguien puede replicarlo o puede decirme que error pude cometer por favor escriban =D.

GUIFOR PAUL PLAZA AGUIRRE

student•

//PARA EVITAR ERRORES DEL PATH

function saveFile () { const image = document.getElementById('image-displayed').dataset.original if (image) { if (path.extname(image)) { const ext = path.extname(image) ipcRenderer.send('open-save-dialog', ext) } else { console.log('NO HAY PATH') } } else { console.log('NO HAY IMAGEN') } }

David E Lares S

student•

Estoy siguiendo el curso de Ubuntu y creo que los diálogos nativos no colocan la extensión del archivo fuente por defecto. De igual forma, el código funciona y logra imprimir vía consola, la URL propuesta para grabar la imagen. ¿Esto la ha pasado a otro usuario de Ubuntu?

Rafael Sabán Alcántara

student•

En Linux Mint pasa lo mismo. No muestra la extensión en el diálogo de guardar, pero simplemente escribiendo el nombre con el que guardar la imagen, la extensión la toma correctamente.

Usando el diálogo de guardar

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