En este post aprenderás a desarrollar los métodos search film y draw films de la clase filmsapp, lo que conforma un gran ejemplo práctico para el desarrollo de cualquier otro tipo de programa de código relacionado con los web components.
Si tu objetivo es especializarte en el desarrollo web y convertirte en un desarrollador profesional, te invitamos a seguir leyendo este post.
Métodos search film y draw films de la clase filmsapp
Una clase o un web component pueden tener un conjunto de métodos. Un método es un elemento que se instancia debajo de una clase y que sirve para ejecutar diferentes acciones o eventos sobre una clase a partir de un grupo de instrucciones.
En este caso, vamos a definir los métodos search film y draw films de la clase filmsapp, para buscar la película dentro de la base de datos y dibujar la película encontrada sobre la pantalla, respectivamente.
Clase Films App
Antes de dibujar los métodos search film y draw films de la clase filmsapp, vamos a recordar cuál es el proceso para instanciar la clase, los constructores y el estado bajo los web components. Si quieres conocer el proceso en detalle, puedes revisar el post en el que te contamos cómo definir la clase Films App. Aquí vas a aprender a ejecutar un connectedCallBack, los métodos de addElementComponent y la forma en la que se agrega un escuchador con addEventListener.
class FilmApp extends HTMLElement {
OMDB_API_KEY = "código"
API_URL = "link de la API"
constructor() {
super();
this.attachShadow
}
connectedCallBack() {
const template = templateElement.content.cloneNode (true);
this.shadowRoot.appendChild (template);
const addElementComponent = this.shadowRoot.querySelector ('add-element-component');
addElementComponent.addEventListener ('add-element', (event) => {
const fileName = event.detail;
this.searchfile (fileName)
})
}
customElements.define ("films-app", FilmsApp);Ahora, es el momento de crear los métodos search film y draw films de la clase filmsapp.
Método search film
El método search film es un método que le permitirá al programa buscar una película dentro de una base de datos mucho más amplia. Antes de seguir desarrollando este método, tendrás que haber inicializado la conexión entre ambos elementos y hacer la petición a la API, que es OMDb API, en la primera parte de la declaración de la clase que almacena el método search film.
Después, podrás empezar a ejecutar el método search film, donde tendrás que emplear un método try catch para instanciar una alert que genere un error si no conseguimos completar el proceso.
Para obtener la respuesta y emplear el método await, tendremos que convertir el método en una función async. A su vez, instanciamos la forma en la que queremos obtener nuestra respuesta con response JSON.
En el caso de la constante de la respuesta, tendremos que usar la función fetch, la cual se encarga de realizar la respectiva búsqueda de la película en la base de datos. Además, tendremos que usar el método que la misma API nos ofrece para buscar la película, que es “s”. A este par de instrucciones le pasaremos la variable del fileName, es decir, el título de la película.
Por último, vamos a instanciar el siguiente método, el de drawFilms, para pintar cada una de las búsquedas.
async searchFilm (filename) {
try {
const response = await fetch ('$ {this.API_URL}&s=$ {fileName}');
const data = await response.json();
const films = data.Search;
this.drawFilms (films)
catch (error) {
alert (erorr)
}Método draw films
Para el método draw films, que es el encargado de pintar las películas, tendremos que instanciar una variable que nos permita realizar un proceso para cada una de las películas que se deben pintar. Es por eso que el parámetro que recibirá es el de los files, es decir, las películas.
Para facilitar el proceso, tendrás que crear un div, al que le pasarás todos los atributos de la película, como el título, el póster y el progreso o rating para la progress bar. Este div lo vamos a crear como un elemento.
Para obtener la nota, tendremos que hacer una petición a la API por cada una de las películas. Utilizaremos el formato exacto para conocer el ID desde la base de datos, el cual es imdbID, así como el rating de las películas, es decir imdbRating.
drawFiles (files) {
filmforEach (async (film) => {
const response = await fetch ('${this.API_URL} &i=${film.imdbID}');
const data = await response.json();
const rating = Number (data.imdbRating) = 10;
const filmItemElement = document.createElement ('div')
filmItemElement.innerHTML = '
<film-item name ='${film.Title}" image = "${film.Poster}" progress = "${rating}"> </film-item>
this.shadowRoot.querySelector ('.films-app-wrapper').appendChild (filmItemElement)
}
}De esta manera, has aprendido cómo definir los métodos search film y draw films de la clase filmsapp con un ejercicio práctico. Quedaría algo así:
Ahora que hemos finalizado el proceso para definir los métodos search film y draw films de la clase filmsapp, es el momento de seguir aprendiendo con nuestro Desarrollo Web Full Stack Bootcamp. ¡Solicita información y conviértete en un profesional en pocos meses!
