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 29
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!!
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;
}
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();
Probando con varios fondos
🐱 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.
🐱🐱 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
Y así va quedando el maquetado de MichiApp 😊
<!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>
Favorite es en American English,
Favourite es en British English 🤓
La pronunciación de favorites es (fei - bruts)
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!
.
.
Si tienen problemas al usar la api pueden ver mi proyecto. Este puede mostrar gatos de manera random, puedes añadirlos como favoritos y eliminarlos.
En el curso hacen más cosas, pero aún no he podido darle solución a eso. Mientras tanto, pueden ver lo que logré y usarlo de muestra. Si pudieron completar todo el proyecto, compartan su código.
Psdta: No me centré en el diseño, procuré darle solución al uso de POST y DELETE que fue lo que más problemas dio este curso. 🔥🤗
Va quedando…
Alguien mas se a preguntado porque las imagenes cargan por partes y no todos simultáneamente al recargar la pagina? Si alguien sabe podria decirme porque pasa eso? 🤔🤔
otra pregunta como hacen para poner las imágenes del mismo tamaño? 🥺🥺
No entiendo hacia a donde apunta el proyecto, pero a darle 😛
Ahí le vamos 😋
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?