Laboratorio Ajax

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

Requisitos

Para este laboratorio 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 ajax antes de empezar este laboratorio.

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.

Conclusión

Felicidades, has completado el laboratorio de Ajax. Has aprendido a hacer peticiones AJAX con JavaScript puro. Ahora puedes hacer aplicaciones web que hagan peticiones a APIs de terceros.

¿Dónde utilizamos Ajax?

Utilizamos Ajax en aplicaciones web que necesitan hacer peticiones a APIs de terceros. En este laboratorio hemos hecho una aplicación que busca pokemon en la API de PokeAPI.

Cuando hacemos una petición AJAX, podemos obtener información de la API de terceros y mostrarla en nuestra aplicación web. Por ejemplo, podemos obtener información de un pokemon y mostrarla en nuestra aplicación web.