Introducci贸n a Electron

1

Paso a paso para construi aplicaciones con Electron

2

驴Qu茅 es Electron?

3

驴C贸mo funciona Electron?

4

Herramientas necesarias

Comenzando con Electron

5

Creando nuestro proyecto

6

Nuestra primera ventana

7

Propiedades de una ventana de Electron

Comenzando con nuestro aplicativo

8

El frontend y Electron

9

Configurando nuestro frontend

10

Herramientas de desarrollo para Electron

11

Algunos frameworks recomendados

12

Construyendo el layout

13

Completar elementos del Layout

Agregando interacci贸n a nuestra aplicaci贸n

14

JavaScript en el frontend

15

Selecciona im谩genes

16

Buscar im谩genes

17

A帽adir filtros a la imagen

18

Comunicaci贸n entre procesos

19

Accesando recursos de la m谩quina

20

Leer archivos de directorios

21

Generar listas de imagenes

22

Refactor del proyecto

23

Usando el di谩logo de guardar

24

Guardar im谩genes en disco

25

Usando cajas de mensajes

26

Detectando errores

Interactuando con el sistema operativo

27

Organizando el c贸digo del proceso principal

28

M煤ltiples ventanas y comunicaci贸n entre ellas

29

Creando assets para una nueva ventana

30

Consideraciones para m煤ltiples plataformas

31

Manejo de preferencias

32

Usuario y contrase帽a

33

Creando un 铆cono en la bandeja del sistema

34

Imprimiendo

35

Subir una imagen

36

Portapapeles con texto o im谩genes

37

Emitiendo notificaciones

38

Agregando un Men煤

39

Atajos

40

Protocolos personalizados

Generando un ejecutable para nuestra aplicaci贸n

41

A tener en cuenta para generar ejecutables

42

Configurando el entorno para construcci贸n

43

Configurando el entorno para construcci贸n 2

44

Personalizando nuestro ejecutable

Creando paquetes para distribuir nuestro aplicativo

45

Considerando instaladores para m煤ltiples plataformas

46

Firmas digitales con Code Signing

47

Cierre del curso

Bonus

48

Integraci贸n continua

49

Escribiendo tests con Ava y Spectron

Desafios

50

Crear un filtro personalizado

51

Leer las im谩genes ubicaciones remotas (Cloudup)

52

Previsualizaci贸n de filtros

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

5D
13H
36M
34S
Curso de Electron: Apps de escritorio en Windows y Mac

Curso de Electron: Apps de escritorio en Windows y Mac

platzerito18092018 platzerito18092018

platzerito18092018 platzerito18092018

Leer archivos de directorios

20/52
Recursos

Continuamos con la interacci贸n con los recursos del Sistema Operativo, ya sabemos abrir un dialogo y seleccionar un directorio. En 茅sta clase vamos a aprender a seleccionar 煤nicamente las im谩genes de los directorios usando el modulo de npm is-image.

npm install --save is-image

Con el modulo file-size podemos ver f谩cilmente el tama帽o de los archivos.

Aportes 4

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Esto es una actualizaci贸n al 31-10-2020, dialog.showOpenDialog retorna result, que contiene en propiedades si el usuario cancelo la operaci贸n y en la propiedad 鈥渇ilePaths鈥 viene el arreglo de imagenes.

  // Funci贸n de abrir directorio
  ipcMain.on('open-directory-event', (evt, args) => {
    console.log('arguments' + args);
    // Abre dialog
    dialog
      .showOpenDialog(ventana, {
        title: 'Seleccione la nueva ubicaci贸n',
        buttonLabel: 'Abrir ubicaci贸n',
        properties: ['openDirectory'],
      })
      .then(result => {
        // Verifica si usuario cancelo la operaci贸n
        if (result.canceled) {
          return;
        }

        // Obtiene la ruta de la carpeta seleccionada
        const filesPath = result.filePaths[0];

        // Solo muestra el primer directorio
        fs.readdir(filesPath, (error, files) => {
          // Declara arreglo vacio de imagenes
          let images = [];

          // Verifica el error
          if (error) {
            console.log(error);
            return;
          }

          // Recorre archivos uno a uno
          for (let i = 0; i < files.length; i++) {
            // Verifica si es una imagen
            if (isImage(files[i])) {
              // Obtiene informaci贸n de imagen
              let imageFile = path.join(filesPath, files[i]);
              let imageStats = fs.statSync(imageFile);
              let imageSize = filesize(imageStats.size, { round: 0 });

              // Agrega informaci贸n de imagen al arreglo
              images.push({ fileName: files[i], src: `file://${imageFile}`, size: imageSize });
            }
          }

          // Muestra imagenes
          console.log(images);
        });
      })
      .catch(err => {
        console.log(err);
      });
  });

