Crear un motor de búsqueda de GIF usando JavaScript

Posted on by Rudeus Greyrat

En este artículo, crearemos un motor de búsqueda de GIF usando JavaScript. La aplicación básica del motor de búsqueda Gif es buscar las imágenes a partir de las palabras clave ingresadas por el usuario y la salida de las imágenes se cargará en la misma página con diferentes relaciones de aspecto y tamaños proporcionados por Giphy. Para obtener el resultado de la imagen, utilizaremos la API de búsqueda de Giphy EndPoint.  

Por medio de EndPoint en API, en realidad estamos accediendo a los servicios de entrega de imágenes de Giphy usando el punto final en nuestra URL. 

En primer lugar, crearemos un diseño HTML y diseñaremos los elementos usando CSS. La página contiene el campo de entrada para las palabras clave de búsqueda de las imágenes y algo de estilo con CSS.

El diseño HTML básico presenta la estructura de la página e incluye lo siguiente:

  • Campo de entrada: Campo de entrada básico que acepta las palabras clave alfanuméricas de la entrada del usuario.
  • Botón de búsqueda: la palabra clave de entrada se activará para llamar al método API usando este botón.

    HTML

    <!DOCTYPE html>
    <html>
      <head>
        <title>Giphy Search Engine</title>
        <link rel="stylesheet" href="css/main.css" />
      </head>
      <body>
        <div class="header">
          <h1>Gif Search Engine</h1>
        </div>
        <div class="container container-padding50">
          <input type="text" class="js-userinput 
            container-textinput" />
          <button class="js-go container-button">
            Search!
          </button>
        </div>
        <div class="container 
          container-padding50 js-container">
        </div>
      
        <!-- Link to JavaScript File here-->
          
        <script src="javascript/main.js"></script>
      </body>
    </html>

    En el diseño HTML dado, hemos estructurado el código anterior de la siguiente manera

    HTML

    <style>
        
    body {
      width: 80%;
      max-width: 1024px;
      margin: 0 auto;
    }
      
    .header {
      padding: 100px 50px 50px 40px;
      position: relative;
      top: 50px;
    }
      
    h1 {
      font-weight: bold;
      font-style: normal;
      font-family: "Times New Roman";
      font-size: 72px;
      color: #090;
      text-align: center;
    }
      
    .container-padding50 {
      padding: 80px 0px 0px 30px;
    }
      
    .container-textinput {
      width: 70%;
      display: inline-block;
      padding: 16px;
      font-size: 20px;
      font-family: Helvetica, sans-serif;
    }
      
    .container-button {
      width: 20%;
      display: inline-block;
      padding: 16px;
      background-color: green;
      color: white;
      font-size: 20px;
      font-family: Helvetica, sans-serif;
      
      border: 1px solid green;
      border-radius: 5px;
    }
      
    .container-image {
      width: 30%;
      display: block;
      float: left;
      margin-right: 3%;
    }
      
    </style>
  • Una etiqueta de encabezado de nivel 1 que se usa para mostrar el nombre del título y se le aplica estilo definiendo la clase como encabezado mediante CSS.
  • Propiedades básicas como font-family, font-style, font-weight, color y alineación dadas a las clases para mostrar el Título.
  • En el siguiente contenedor div, se muestra un campo de entrada y un botón con clases para diseñar con Padding adecuado, ancho para alinearlo con la pantalla.
  • Para cargar la salida de la imagen en la misma página, se proporciona un contenedor con un montón de propiedades de estilo, como el ancho y el margen, para escalar todas las imágenes.
  • Estas clases e identificaciones se pueden modificar más tarde cuando sea necesario.

Estilo CSS: el diseño creado del HTML y CSS anterior se vería así,

Lógica principal del motor de búsqueda: en primer lugar, habilitar la palabra clave de entrada del usuario para buscar las imágenes GIF y mostrarlas como salida escrita en un archivo JavaScript. Hay un montón de funciones y lógicas para ejecutar la consulta de búsqueda.

Hay varios pasos a seguir que ayudarían a obtener la lógica.

Paso 1: Obtener la entrada del usuario: Inicialmente, el campo de entrada tiene alguna palabra clave o valor ingresado por el usuario que garantiza que la lógica se realice en la palabra clave dada. Aquí, la palabra clave se selecciona mediante el método Selector de consultas, que luego devuelve la palabra clave de entrada o un valor. 

Javascript

function getUserInput() {
  var inputValue = document
    .querySelector(".js-userinput").value;
  return inputValue;
}

Paso 2: Obtener la entrada y procesar la solicitud: Además, se realiza un conjunto de operaciones cuando se hace clic en el botón Buscar. El valor devuelto por la función `getUserInput` ahora también lo usan otras funciones. Luego, el controlador maneja el valor para el evento de clic. Esto se puede lograr agregando el método EventListener. Ahora, cada vez que se haga clic en el botón Buscar, se realizará un conjunto de operaciones en esa palabra clave. 

