Fullstack com Node.js, React e GraphQL  – 4: Interface administrativa com Forest Admin

Faaala, pessoal! Neste quarto post da série Fullstack com Node.js, React e GraphQL vamos criar a interface administrativa usando Forest Admin, permitindo fazer o CRUD dos dados (criar, editar, visualizar e remover).

Forest Admin

Forest Admin é um serviço que cria uma interface administrativa a partir dos dados (modelos) da sua aplicação. Esta interface fica hospedada nos servidores da Forest e se comunica com a sua aplicação através de uma API REST, também gerada pelo Forest Admin.

O serviço é gratuito, mas possui um plano pago com funcionalidades mais avançadas. Vamos usar o plano gratuito mesmo.

Instalação e configuração

Instale a dependência:

npm i forest-express-sequelize

Este é o módulo específico para Node com Sequelize. O Forest possui integração com várias stacks.

No src/index.js vamos habilitar o middleware que gera a API REST que será usada na área administrativa.

Middlewares no Express são funções que interceptam as requisições e as respostas, podendo modificá-las ou executar algum código auxiliar.

No topo, importe o módulo do Forest, a instância do Sequelize e também o arquivo de dados secretos, pois vamos precisar:

const ForestAdmin = require('forest-express-sequelize');  
const { sequelize } = require('./models');  
const secret = require('../config/secret');

E após instanciação do app, const app = express(), adicione:

app.use(  
  ForestAdmin.init({  
    modelsDir: path.resolve('./src/models'),  
    envSecret: secret.FOREST_ENV_SECRET,  
    authSecret: secret.FOREST_AUTH_SECRET,  
    sequelize  
  })  
);

Ao habilitar o middleware do Forest, ele vai criar um conjunto de rotas a partir do caminho /forest na sua aplicação, gerando assim a API que a interface administrativa vai usar.

Veja que ele pede o caminho da pasta de modelos, pois ele vai analisá-los para gerar os formulários e listagens na interface administrativa.

Ele pede também dois códigos para identificar sua aplicação: envSecret e authSecret. Vamos adicioná-los ao arquivo de dados secretos, mas antes precisamos obtê-los.

Cadastro no Forest Admin

O processo de cadastro é bem simples, basta acessar https://www.forestadmin.com, colocar seu e-mail e clicar em Get Started for Free.

Depois vai perguntar se você é Business ou Developer. Escolha Developer. E vai perguntar qual é a sua stack (Choose your stack). Escolha Express/Sequelize.

Ele vai mostrar instruções para instalação. A maior parte nós já fizemos. Apenas precisamos dos códigos FOREST_ENV_SECRET e FOREST_AUTH_SECRET. Copie-os e cole no arquivo config/secret.js:

module.exports = {  
  DATABASE_PASSWORD: '654321',  
  FOREST_ENV_SECRET: 'i9as8fy9safhsauh9saufhs9a8f',  
  FOREST_AUTH_SECRET: 'fy98y39ugsufsiufge9' 
};

Aproveite e execute a aplicação: npm start.

De volta á página de cadastro do Forest, altera o campo com a URL da aplicação para http://localhost:5000, que é onde a nossa está rodando, e clique em Verify.

Se estiver tudo certo, você vai ver a mensagem: Installation success!

Você pode dar um nome para a sua aplicação e clicar Start. Ele vai pedir mais alguns dados e te levar para a tela de entrada da sua área administrativa (ele vai pedir a senha mais uma vez).

Veja abaixo do nome que você está no ambiente Development. O Forest permite separar a área administrativa de desenvolvimento da de produção. Assim podemos testar funcionalidades sem mexer nos dados de produção.

Veja no menu Data que temos páginas de listagem, criação, edição para cada um de nossos modelos.

Modelos relacionados

Uma feature muito legal é na hora de cadastrar modelos relacionados. Por exemplo, para criar um investimento precisamos informar a qual corretora ele pertence. O Forest entende a relação e oferece um campo com auto-complete para selecionar a corretora:

Customizações

O Forest permite várias customizações na interface através da opção Layout Editor na parte de baixo do menu.

Você pode remover e ordenar campos dos formulários (os campos id, created at e updated at, por exemplo, são preenchidos automaticamente e não precisamos deles nos formulários).

Deixando o formulário mais clean.

Você também pode ordenar e remover colunas das listagens e alterar o tamanho da paginação.

Customizando a listagem

Smart fields

O Forest possui uma feature chamada Smart Fields, onde você pode adicionar campos adicionais ao seus modelos, e que vai resolver um problema nosso.

É normal ter o mesmo investimento em diferentes corretoras. Posso ter um valor aplicado no Tesouro Selic 2023 nas corretoras Easynvest e Rico, por exemplo. No nosso admin, se eu for tentar adicionar uma transação no Tesouro Selic 2023 da Rico, o auto-complete do campo de investimento vai ficar assim:

E aí? Qual é o da Rico e qual é da Easynvest?

Vamos adicionar um campo Full Name no investimento, que traz o nome do investimento junto com o da corretora. Para isso basta criar o arquivo forest/investment.js:

const ForestAdmin = require('forest-express-sequelize');

ForestAdmin.collection('Investment', {  
  fields: [  
    {  
      field: 'fullName',  
      type: 'String',  
      get(object) {  
        return `${object.name} (${object.Broker.name})`;  
      }  
    }  
  ]  
});

Precisamos dizer ao Forest para usar este campo no auto-complete. Ative o Layout Editor e clique na engrenagem ao lado de Investments:

E na opção reference field, esolher “full name”:

Com isso, sempre que o modelo de investimento for referenciado em alguma parte da aplicação, você vai ver o full name. Assim podemos identificar a qual corretora pertence:

Resultado final

O código do projeto até este ponto está em: https://github.com/doug2k1/my-money/tree/v4.1.0

No próximo capítulo

Na próxima parte vamos configurar Integração Contínua com Travis CI.

Stay tuned!

Feedbacks?

E aí, o que está achando até agora? Algo que precisa melhorar?

Tags: | | |

Sobre o Autor

Douglas Matoso
Douglas Matoso

Desenvolvedor web desde 2008. Criador do Web Dev Drops.

0 Comentários

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *