Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Desafio: Recuperar e Exibir Dados | Busca e Exibição de Dados no Next.js
Domínio do Next.js 14 para Construção de Aplicações Web Modernas

bookDesafio: Recuperar e Exibir Dados

Vamos focar no próximo componente, LatestInvoices. Seu objetivo é exibir as cinco últimas faturas, ordenadas cronologicamente por data.

Pode parecer que realizar isso com JavaScript é simples. No entanto, à medida que o aplicativo cresce e mais dados aparecem, é preferível lidar com a ordenação e a limitação das faturas utilizando SQL. Essa abordagem evita sobrecarregar o frontend com cálculos desnecessários.

Para inspecionar a função fetchLatestInvoices, acesse app/lib/data.ts.

De volta ao projeto

Utilizaremos a função fetchLatestInvoices na página do dashboard para recuperar as faturas mais recentes e exibi-las usando o componente LatestInvoices.

Não se esqueça de acessar app/ui/dashboard/latest-invoices.tsx e descomentar a interface fornecida.

Desafio

Agora, é sua vez de buscar os dados e apresentar as informações ao usuário.

Principalmente, temos um componente Card na página do painel. Sua tarefa é importar a função fetchCardData, que fornece:

  • numberOfSellers;
  • numberOfInvoices;
  • totalFulfilledInvoices;
  • totalAwaitingInvoices.

Com base nos dados recuperados, descomente o componente Card correspondente.

Resultado

Na Prática

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 3

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Awesome!

Completion rate improved to 2.08

bookDesafio: Recuperar e Exibir Dados

Deslize para mostrar o menu

Vamos focar no próximo componente, LatestInvoices. Seu objetivo é exibir as cinco últimas faturas, ordenadas cronologicamente por data.

Pode parecer que realizar isso com JavaScript é simples. No entanto, à medida que o aplicativo cresce e mais dados aparecem, é preferível lidar com a ordenação e a limitação das faturas utilizando SQL. Essa abordagem evita sobrecarregar o frontend com cálculos desnecessários.

Para inspecionar a função fetchLatestInvoices, acesse app/lib/data.ts.

De volta ao projeto

Utilizaremos a função fetchLatestInvoices na página do dashboard para recuperar as faturas mais recentes e exibi-las usando o componente LatestInvoices.

Não se esqueça de acessar app/ui/dashboard/latest-invoices.tsx e descomentar a interface fornecida.

Desafio

Agora, é sua vez de buscar os dados e apresentar as informações ao usuário.

Principalmente, temos um componente Card na página do painel. Sua tarefa é importar a função fetchCardData, que fornece:

  • numberOfSellers;
  • numberOfInvoices;
  • totalFulfilledInvoices;
  • totalAwaitingInvoices.

Com base nos dados recuperados, descomente o componente Card correspondente.

Resultado

Na Prática

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 3
some-alt