POST: guardando michis favoritos

💡 Recomendación: mira esta clase al menos 2 veces. En la primera disfruta de mi sufrimiento, mira paso a paso todo lo que hago y ríete de los errores que tuve. Luego, la segunda vez, desarrolla los ejercicios, pero adelántate a los errores que cometí para que no te pasen también a ti.

Y ya que estamos, era en este meme en el que estaba pensando cuando celebramos que, aunque seguíamos teniendo error, al menos ahora era uno distinto:

Excelente clase, por dos cosas:

• El contenido.

• El debbugin.

Lo primero es obvio, pero lo segundo nos muestra como es batallar con un error, algo que nos enfrentaremos diario si nos dedicamos a esto.

Una excelente clase.

Gente si no les agrega en favoritos, revisen que la url de favorites no tenga el ?limit=2

para que les pues traer todos los favoritos que han guardado
Luego me lo agradecen 😅

El protagonista de esta clase:

Para utilizar la API KEY de una forma más segura (como la que menciona la documentación de nuestra API de gatos), lo mejor es guardarla en headers, al momento de realizar el POST a nuestros favoritos, en vez de colocarla directamente en la URL:

//URL de la API
const URL = 'https://api.thecatapi.com/v1/';
const RANDOM = 'images/search';
const LIMIT_RANDOM = '?limit=6';

//URL de favoritos
const FAVORITES = 'favourites';
const key = "ABC123";