Javascript

document.querySelector(".js-go").addEventListener("click", function () {
  var inputValue = document
    .querySelector(".js-userinput").value;
  var userInput = getUserInput();
  searchGiphy(userInput);
});

Nota: Hay otros Eventos en el método addEventListener a través de los cuales podemos extender las formas de escuchar los eventos. Aquí se usa el evento «keyup» para permitir que el usuario presione Enter y busque la palabra clave para las imágenes. Por el contrario, en realidad escucha qué tecla ha presionado el usuario. Aquí se requiere un objeto para verificar si la tecla presionada coincide o no con el valor de KeyCode . 

Javascript

document.querySelector(".js-userinput")
  .addEventListener("keyup", function (e) {
  
  // If the Key Enter is Pressed 
  if (e.which === 13) { 
    var userInput = getUserInput();
    searchGiphy(userInput);
  }
});

Paso 3: Una vez que el detector de eventos captura los datos de entrada, ahora los utiliza la función searchGiphy, que toma los datos del usuario como parámetro y realiza una serie de operaciones.

searchGiphy( searchQuery ): La función maneja las siguientes cosas-

  • Esta función realiza una operación de búsqueda cada vez en los datos de usuario dados y la habilita solicitando al servidor Giphy que devuelva el objeto utilizando la URL de la API de búsqueda de punto final de Giphy .
  • La URL de la API de búsqueda de punto final de Giphy solicita que el servidor de Giphy responda a la solicitud y devuelva el resultado en forma de objeto JSON.

Cargar las imágenes sin actualizar la página

  • Los datos devueltos por la URL de la API de Giphy se pueden recuperar sin actualizar la página. Podemos lograr esto mediante una solicitud de AJAX para cargar los datos sin actualizar la página.
  • Podemos crear un constructor de XMLHttpRequest(XHR) que inicialice una solicitud GET usando el método .open() y envíe la solicitud usando . Método .send().
  • Luego, la respuesta es manejada por el controlador EventListener, que es responsable de cargar los datos en la pantalla.

Javascript

function searchGiphy(searchQuery) {
  var url =
"https://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q="
  + searchQuery;
      
  // AJAX Request
    
  var GiphyAJAXCall = new XMLHttpRequest();
  GiphyAJAXCall.open("GET", url);
  GiphyAJAXCall.send();
  
  GiphyAJAXCall.addEventListener("load", function (data) {
    var actualData = data.target.response;
    pushToDOM(actualData);
    console.log(actualData);
      
  });
}

Paso-4: Se define una función pushToDOM que se encargará de procesar la respuesta y cargar las Imágenes.
pushToDOM(response): Hay algunos pasos estándar para manejar las respuestas de la API. Esta función maneja las siguientes cosas:

  • Acceso a los datos La función searchGiphy recibe los datos del usuario como un parámetro y solicita a la API de búsqueda de Giphy EndPoint para acceder a la consulta y devolver la respuesta. 
     
  • Conversión de las respuestas a un objeto JSON Las respuestas son básicamente arrays que tienen etiqueta de imagen, tipo, URL de origen, alto, ancho y otra información que se puede recuperar al convertirlo en un objeto JSON. Al usar JSON.parse (respuesta) podemos convertir el objeto en un objeto JSON.
     
  • Retención de las respuestas Mediante el método .querySelector, seleccionamos un contenedor para contener las respuestas. Si alguna respuesta anterior ya está sincronizada y presente en el contenedor, simplemente borre el contenedor.
     
  • Representación de imagen Las imágenes de salida tienen algunas propiedades a las que puede acceder su objeto. Por medio de representación, en realidad queremos la URL de la imagen que se puede obtener fácilmente mediante el método .url. 
     
  •  Mostrar imagen Se necesita un contenedor para mostrar una imagen; sin embargo, una imagen tiene una URL a la que puede acceder el contenedor mediante la propiedad del elemento .innerHTML. 

Por lo tanto, podemos procesar todas las imágenes en las respuestas haciendo un bucle sobre las imágenes que extraen cada imagen en un contenedor con su URL de origen.

Javascript

function pushToDOM(response) {
  
  // Turn response into real JavaScript object
  response = JSON.parse(response);
    
  // Drill down to the data array
  var images = response.data;
  
  // Find the container to hold the response in DOM
  var container = document.querySelector(".js-container");
    
  // Clear the old content since this function 
  // will be used on every search that we want
  // to reset the div
  container.innerHTML = "";
  
  // Loop through data array and add IMG html
  images.forEach(function (image) {
  
    // Find image src
    var src = image.images.fixed_height.url;
  
    // Concatenate a new IMG tag
    container.innerHTML += "<img src='" 
      + src + "' class='container-image' />";
  });
}

Salida final:

Código fuente: https://github.com/codewithdev/Gif-Search-Engine 

Publicación traducida automáticamente

Artículo escrito por codewithdev y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *