Page Generation

👉 Slides

In dieser Aufgabe geht es darum Produktdetailseiten aus einer REST API für Produkte generieren zu lassen.

Als Datenquelle für die Generierung der Pages nutzen wir folgende URL:

https://dummyjson.com/products?limit=10

Du kannst die URL direkt im Browser aufrufen, wenn Du dir die Struktur anschauen möchtest.

URL Struktur

Die URL Produktdetailseiten sollen nach folgender Stuktur aurufbar sein:

/products/[id]

Die id soll dem id Attribute aus der REST API entsprechen.

TypeScript

Um Dir die Arbeit mit den Products-Daten & TypeScript zu erleichtern, kannst du folgende TypeScript Interfaces in deinem Code verwenden:

// ProductsResponse entspricht dem Response Body
// von https://dummyjson.com/products?limit=10
export interface ProductsResponse {
    products: Product[];
}

export interface Product {
  id: number
  title: string
  description: string
  price: number
  discountPercentage: number
  rating: number
  stock: number
  brand: string
  category: string
  thumbnail: string
  images: string[]
}

Aufgaben

1. Erstelle eine neue Page mit dem beschrieben Parameter.
2. Schreibe den notwendingen Code um die Produktseiten generieren zu lassen. Nutze dabei die fetch() Browser API.
3. Gebe auf der Page den title, die description und die category des Produktes aus.
4. Versuche ein Produkt über die direkte Eingabe der URL zu öffnen.
5. Führe einen Build für dein Projekt aus (npm run build) und schaue Dir die generieren Datein in dem dist/ Ordner an.
6. Wenn Du noch zeit haben solltest: Zeige alle vorhadenen images für das Produkt an und versuche die category nach folgendem URL Schema einzubinden: /categories/[category]/product/[id]