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!

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!

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!

Exibindo Dados Fictícios em Aplicações Front-End

Instalando as Bibliotecas

Gerando Dados Fictícios com Faker.js

Formatando Datas com Day.js

Exibindo Dados na Tabela

Instalando as Bibliotecas

Gerando Dados Fictícios com Faker.js

Formatando Datas com Day.js

Exibindo Dados na Tabela

Instalando as Bibliotecas

Gerando Dados Fictícios com Faker.js

Formatando Datas com Day.js

Exibindo Dados na Tabela

Explore conteúdos relacionados