Conceptos fundamentales
¿Qué es una API REST?
Flujo de comunicación entre usuarios, frontend y backend
Primeros pasos con fetch
Consume tu primera API REST
Endpoints y query parameters
¿Qué son los HTTP Status Codes?
¿Qué es una API KEY?
Proyecto
Maquetación del proyecto
¿Qué son los Métodos HTTP?
GET: leyendo michis favoritos
POST: guardando michis favoritos
Consultas a la API para escribir HTML dinámico
DELETE: borrando michis favoritos
Headers en peticiones HTTP
¿Qué son los Headers HTTP?
Header de autorización
Header de Content-Type
FormData: publicando imágenes de michis
Bonus
Axios: librerías de JavaScript para consumir APIs
CORS, caché, redirect y tu propio clon de fetch
GraphQL, Web Sockets y Web 3.0: el mundo más allá de REST
Próximos pasos
Toma el Curso Práctico de Consumo de API REST con JavaScript
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 19
Preguntas 2
Les dejo un mini proyecto en HTML y CSS para que puedan utilizar si quieren practicar
Utiliza la Platzi Fake Store API, que fue creada por el Team Platzi 💚
Fue hecha rápido así que hay muchas cosas que pueden tocar y modificar a su gusto 😃
Espero les sea útil para practicar y seguir aprendiendo!
Utiliza vitejs como empaquetador para tener un entorno de desarrollo ⚡ Anímense a probarlo
git clone https://github.com/juanespinola05/platzi-fake-store-template.git
npm i
npm run dev
Cada vez toma más forma mi mini-proyecto 😁
Dato cultural:
La palabra “Mixi” proviene del idioma Otomí (un pueblo Mesoamericano, proveniente del centro de México) y significa “gato”. Su pronunciación es similar a la palabra “Michi”.
Con otro glass más fino 👌🏼
Así va el mio
asi me quedo la maquetación!!
Probando con varios fondos
Así vamos por ahora ❤️ quise ponerles un estilo Polaroid a las fotos utilizando border
article img{
border: 10px solid #fff;
border-bottom: 40px solid #fff;
}
🐱 La palabra “michi” o “mishi” también es muy utilizado en mi país, buscando información de su origen, encontré esto:
¿Cuál es el origen de los gatos Michi?
Si eres de lo que se están preguntando sobre el origen del meme de los gatos michi, aquí te contextualizaremos para que tengas tema de conversación. El origen de la palabra “michi” está en el imperio Inca, donde no existían lo gatos. Fue cuando los conquistadores españoles llegaron a colonizar, que introdujeron esta especie de felino.
No lo estoy estilizando, pero las fotos de los gatitos están bacanas
.
<body>
<h1>Cats API App</h1>
<section id="randomCats">
<h2>Random Cats</h2>
<article>
<img alt="Foto de gatito 1" style="width:600px">
<button>Save to favorites</button>
</article>
<article>
<img alt="Foto de gatito 2" style="width:600px">
<button>Save to favorites</button>
</article>
<article>
<img alt="Foto de gatito 3" style="width:600px">
<button>Save to favorites</button>
</article>
<button onclick="pickACat()">Pick another CAThino</button>
</section>
<section id="favoriteCats">
<h2>favorites Cats</h2>
<article>
<img alt="Foto de gatito fav" style="width:600px">
<button>Remove from favorites</button>
</article>
</section>
<script src="main.js"></script>
</body>
.
const API_URL =
"https://api.thecatapi.com/v1/images/search?limit=3&page=1&api_key=your-api-key";
const pickACat = async (url = API_URL) => {
const response = await fetch(url);
const data = await response.json();
const imgTags = document.querySelectorAll("img");
imgTags.forEach((element, key) => (element.src = data[key].url));
};
pickACat();
🐱🐱 Aunque tengo que mejorar con mi CSS, me siento satisfecho por el momento con mis resultados.
Mis avances de momento:
Así va mi proyecto de michis :3
Así vamos con los michis
<!DOCTYPE html>
<html lang="en">
<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>Dog Api</title>
</head>
<body>
<h1>Consumo de API DOG</h1>
<section id="RamdomDogs">
<h2>Perros aleatorios</h2>
<article>
<img id="img1" width="300" alt="Dog image">
<button>Guardar perros en favoritos</button>
</article>
<article>
<img id="img2" width="300" alt="Dog image">
<button>Guardar perros en favoritos</button>
</article>
<article>
<img id="img3" width="300" alt="Dog image">
<button>Guardar perros en favoritos</button>
</article>
<input type="button" value="Nuevo Perro" onclick="anotherFn()">
</section>
<section id="favoritesDogs">
<h2>Perros favoritos</h2>
<article>
<img id="img3" width="300" alt="">
<button>Eliminar perros de favoritos</button>
</article>
</section>
<script src="./index.js"></script>
</body>
</html>
Estuve practicando con la Platzi fake store:
const API = "https://api.escuelajs.co/api/v1/products";
const main = document.querySelector('main');
async function fetchData(url){
const response = await fetch(url);
const data = response.json();
return data;
}
async function getData(url){
try{
const response = await fetchData(url);
response.forEach(product =>{
main.innerHTML += `
<div class="tarjeta">
<img src="${product.images[0]}" alt="product">
<h3 class="title">${product.title}</h3>
<p class="price">$${product.price}</p>
</div>
`
})
return response
}
catch{
throw new Error("Error at the API")
}
}
console.log(getData(API));
Así va quedando el proyecto!
.
.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.