const res = await fetch(URL+FAVORITES, {
            method: 'POST',
            headers: {
                'x-api-key': key,
                'content-type': 'application/json'
            },

Muy buena clase
Que bueno que lo dejen así, muestra realmente cómo es todo el proceso de programar en verdad. Aunque a veces no podamos mantener la actitud de Juan y nos gane el bug 😹

Me gustan las clases de Juan DCG, son como si estuviera hablando con el, tomándonos un refresco en el barrio

Recomiendo usar .innerText para solo incrustar texto en el span

const errorNode = document.querySelector('#error');
        errorNode.innerText = `Error: ${error.message}`;

Para estructurar mejor el código pueden usar esta nomenclatura de variables apra el fetch

const querystring = {
    image_id: 'sdsd',
}

const options = {
    method: 'POST',
    headers: { 'content-type': 'application/json' }, // tipo de archivo de la solicitud
    body: JSON.stringify(querystring),
}

const response = await fetch(URL_FAVORITES, options);

A veces el querystring se usa como data o simplemente query pero como ya estamos usando data entonces usamos querystring

Una forma de tener varios botones haciendo lo mismo, sin usar onclick es la siguiente

document.addEventListener("click", function(event){
    if (event.target.className == "random__button"){
        saveFavorite();
    }
}, false);

Le ponemos a todos lo botones la misma clase.
Y le decimos a js que escuche en todo el documento. Cuando el click venga de la clase que nosotros queremos tiene que hacer tal cosa. En este caso ejecutar la función de guardar en favoritos.
Si el click viene de un botón con otra clase no hace nada.

Hola , Si estan teninedo problemas para hacer la peticion POST talvez se deba a que el API_KEY debe ir en el headers.
Almenos ese es un problema que yo tuve, porque al pareser el servodor no encontraba muy seguro el madarla por un QueryParameter. Y daba un error 404.

headers: {
 "x-api-key": "tu_personal_API_KEY",
 "Content-Type": "application/json",
}

Fijense que si en la URL de favoritos tienen el limite=2 se les va a complicar en visualizar los guardados!

Recuerden hacer console.log() de TODO lo que sea necesario para ayudarles a entender la lógica de un proceso que vayan implementando. Para mí ha sido la mejor manera de identificar errores lógicos, me ha ahorrado muchísimo tiempo.

Si no les muestra el mensaje de error usando data.message pueden intentar con await res.text()

no quiero ofender pero , no entiendo mucho a este profesor.
habla muy rapido , y haces mucha vueltas.

Hay algo que no entiendo, cuando hacemos post, donde se guarda toda esta informacion?
Subi a github pages, y abrio la misma pagina con los mismo elementos que guarde en mi localhost.

Mantener la actitud gatuna fue el gran aprendizaje de esta clase! Gracias Juan!

Amé esta clase

quitad el limit=2 para favoritossssss

RIP la reina de Inglaterra

Recuerden quitar el limit=2, en el EndPoint de favourites.

Realmente tuve el mismo error del ‘headers’ y al final me tocó buscarlo… para que luego en el video lo dijera jaja
Dejo el código para quién pueda ayudarle.
.

HTML

<!-- ... -->

<section id="randomCats">
    <h2>Random Cats</h2>
    <span id="error"></span>
    <article>
      <img class="cat-image" alt="Foto de gatito 1" style="width:28rem">
      <button onclick="saveAFavouriteCat()">Save to favorites</button>
    </article>
    <article>
      <img class="cat-image" alt="Foto de gatito 2" style="width:28rem">
      <button onclick="saveAFavouriteCat()">Save to favorites</button>
    </article>
    <article>
      <img class="cat-image" alt="Foto de gatito 3" style="width:28rem">
      <button onclick="saveAFavouriteCat()">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:28rem">
      <button>Remove from favorites</button>
    </article>
  </section>

<!-- ... -->

.
JS

const API_URL = "https://api.thecatapi.com/v1";
const API_KEY = "98c9e40c-8dfb-4e9b-91d0-6c38bdf23707";
const endpoints = {
  API_URL_LIMIT_SEARCH: (limit = 3) =>
    `${API_URL}/images/search?limit=${limit}&api_key=${API_KEY}`,
  API_URL_FAVOURITES: `${API_URL}/favourites?api_key=${API_KEY}`,
};

const spanError = document.getElementById("error");

const pickACat = async (url = endpoints.API_URL_LIMIT_SEARCH(3)) => {
  const response = await fetch(url);

  try {
    const data = await response.json();
    const imgTags = document.querySelectorAll(".cat-image");
    imgTags.forEach((element, key) => (element.src = data[key].url));
  } catch (error) {
    if (response.status !== 200)
      return (spanError.innerText = "An error has occurred," + data.message);
  }
};

const pickAFavouriteCat = async (url = endpoints.API_URL_FAVOURITES) => {
  const response = await fetch(url);
  const data = await response.json();

  console.log(
    "response pick favourites >>>",
    response,
    data ? data : "no data"
  );
};

const saveAFavouriteCat = async (url = endpoints.API_URL_FAVOURITES) => {
  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      image_id: "agrs",
    }),
  });
  const data = await response.json();

  console.log("save", response);

  if (response.status !== 200)
    return (spanError.innerText = "An error has occurred," + data.message);
};

pickACat();
pickAFavouriteCat();

jajaja rayos, xD, esta clase estuvo muy chida B)

Uso de POST + DELETE 🐱🔥

Si tienen problemas al añadir favoritos 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.

Código en GitHub 👈👀

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. 🔥🤗

Al final de todo experimenté dos errores juntos, el 404 y el 405 correspondientes a que no encontraba el enlace para API_URL_FAVOURITES

Despues de revisar me di cuenta que tenia mal el enlace, el siguiente es el correcto (SIN INCLUIR LIMIT=2):

const API_URL_FAVOURITES=“https://api.thecatapi.com/v1/favourites?api_key=live_IsosBZPWVknBjuAzHHN9nUnHgRniy2ZjMAydCAkUmwxKDWIjREXIxsU5Hf3MzU2v”

Una manera de ver los errores mas especifico, es con la ayuda de la consola -> network:

A los que no les carga el mensaje el Error en el span (me incluía), CREO que no se termina ejecutando porque el siguiente llamado tiene await y como nunca termina llegando se queda la función ahi. intente poniendo el IF antes del res.json() y funciono. ojo CREO 👀

Al final agregué una función que genera un ID único para cada usuario y lo guarda en el local Storage, logre hacerlo gracias a la documentación 😄

estaba fallando hasta que averigue que me di cuenta que ‘application/json’ estaba con una sola ‘p’.

suele pasar

Hola, quisiera decir que llevaba horas en internet tratando en entender qué estaba haciendo mal, me hace feliz que solo tuve que ver esta clase y pude hacer lo que necesitaba 😃 No iba a tomar el curso, pero ahora estará en mi lista por supuesto.

Así quedo mi función de guardar

async function saveFavoritesDogs (id){
        // console.log(id);
        var option = { 
            method:'POST', 
            headers: { 'content-type': 'application/json' },
            body: JSON.stringify( {image_id: id})
        }
        const res = await fetch (endpoint.URL_API_FAVOURITES, option)
        console.log(res)
        const data = await res.json();
        console.log(data);
        if (res.status == 200) {
            Swal.fire({
                icon: 'success',
                title: 'Agregado a favoritos',
                text: `El id de su perro favorito es ` + data.id
            })
            dogsFovurites (data.id)    
        }
    }

Después de agregar a favoritos, se recarga la siguiente función donde mostramos los ultimos 4 favoritos.

async function dogsFovurites (subId) {
        let favDogs = d.querySelector('#favDogs');
        const res = await fetch(`${endpoint.URL_API_FAVOURITES}?sub_id=`+subId)
        console.log(res);
        const data = await res.json();
        try {
            let data_nuevo = data.slice(data.length-4);
            let datos_fav = `
            ${data_nuevo.map (dog_fav =>
                ` 
                <div class="col mb-3 me-2 ms-3" style="float: left;">
                    <div class="card " style="width: 18rem;" >
                        <img src="${dog_fav.image.url}" class="card-img-top img_cambia" alt="..." width="300" height="200">
                        <div class="card-body">
                           <button type="button" id="" class="btn btn-primary">${dog_fav.id}</button>
                        </div>
                    </div>
                </div>
                `)}`;
                favDogs.innerHTML = datos_fav.replace(/,/g,"") 
        } catch (error) {
            const errorNode = document.querySelector('#error');
            errorNode.innerText = `Error: ${error.message}`;
        }
    }

Cuando hagamos un fetch y queramos usar una opción que no sea por defecto (GET), tendremos que especificarselo como segundo argumento, para ello utilizaremos un objeto:

const res = await fetch(API_URL_FAVOURITE,{})

quedando algo como esto:

