Hola! esta será la Fake API de este curso https://young-sands-07814.herokuapp.com/docs 😎
Http Basic
Lo que aprenderás para consumir APIs con Angular
Solicitudes GET
Detalle de producto
Implementando slides
Solicitudes POST
Solicitudes PUT y PATCH
Solicitudes DELETE
Url Parameters / Paginación
Observable vs. Promise
Reintentar una petición
Buenas prácticas
El problema de CORS
Manejo de ambientes
Manejo de errores
Transformar peticiones
Evitando el callback hell
Auth
Login y manejo de Auth
Manejo de headers
Uso de interceptores
Enviar Token con un interceptor
Creando un contexto a interceptor
Archivos
Descarga de archivos con Http
Subida de archivos con Http
Despedida
Continúa con el Curso de Angular Router y Programación Modular
Aportes 22
Preguntas 5
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:
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');
}
}
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.
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.