Criando um Admin com Express + React em 20 minutos (usando adminBro)

 

Neste Screencast você vai aprender como desenvolver um Sistema Administrativo (profissional) usando Express + React (via AdminBro) de forma assustadoramente rápida e fácil (com poucos códigos).

Criar sistemas Administrativos é fundamental na maior partes dos projetos, seja ele um sistema para gerenciar os recursos de um APP Mobile, de uma API, de um Web APP ou até mesmo de um Chatbot.
Então vem com a gente nesse passo a passo simples aprender como desenvolver um sistema administivo com Express + React usando a excelente biblioteca
adminBro.


O que vamos usar:

  1. Yarn ou Npm
  2. MongoDb

 

Preparando a base

    1. Crie um arquivo base para o admin chamado app.js em um novo diretório:
    2. Coloque no arquivo criado:
    3. Instale as libs necessários rodando:
    4. Suba o servidor:
    5. Para testar a criação de um User, em um outro terminal rode:
    6. Depois para receber o usuário criado, rode:

 

Instalando o Admin

  1. Instale as bibliotecas necessárias rodando:
  2. Atualize o app.js colocando:
  3. Suba o servidor rodando:
  4. Pronto, agora acesse seu admin em http://localhost:8080/admin:
    admin express + react

 

Customizando o Admin

Agora nós vamos aprender como customizar nosso sistema administrativo (escondendo campos desnecessários, colocando títulos nas categorias, incluindo Rich Text e etc) para que ele se adapte exatamente a suas necessidades.

Mudando o título do Admin
  1. Em app.js atualize a seguinte parte:

    Para:
  2. Pronto, pare e suba o servidor para ver o novo título:
    adminbro

 

Escondendo campos
  1. Agora vamos ocultar o campo created_at na criação, edição e listagem, Em app.js atualize a seguinte parte:

    Para:
  2. Pronto, agora o campo created_at só vai aparecer no show do artigo.

 

Colocando os títulos das categorias
  1. Inclua logo a cima do const adminBro:
  2. Em app.js atualize a seguinte parte:

    Para:
  3. Pronto, agora separados nossos recursos no menu.

 

Incluindo um editor de Rich Text (WYSIWYG)
  1. Em app.js atualize a seguinte parte:

    Para:
  2. Pronto, agora podemos utilizar HTML para criar nosso artigo.
    rich text

 

Customizando o Dashboard (inserindo um component React)

  1. Crie um arquivo ao lado de app.js chamado dashboard.jsx.
  2. Coloque nele:
  3. Em app.js atualize a seguinte parte:

    Para:
  4. Pronto, atualizamos o componento do nosso Dashboard
    sistema administrativo js

 

Desafio – Fixando o que foi aprendido

Para que você fixe o que foi ensinado nesse Screencast inclua no Admin um recurso chamado Tag, ele deve possuir um atributo chamado título e quando o usuário for criar um novo artigo, deve aparecer uma lista com as Tags para que ele associe ao Artigo.

Conclusão

A bibliteca AdminBro realmente surpreende na hora da criação de um sistema administrativo profissional com Express (ou Hapi.js) + React, se você quiser aprender mais sobre ela acesse a documentação clicando aqui.
Caso você queira aprender mais sobre React, vale a pena ver nosso Screencast:  Como consumir APIs externas no React (exibindo o clima local pela localização do browser).

Se você gostou desse conteúdo e quer apoiar a continuação da Escola de Javascrit, deixe um comentário e compartilhe esse artigo com outros programadores, cada [‘compartilhamento’, ‘like’, ‘comentário’] faz a diferença.

Muito obrigado por estar com a gente programador(a), Grande abraço
Leonardo Scorza





0 0 vote
Article Rating
janeiro 17, 2020
Subscribe
Notify of
guest
10 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
aldemir gomes
aldemir gomes
10 meses atrás

Olá Bom dia!
Estar dando error ao adicionar o component React.
‘D:_workspaceadminbrodashboard’ is imported by .adminbro\.entry.js, but could not be resolved – treating it as an external dependency
No name was provided for external module ‘D:_workspaceadminbrodashboard’ in output.globals – guessing ‘Component1’

Leandro Severino
Leandro Severino
10 meses atrás

Eu achei esse Admin-Bro fantástico ! Nas minhas necessidades ele atende bem, apesar das duas necessidades adicionais que tenho. 1) Adicionar log nas transações, uma espécie de auditoria. (Vi que é possível customizar as actions então derepente o caminho seja esse né ?) 2) Fazer upload de arquivos, por exemplo uma postagem do blog ter uma imagem e também estar associada a uma galeria de fotos, que obviamente seria uma outra Model. Nessa galeria de fotos eu gostaria de dar um nome e arrastar algumas fotos para o que o upload fosse feito de todas de uma só vez. (Talvez… Read more »

Ryan
Ryan
10 meses atrás

Olá,
Estou com erro ao iniciar o servidor, copiei e instalei as bibliotecas.
C:\projetos\admin-react\app.js:7
^
SyntaxError: Invalid or unexpected token
at Module._compile (internal/modules/cjs/loader.js:723:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
Poderia me ajudar?

FELIPE MACHADO DE OLIVEIRA MOREIRA
FELIPE MACHADO DE OLIVEIRA MOREIRA
9 meses atrás

Caraca….Animal! Vcs São fera demais! Parabéns!

Felipe Moreira
Felipe Moreira
9 meses atrás

Boa noite, Excelente conteudo. No passo 4 o node esta diferente “node.js” deve ser
“node app.js”

Feito com s2 por OneBitCode
10
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: