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:

Yarn ou Npm
MongoDb

Preparando a base

Crie um arquivo base para o admin chamado app.js em um novo diretório:

Default

touch app.js

1

touch app.js

Coloque no arquivo criado:

// ========== server.js ==============
// Requirements
const mongoose = require('mongoose')
const express = require('express')
const bodyParser = require('body-parser')

// express server definition
const app = express()
app.use(bodyParser.json())

// Resources definitions
const User = mongoose.model('User', { name: String, email: String, surname: String })

var artcileSchema = new mongoose.Schema({
 title: String,
 body: String,
 author: {
   type: mongoose.Schema.Types.ObjectId,
   ref: 'User',
   required: true
},
 created_at: { type: Date, default: Date.now }
});

const Article = mongoose.model('Article', artcileSchema);


// Routes definitions
app.get('/', (req, res) => res.send('Hello World!'))

// Route which returns users
app.get('/users', async (req, res) => {
 const users = await User.find({}).limit(10)
 res.send(users)
})

// Route which creates new user
app.post('/users', async (req, res) => {
 const user = await new User(req.body.user).save()
 res.send(user)
})

// Route whick retuns articles
app.get('/articles', async (req, res) => {
 const articles = await Article.find({}).limit(10)
 res.send(articles)
})

// Running the server
const run = async () => {
 await mongoose.connect('mongodb://localhost/admin', { useNewUrlParser: true })
 await app.listen(8080, () => console.log(`Example app listening on port 8080!`))
}

run()

// ========== server.js ==============

// Requirements

const mongoose = require('mongoose')

const express = require('express')

const bodyParser = require('body-parser')

// express server definition

const app = express()

app.use(bodyParser.json())

// Resources definitions

const User = mongoose.model('User', { name: String, email: String, surname: String })

