Solicitudes GET

Hola! esta será la Fake API de este curso https://young-sands-07814.herokuapp.com/docs 😎

Para aquellos que les cuenta utilizar postman u otro client, VS code tiene una extensión se llama Thunder Client muy interactiva para este tipo de peticiones y integrada en nuestro editor de codigo

Tuve un Deja Vu

A manera de recomendación y aporte, hubiera sido bueno iniciar otro proyecto desde cero totalmente diferente 😃
Gracias

Este es el enlace de la API!
https://young-sands-07814.herokuapp.com/api/products

No se olviden de instalar todas las dependencias al clonar el proyecto para que no ocurra errores, lo pueden hacer con el siguiente comando:

npm i

La API esta teniendo problemas en este momento, Sabado 27 de noviembre a las 6:47, Hora Paraguay

Soy el unico que esta teniendo problemas? xd

hi a día de hoy la API está funcionando, solo hay que entender cómo funciona la interfaz de usuario que nos brinda el Swagger.
Vamos a hacer una petición get al servicio que nos están brindando:

1. Tenemos que saber cuál será nuestra url base para hacer peticiones al servicio, en esta ocasión tomaremos como la url base la siguiente "https://young-sands-07814.herokuapp.com/api/"
   El servicio en Angular lo tendríamos de la siguiente manera

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Product } from './../models/product.model';

@Injectable({
  providedIn: 'root'
})
export class ProductsService {
//URL del API
  private URL_BASE = 'https://young-sands-07814.herokuapp.com/api/'

  constructor(
    private http: HttpClient
  ) { }

  getAllProducts() {
    return this.http.get<Product[]>('https://fakestoreapi.com/products');
  }
} 

1. debemos ir a mira al swagger cuál es el endpoint que vamos a consumir, en este caso vamos a consumir el de traer todos los productos, entonces la url a la cual haremos la petición sería: ‘https://young-sands-07814.herokuapp.com/api/products’, entonces nuestro servicio crearemos un método nuevo donde traemos los productos

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Product } from './../models/product.model';

@Injectable({
  providedIn: 'root'
})
export class ProductsService {
  private URL_BASE = 'https://young-sands-07814.herokuapp.com/api/'

  constructor(
    private http: HttpClient
  ) { }

  getAllProducts() {
    return this.http.get<Product[]>('https://fakestoreapi.com/products');
  }

  //Método que hace la petición a los productos
  getProductsFakeApi() {
    return this.http.get(`${this.URL_BASE}products`);
  }
} 

y ya, lo último sería consumir el servicio donde lo necesitemos,
si tienes alguna duda, comenta, estaré atento 😄

Si despues de hacer el get no carga es posible que la URL esté incorrecta, con esta llegan directo:
https://young-sands-07814.herokuapp.com/api/products

Al final use la API que utilizaron en React y me funciono:

https://api.escuelajs.co/api/v1/products

Otra API que pueden usar

Asi se puede obtener el simbolo $ y un formato que me parece mas agradable
$300.00

currency:'COP':'symbol-narrow':'1.2-2'

Si tienen problemas para compilar el código una vez que lo descargan, prueben pararse en la carpeta del projecto cd src y luego en terminal npm install, luego ya compilara con ng serve -o

Si funciona la API, prueben asi https://young-sands-07814.herokuapp.com/api/products

Puede ser una tontería pero me sacó un buen rato darme cuenta de mi error:
La API ‘no funcionaba adecuadamente’, al cargar mi página salía solamente los botones de “Add to cart” apilados en una columna, el problema lo vi al intentar poner otra API y es que olvide pasar image de singular a plural (‘images’) en el modelo, y, por ende, en el componente y la vista.

Fue solamente cambiar ese detalle y todo funcionó adecuadamente.

Error de versiones en Angular (de 12 a 13)

En el caso de que a la hora de hacer ng serve o usen npm run start les dé error por tener una versión arriba de 12 en Angular deben actualizar su versión del proyecto en angular para que coincida con la global de su equipo.
Utilicen el siguiente comando:

npx @angular/[email protected]13 update @angular/[email protected]13 @angular/[email protected]13
/* En caso de que haya un error con las migraciones usen --force pero de preferencia no usarlo */

Para el tipado creé una interfaz a partir de la respuesta de solicitud http get. Para ello usé https://app.quicktype.io/

Hoy Enero-22-2022 la API esta funcionando bien.

Un bucle en el vídeo, no es aporte, solo quería comentarlo.

La API no funciona

La api se encuentra caida a día de hoy 31 diciembre 2021 hora 11 am

La API está caída, no funciona.