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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

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 12

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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')
      }
}```

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(‘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')
      selectedFirstImage()

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

} else {
  showAllImages()
  selectedFirstImage()
}               

})
}

function selectedFirstImage () {
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')
 
}      

}

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()
        }
    })
}```