Exibindo Dados Fictícios em Aplicações Front-End
Quando estamos desenvolvendo uma aplicação, especialmente nas fases iniciais, muitas vezes precisamos de dados fictícios para testar funcionalidades como filtros e paginação. Uma maneira eficiente de gerar esses dados é utilizando bibliotecas como Faker.js e Day.js. Neste artigo, vamos explorar como utilizar essas ferramentas para criar e exibir dados fictícios em uma tabela de participantes.
Instalando as Bibliotecas
Para começar, precisamos instalar as bibliotecas necessárias. Você pode fazer isso executando os seguintes comandos no terminal:
npm install @faker-js/faker dayjs
Gerando Dados Fictícios com Faker.js
O Faker.js é uma biblioteca poderosa que nos permite gerar dados aleatórios de maneira simples. Vamos criar um arquivo
data.js e gerar uma lista de 200 participantes com informações como ID, nome, email, data de inscrição e data de check-in.import { faker } from '@faker-js/faker'; export const attendees = Array.from({ length: 200 }).map(() => { return { id: faker.number.int({ min: 10000, max: 20000 }), name: faker.person.fullName(), email: faker.internet.email(), createdAt: faker.date.recent({ days: 30 }), checkedInAt: faker.date.recent({ days: 7 }), } });
Formatando Datas com Day.js
Para exibir datas de forma legível e relativa (como "ontem", "há uma semana"), vamos utilizar a biblioteca Day.js com o plugin
relativeTime. Além disso, configuramos o locale para português para garantir que as datas sejam exibidas no formato desejado.import dayjs from 'dayjs'; import relativeTime from 'dayjs/plugin/relativeTime'; import 'dayjs/locale/pt-br'; dayjs.extend(relativeTime); dayjs.locale('pt-br');
Exibindo Dados na Tabela
Agora, vamos integrar esses dados em uma tabela de uma aplicação front-end. Abaixo, temos um exemplo de como fazer isso utilizando React:
import attendees from './data'; const AttendeesTable = () => { return ( <table> <thead> <tr> <th>ID</th> <th>Nome</th> <th>Email</th> <th>Data de Inscrição</th> <th>Data de Check-in</th> </tr> </thead> <tbody> {attendees.map((attendee) => { return ( <tr key={attendee.id}> <td>{attendee.id}</td> <td>{attendee.name}</td> <td>{attendee.email}</td> <td>{dayjs().to(attendee.createdAt)}</td> <td>{dayjs().to(attendee.checkedInAt)}</td> </tr> )})} </tbody> </table> ); }; export default AttendeesTable;
Usar bibliotecas como Faker.js e Day.js pode acelerar o desenvolvimento, permitindo que você foque nas funcionalidades principais da aplicação sem se preocupar com a geração de dados de teste. Além disso, essas ferramentas são altamente configuráveis e podem ser ajustadas conforme suas necessidades específicas.
Dicas:
- Tratamento de Erros: Sempre valide os dados gerados e trate possíveis erros ao exibi-los.
- Documentação: Consulte a documentação oficial do Faker.js e do Day.js para explorar todas as funcionalidades disponíveis.
- Melhorias Futuras: Considere adicionar mais campos e validações conforme a complexidade do seu projeto aumentar.
Espero que este artigo tenha sido útil para você entender como gerar e exibir dados fictícios em sua aplicação. Qualquer dúvida ou sugestão, fique à vontade para compartilhar nos comentários!
