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

Curso de Electron: Apps de escritorio en Windows y Mac

Curso de Electron: Apps de escritorio en Windows y Mac

platzerito18092018 platzerito18092018

platzerito18092018 platzerito18092018

Buscar im谩genes

16/52
Recursos

Agregamos el evento de la caja de b煤squeda para hacer filtros y as铆 poder buscar im谩genes de la lista.

RETO 1: En 茅ste v铆deo agregamos el evento de la caja de b煤squeda para hacer filtros y as铆 poder encontrar im谩genes de la lista, cuando no se ingresa texto en la caja de b煤squeda la lista de im谩genes deber铆a mostrarse completa, trata de solucionarlo y cu茅ntanos como te fue en la secci贸n de comentarios.

Aportes 13

Preguntas 1

Ordenar por:

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

o inicia sesi贸n.

Esta fue mi soluci贸n:

function searchImagesEvent () {
  const searchBox = document.getElementById('search-box')

  searchBox.addEventListener('keyup', function () {    
    const regex = new RegExp(this.value.toLowerCase(), 'gi')
    if (this.value.length > 0) {
      const thumbs = document.querySelectorAll('li.list-group-item img')
      for (let i = 0, length1 = thumbs.length; i < length1; i++) {
        const fileUrl = url.parse(thumbs[i].src)
        const fileName = path.basename(fileUrl.pathname)
        if (fileName.match(regex)) {
          thumbs[i].parentNode.classList.remove('hidden')
        } else {
          thumbs[i].parentNode.classList.add('hidden')
        }
      }
      selectFirstImage()
    } else {
      showAllImages()
      selectFirstImage()
    }
  })
}

function selectFirstImage () {
  const image = document.querySelector('li.list-group-item:not(.hidden)')
  changeImage(image)
}

