Support & Downloads

Quisque actraqum nunc no dolor sit ametaugue dolor. Lorem ipsum dolor sit amet, consyect etur adipiscing elit.

s f

Contact Info
198 West 21th Street, Suite 721
New York, NY 10010
youremail@yourdomain.com
+88 (0) 101 0000 000
Follow Us

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

7
Deixe um comentário

avatar
3 Comment threads
4 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
4 Comment authors
Leonardo ScorzaRyanLeandro Severinoaldemir gomes Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
aldemir gomes
Visitante
aldemir gomes

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
Visitante
Leandro Severino

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
Visitante
Ryan

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?