Obteniendo datos de una API

en pasos:

En el servicio:
1- crear el servicio desde la terminal
2- importar el modulo HttpCliente en el servcio e inyectar e servicio en el constructor.
3 en el servicio se crea el metodo para hace la petición de la API:
return this.http.get<Product[]>(‘https://fakestoreapi.com/products’);

En el componente:
1- importar el servicio
2- inyectar el servicio en el constructor: private productsService: ProductsService
3- crear el metodo en el ngOnInit
this.productsService.getAllProducts()
.subscribe(data => {
this.products = data;

Por ultimo ya estaba creado un array tipado y se debe ajustar los campos con los campos de la API.

Chicos, hay una extension llamada JSON Viewer que les va a permitir ver los datos de un API de manera organizada, de lo contrario cuando abran la url no van a entender nada

Para la parte de tipado otra forma sería tomar la respuesta que nos da la API y crear una interfaz a partir de esta data. Para crear la interfaz uso https://app.quicktype.io/.

Una locura la manera en la que angula de manera indirecta le enseña a los desarrolladores algo de arquitectura.
crazy 👽

Excelente explicación, y muy buen curso, explicas muy bien Nicolas!
Deberías actualizar tu curso de Angular 8 en ese me perdí un poco 😦

Acaso hay algo mas hermoso que nico explicando extraordinariamente las cosas?
❤️ _ ❤️

Maravillosa clase. Todo claro y bien explicado.

El manejo de las peticiones a API suele ser algo complejo y en Angular se ve muy fácil de manejar.

El mejor momento para ejecutar código asíncrono es en:

ngOnInit() 

Les recomiendo guardar la url de la API en una variable:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Product } from '../models/product.model';

@Injectable({
  providedIn: 'root'
})
export class ProductsService {

  apiUrl: string = 'https://fakestoreapi.com/products';

  constructor(
    private http: HttpClient
  ) { }

  getAllProducts() {
    return this.http.get<Product[]>(this.apiUrl);
  }
}

cool, me ha encatado esto!

un Observable es un patrón de diseño que donde hay un sujeto que se suscribe a unos observadores.
Observable: flujo de datos, o coleccion de eventos, coleccion de elementos asincronas
Observers: funciones que estan escuchando ese flujo de datos (calback). Tambien es un Patron e igual Patron Iterador(Funcion map en programacion funcional https://www.educative.io/edpresso/how-observer-and-iterator-patterns-work-in-rxjs)
**Sujeto: ** sirve para distribuir varios Observers a la vez
Subscripcion: representa la ejecucucion de un Observable

Ventajas de un Observable Vs Promesa
promesa: 1 sola respuesta y NO es cancelable
Observable: flujo de respuestas, SI es cancelable

Otra manera de manejar una subscripción es la siguiente:

this._productsService.getAllProducts()
      .subscribe({
        next:(products) => {
          this.products = products;
        },
        error: (error) => {
          console.error(error);
        },
        complete: () => {

        }
      });

Que genialidad la forma en la que uso la interfaz para estandarizar la data

Que buena clase, nico explica muy bien, igual a repasar y practicar

Excelente explicación 😃.

Excelente clase, no entendia muy bien el modulo de http

Excelente clase ⭐

Al finalizar esta leccion el video se salta 4 lecciones, deberias seguir en la leccion 15-

En caso tal de que su interface de productos no concuerde con la API y quieran seguir usándola sin necesidad de cambiarla, pueden usar los pipes de los Observables para hacer una transformación y retornar un nuevo Observable con el tipado que se necesita.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map, Observable } from 'rxjs';
import { Product } from 'src/model/product.model';

@Injectable({
  providedIn: 'root'
})
export class ProductListService {

  constructor(
    private http: HttpClient
  ) { }

  getAllProducts(): Observable<Product[]> {
    return this.http.get<Record<string, any>[]>("https://fakestoreapi.com/products")
      .pipe(
        map((dataList: Record<string, any>[]) => {
          const products: Product[] = dataList.map( data => ({
            id: data["id"],
            imageUrl: data["image"],
            name: data["title"],
            price: data["price"],
            provider: data["category"]
          }));
          return products;
        })
      );
  }
}

Toda la vida soñando apreder a usar APIs y no pensé que hoy sería el día!

Con el pluggin thunder Client de vs code podemos hacer consultas a api’s como en postman 😄

Bueno, aquí sí que Angular hizo las cosas más complicadas de lo normal 😅

En el caso de que quieran tipar el método que retorna el observable, lo pueden hacer de la siguiente forma.

  getProducts() : Observable<Product[]> {
    return this.httpClient.get<Product[]>("https://fakestoreapi.com/products")
  }

Ese curso sera un joya y nos abrirá las puertas para realizar proyectos en donde tengamos que interactuar con APIs.
Adicional a eso quiero compartir esta herramienta llamada quicktype, para generar tipos de datos a partir de un JSON de una manera rápida y sencilla.

Obteniendo datos de una API

Para obtener datos de una API en Angular, se pueden utilizar las funciones y métodos proporcionados por la librería HttpClient de Angular.

<aside>
<img src=“https://static.platzi.com/media/achievements/badge-angular-componentes-servicios-75f68ec3-48e0-430e-b7e2-889fad0d1984.png” alt=“https://static.platzi.com/media/achievements/badge-angular-componentes-servicios-75f68ec3-48e0-430e-b7e2-889fad0d1984.png” width=“40px” /> HttpClient es un módulo que proporciona una forma sencilla de hacer solicitudes HTTP en una aplicación Angular y recibir los resultados.

</aside>

Para utilizar HttpClient, se debe importar el módulo en el componente que lo utilizará. Para ello, se debe incluir la siguiente línea en el archivo que contiene el componente:

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

A continuación, se debe crear una instancia de HttpClient en el constructor del componente:

constructor(private http: HttpClient) { }

Una vez que se ha creado una instancia de HttpClient, se pueden utilizar sus métodos para realizar solicitudes HTTP. El método más comúnmente utilizado es get(), que se utiliza para obtener datos de una API.

Para utilizar el método get(), se debe proporcionar una URL que apunte a la API de la que se desean obtener datos. Por ejemplo, si se desea obtener los datos de un usuario de GitHub, se podría utilizar la siguiente URL:

this.http.get('https://api.github.com/users/{nombre-de-usuario}').subscribe(data => {
  console.log(data);
});

El método get() devuelve un objeto Observable, que se puede suscribir para recibir los datos. En este ejemplo, los datos se imprimen en la consola del navegador utilizando el método console.log().

Es importante destacar que para utilizar HttpClient, es necesario importar el módulo HttpClientModule en el módulo principal de la aplicación. Para ello, se debe incluir la siguiente línea en el archivo que contiene el módulo:

import { HttpClientModule } from '@angular/common/http';

y agregar el HttpClientModule al arreglo de imports del NgModule.

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

un compañero comento sobre una extensión para ver todo mejor los JSON aca esta https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh/related?hl=es

es una extension para google, no se si este para otros navegadores

Nicolas es el mejor profesor de habla hispana de angualr.

En el metodo ngOnInit del products.component.ts tuve que tipar data porque sino me tiraba error. Me quedo asi:

this.productsService.getAllProducts()
.subscribe((data:Product[]) => { this.products = data;});