Mockando dados com Faker.js

Comumente chega um momento em que precisamos criar nossas telas – seja para um site ou sistema web. Em alguns desses momentos, nossa API (back-end) ainda não estará pronta, e dessa forma, o desenvolvimento das telas (front-end) poderá se atrasar.

Para que isso não ocorra, podemos criar dados não reais (fake data). Assim, conseguimos dar andamento nas telas sem precisar da API ou a API consegue retornar esses dados mockados para que o desenvolvimento das telas seja iniciado.

Porém, ficar mockando os dados não é uma tarefa muita legal – exige um certo tempo e criatividade. Pensando nisso, foi criado a lib Faker.js. Com ela, todo o trabalho de mock e criatividade para pensar nas informações ficam abstraídas. Dessa maneira conseguimos focar apenas no desenvolvimento das telas.

Começando a usá-la

Podemos começar a usar a Faker.js de N maneiras. Seja via npm:

npm i faker

Ou com o yarn:

yarn add faker

Além da instalação via gerenciadores de pacote (package managers), também é possível baixar o arquivo minificado (.min.js) da biblioteca.

Dessa forma, podemos baixá-lo e salvá-lo dentro do nosso projeto. Depois, simplesmente realizamos a importação do mesmo em nosso html através da tag script:

<script src="./assets/js/faker.min.js"></script>

Para conseguirmos utilizá-lo através do Node em nossa API ou back-end, depois instalá-la via npm ou yarn, precisamos apenas realizar a importação com require:

const faker = require('faker')

Ou com JavaScript modules:

import faker from 'faker'

Preparando o ambiente

Bom, com toda instalação feita, já podemos começar a utilizá-la. Para ilustrar o artigo, vamos criar um objeto do tipo pessoa e gerar cem registros do mesmo – o primeiro passo será criar nosso array:

const people = []

Agora podemos criar um for realizando cem interações:

for (let i = 0; i < 100; i++) {
    const person = {
        firstName: null,
        lastName: null,
        address: {
            city: null,
            country: null,
            phone: null,
            state: null,
            street: null,
            zipCode: null
        },
        birthDay: null,
        image: null,
        email: null,
        userName: null,
        password: null,
        ip: null,
    }
    people.push(person)
}

E no fim podemos realizar o log final do nosso array:

console.log(people)

Conhecendo a Faker.js

Com toda preparação pronta, podemos de fato começar a utilizar os dados falsos da Faker.js. A ideia será trocar todos os nulls por dados mockados. Todas as funções para obtenções dos dados podem ser chamadas atraves do faker.grupo.informacao, onde:

• grupo: está relacionado ao contexto que precisamos simular (endereço, nome, sistema, internet, etc)
• informacao: o que precisamos mockar em relação ao grupo (primeiro nome, sobrenome, IP, usuário, senha, rua, cidade, estado, etc)

Dessa forma, para obtermos informações referentes a nome, podemos utilizar faker.name., onde:

• faker: objeto Faker contendo as demais funções.
• name: grupo referente a nome.

Informações pessoais

Assim, podemos pegar o primeiro nome com:

firstName: faker.name.firstName()

Sobrenome:

faker.name.lastName()

Data de nascimento:

birthDay: faker.date.past(),

Informações de localização

Agora podemos partir para as informações de endereço através de faker.address.

Pegando o nome de uma cidade:

city: faker.address.city()

País:

country: faker.address.country()

Valor de um número de telefone:

phone: faker.phone.phoneNumber()

Estado:

state: faker.address.stateAbbr()

Rua:

street: faker.address.streetName()

Valor de um CEP:

zipCode: faker.address.zipCode()

Informações de internet

Legal, já temos as informações pessoais e de localização do nosso objeto pessoal. Agora nos resta as informações referentes à internet. Podemos acessá-las e mocká-las através do faker.internet.:

Pegando uma imagem de perfil:

image: faker.image.avatar()

E-mail:

email: faker.internet.email()

Usuário:

userName: faker.internet.userName()

Senha:

password: faker.internet.password()

Por fim, nos resta mockar o valor do IP:

ip: faker.internet.ip()

Com isso, finalizamos nosso objeto pessoa. Já adicionamos ele em nosso array e mockamos 100 informações no mesmo, tudo certo?

Errado. Nossas informações foram mockadas no formato americano, mas, precisamos que estejam no formato brasileiro. Como podemos fazer isso?

Para trocar as informações de americanas para brasileiras, podemos simplesmente setar um locale brasileiro:

faker.locale = 'pt_BR'

Agora as informações estão no formato brasileiro.

Nosso código completo fica com a seguinte estrutura:

faker.locale = 'pt_BR'
const people = []
for (let i = 0; i < 100; i++) {
    const person = {
        firstName: faker.name.firstName(),
        lastName: faker.name.lastName(),
        address: {
            city: faker.address.city(),
            country: faker.address.country(),
            phone: faker.phone.phoneNumber(),
            state: faker.address.stateAbbr(),
            street: faker.address.streetName(),
            zipCode: faker.address.zipCode()
        },
        birthDay: faker.date.past(),
        image: faker.image.avatar(),
        email: faker.internet.email(),
        userName: faker.internet.userName(),
        password: faker.internet.password(),
        ip: faker.internet.ip(),
    }
    people.push(person)
}
console.log(people)

Conclusão

Neste artigo expliquei como e porque utilizar a biblioteca Faker.js. Com ela conseguimos criar dados mockados para nossas APIs, sites ou sistemas na web. Sua documentação completa pode ser encontrada aqui.

E aí? Já conhecia a Faker? Não deixe de comentar.

Até a próxima!