async function saveFavouriteMichis() {
  const res = await fetch(API_URL_FAVOURITE, 
	{
    method: 'POST',
    headers: {},
		body:{}
	})
				

Header

'Content-Type': 'application/json',

Body

Para mandarle la información al servidor:

body {
       image_id: 45
      }

Como no sabemos si en el backen recibirá bien un JSON, usaremos el método JSON.stringify() para poder enviar texto plano, quedandonos el body de la siguiente manera:

una cosita si uds al momento de darle clic a los botones de agregar a Favorito y no les agrega pa´nada, verifiquen que no tengan el End Poin de
limit=2, si no puede acumular una basta cantidad de Michis al momento que lo quiten

Para los que estén empleando la API de Fake Store de Platzi, pueden hacerlo así como un ejemplo:
.
.

.
.
Ahora hay que ver si el producto se recibió correctamente:
.
.

01:20 thecatapiqueen, que en ~paz~ descanse.

• Peticiones HTTP
  Cabeceras (headers) HTTP opcionales, que pueden aportar información adicional a los servidores.
  
  
  Generalidades del protocolo HTTP

que gran clase!

Super esta clase, cada vez me queda más claro como funcionan estas consultas. Juan DC best teacher.

Les dejo un michi para alegrarles el día.

me representa

Muy bueno que hayan dejado el proceso de depuración para ver posibles errores con los que nos podamos encontrar nosotros. No todo sale perfecto cuando se programa.

Yo le agregue esta funciona al codigo para que no se repitieran las imagenes

async function verifyFavoriteDoggos(doggo) {

    const response =  await fetch(API_URL_FAVORITE, {
        headers: {
            "content-type": "application/json",
            "x-api-key": "9c42b774-25a9-4da5-afff-079782d20982",
        },
    })

    const data = await response.json()
    const image = doggo.url || doggo.image.url;
    let band = false

    data.forEach(doggoImage => {
        if (doggoImage.image.url === image) {
            band = true
        }
    })

    if(band) {
        saveFavoriteDog({
            'band':  true
        })
    } else {
        saveFavoriteDog({'id': doggo.id})
    }
}

y la funcion de guardar lo envolvie en esta logica

async function saveFavoriteDog({ id, band = false }) {
    console.log(band)
    if (band === false) {
        const response = await fetch(`${API_URL_FAVORITE}`, {
            method: "POST",
            headers: {
                "content-type": "application/json",
                "x-api-key": "9c42b774-25a9-4da5-afff-079782d20982",
            },
            body: JSON.stringify({
                'image_id': id
            })
        })

        if (response.status !== 200) {
            spanError.innerHTML = "Ha ocurrido un error 😓"
            setTimeout(() => {
                spanError.innerHTML = ""
            }, 2000)

        } else {
            spanError.innerHTML = "Doggo guardado correctamente 💚"
            setTimeout(() => {
                spanError.innerHTML = ""
            }, 2000)
        }

    } if (band) {
        spanError.innerHTML = "El doggo ya se habia guardado 🐶"
        setTimeout(() => {
            spanError.innerHTML = ""
        }, 2000)
    }
}

Si encuentran una forma de refactorizar estaria muy agradezido

muy buena la clase,
me gusto los errores se siente muy real la clase, eso es lo que nos vamos a encontrar muchas veces, errores y errores, y es genial ver que no es algo de que enojarse, es parte de nuestro trabajo y aprendizaje que tengamos errores y corregirlos,

Me sentí identificado

Les comparto este post para reforzar la sintaxis de las solicitudes con POST
justo aqui

Excelente debugging!

Todo funcionando

const API_URL_RANDOM = 'https://api.thecatapi.com/v1/images/search?limit=2&' //url que nos da imagenes randoms

const API_URL_getFavourites = 'https://api.thecatapi.com/v1/favourites' //url de nuestras imagenes favs
 
const API_KEY = '?api_key=f8bba90a-ad5e-480b-834b-bb39c63aaec6' //api key para hacer solicitudes http

const imageRandom = document.getElementById('image1')

const secondImageRandom = document.getElementById('image2')

const refreshButton = document.getElementById('refresh')

const fetch_api = async () => {

    const request = await fetch(`${API_URL_RANDOM}${API_KEY}`) //url de imagenes randoms
    const response = await request.json()
    console.log('random')
    console.log(response)
    const img = document.querySelectorAll('.img')

    //por cada imagen que coincida con el query selector le asignaremos la imagen que nos sale de la API 
    img.forEach((image, index) => {

        image.src = response[index].url
    })
}

const fetch_api_favourites = async () => {

    const error = document.querySelector('#error')
    const request = await fetch(`${API_URL_getFavourites}${API_KEY}`) //concatenamos la ruta
    try {

        const response = await request.json() //convertimos a un json manipulable, objeto
        console.log('favs')
        console.log(response)
        const img = document.querySelector('.favourite')
        img.src = response[0].image.url //estamos diciendole que el src de la img será la imagen que nos trae la API

    } catch(err) {

        error.classList.remove('none')
        error.classList.add('alert', 'alert-danger')
        error.textContent = `Error ${request.status}. ${err.message}`//pasamos el status code y el mensaje
    }
}

const saveFavouritesMichis = async () => {

    const saveFavourites = await fetch(API_URL_getFavourites + API_KEY, {

        method: 'POST', //declaración del metodo http
        headers: {

            'Content-Type': 'application/json' //declaramos el tipo de dato que enviaremos
        },

        //convertimos a json el dato que enviaremos ya que no sabemos si podrá leer javascript puro
        body: JSON.stringify({

            image_id: "a8s" //id de la imagen del cat
        })   
    })

    console.log(saveFavourites) //debugeamos que nos tira la api favourites, que es un arreglo en si

}


window.addEventListener('DOMContentLoaded', () => {

    window.addEventListener('load', fetch_api)
    window.addEventListener('load', fetch_api_favourites)
    refreshButton.addEventListener('click', fetch_api)
    imageRandom.addEventListener('click', saveFavouritesMichis)
    secondImageRandom.addEventListener('click', saveFavouritesMichis)

})

bueana clase

3:42 le informo que el nombre de la constante de michis random tiene un error tipográfico es API_URL_FAVOTITES y seria favourites

A la segunda vez que ví la clase entendí como resolver los errores… se siente bien cambiar de error jajajaja…

Query string: limit 🔥

Tengo una duda respecto al porqué al quitarle el límite a mi const API_URL_FAVORITES me imprime 100 favoritos y al fijar un límite de 2 imprime 2 favoritos. También al cambiar el image_id: "dje" por cma o cualquier otro valor no se guarda como favoritos… Dejo mi código.

const query_string = ["?", "limit=2"].join("");
const API_KEY = [
  "&", //?
  "api_key=",
  "lover_W59yADfRT3YY5Q43cP78HvD8XNGH80daxZBiTzY",
].join("");

const API_URL_RANDOM = `https://api.thecatapi.com/v1/images/search${query_string}${API_KEY}`;
const API_URL_FAVORITES = `https://api.thecatapi.com/v1/favourites${query_string}${API_KEY}`;

async function load_random() {
  const request_failed = document.createElement("span");
  const container = document.querySelector(".container");
  try {
    const response = await fetch(API_URL_RANDOM);

    if (response.status === 200) {
      const data = await response.json();

      console.log("Random");
      console.log(data);
      container.innerHTML = "";
      let n_buttons = 1;

      data.map((img) => {
        const content = document.createElement("figure");
        content.innerHTML = `
        <img src="${img.url}" alt="Kitten pictures">
        <img class="save btn${n_buttons++}" onclick="save_favorites()" src="./heart.svg" alt="Heart icon">
        `;
        container.append(content);
      });
    } else {
      request_failed.innerText = `Request failed. Status code: ${response.status}`;
      container.append(request_failed);
    }
  } catch (e) {
    request_failed.innerText = `An error occurred: ${e.message}`;
    container.append(request_failed);
  }
}

async function load_favorites() {
  const container = document.querySelector(".container");
  const request_failed = document.createElement("span");

  try {
    const response = await fetch(API_URL_FAVORITES);

    if (response.status === 200) {
      const data = await response.json();

      console.log("Favorites");
      console.log(data);
    } else {
      request_failed.innerText = `Request failed. Status code: ${response.status}`;
      container.append(request_failed);
    }
  } catch (e) {
    request_failed.innerText = `An error occurred: ${e.message}`;
    container.append(request_failed);
  }
}

async function save_favorites() {
  const favorite_cat = document.querySelector(".favorite__cat");
  const request_failed = document.createElement("span");

  try {
    const response = await fetch(API_URL_FAVORITES, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        image_id: "dje", //cma.jpg
      }),
    });

    if (response.status === 200) {
      const data = await response.json();
      //console.log('Save');
      console.log('Save ', response);
      console.log(data);
    } else {
      request_failed.innerText = `Request failed. Status code: ${response.status}`;
      favorite_cat.append(request_failed);
    }
  } catch (e) {
    request_failed.innerText = `An error occurred: ${e.message}`;
    favorite_cat.append(request_failed);
  }
}

load_random();
load_favorites();
//save_favorites();

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Random Kittens</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <h1>Random Kittens</h1>
    <main id="random">
      <h2>Kittens List</h2>
      <section class="container">
        <!-- 
        <figure>
          <img id="img1" width="150" alt="Random kittens" />
          <img class="save" src="./heart.svg" alt="Heart icon">
        </figure> -->
      </section>

      <button class="reload" onclick="load_random()">Random</button>
    </main>

    <section class="favorites" id="favorites">
      <h2>Kittens Favorites</h2>
      <div class="favorite__cat">
        <!-- 
        <figure>
          <img id="img1" width="150" alt="Random kittens" />
          <button class="delete">Delete</button>
        </figure> -->
      </div>
    </section>

    <script src="./main.js"></script>
  </body>
</html>

Hice este proyecto con el conocimiento adquirido hasta esta clase, aun esta en desarrollo, de momento solo muestra las imágenes random y se puede guardar en favoritos.
Aca dejo en el link https://draekk.github.io/dog-tynder/ y el repositorio.

Favoritos

Al día de hoy la documentación docs.thecatapi.com no funciona. Una lastima ya que gran parte de este curso se basa en esa api y se me dificulta encontrar un igual.

la verdad esta clase ha generado confusión, la he visto mas de una vez

