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

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.

Atualização 21/06/2020

No post original nós conectamos o Forest Admin à nossa aplicação existente. Hoje esta opção não é mais suportada. O Forest gera uma nova aplicação exclusivamente para fornecer a API para a interface administrativa. Ela vai rodar separada do nosso backend express/graphql.

Por um lado esta mudança gera mais trabalho de manutenção, pois vamos precisar manter duas aplicações backend separadas, mas também facilita o setup (ela é gerada automaticamente como veremos a seguir) e permite escalar independente (tipicamente em produção a aplicação que fornece os dados para os usuários finais é mais demandada que a parte administrativa).

Cadastro no Forest Admin

O processo de cadastro é bem simples, basta acessar https://www.forestadmin.com e clicar em Install Forest Admin. Na próxima página você vai criar sua conta.

Na tela seguinte informe o nome que desejar para seu projeto e clique em Create your project.

No próximo passo você vai informar os dados do seu banco de dados. No nosso caso escolhemos postgres e informamos os dados de acesso ao banco em localhost. Não se preocupe, os dados não serão armazenados, ele vai usar apenas para gerar as instruções de instalação.

Usando os dados que definimos na parte 3, fica assim:

Na próxima tela escolha Install with NPM. Serão mostrados os comandos que precisamos executar. Execute na ordem: primeiro a instalação do lumber-cli, depois a geração da aplicação, e depois o npm start da aplicação.

Neste ponto a página de cadastro vai tentar comunicar com a aplicação e redirecionar para a sua nova área administrativa.

Nota: Se os comandos executaram normalmente, mas a página continua com a mensagem “Waiting for your backend to run“, você pode ir para https://app.forestadmin.com/projects que seu admin já deve estar rodando.

Para melhor organização eu adicionei a app gerada pelo forest no mesmo repositório da nossa aplicação, em admin-backend. Ficando assim:

/
  admin-backend/
  backend/
  frontend/

Interface administrativa

Na sua área administrativa você vai notar que 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 lateral 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:

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 nas corretoras Easynvest e Rico, por exemplo. No nosso admin, se eu tentar adicionar uma transação no Tesouro Selic 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 editar o arquivo forest/investment.js, adicionando a seguinte entrada no array fields:

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

collection('investments', {
  actions: [],
  fields: [{
    field: 'fullName',
    type: 'String',
    get: (investment) => {
      return models.brokers.findOne({ where: { id: investment.brokerIdKey } })
        .then(broker => {
          return `${investment.name} (${broker.name})`;
        })
    }
  }],
  segments: [],
});

É preciso reiniciar a aplicação para esta mudança surtir efeito.

Agora 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, escolher “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/v8.0.0

Nota: esta tag v8.0.0, contém a refatoração do setup do Forest em 2020, portanto ela já inclui os códigos das partes 5, 6, 7 e 8 da série.

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.

4 Comentários

  1. Olá amigo.
    Estou tentando desenvolver esta aplicação seguindo teu material mas chegou em um ponto que não consigo avançar. Estou nessa parte aqui:”Fullstack com Node.js, React e GraphQL  – 4: Interface administrativa com Forest Admin”

    Especificamente quando fui criar minha conta na página Forest Admin.

    Parece que mudou a maneira de configurar as coisa lá. Quando chega na parte de instalar e depois rodar o seguinte comando: $ lumber generate “My Investments” –connection-url “postgres://myinvestment:[email protected]:5432/myinvestment” –ssl “true” –schema “public” –application-host “localhost” –application-port “3310” –email “[email protected]” –token “eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJkYXRhIjp7ImRhdGEiOnsidHlwZSI6InVzZXJzIiwiaWQiOiIyOTYyMyIsImF0dHJpYnV0ZXMiOnsiZmlyc3RfbmFtZSI6IlJpY2VsbGkiLCJsYXN0X25hbWUiOiJDYXJ2YWxobyIsImVtYWlsIjoicmljZWxsaS5tYXJ0aW5zZGVjYXJ2YWxob0BnbWFpbC5jb20ifX19LCJpYXQiOjE1NzQ3MDk2ODUsImV4cCI6MTU3NDg4MjQ4NSwiYXVkIjoiRk9SRVNUX1VTRVJTIiwiaXNzIjoiRk9SRVNUX0FVVEhFTlRJQ0FUSU9OX1NZU1RFTSJ9.fXsvnqCiJq-kIzaR9Xlnaj0N_lX2JEsHIZtMHaWqPeA”

    Não dá certo. Estou no ubuntu, daí aparece a seguinte mesnagem de erro: “Command ‘lumber’ not found, did you mean:”

    • Fala, Ricelli!

      Realmente a forma mudou. Vou atualizar o post.

      Mas pelo seu erro, parece que faltou instalar a ferramenta “lumber”. Vc precisa ter o Node.js instalado na sua máquina (https://nodejs.org/) e aí instalar o lumber-cli. No terminal:

      npm i -g lumber-cli

      A partir daí o comando lumber deve funcionar.

      • Olá, estou com o mesmo problema descrito acima, consegui instalar o lumber e seguir os passos para instalar conforme os passos dado pelo Forest, porém foi criado uma nova aplicação , agora estou confuso. pode atualizar essa integração com Forest desse guia Douglas?

        • Fala, Thales e Ricelli! Acabei de atualizar o post e refatorar o código. Realmente mudou bastante, mas já está tudo funcionando com a nova versão do Forest. Acabou que ficou bem mais simples o setup.

          Abraços!


Deixe uma resposta

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