function showAllImages () {
  const thumbs = document.querySelectorAll('li.list-group-item img')
      for (let i = 0, length1 = thumbs.length; i < length1; i++) {
        thumbs[i].parentNode.classList.remove('hidden')
      }
}```

Actualizaci贸n 2023
En la clase pasada les indique como activar la integraci贸n de node en el frontend. (Clase 14)

Para versiones superiores de Electron 8 es necesario que para cada ventana donde agregues la integraci贸n de node 鈥渘odeIntegration鈥 la actives y desactivar la seguridad de la ventana 鈥渃ontextIsolation鈥. Este es el c贸digo necesario para hacerlo:

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

En las versiones de Electron 8 es necesario agregar los paquetes de node mediante requiere si estas trabajando con el paquete de electron directamente o con import si usar electron-compile. En mi caso prefiero usar electron como paquete. Dejo mi c贸digo usando electron. Recuerda: import si usas electron-compile:

//import os from 'os';
const os = require('os');
//import path from 'path';
const path = require('path');
//import url from 'url';
const url = require('url');

window.addEventListener('load', () => {
  addImagesEvents();
  serchImagesEvent();
})

// Agrega el evento click a toda la lista de imagenes
function addImagesEvents () {
  // Selecciona todos los elementos lista de imagenes
  const thumbs = document.querySelectorAll('li.list-group-item');
  // Recorre todos los elementos y les agrega el evento click
  for (let i = 0, length = thumbs.length; i < length; i++){
    thumbs[i].addEventListener('click', function(){
      // Al dar click sobre algun elemento de la lista (thumbs[i])
      // Envia como parametro el actual thumbs this
      // A una funci贸n encargada de cambiar la imagen
      changeImages(this);
    })
  }
}

// Funci贸n para cambiar imagenes
function changeImages(node){
  // Detectamos el elemnto li con la clase selected y se la eliminamos
  document.querySelector('li.selected').classList.remove('selected');
  // Luego se la agregamos al nodo donde dimos click
  node.classList.add('selected');
  // Y cambiamos la imagen que tenemos actualmente en pantalla por la del nodo
  document.getElementById('image-displayed').src = node.querySelector('img').src;
}


//Funci贸n para buscar una imagen especifica
function serchImagesEvent () {
  // Seleccionamos la barra de busqueda
  const searchBox = document.getElementById('search-box');
  // Evento que se ejecuta al presionar y liberar una tecla
  searchBox.addEventListener('keyup', function(){

    // Agregamos una expresi贸n regular para comparar si lo escrito coincide
    // con alg煤n valor.
    // g => global, hace coincidir todas las instancias del patr贸n en una cadena, no solo una
    // i => no distingue entre may煤sculas y min煤sculas (as铆, por ejemplo, /a/icoincidir谩 con 
    // la cadena "a"o "A"
    const regex = new RegExp(this.value.toLowerCase(), 'gi')

    if(this.value.length > 0){
      const thumbs = document.querySelectorAll('li.list-group-item img');
      for (let i = 0, length1 = thumbs.length; i < length1; i++){
        //Ruta donde se encuentra la imagen
        const fileUrl = url.parse(thumbs[i].src);
        // Solo toma el nombre del archivo
        const fileName = path.basename(fileUrl.pathname);
        // Si el nombre entregado coincide con el nombre del archivo
        if (fileName.match(regex)){
          // Elimina la clase hidden del nodo padre que es la etiqueta li
          thumbs[i].parentNode.classList.remove('hidden');
        }else{
          // Si no coincide agrega la clase hidden para ocultar el elemento
          thumbs[i].parentNode.classList.add('hidden');
        }
      }
      selectFirstImage()
    }
  });
}

//Selecciona la primera imagen que coincida con lo escrito en la barra de busqueda
function selectFirstImage () {
  //Selecciona la imagen que no tenga la clase hidden
  const image = document.querySelector('li.list-group-item:not(.hidden)')
  // Cambia la imagen de la ventana principal
  changeImages(image);
}

por favor ay煤denme! ya he intentado de toooodas las formas posibles importar los m贸dulos de node como el profesor indica, y como aparece en la documentaci贸n actualizada, y lo unico que consigo es error en la consola de: required is not defined y se帽ala en rojo las lineas import url鈥 e import path鈥 YA NO SE QUE MAS HACER 馃槮

import url from 'url'
import path from 'path'

window.addEventListener('load', () => {
    addImagesEvents()
    searchImagesEvent()
})

function addImagesEvents() {
    const thumbs = document.querySelectorAll('li.list-group-item')

    for (const elem in thumbs) {
        if (typeof thumbs[elem] === 'object') {
            thumbs[elem].addEventListener('click', function () {
                changeImage(this)
            })
        }

    }
}

function changeImage(node) {
    document.querySelector('li.selected').classList.remove('selected')
    node.classList.add('selected')
    document.getElementById('image-displayed').src = node.querySelector('img').src
}

let hiddenImages = [];

function searchImagesEvent() {
    const searchBox = document.getElementById('search-box')

    searchBox.addEventListener('keyup', function () {
        if (this.value.length > 0) {
            const thumbs = document.querySelectorAll('li.list-group-item img')
            const regex = new RegExp(this.value.toLowerCase(), 'gi')

            for (const elem in thumbs) {
                if (typeof thumbs[elem] === 'object') {
                    const fileUrl = url.parse(thumbs[elem].src)
                    const fileName = path.basename(fileUrl.pathname)
                    if (fileName.match(regex)) {
                        thumbs[elem].parentNode.classList.remove('hidden')
                    }
                    else {
                        thumbs[elem].parentNode.classList.add('hidden')
                        hiddenImages.push(thumbs[elem].parentNode)
                    }
                }
            }
            selectFirstImage()
        }
        else {
            if (hiddenImages.length > 0) {
                hiddenImages.forEach(element => {
                    element.classList.remove('hidden')
                });
                hiddenImages = []
            }
        }
    })

    function selectFirstImage() {
        const image = document.querySelector('li.list-group-item:not(.hidden)')
        if (image)
            changeImage(image)
    }
}```
function searImagesEvent () {
	const searchBox = document.getElementById('search-box')

	searchBox.addEventListener('keyup', function () {
		const regex = new RegExp(this.value.toLowerCase(), 'gi')
		
		const thumbs = document.querySelectorAll('li.list-group-item img')

		if (this.value.length > 0) {
			for (let i = 0, length1 = thumbs.length; i < length1; i++) {
				const fileUrl = url.parse(thumbs[i].src)
				const fileName = path.basename(fileUrl.pathname)
				if (fileName.match(regex)) {
					thumbs[i].parentNode.classList.remove('hidden')
				} else {
					thumbs[i].parentNode.classList.add('hidden')
				}
			}

			selectFisrtImage()
		} else {
			for (let i = 0, length1 = thumbs.length; i < length1; i++) {
				thumbs[i].parentNode.classList.remove('hidden')
			}
		}
	})
}

Cambie un poco la funcion searchImagesEvent

function searchImagesEvent(){
  const searchBox = document.getElementById('search-box')
  searchBox.addEventListener('keyup', function () {
    const thumbs = document.querySelectorAll('li.list-group-item img')
      const regex = new RegExp(this.value.toLowerCase(), 'gi')
      for (let i = 0, length1 = thumbs.length ; i < length1 ; i++) {
        const fileUrl = url.parse(thumbs[i].src)
        const fileName = path.basename(fileUrl.pathname)

        if ( this.value.length > 0 ) {
          if (fileName.match(regex)) {
            thumbs[i].parentNode.classList.remove('hidden')
          } else {
            thumbs[i].parentNode.classList.add('hidden')
          }
        }else{
          thumbs[i].parentNode.classList.remove('hidden')
        }
      }
      selectFirstImage()
  })
}

tengo un problema de compilacion creo y no se por donde hacerle鈥
Uncaught SyntaxError: Unexpected identifier
Failed to compile /Users/axell/un_app/src/renderer/frontEnd.js:

alguna ayuda

Buen d铆a, les comparto mi soluci贸n, basicamente solo agregue un else recorriendo la constante thumbs y quitando la clase hidden de cada elemento

