Utfordring: Hente og Vise Data
La oss fokusere på neste komponent, LatestInvoices. Hensikten er å vise de fem siste fakturaene, sortert kronologisk etter dato.
Du tenker kanskje at dette er enkelt å oppnå med JavaScript. Men etter hvert som appen vokser og mer data legges til, er det bedre å håndtere sortering og begrensning av fakturaer med SQL. Denne tilnærmingen forhindrer at frontend blir overbelastet med unødvendige beregninger.
For å undersøke funksjonen fetchLatestInvoices, gå til app/lib/data.ts.
Tilbake til prosjektet
Vi skal bruke funksjonen fetchLatestInvoices på dashbordsiden for å hente de nyeste fakturaene og vise dem med komponenten LatestInvoices.
Husk å gå til app/ui/dashboard/latest-invoices.tsx og fjern kommentarene fra den gitte UI-en.
Utfordring
Nå er det din tur til å hente dataene og vise informasjonen til brukeren.
På dashbordsiden har vi hovedsakelig en Card-komponent. Din oppgave er å importere funksjonen fetchCardData, som gir:
numberOfSellers;numberOfInvoices;totalFulfilledInvoices;totalAwaitingInvoices.
Basert på de hentede dataene, fjern kommentaren på den tilhørende Card-komponenten.
Resultat
I praksis
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Awesome!
Completion rate improved to 2.08Utfordring: Hente og Vise Data
Sveip for å vise menyen
La oss fokusere på neste komponent, LatestInvoices. Hensikten er å vise de fem siste fakturaene, sortert kronologisk etter dato.
Du tenker kanskje at dette er enkelt å oppnå med JavaScript. Men etter hvert som appen vokser og mer data legges til, er det bedre å håndtere sortering og begrensning av fakturaer med SQL. Denne tilnærmingen forhindrer at frontend blir overbelastet med unødvendige beregninger.
For å undersøke funksjonen fetchLatestInvoices, gå til app/lib/data.ts.
Tilbake til prosjektet
Vi skal bruke funksjonen fetchLatestInvoices på dashbordsiden for å hente de nyeste fakturaene og vise dem med komponenten LatestInvoices.
Husk å gå til app/ui/dashboard/latest-invoices.tsx og fjern kommentarene fra den gitte UI-en.
Utfordring
Nå er det din tur til å hente dataene og vise informasjonen til brukeren.
På dashbordsiden har vi hovedsakelig en Card-komponent. Din oppgave er å importere funksjonen fetchCardData, som gir:
numberOfSellers;numberOfInvoices;totalFulfilledInvoices;totalAwaitingInvoices.
Basert på de hentede dataene, fjern kommentaren på den tilhørende Card-komponenten.
Resultat
I praksis
Takk for tilbakemeldingene dine!