EXCELENTE CLASE MAGISTRAL PROFESOR

Apliqué lo aprendido en mi proyecto, así va quedando.

Les quiero compartir mi “pequeño error” que me tomo 2 horas en darme cuenta, me preguntaba y preguntaba porque mi código solo dejaba agregar 2 imágenes, yo pensaba que había hecho mal la solicitud y por eso no me agregaba nada más, me sentía frustrado y decidí mejor darme un descanso y cenar algo. Y para mi sorpresa cuando regreso me doy cuenta que mi “error” era esta línea:

const API_URL_FAVORITES = 'https://api.thedogapi.com/v1/favourites?limit=2&api_key=$(API_KEY)';      

En donde le decía a la API que solo me traiga 2 objetos de la lista de favoritos… 😅
Y cuando le quite el límite me tope con que había agregado mas de 45 objetos 🙀 jajaja

solo vengo a comentar que lastimosamente la reina isabel ya no podrá consultar sus michis favoritos

No he visto la clase y ya me estoy riendo de los comentarios

Hola! Si tienen un problema con la API y el error es 401, recomiendo mandar la API key por los headers.

let page = 1

const API_URL = ‘https://api.thecatapi.com/v1/images/search?limit=3’

const API_URL_FAVOTITES = ‘https://api.thecatapi.com/v1/favourites’;

const FAVORITE = “https://api.thecatapi.com/v1/favourites”

const spanError = document.getElementById(“error”)

async function reload() {

const res = await fetch(API_URL)
const data = await res.json()


if(res.status !== 200) {
    spanError.innerHTML = "Hubo un error " + res.status
}


console.log(data)    
const img = document.getElementById("gatosAleatorios")
const img2 = document.getElementById("gatosAleatorios1")
const img3 = document.getElementById("gatosAleatorios2")


img.src = data[0].url
img2.src = data[1].url
img3.src = data[2].url

page = page + 1

}

async function loadFavoriteMichis() {
let res = await fetch(API_URL_FAVOTITES, {
headers: {
‘Content-Type’: ‘application/json’,
‘x-api-key’: ‘live_WkVpnsibKmaXplhj8nhpCvosA2a7UuAQ3HV6Z39O2rZcWrIMEXsMqZGnzXX3vNeX’
}
})
let data = await res.json()
console.log(data)
}

//ERROR DE LA ULTIMA CLASE, POR AHORA PARECE QUE EL ERROR SE ENCUENTRA EN NO TENER BIEN LA URL.
async function saveFavoriteCat() {

    const res = await fetch(API_URL_FAVOTITES, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json', 
            'x-api-key': 'live_WkVpnsibKmaXplhj8nhpCvosA2a7UuAQ3HV6Z39O2rZcWrIMEXsMqZGnzXX3vNeX'
        },
        body: JSON.stringify({
            image_id: '199',
        })
    })

    loadFavoriteMichis()

    if(res.status !== 200) {
        spanError.innerHTML = "Hubo un error " + res.status
    }



console.log('favorite cats')


console.log(res)

}

reload()