Hone logo
Hone
Problems

Angular Resource API Client

This challenge asks you to build an Angular service that acts as a client for a REST API that manages resources. You'll be responsible for creating a service that can fetch, create, update, and delete resources, demonstrating your understanding of Angular's HttpClient and service creation. This is a common pattern in Angular applications for interacting with backend systems.

Problem Description

You need to create an Angular service named ResourceService that interacts with a REST API endpoint to manage "products." The API endpoint is assumed to be https://fakestoreapi.com/products. This API allows you to:

  • Fetch all products: GET https://fakestoreapi.com/products - Returns a list of product objects.
  • Fetch a single product by ID: GET https://fakestoreapi.com/products/{id} - Returns a single product object based on the provided ID.
  • Create a new product: POST https://fakestoreapi.com/products - Creates a new product. The service should accept a product object as input.
  • Update an existing product: PUT https://fakestoreapi.com/products/{id} - Updates an existing product. The service should accept a product object as input and the product ID.
  • Delete a product: DELETE https://fakestoreapi.com/products/{id} - Deletes a product based on the provided ID.

The ResourceService should provide methods for each of these operations. Error handling should be included to gracefully manage API failures (e.g., network errors, server errors, invalid data). The service should return Observables to handle asynchronous operations.

Key Requirements:

  • The service must use Angular's HttpClient to make API requests.
  • The service must handle asynchronous operations using Observables.
  • The service must include error handling for API requests.
  • The service must provide methods for fetching all products, fetching a single product by ID, creating a new product, updating an existing product, and deleting a product.
  • The service should be injectable into other Angular components.

Expected Behavior:

  • getAllProducts() should return an Observable of an array of product objects.
  • getProductById(id: number) should return an Observable of a single product object.
  • createProduct(product: any) should return an Observable that resolves when the product is successfully created.
  • updateProduct(id: number, product: any) should return an Observable that resolves when the product is successfully updated.
  • deleteProduct(id: number) should return an Observable that resolves when the product is successfully deleted.
  • Error handling should log errors to the console and potentially return an error Observable.

Edge Cases to Consider:

  • Network errors (e.g., no internet connection).
  • Server errors (e.g., 500 Internal Server Error).
  • Invalid product data (e.g., missing required fields).
  • Product not found (e.g., attempting to fetch or delete a product with an ID that doesn't exist).

Examples

Example 1:

Input: Calling getAllProducts()
Output: Observable<Product[]> - An Observable emitting an array of product objects from the API.
Explanation: The service makes a GET request to the API endpoint and returns the response as an Observable.

Example 2:

Input: Calling getProductById(5)
Output: Observable<Product> - An Observable emitting a single product object with ID 5 from the API.
Explanation: The service makes a GET request to the API endpoint with the specified ID and returns the response as an Observable.

Example 3:

Input: Calling createProduct({ title: "New Product", price: 19.99, description: "A brand new product" })
Output: Observable<Product> - An Observable emitting the newly created product object from the API.
Explanation: The service makes a POST request to the API endpoint with the provided product data and returns the response as an Observable.

Constraints

  • The API endpoint is fixed: https://fakestoreapi.com/products.
  • The service must be written in TypeScript.
  • The service must use Angular's HttpClient module.
  • Error handling should be implemented, but detailed error reporting (e.g., custom error messages) is not required for this challenge. Console logging is sufficient.
  • Assume the API returns standard JSON responses.
  • The product object is assumed to have properties: id, title, price, description, and image.

Notes

  • Consider using the pipe() operator with catchError() to handle errors in your Observables.
  • You can use the map() operator to transform the API response data into the desired format.
  • Remember to inject HttpClient into your service constructor.
  • This challenge focuses on the core functionality of the service. UI components and routing are not required.
  • The fakestoreapi.com is a public API and may have rate limits. Keep your requests reasonable.
Loading editor...
typescript