Tutorial de Fetch

En este tutorial vamos a aprender a hacer peticiones Fetch con JavaScript puro. Para ello vamos a hacer una aplicación que nos permita buscar pokemon y ver sus detalles.

Requisitos

Para este tutorial vamos a utilizar tecnologias como html, css y javascript. Además, vamos a necesitar un navegador web y un editor de código, se recomienda leer acerca de peticiones con fetch antes de empezar este tutorial.

Instrucciones

  1. Creamos un archivo index.html y agregamos el siguiente código:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pokemon</title>
</head>
<body>
    <h1>Pokemon</h1>
    <input type="text" id="search" placeholder="Buscar pokemon">
    <button id="search-button">Buscar</button>
    <div id="pokemon"></div>
    <script src="app.js"></script>
</body>
</html>

En esta sección hemos creado la estructura básica de nuestro proyecto. Hemos agregado un título, un input para buscar pokemon, un botón para buscar pokemon, un div para mostrar la información del pokemon y un script para nuestro archivo app.js.

  1. Creamos un archivo app.js y agregamos el siguiente código:
document.getElementById('search-button').addEventListener('click', () => {
    const search = document.getElementById('search').value;
    fetch(`https://pokeapi.co/api/v2/pokemon/${search}`)
        .then(response => response.json())
        .then(data => {
            const pokemon = document.getElementById('pokemon');
            pokemon.innerHTML = `
                <h2>${data.name}</h2>
                <img src="${data.sprites.front_default}" alt="${data.name}">
                <p>Altura: ${data.height}</p>
                <p>Peso: ${data.weight}</p>
            `;
        })
        .catch(error => {
            console.error(error);
        });
});

En esta sección hemos agregado un evento al botón de buscar pokemon. Cuando se haga click en el botón, se va a hacer una petición a la API de PokeAPI. Si la petición es exitosa, se va a mostrar la información del pokemon en el div pokemon. Si la petición falla, se va a mostrar un mensaje de error en la consola.

Para más información sobre la API de PokeAPI, se puede consultar la documentación.

  1. Mediante el plugin de Live Server, abrimos el archivo index.html en el navegador y probamos la aplicación.

  2. Vamos a mejorar la presentación de nuestro proyecto agregando estilos CSS. Creamos un archivo styles.css y agregamos el siguiente código:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1 {
    margin: 1rem 0;
}

input {
    padding: 0.5rem;
    margin: 0.5rem 0;
}

button {
    padding: 0.5rem;
    margin: 0.5rem 0;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

#pokemon {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem 0;
}

img {
    width: 100px;
    height: 100px;
    margin: 0.5rem 0;
}

p {
    margin: 0.5rem 0;
}

En esta sección hemos agregado estilos CSS para mejorar la presentación de nuestro proyecto, como la fuente, el color de fondo, el color del texto, el tamaño de la letra, el espaciado, el color del botón, el cursor, el tamaño de la imagen, el margen de la imagen, el margen del párrafo, etc.

  1. Agregamos el archivo styles.css al archivo index.html:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pokemon</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Pokemon</h1>
    <input type="text" id="search" placeholder="Buscar pokemon">
    <button id="search-button">Buscar</button>
    <div id="pokemon"></div>
    <script src="app.js"></script>
</body>
</html>

En esta sección hemos agregado el archivo styles.css al archivo index.html.

  1. Mediante el plugin de Live Server, abrimos el archivo index.html en el navegador y probamos la aplicación.

Deploy

Se sugiere hacer el deploy de la aplicación en Github Pages, Vercel, Netlify, etc.

Reto

Ahora es necesario mejorar la aplicación. Se sugiere agregar las siguientes funcionalidades:

  1. Agregar un mensaje de error si el pokemon no existe.
  2. Agregar un mensaje de error si la petición falla.
  3. Agregar un spinner mientras se hace la petición.
  4. Agregar un botón para limpiar el div pokemon.
  5. Agregar un botón para buscar un pokemon aleatorio.
  6. Agregar un botón para buscar un pokemon por id.
  7. Agregar un botón para buscar un pokemon por nombre.
  8. Agregar un botón para buscar un pokemon por tipo.
  9. Agregar un botón para buscar un pokemon por habilidad.

Fetch con Fake Store API

Para crear una aplicación que muestre productos de una tienda, se puede utilizar la Fake Store API.

  1. Crear un archivo index.html y agregar el siguiente código:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Productos</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Productos</h1>
    <div id="products"></div>
    <script src="app.js"></script>
</body>
</html>
  1. Crear un archivo app.js y agregar el siguiente código:
fetch('https://fakestoreapi.com/products')
    .then(response => response.json())
    .then(data => {
        const products = document.getElementById('products');
        data.forEach(product => {
            products.innerHTML += `
                <div class="product">
                    <img src="${product.image}" alt="${product.title}">
                    <h2>${product.title}</h2>
                    <p>${product.description}</p>
                    <p>${product.price}</p>
                </div>
            `;
        });
    })
    .catch(error => {
        console.error(error);
    });
  1. Crear un archivo styles.css y agregar el siguiente código:
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1 {
    margin: 1rem 0;
}

#products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.product {
    border: 1px solid #ccc;
    padding: 1rem;
    text-align: center;
}

img {
    width: 100px;
    height: 100px;
    margin: 0.5rem 0;
}

h2 {
    margin: 0.5rem 0;
}

p {
    margin: 0.5rem 0;
}

  1. Mediante el plugin de Live Server, abrimos el archivo index.html en el navegador y probamos la aplicación.

  2. Se puede mejorar la aplicación agregando más funcionalidades, como un buscador, un filtro por categoría, un ordenamiento por precio, etc.

Reto

Ahora es necesario mejorar la aplicación. Se sugiere agregar las siguientes funcionalidades:

  1. Agregar un mensaje de error si la petición falla.

  2. Agregar un spinner mientras se hace la petición.

  3. Agregar un botón para limpiar el div products.

  4. Agregar un botón para buscar un producto por id.

  5. Agregar un botón para buscar un producto por título.

  6. Agregar un botón para buscar un producto por categoría.

  7. Agregar un botón para buscar un producto por precio.

  8. Agregar un botón para buscar un producto por rating.

  9. Agregar un botón para buscar un producto por cantidad.

  10. Agregar un botón para buscar un producto por descripción.

Fetch con Rick and Morty API.

Para crear una aplicación que muestre personajes de la serie Rick and Morty, se puede utilizar la Rick and Morty API.

  1. Crear un archivo index.html y agregar el siguiente código:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personajes</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Personajes</h1>
    <div id="characters"></div>
    <script src="app.js"></script>
</body>
</html>
  1. Crear un archivo app.js y agregar el siguiente código:
fetch('https://rickandmortyapi.com/api/character')
    .then(response => response.json())
    .then(data => {
        const characters = document.getElementById('characters');
        data.results.forEach(character => {
            characters.innerHTML += `
                <div class="character">
                    <img src="${character.image}" alt="${character.name}">
                    <h2>${character.name}</h2>
                    <p>${character.species}</p>
                    <p>${character.status}</p>
                </div>
            `;
        });
    })
    .catch(error => {
        console.error(error);
    });
  1. Crear un archivo styles.css y agregar el siguiente código:
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1 {
    margin: 1rem 0;
}

#characters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.character {
    border: 1px solid #ccc;
    padding: 1rem;
    text-align: center;
}

img {
    width: 100px;
    height: 100px;
    margin: 0.5rem 0;
}

h2 {
    margin: 0.5rem 0;
}

p {
    margin: 0.5rem 0;
}

  1. Mediante el plugin de Live Server, abrimos el archivo index.html en el navegador y probamos la aplicación.

  2. Se puede mejorar la aplicación agregando más funcionalidades, como un buscador, un filtro por especie, un ordenamiento por nombre, etc.