C20. Leer archivos de directorios

Repositorio de la clase:

https://github.com/joseluis1061/imagepics/tree/c20_leerArchivosYDirectorios

Continuamos con la interacci贸n con los recursos del Sistema Operativo, ya sabemos abrir un dialogo y seleccionar un directorio. En 茅sta clase vamos a aprender a seleccionar 煤nicamente las im谩genes de los directorios usando el modulo de npm聽is-image.

npm install --save is-image

Con el modulo聽file-size聽podemos ver f谩cilmente el tama帽o de los archivos.

filesize() 鈬 Ayuda a comprobar el tama帽o de un archivo seleccionado.

npm install --save filesize

fs es un modulo de node que nos permite leer un directorio/s para importarlo basta con importarlo

const fs = require('fs')

En nuestro caso usaremos sus estad铆sticas para determinar el tama帽o de la imagen.

let stats = fs.statSync(imagesFile);

Para esta clase solo vamos a agregar mas funcionalidades a nuestro evento open-dirctory. Requerimos los siguientes paquetes para hacer posible el objetivo de la clase:

// Rutas de un archivo
const path = require('path');
// File sistem para leer archivos
const fs = require('fs')
// Modulo para verificar si un archivo es de tipo imagen
const isImage = require('is-image');
// Permite traducir informaci贸n de tama帽os a un formato humano
const filesize = require("filesize");

const { app, BrowserWindow, ipcMain, dialog } = require('electron');

Las funciones de nuestro evento son las siguientes:

// Abrir un directorio con el evento open-directory
ipcMain.on('open-directory', (event) => {
  // Abro una ventana de dialogo para seleccionar el directorio
  // Requiere la ventana desde donde se llamara y opciones del dialogo
  dialog.showOpenDialog( win, {
    // Titulo de la ventana de dialogo
    title: 'Selecciona un directorio',
    // Texto del bot贸n principal
    buttonLabel: 'Abrir',
    // Que tipo de archivos puede seleccionar
    properties: ['openFile', 'openDirectory']
  }).then(result => {
    // Es una promesa y por lo tanto retorna un resultado con diferente informaci贸n
    // console.log(result.filePaths) // Arreglo rutas a los archivos elegidos
    const dir = result.filePaths;
    // Array con imagenes
    const images = [];
    // Si obtuvimos rutas de archivos
    if (dir.length > 0){
      // Leer el primer directorio elegido
      fs.readdir(dir[0], (err, files) => {
        // Recorrer todos los archivos leidos
        for (let i = 0; i < files.length; i++){
          // Seleccionar solo los que sen de tipo imagen
          if(isImage(files[i])){
            // Me retorna la ruta de la imagen
            let imagesFile = path.join(dir[0], files[i]);
            // Los stats son estadisticas de un archivo
            // Nos intereza su tama帽o
            let stats = fs.statSync(imagesFile);
            // Me retorna el tama帽o de la imagem en un formato humano
            let size = filesize.filesize( stats.size, {round:0});
            // Agrego la ruta de la imagen y su tama帽o al array de imagenes
            images.push({
              filename:files[i], 
              src : `file://${imagesFile}`,
              size: size
            })
          }
        }
        // Verificamos los archivos que obtuvimos 
        console.log(images)
      });
    }
  }).catch(err => {
    console.log(err)
  })  
})

El archivo index.js en mi caso luce as铆:

'use strict'
// Rutas de un archivo
const path = require('path');
// File sistem para leer archivos
const fs = require('fs')
// Modulo para verificar si un archivo es de tipo imagen
const isImage = require('is-image');
// Permite traducir informaci贸n de tama帽os a un formato humano
const filesize = require("filesize");

const { app, BrowserWindow, ipcMain, dialog } = require('electron');

// Detecta si la app corre sobre una Mac
const isMac = process.platform === 'darwin';
// Detectar si estamos en modo de desarrollo
const isDev = process.env.NODE_ENV !== 'production';

// Ventana principal
let win

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

  if(isDev){
    win.webContents.openDevTools();
  }


  win.loadFile(path.join(__dirname, './renderer/index.html'));
};

app.whenReady().then(() => {
  createMainWindow();

  // Este fragmento me garantiza que si no tengo ninguna ventana
  // Se cree una al activar la aplicaci贸n.
  app.on('activate', () => {
    if(BrowserWindow.getAllWindows().length === 0){
    createMainWindow();
  }
  });
})

// Evento: Verificar si todas la ventanas estan cerradas al cerrar la aplicaci贸n
app.on('window-all-closed', ()=>{
  // Si no corre en Mac
  if(!isMac){
    app.quit(); //Cerrar todas las ventanas
  }
});

// Evento desde el backend
// Si desde el backend detecto un evento ping en el front
ipcMain.on('ping', (event, arg) => {
  // Verifico la informaci贸n que me llego desde el frontend
  console.log(`ping recibido en el backend: \n ${arg}`);

  // Envia una respuesta del backend al frontend
  event.sender.send('pong', new Date());
})

// Abrir un directorio con el evento open-directory
ipcMain.on('open-directory', (event) => {
  // Abro una ventana de dialogo para seleccionar el directorio
  // Requiere la ventana desde donde se llamara y opciones del dialogo
  dialog.showOpenDialog( win, {
    // Titulo de la ventana de dialogo
    title: 'Selecciona un directorio',
    // Texto del bot贸n principal
    buttonLabel: 'Abrir',
    // Que tipo de archivos puede seleccionar
    properties: ['openFile', 'openDirectory']
  }).then(result => {
    // Es una promesa y por lo tanto retorna un resultado con diferente informaci贸n
    console.log(result.canceled); // si el di谩logo fue o no cancelado
    console.log(result.filePaths) // Arreglo rutas a los archivos elegidos
    console.log(result.bookmarks ) // Arreglo rutas a los archivos elegidos en Mac
    const dir = result.filePaths;
    // Array con imagenes
    const images = [];
    // Si obtuvimos rutas de archivos
    if (dir.length > 0){
      // Leer el primer directorio elegido
      fs.readdir(dir[0], (err, files) => {
        // Recorrer todos los archivos leidos
        for (let i = 0; i < files.length; i++){
          // Seleccionar solo los que sen de tipo imagen
          if(isImage(files[i])){
            // Me retorna la ruta de la imagen
            let imagesFile = path.join(dir[0], files[i]);
            // Los stats son estadisticas de un archivo
            // Nos intereza su tama帽o
            let stats = fs.statSync(imagesFile);
            // Me retorna el tama帽o de la imagem en un formato humano
            let size = filesize.filesize( stats.size, {round:0});
            // Agrego la ruta de la imagen y su tama帽o al array de imagenes
            images.push({
              filename:files[i], 
              src : `file://${imagesFile}`,
              size: size
            })
          }
        }
        // Verificamos los archivos que obtuvimos 
        console.log(images)
      });
    }
  }).catch(err => {
    console.log(err)
  })  
})


filesize

is-image