Construindo APIs com o Mirage JS

Ao construir aplicativos que possuem uma interface que depende de dados do back-end, é preciso esperar que todo servidor, banco de dados e regras de negócios sejam criados, para que o front possa ser desenvolvido utilizado aqueles dados. Isso torna o processo de desenvolvimento de uma aplicação fullstack lento e pouco produtivo. Nesse contexto, o Mirage Js torna o processo de desenvolvimento da aplicação mais produtiva e menos dependente que o back-end esteja totalmente pronto.

Atenção: É importante salientar que o Miraje Js é uma biblioteca apenas para ambiente de desenvolvimento e que de forma alguma ela pode substituir um back-end em ambiente de produção.

O Mirage JS funciona interceptando uma solicitação de rota feita por uma aplicação. Ele permite a simulação de respostas, o que permite desenvolver e testar a aplicação como se estivesse fazendo interface com um servidor ativo.

Algumas funcionalidades do Mirage JS:

• Rotas para lidar com requisições HTTP.
• Banco de dados e modelo para armazenamento de dados e tratamento de relacionamentos.
• Fábricas e instalações para serializar dados.
• Serializadores para formatar respostas HTTP

Nesse artigo, iremos trabalhar em cima de uma aplicação utilizando o ReactJs,.

Com NPM:

npm install--save-dev miragejs 

Com Yarn:

yarn add miragejs -D

Nesse artigo iremos simular um back-end e um banco de dados de uma aplicação de controle financeiro, no link a seguir você pode ter acesso a aplicação:

• https://github.com/Ceviche9/ignite-react/tree/main/02-dt-money

Queremos que nossa aplicação armazene dados como um servidor real e também carregue alguns dados existentes (seeds). Para isso iremos configurar uma rota para que o Mirage JS faça a sua interceptação e um banco de dados, recurso que o Mirage também disponibiliza.

Primeiramente iremos importar no Mirage JS as funções createServer e Model que serão responsáveis para fazermos nossas configurações. Nesse caso as configurações do Mirage foram feitas na página Home do projeto.

import {createServer, Model} from 'miragejs'

createServer({

  // O mirageJs permite que vc crie um tabelas para simular um banco de dados.
  models: {
    transaction: Model,
  },

  

  routes() {
    // Todas as chamadas que tiverem /api serão direcionadas para o mirageJs.
    this.namespace = 'api';

    this.get('/transactions', () => {

      // Para retornar as transactions salvas no banco do mirage
      return this.schema.all('transaction')
    });

    this.post('/transactions', (schema, request) => {
      const data = JSON.parse(request.requestBody)
      console.log("dentro do post", data)

      // Schema -> banco de dados do mirage

      // Transaction -> Model que criei pelo mirage
      return schema.create('transaction', data)
    })
  }
})

Dentro do método createserver podemos adicionar um método popular nosso banco de dados com algumas seeds da seguinte forma:

createServer({

  // O mirageJs permite que vc crie um tabelas para simular um banco de dados.
  models: {
    transaction: Model,
  },
 // Gerando seeds.
seeds(server) {
    server.db.loadData({
      // O nome da tabela sempre vai ser o nome do model no plural.
      transactions: [
        {
          id: 1,
          title: 'Freelancer de website',
          type: 'deposit',
          category: 'Dev',
          amount: 6000,
          createdAt: new Date('2021-10-05 09:00:00')
        },
        {
          id: 2,
          title: 'Venda de Código fonte',
          type: 'deposit',
          category: 'Dev',
          amount: 120000,
          createdAt: new Date('2021-10-06 13:00:00')
        },
        {
          id: 3,
          title: 'Macbook Air',
          type: 'withdraw',
          category: 'Compras',
          amount: 9000,
          createdAt: new Date('2021-10-13 09:00:00')
        }
      ]
    })
  },
)

Agora que configuramos com sucesso um servidor Mirage JS com um banco de dados e algumas seeds, a próxima etapa é criar rotas. Nesse caso, iremos precisar de duas rotas, umas para pegar os dados e outra para colocar dados. Iremos então fazer um método GET e POST na rota:

• /api/transactions

createServer({

  // O mirageJs permite que vc crie um tabelas para simular um banco de dados.
  models: {
    transaction: Model,
  },
 // Gerando seeds.
  seeds(server) {
    server.db.loadData({
      // O nome da tabela sempre vai ser o nome do model no plural.
      transactions: [
        {
          id: 1,
          title: 'Freelancer de website',
          type: 'deposit',
          category: 'Dev',
          amount: 6000,
          createdAt: new Date('2021-10-05 09:00:00')
        },
        {
          id: 2,
          title: 'Venda de Código fonte',
          type: 'deposit',
          category: 'Dev',
          amount: 120000,
          createdAt: new Date('2021-10-06 13:00:00')
        },
        {
          id: 3,
          title: 'Macbook Air',
          type: 'withdraw',
          category: 'Compras',
          amount: 9000,
          createdAt: new Date('2021-10-13 09:00:00')
        }
      ]
    })
  },
 // Criando rotas
  routes() {
    // Todas as chamadas que tiverem /api serão direcionadas para o mirageJs.
    this.namespace = 'api';

    this.get('/transactions', () => {

      // Para retornar as transactions salvas no banco do mirage
      return this.schema.all('transaction')
    });

    this.post('/transactions', (schema, request) => {
      const data = JSON.parse(request.requestBody)
      console.log("dentro do post", data)

      // Schema -> banco de dados do mirage

      // Transaction -> Model que criei pelo mirage
      return schema.create('transaction', data)
    })
  }
})

Após configurar o Mirage as chamadas a API podem ser feitas normalmente utilizando o Fetch, Axios ou outra lib para fazer chamadas HTTP.

import axios from 'axios';

export const api = axios.create({
  baseURL: "http://localhost:3000/api",
})

A rota "http://localhost:3000/api" foi a rota escolhida onde o Mirage Js irá interceptar e trabalhar em cima dela de acordo com as nossas configurações.

Com o Mirage JS o processo de construção de front-end que depende de um servidor se torna bem mais prático ao criar uma aplicação fullstack, nesse artigo foi abordado apenas alguns aspectos bastante úteis dessa biblioteca, porém, ela oferece muitas outras funcionalidades, então aconselho dá uma olhadinha na documentação do Mirage. Qualquer dúvida, dicas ou sugestões, não se esqueça de deixar nos comentário aqui em baixo.

Espero que tenha curtido 🤟