Reto

Ahora es necesario mejorar la aplicación. Se sugiere agregar las siguientes funcionalidades:

  1. Agregar un mensaje de error si la petición falla.

  2. Agregar un spinner mientras se hace la petición.

  3. Agregar un botón para limpiar el div characters.

  4. Agregar un botón para buscar un personaje por id.

  5. Agregar un botón para buscar un personaje por nombre.

  6. Agregar un botón para buscar un personaje por especie.

  7. Agregar un botón para buscar un personaje por estado.

  8. Agregar un botón para buscar un personaje por género.

  9. Agregar un botón para buscar un personaje por origen.

  10. Agregar un botón para buscar un personaje por ubicación.

Fetch con otras APIs

Para crear aplicaciones con Fetch, se pueden utilizar otras APIs como:

Solo para tener un ejemplo crearemos una aplicación que muestre chistes de la JokeAPI.

  1. Crear un archivo index.html y agregar el siguiente código:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chistes</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Chistes</h1>
    <div id="jokes"></div>
    <button id="joke-button">Nuevo chiste</button>
    <script src="app.js"></script>
</body>
</html>
  1. Crear un archivo app.js y agregar el siguiente código:
document.getElementById('joke-button').addEventListener('click', () => {
    fetch('https://v2.jokeapi.dev/joke/Any')
        .then(response => response.json())
        .then(data => {
            const jokes = document.getElementById('jokes');
            jokes.innerHTML = `
                <h2>${data.setup}</h2>
                <p>${data.delivery}</p>
            `;
        })
        .catch(error => {
            console.error(error);
        });
});
  1. Crear un archivo styles.css y agregar el siguiente código:
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1 {
    margin: 1rem 0;
}

#jokes {
    margin: 1rem 0;
    text-align: center;
}

button {
    padding: 0.5rem;
    margin: 0.5rem 0;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

h2 {
    margin: 0.5rem 0;
}

p {
    margin: 0.5rem 0;
}

  1. Mediante el plugin de Live Server, abrimos el archivo index.html en el navegador y probamos la aplicación.

  2. Se puede mejorar la aplicación agregando más funcionalidades, como un buscador, un filtro por categoría, un ordenamiento por fecha, etc.

Reto

Ahora es necesario mejorar la aplicación. Se sugiere agregar las siguientes funcionalidades:

  1. Agregar un mensaje de error si la petición falla.

  2. Agregar un spinner mientras se hace la petición.

  3. Agregar un botón para limpiar el div jokes.

  4. Agregar un botón para buscar un chiste por categoría.

  5. Agregar un botón para buscar un chiste por tipo.

  6. Agregar un botón para buscar un chiste por bandera.

  7. Agregar un botón para buscar un chiste por idioma.

  8. Agregar un botón para buscar un chiste por cantidad.

  9. Agregar un botón para buscar un chiste por filtro.

  10. Agregar un botón para buscar un chiste por blacklist.

Resumen

En este tutorial hemos aprendido a hacer peticiones Fetch con JavaScript puro. Hemos creado una aplicación que nos permite buscar pokemon y ver sus detalles. También hemos aprendido a mejorar la presentación de nuestro proyecto agregando estilos CSS. Además, hemos aprendido a hacer peticiones Fetch con la Fake Store API y la Rick and Morty API. Se sugiere seguir practicando y experimentando con Fetch para mejorar nuestras habilidades de programación.

Conclusión

En este tutorial hemos aprendido a hacer peticiones Fetch con JavaScript puro. Hemos creado una aplicación que nos permite buscar pokemon y ver sus detalles. También hemos aprendido a mejorar la presentación de nuestro proyecto agregando estilos CSS. Además, hemos aprendido a hacer peticiones Fetch con la Fake Store API y la Rick and Morty API. Se sugiere seguir practicando y experimentando con Fetch para mejorar nuestras habilidades de programación.

Referencias