Solicitudes GET

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

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

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

Tuve un Deja Vu

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

Hola copmas,la nueva URL es:
https://api.escuelajs.co/api/v1/products/

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

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

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 😄

Las solicitudes get son para hacer una llamada a la API y sirven para obtener información desde el servidor que puede ser un dato simple, un objeto, el detalle del objeto o una lista de objetos.

A pocos días de no poder ver las imágenes (?)

He encontrado esta api que sirve para realizar este curso, aunque hay que hacer ciertas modificaciones:
Creamos un modelo más Products.model.ts:

import { Product } from "./product.model";

export interface Products{
  products:Product[];
}

En products.service.ts:

// importamos el nuevo servicio
import { Products } from '../models/products.model';
// resto del codigo ... 
getAllProducts() {
	//Aqui no esperamos ya un array de Productos porque el array está dentro del modelo de Products
    return this.http.get<Products>('https://dummyjson.com/products');
  }

Y en products.component.ts:

ngOnInit(): void {
    this.productsService.getAllProducts()
    .subscribe(data => {
      this.products = data.products;
    });
  }

Espero que les sirva.

Tuve una semana emocionalmente pesada compañeros, no logré sentarme a practicar la clase y seguir con mi formación.

Tengo aprobados múltiples cursos de habilidades blandas, tengo mis cuadernillos de actividades y un bullet journal.

Hay días en los que ni uno mismo cree en si. Los abrazo a todos los que han pasado por este síndrome del impostor crónico.

Ahora les comparto cómo va quedando mi proyecto.

Uso la app Responsively para ver múltiples vistas responsivas.

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

Existe una herramienta muy util para generar la clase de Typescript con el JSON de la Respuesta de la API 👇👇👇👇👇👇

Quicktype es una herramienta que te permite convertir un JSON en una clase en varios lenguajes de programación, incluyendo TypeScript. Esto es especialmente útil cuando trabajas con API que devuelven datos en formato JSON y quieres tener una forma fácil de acceder a esos datos en tu aplicación.

Para utilizar Quicktype, debes ingresar la URL de la API que deseas analizar o pegar directamente el JSON en la herramienta. Luego, seleccionas el lenguaje de programación en el que deseas generar la clase y Quicktype generará automáticamente el código correspondiente.

La herramienta también te permite personalizar la clase generada, como cambiar los nombres de las propiedades o excluir algunas de ellas. Además, Quicktype tiene una interfaz gráfica muy amigable, que te permite explorar los datos de tu JSON y ver cómo se transforman en código

porque el modelamiento de las apis es importante

1. Hacer un Tipado Fuerte con los datos esperados
2. nos ayuda en el mapeo y en saber a que referencia hace parte
3. para pruebas facilita la vida.

A día de hoy, Julio 2023, la plataforma de imágenes no está funcionando.

Otra API que pueden usar

Me funcionó con este endpoint:
https://api.escuelajs.co/api/v1/products

Y deben cambiar en el modelo “image” por “images”.

Para cuando vayan a hacer install de las dependencias del proyecto, saldran muchas advertencias relacionadas a las actualizaciones.

“dependencies”: {
"@angular/animations": “~14.2.10”,
"@angular/common": “~14.2.10”,
"@angular/compiler": “~14.2.10”,
"@angular/core": “~14.2.10”,
"@angular/forms": “~14.2.10”,
"@angular/platform-browser": “~14.2.10”,
"@angular/platform-browser-dynamic": “~14.2.10”,
"@angular/router": “~14.2.10”,
“date-fns”: “^2.29.3”,
“rxjs”: “~7.6.0”,
“tslib”: “^2.4.1”,
“zone.js”: “~0.12.0”
},
“devDependencies”: {
"@angular-devkit/build-angular": “~14.2.10”,
"@angular-eslint/builder": “14.2.0”,
"@angular-eslint/eslint-plugin": “14.2.0”,
"@angular-eslint/eslint-plugin-template": “14.2.0”,
"@angular-eslint/schematics": “14.2.0”,
"@angular-eslint/template-parser": “14.2.0”,
"@angular/cli": “~14.2.10”,
"@angular/compiler-cli": “~14.2.10”,
"@types/jasmine": “~3.8.0”,
"@types/node": “^12.11.1”,
"@typescript-eslint/eslint-plugin": “4.28.2”,
"@typescript-eslint/parser": “4.28.2”,
“eslint”: “^7.32.0”,
“jasmine-core”: “~4.5.0”,
“karma”: “~6.3.0”,
“karma-chrome-launcher”: “~3.1.0”,
“karma-coverage”: “~2.0.3”,
“karma-jasmine”: “~5.1.0”,
“karma-jasmine-html-reporter”: “~2.0.0”,
“typescript”: “~4.8.4”
}

Eso lo pueden pegar en el package.json (Reemplazando la variable de dependencies y devDependecies) y hacen la instalacion de nuevo. Son versiones mas actualizadas de las dependencias.

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

La API no funciona

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

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

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/cli@13 update @angular/core@13 @angular/cli@13
/* En caso de que haya un error con las migraciones usen --force pero de preferencia no usarlo */

La forma de explicar del profe es muy buena, me gustaría que nos hiciera un curdo de Rxjs.

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

casi no puedo iniciar el proyecto por la versión pero lo logre 😁

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

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

Culminado, buen curso!

Actualmente las imágenes de la API no funciona pero lo puedes reemplazar por la Platzi Fake Store API

Para que puedas tipas las respuestas de la API de una forma fácil QuickType. Especificas que el lenguaje sea TypeScript y las características que deseas para el tipado

Escogí esta ruta para aplicar las plantillas y lecciones vistas en
Curso para Aprender en Línea Efectivamente
De verdad que invertir en

1. Organización
2. Lectura Exploratoria
3. Borrador
   Se nota al sentir antes de comenzar las clases aplicadas que tienes control de la calidad de tu aprendizaje. Les recomiendo con creces y una medalla que inviertan en sus métodos de estudio y técnicas de aprendizaje.
   .
   Tengo propuesto terminar la ruta de Frontend Angular para el siguiente mes y puedo visualizarlo sin abrumarme gracias al esfuerzo constante diario

https://app.quicktype.io/
El Profe nos había regalado esta página cursos antes para hacer los modelos.

htpp

Les dejo una api de una serie animada https://rickandmortyapi.com/

http…

Dejo esta API de pokemon que conoci cuando hice una prueba tecnica https://pokeapi.co/

En el video falta importar la libreria Observable de rxjs
import { Observable } from ‘rxjs’; para podernos subscribe and unsubscribe

hoy 2 de junio la api funciona, pero no me gusta que devuelva fotos tan random y los titulos no tienen nada que ver con las imagenes. prefiero la api de fakestore

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.

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

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

La API está caída, no funciona.