function searchImagesEvent() {
    const searchBox = document.getElementById('search-box')
    
    searchBox.addEventListener('keyup', function() {
        const regex = new RegExp(this.value.toLowerCase(), 'gi')
        
        if (this.value.length > 0) {
            const thumbs = document.querySelectorAll('li.list-group-item img')
            for (let i = 0; i < thumbs.length; i++) {
                
                const fileUrl = url.parse(thumbs[i].src)
                const fileName = path.basename(fileUrl.pathname)

                if (fileName.match(regex)) {
                    thumbs[i].parentNode.classList.remove('hidden')
                } else {
                    thumbs[i].parentNode.classList.add('hidden')
                }
            }

            selectFirstImage()
        } else {
            const thumbs = document.querySelectorAll('li.list-group-item img')
            for (let i = 0; i < thumbs.length; i++) {
                thumbs[i].parentNode.classList.remove('hidden')
            }
        }
    })
}

Mi soluci贸n fue realizar un else para poder eliminar el hidden de las im谩genes.

function searchImagesEvent () {
const searchBox = document.getElementById(鈥榮earch-box鈥)

searchBox.addEventListener(鈥榢eyup鈥, function () {

const regex = new RegExp(this.value.toLowerCase(), 'gi')

if (this.value.length > 0) {
  const thumbs = document.querySelectorAll('li.list-group-item img')

  for (let i = 0, length1 = thumbs.length ; i < length1 ; i++) {

    const fileUrl = url.parse(thumbs[i].src)
    const fileName = path.basename(fileUrl.pathname)

    if (fileName.match(regex)) {

      thumbs[i].parentNode.classList.remove('hidden')
      selectedFirstImage()

    } else {
      thumbs[i].parentNode.classList.add('hidden')
    }
  }    

} else {
  showAllImages()
  selectedFirstImage()
}               

})
}

function selectedFirstImage () {
const image = document.querySelector(鈥榣i.list-group-item:not(.hidden)鈥)
changeImage(image)
}

function showAllImages() {
const thumbs = document.querySelectorAll(鈥榣i.list-group-item img鈥)

for (let i = 0, length1 = thumbs.length ; i < length1 ; i++) {
    
  thumbs[i].parentNode.classList.remove('hidden')
 
}      

}

Buenas tardes. tengo un error y ya no se que mas hacer para solucionarlo. Cada ves que intento importar un modulo de node en mi frontend.js

Lo realice as铆 con TypeScript:

function searchImagesEvent() {
  const searchBox: HTMLInputElement | null = document.querySelector('#search-box');

  if (searchBox) {
    searchBox.addEventListener('keyup', function() {
      const regex = new RegExp(this.value.toLowerCase(),'gi');
      const thumbs: NodeListOf<HTMLImageElement> = document.querySelectorAll('li.list-group-item img');
      if (this.value.length > 0) {
        thumbs.forEach(thumb => {
          const fileUrl: Url = url.parse(thumb.src);
          const fileName = path.basename(fileUrl.pathname);
          const parentNode = (thumb.parentNode as HTMLElement);
          if (regex.exec(fileName)) {
            parentNode.classList.remove('hidden');
          } else {
            parentNode.classList.add('hidden');
          }
        });
      } else {
        thumbs.forEach(thumb => {
          const parentNode = (thumb.parentNode as HTMLElement);
          parentNode.classList.remove('hidden');
        });
      }
      selectFirstImage();
    })
  }
}
function searchImagesEvent() {
    const searchBox = document.getElementById('search-box');
    searchBox.addEventListener('keyup', function () {
        const regex = new RegExp( this.value.toLowerCase(), 'gi');

        const thumbs = document.querySelectorAll('li.list-group-item img');

        if (this.value.length > 0) {

            for (let i = 0, length1 = thumbs.length; i < length1; i++) {
                const fileUrl = url.parse( thumbs[i].src );
                const fileName = path.basename(fileUrl.pathname);
                if( fileName.match( regex) ){

                } else {
                    thumbs[i].parentNode.classList.add('hidden');
                }
            }
            selectFirstImage();
        } else {
            for (let i = 0, length1 = thumbs.length; i < length1; i++) {
                thumbs[i].parentNode.classList.remove('hidden');
            }
        }
    });
}

Yo al menos lo hice as铆:

function searchImagesEvent() {

    const searchBox = document.getElementById("search-box")

    searchBox.addEventListener("keyup", function () {
        const regex = new RegExp(this.value.toLowerCase(), "gi")

        if (this.value.length > 0) {
            const thumbs = document.querySelectorAll("li.list-group-item img")

            for (let i = 0; i < thumbs.length; i++) {
                const fileUrl = url.parse(thumbs[i].src)
                const fileName = path.basename(fileUrl.pathname)
                console.log('fileName', fileName)
                console.log('regex', regex)
                if (fileName.match(regex)) {
                    thumbs[i].parentNode.classList.remove("hidden")
                } else {
                    thumbs[i].parentNode.classList.add("hidden")
                }
            }
            selectFirstImg()
        } else {
            const thumbs = document.querySelectorAll("li.list-group-item img")

            for (let i = 0; i < thumbs.length; i++) {
                thumbs[i].parentNode.classList.remove("hidden")
            }
            selectFirstImg()
        }
    })
}```