var artcileSchema = new mongoose.Schema({

title: String,

body: String,

author: {

type: mongoose.Schema.Types.ObjectId,

ref: 'User',

required: true

created_at: { type: Date, default: Date.now }

});

const Article = mongoose.model('Article', artcileSchema);

// Routes definitions

app.get('/', (req, res) => res.send('Hello World!'))

// Route which returns users

app.get('/users', async (req, res) => {

const users = await User.find({}).limit(10)

res.send(users)

})

// Route which creates new user

app.post('/users', async (req, res) => {

const user = await new User(req.body.user).save()

res.send(user)

})

// Route whick retuns articles

app.get('/articles', async (req, res) => {

const articles = await Article.find({}).limit(10)

res.send(articles)

})

// Running the server

const run = async () => {

await mongoose.connect('mongodb://localhost/admin', { useNewUrlParser: true })

await app.listen(8080, () => console.log(`Example app listening on port 8080!`))

}

run()

Instale as libs necessários rodando:

Default

yarn add mongoose express body-parser

1

yarn add mongoose express body-parser
Suba o servidor:

Default

node app.js

1

node app.js
Para testar a criação de um User, em um outro terminal rode:

Default

curl -d '{"user": {"name": "Leonardo Scorza"}}' -H "Content-Type: application/json" -X POST http://localhost:8080/users/

1

curl -d '{"user": {"name": "Leonardo Scorza"}}' -H "Content-Type: application/json" -X POST http://localhost:8080/users/
Depois para receber o usuário criado, rode:

Default

curl http://localhost:8080/users

1

curl http://localhost:8080/users

Instalando o Admin

Instale as bibliotecas necessárias rodando:

Default

yarn add admin-bro admin-bro-mongoose admin-bro-expressjs

1

yarn add admin-bro admin-bro-mongoose admin-bro-expressjs

Atualize o app.js colocando:

// ========== server.js ==============
// Requirements
const mongoose = require('mongoose')
const express = require('express')
const bodyParser = require('body-parser')
const AdminBro = require('admin-bro')
const AdminBroExpressjs = require('admin-bro-expressjs')

// We have to tell AdminBro that we will manage mongoose resources with it
AdminBro.registerAdapter(require('admin-bro-mongoose'))

// express server definition
const app = express()
app.use(bodyParser.json())

// Resources definitions
const User = mongoose.model('User', { name: String, email: String, surname: String })

var artcileSchema = new mongoose.Schema({
 title: String,
 body: String,
 author: {
   type: mongoose.Schema.Types.ObjectId,
   ref: 'User',
   required: true
},
 created_at: { type: Date, default: Date.now }
});

const Article = mongoose.model('Article', artcileSchema);


// Routes definitions
app.get('/', (req, res) => res.send('Hello World!'))

// Route which returns last 100 users from the database
app.get('/users', async (req, res) => {
 const users = await User.find({}).limit(10)
 res.send(users)
})

// Route which creates new user
app.post('/users', async (req, res) => {
 const user = await new User(req.body.user).save()
 res.send(user)
})

// Route whick retuns articles
app.get('/articles', async (req, res) => {
 const articles = await Article.find({}).limit(10)
 res.send(articles)
})

// Pass all configuration settings to AdminBro
const adminBro = new AdminBro({
 resources: [User, Article],
 rootPath: '/admin',
})

// Build and use a router which will handle all AdminBro routes
const router = AdminBroExpressjs.buildRouter(adminBro)
app.use(adminBro.options.rootPath, router)

// Running the server
const run = async () => {
 await mongoose.connect('mongodb://localhost/admin', { useNewUrlParser: true })
 await app.listen(8080, () => console.log(`Example app listening on port 8080!`))
}

run()

// ========== server.js ==============

// Requirements

const mongoose = require('mongoose')

const express = require('express')

const bodyParser = require('body-parser')

const AdminBro = require('admin-bro')

const AdminBroExpressjs = require('admin-bro-expressjs')

// We have to tell AdminBro that we will manage mongoose resources with it

AdminBro.registerAdapter(require('admin-bro-mongoose'))

// express server definition

const app = express()

app.use(bodyParser.json())

// Resources definitions

const User = mongoose.model('User', { name: String, email: String, surname: String })

var artcileSchema = new mongoose.Schema({

title: String,

body: String,

author: {

type: mongoose.Schema.Types.ObjectId,

ref: 'User',

required: true

created_at: { type: Date, default: Date.now }

});

const Article = mongoose.model('Article', artcileSchema);

// Routes definitions

app.get('/', (req, res) => res.send('Hello World!'))

// Route which returns last 100 users from the database

app.get('/users', async (req, res) => {

const users = await User.find({}).limit(10)

res.send(users)

})

// Route which creates new user

app.post('/users', async (req, res) => {

const user = await new User(req.body.user).save()

res.send(user)

})

// Route whick retuns articles

app.get('/articles', async (req, res) => {

const articles = await Article.find({}).limit(10)

res.send(articles)

})

// Pass all configuration settings to AdminBro

const adminBro = new AdminBro({

resources: [User, Article],

rootPath: '/admin',

})

// Build and use a router which will handle all AdminBro routes

const router = AdminBroExpressjs.buildRouter(adminBro)

app.use(adminBro.options.rootPath, router)

// Running the server

const run = async () => {

await mongoose.connect('mongodb://localhost/admin', { useNewUrlParser: true })

await app.listen(8080, () => console.log(`Example app listening on port 8080!`))

}

run()

Suba o servidor rodando:

Default

node app.js

1

node app.js
Pronto, agora acesse seu admin em http://localhost:8080/admin:

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

Em app.js atualize a seguinte parte:

// Pass all configuration settings to AdminBro
const adminBro = new AdminBro({
 resources: [User, Article],
 rootPath: '/admin',
})

// Pass all configuration settings to AdminBro

const adminBro = new AdminBro({

resources: [User, Article],

rootPath: '/admin',

})

Para:

// Pass all configuration settings to AdminBro
const adminBro = new AdminBro({
  resources: [User, Article],
  rootPath: '/admin',
  branding: {
    companyName: 'Escola de Javascript',
  },
})

// Pass all configuration settings to AdminBro

const adminBro = new AdminBro({

resources: [User, Article],

rootPath: '/admin',

branding: {

companyName: 'Escola de Javascript',

})

Pronto, pare e suba o servidor para ver o novo título:

Escondendo campos

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

// Pass all configuration settings to AdminBro
const adminBro = new AdminBro({
 resources: [User, Article],
 rootPath: '/admin',
 branding: {
   companyName: 'Escola de Javascript',
},
})

// Pass all configuration settings to AdminBro

const adminBro = new AdminBro({

resources: [User, Article],

rootPath: '/admin',

branding: {

companyName: 'Escola de Javascript',

})

Para:

// Pass all configuration settings to AdminBro
const adminBro = new AdminBro({
 resources: [User,
  {
     resource: Article, options: {
       properties: {
         created_at: { isVisible: { list: false, filter: false, show: true, edit: false } }
      }
    }
  }
],
 branding: {
   companyName: 'Escola de Javascript',
},
 rootPath: '/admin',
})

// Pass all configuration settings to AdminBro

const adminBro = new AdminBro({

resources: [User,

{

resource: Article, options: {

properties: {

created_at: { isVisible: { list: false, filter: false, show: true, edit: false } }

}

branding: {

companyName: 'Escola de Javascript',

rootPath: '/admin',

})

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

Colocando os títulos das categorias

Inclua logo a cima do const adminBro:

Default

const createParent = { name: 'Create', icon: 'fa fa-coffee', } const managerParent = { name: 'Manage', icon: 'fa fa-cog', }

1
2
3
4
5
6
7
8
9

const createParent = {
name: 'Create',
icon: 'fa fa-coffee',
}

const managerParent = {
name: 'Manage',
icon: 'fa fa-cog',
}

Em app.js atualize a seguinte parte:

// Pass all configuration settings to AdminBro
const adminBro = new AdminBro({
 resources: [User,
  {
     resource: Article, options: {
       properties: {
         created_at: { isVisible: { list: false, filter: false, show: true, edit: false } }
      }
    }
  }
],
 branding: {
   companyName: 'Escola de Javascript',
},
 rootPath: '/admin',
})

// Pass all configuration settings to AdminBro

const adminBro = new AdminBro({

resources: [User,

{

resource: Article, options: {

properties: {

created_at: { isVisible: { list: false, filter: false, show: true, edit: false } }

}

branding: {

companyName: 'Escola de Javascript',

rootPath: '/admin',

})

Para:

// Pass all configuration settings to AdminBro
const adminBro = new AdminBro({
 resources: [
  {
     resource: User, options: { parent: managerParent }
  },
  {
     resource: Article, options: {
       properties: {
         created_at: { isVisible: { list: false, filter: false, show: true, edit: false } }
      },
       parent: createParent
    }
  }
],
 branding: {
   companyName: 'Escola de Javascript',
},
 rootPath: '/admin',
})

// Pass all configuration settings to AdminBro

const adminBro = new AdminBro({

resources: [

{

resource: User, options: { parent: managerParent }

{

resource: Article, options: {

properties: {

created_at: { isVisible: { list: false, filter: false, show: true, edit: false } }

parent: createParent

}

branding: {

companyName: 'Escola de Javascript',

rootPath: '/admin',

})

Pronto, agora separados nossos recursos no menu.

**Incluindo um editor de Rich Text (WYSIWYG)**

Em app.js atualize a seguinte parte:

  resource: Article, options: {
       properties: {
         created_at: { isVisible: { list: false, filter: false, show: true, edit: false } }
      },
       parent: createParent
    }
  }

resource: Article, options: {

properties: {

created_at: { isVisible: { list: false, filter: false, show: true, edit: false } }

parent: createParent

}

Para:

  {
     resource: Article, options: {
       properties: {
         body: { type: 'richtext' },
         created_at: { isVisible: { list: false, filter: false, show: true, edit: false } }
      },
       parent: createParent
    }
  }

{

resource: Article, options: {

properties: {

body: { type: 'richtext' },

created_at: { isVisible: { list: false, filter: false, show: true, edit: false } }

parent: createParent

}

Pronto, agora podemos utilizar HTML para criar nosso artigo.

Customizando o Dashboard (inserindo um component React)

Crie um arquivo ao lado de app.js chamado dashboard.jsx.

Default

touch dashboard.jsx

1

touch dashboard.jsx

Coloque nele:

import React from 'react'
import { WrapperBox } from 'admin-bro/components'

const Dashboard = (props) => {
 return (
   <WrapperBox>
     <h1>Meu Dashboard Customizado</h1>
   </WrapperBox>
)
}

export default Dashboard;

import React from 'react'

import { WrapperBox } from 'admin-bro/components'

const Dashboard = (props) => {

return (

<h1>Meu Dashboard Customizado</h1>

</WrapperBox>

)

}

export default Dashboard;

Em app.js atualize a seguinte parte:

// Pass all configuration settings to AdminBro
const adminBro = new AdminBro({
 resources: [
  {
     resource: User, options: { parent: managerParent }
  },
  {
     resource: Article, options: {
       properties: {
         body: { type: 'richtext' },
         created_at: { isVisible: { list: false, filter: false, show: true, edit: false } }
      },
       parent: createParent
    }
  }
],
 branding: {
   companyName: 'Escola de Javascript',
},
 rootPath: '/admin',
})

// Pass all configuration settings to AdminBro

const adminBro = new AdminBro({

resources: [

{

resource: User, options: { parent: managerParent }

{

resource: Article, options: {

properties: {

body: { type: 'richtext' },

created_at: { isVisible: { list: false, filter: false, show: true, edit: false } }

parent: createParent

}

branding: {

companyName: 'Escola de Javascript',

rootPath: '/admin',

})

Para:

// Pass all configuration settings to AdminBro
const adminBro = new AdminBro({
 resources: [
  {
     resource: User, options: { parent: managerParent }
  },
  {
     resource: Article, options: {
       properties: {
         body: { type: 'richtext' },
         created_at: { isVisible: { list: false, filter: false, show: true, edit: false } }
      },
       parent: createParent
    }
  }
],
 branding: {
   companyName: 'Escola de Javascript',
},
 dashboard: {
   component: AdminBro.require('./dashboard')
},
 rootPath: '/admin',
})

// Pass all configuration settings to AdminBro

const adminBro = new AdminBro({

resources: [

{

resource: User, options: { parent: managerParent }

{

resource: Article, options: {

properties: {

body: { type: 'richtext' },

created_at: { isVisible: { list: false, filter: false, show: true, edit: false } }

parent: createParent

}

branding: {

companyName: 'Escola de Javascript',

dashboard: {

component: AdminBro.require('./dashboard')

rootPath: '/admin',

})

Pronto, atualizamos o componento do nosso Dashboard

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

Quer se tornar um Programador Full Stack Javascript em 8 semanas? 😀

Nós desenvolvemos um treinamento completo onde você vai aprender desde a base da Web (HTML5, CSS, Bulma, Javascript e Es6+) até React e ExpressJs totalmente do zero!

Nele você também vai desenvolver um projeto do inicio até o Deploy (clone do Evernote) e irá aprender como conseguir as melhores vagas no módulo carreira de Programador.

Se você não quer mais perder oportunidades, clique aqui e saiba mais 💪

5 1 vote

Article Rating

julho 13, 2020

https://onebitcode.com/given-up-on-dating/ | gay escort boy

Leonardo Scorza

Programador Full Stack focado em Ruby On Rails, fundador e professor da startup de educação online para programadores OneBitCode. Sou entusiasta de todo o tipo de tecnologia, em especial tecnologias Open Source e quero facilitar a vida dos programadores através da criação de conteúdos educacionais de fácil e rápido entendimento.

Website : simple rules of dating my teenage daughter

Responder

Autor

Leonardo Scorza

3 anos atrás

Reply to aldemir gomes

Olá Aldemir, tudo bem?
Fico feliz que tenha criado o admin através deste artigo.
Sobre o seu bug na hora de mudar o dashboard, por favor, compare seu projeto com o exemplo que criei: https://github.com/escola-de-javascript/adminbro (verifique se o dashboard.jsx está na mesma pasta)
Abraço

Responder

Leandro Severino

3 anos 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 »

Responder

Autor

Leonardo Scorza

3 anos atrás

Reply to Leandro Severino

E ai Leandro, beleza?
Obrigado pela sugestão e por acompanhar o artigo 🙂
Grande abraço

Responder

Ryan

3 anos 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?

Responder

Autor

Leonardo Scorza

3 anos atrás

Reply to Ryan

Olá Ryan, tudo bem?
Verifique se não tem algum caractere incorreto no app.js, pelo erro parece ser algo assim.
Obrigado por acompanhar o tutorial,
Grande abraço.