Criando um sistema administrativo com Rails Admin em 25 minutos!

O que vamos fazer e por que Rails Admin?

Neste tutorial, criaremos um sistema administrativo completo usando Rails Admin em 25 minutos!
A ideia é que depois de fazer o tutorial você seja capaz de criar um sistema administrativo completo (com autenticação) para qualquer tipo de negócio. Como exemplo, vamos criar um sistema para administrar o Aluguel de veículos no qual será possível cadastrar os carros da frota, os clientes, os alugueis e também registrar possíveis “sinistros” que tenham ocorrido durante o aluguel do carro.

O Rails Admin é uma Gem que cria uma interface para que você possa gerenciar seus dados. Para uma explicação mais aprofundada dê uma olhada na página da Gem no GitHub clicando aqui!

Um momento para agradecer

Gostaríamos de agradecer a todos os leitores pela receptividade que o blog está tendo. Cada feedback que recebemos nos dois primeiros posts serviram enormemente de incentivo para continuarmos a produzir conteúdos de valor e melhorarmos ainda mais a qualidade do nosso trabalho.
Simplesmente, obrigado a todos!

Caso você não tenha visto o Post sobre “12 Gems que você precisa conhecer”, clique aqui.
Se você não viu o Post “Como criar um Chatbot usando Ruby On Rails Facilmente”, clique aqui.

Ingredientes do Projeto

● Rails 5 (Se preferir é possível usar o 4)
● PostgreSQL
● Rails Admin (Gem)
● Devise (Gem)
● Rollincode(Tema)

Objetivos do Tutorial

● Criar o nosso Projeto Rails 5 com PostgreSQL e instalar a Gem do Rails Admin.
● Criar a estrutura do banco de dados.
● Criar a Autenticação usando Devise.
● Colocar um tema sobre o Rails Admin

Onde encontrar o código completo

Este projeto estará completo no GitHub. Caso queira ver o código, acesse este dating detox rules! Aproveite e siga-nos no GitHub 🙂

Mãos à Obra!

Primeiro vamos criar o Projeto e instalar as Gems

Para instalar usando Rails 5, rode no terminal:

PowerShell

gem install rails

1

gem install rails
Verifique se a versão do Rails é realmente a 5 rodando:

PowerShell

rails -v

1

rails -v
Se tudo estiver correto, deverá aparecer uma indicação de que a versão no console é a 5
Rode no terminal para criar o seu projeto

PowerShell

rails new car_rent_admin --database=postgresql

1

rails new car_rent_admin --database=postgresql
Agora vá até o seu Gemfile e adicione as seguintes gems:

Ruby

gem 'remotipart', github: 'mshibuya/remotipart' gem 'rails_admin', github: 'sferik/rails_admin' gem 'rails_admin_rollincode', '~>; 1.0' gem "devise"

1
2
3
4

gem 'remotipart', github: 'mshibuya/remotipart'
gem 'rails_admin', github: 'sferik/rails_admin'
gem 'rails_admin_rollincode', '~>; 1.0'
gem "devise"

*Observação: se você estiver usando Rails 4, não precisa adicionar a primeira Gem (remotipart).
Agora Rode o Bundle no console:

PowerShell

bundle install

1

bundle install
Para instalar o Rails Admin rode no console:

PowerShell

rails g rails_admin:install

1

rails g rails_admin:install
Ao rodar o comando, o Rails Admin perguntará em qual rota você gostaria de instalar. Neste tutorial deixaremos em /admin como no default, mas você poderá escolher outra rota ou até mesmo instalar na home.

Default

Where do you want to mount rails_admin? Press for [admin]

1

Where do you want to mount rails_admin? Press for [admin]
Você precisa configurar seu arquivo “config/database.yml” com os acessos para o seu postgreSQL.
Se você não está acostumado com o Rails e não sabe como configurar esse arquivo, https://onebitcode.com/learning-disability-dating-sites/
Depois de configurar o seu arquivo “db/database.yml”, rode no console:

Default

rake db:create

1

rake db:create
Agora para ver o resultado rode no console:

PowerShell

rails s

1

rails s

Pronto, agora já será capaz de ver a seguinte tela acessando no browser http://localhost:3000/admin

\o/ Estamos Online :), vamos configurar o Rails Admin agora!

Banco de Dados

Apenas relembrando: o exemplo que estamos fazendo aqui hoje é um sistema simples para administrar o aluguel de carros. Criaremos apenas os Models e não será necessária a criação de Controllers ou mesmo rotas para se usar o Rails Admin.

Vamos criar os seguintes Models:

Carro: Armazenar os veículos da empresa.
Cliente: Pessoas que alugarão os carros.
Aluguel: Relaciona um carro e um cliente em evento de Aluguel.
Sinistro: Caso ocorra um incidente durante o aluguel de um carro, essa tabela armazenará o que ocorreu. (ex.: a porta foi amassada e o cliente deve pagar R$300).
User: A pessoa que usará o sistema de administração. (vamos gerar com o devise)

Vamos Criar

1. Para criar o Model Carro, rode no console:
  
  PowerShell
  
  rails g model carro marca:string tipo:string disponivel:boolean
  
  1
  
  rails g model carro marca:string tipo:string disponivel:boolean
2. Agora para o Model Cliente, rode:
  
  PowerShell
  
  rails g model cliente nome:string documento:string telefone:string
  
  1
  
  rails g model cliente nome:string documento:string telefone:string
3. Para o Aluguel, rode:
  
  PowerShell
  
  rails g model aluguel preco:decimal status:boolean data_retirada:datetime data_devolucao:datetime carro_id:integer cliente_id:integer
  
  1
  
  rails g model aluguel preco:decimal status:boolean data_retirada:datetime data_devolucao:datetime carro_id:integer cliente_id:integer
4. Vá até a migration gerado para o Aluguel e substitua a linha:
  
  PowerShell
  
  "t.decimal :preco"
  
  1
  
  "t.decimal :preco"
  
  por:
  
  PowerShell
  
  t.decimal :preco, :decimal, :precision => 8, :scale => 2
  
  1
  
  t.decimal :preco, :decimal, :precision => 8, :scale => 2
  
  Isso é para deixar o campo mais apropriado para guardar valores monetários.
5. Agora para o Model Sinistro, rode:
  
  PowerShell
  
  rails g model sinistro preco:decimal status:boolean tipo:integer descrição:text aluguel_id:integer
  
  1
  
  rails g model sinistro preco:decimal status:boolean tipo:integer descrição:text aluguel_id:integer
6. Vá até a migration gerada para o Sinistro e substitua a linha:
  
  PowerShell
  
  "t.decimal :preco"
  
  1
  
  "t.decimal :preco"
  
  por:
  
  PowerShell
  
  t.decimal :preco, :decimal, :precision => 8, :scale => 2
  
  1
  
  t.decimal :preco, :decimal, :precision => 8, :scale => 2
  
  Isso é para deixar o campo mais apropriado para guardar valores monetários.
7. Agora para gerar as tabelas, rode:
  
  PowerShell
  
  rake db:migrate
  
  1
  
  rake db:migrate
8. Nós precisamos criar as relações entre nossas tabelas agora:
  - Vá até o model “Aluguel” e inclusa as seguintes linhas:
    
    Ruby
    
    has_one :carro has_one :cliente belongs_to :sinistro
    
    1
    2
    3
    
    has_one :carro
    has_one :cliente
    belongs_to :sinistro
  - No model “Carro” e também no model “Cliente”, inclua a seguinte linha:
    
    Ruby
    
    belongs_to :aluguel
    
    1
    
    belongs_to :aluguel
  - Para finalizar, inclua a seguinte linha no model “Sinistro”.
    
    Ruby
    
    has_one :aluguel
    
    1
    
    has_one :aluguel

Excelente, agora já temos nossas tabelas e models configurados.

Rode:

rails s

rails s

Acesse no browser http://localhost:3000/admin e veja como está seu site administrativo agora com as novas tabelas.

\o/ Ótimo, agora nós já podemos criar, editar ou apagar dados nas nossas tabelas. Brinque um pouco com seu sistema administrativo e aprenda a usar a interface do Rails Admin, você verá que é bem completo.

Autenticação

Como qualquer sistema fechado, nosso sistema precisa ter um método de autenticação. Nós poderíamos usar uma autenticação básica, mas porque não usar o devise que além de simples é completo? Vamos lá:

Para criar o Model do nosso Administrador do sistema, rode:

Ruby

rails g model User

1

rails g model User
Vamos instalar o Devise. Rode:

Ruby

rails generate devise:install

1

rails generate devise:install
Agora para criar os campos do devise e adicionar as opções ao Model User, rode:

Ruby

rails generate devise User

1

rails generate devise User
No console, rode:

Ruby

rake db:migrate

1

rake db:migrate
Agora vá até o arquivo “config/initializers/rails_admin.rb”, lá você poderá futuramente editar o seu sistema de administração, mas por hora procure o seguinte trecho de código comentado e o “descomente”:

Ruby

## == Devise == # config.authenticate_with do # warden.authenticate! scope: :user # end # config.current_user_method(&:current_user)

1
2
3
4
5

## == Devise ==
# config.authenticate_with do
# warden.authenticate! scope: :user
# end
# config.current_user_method(&:current_user)
Excelente! Agora no browser, vá até http://localhost:3000/admin e você será redirecionado para a tela de Login.
Maravilha! Já temos a nossa página de login (você pode personalizá-la, nos documentos do Devise você pode aprender como clicando aqui). Como você ainda não tem uma conta, poderá clicar em “Sign Up” e criá-la para
logar. (Você pode aprovar ou não novos cadastros na plataforma, veja como).

\o/ Ótimo, conseguimos criar um método de autenticação usando Devise. Agora você já é capaz de gerenciar as pessoas que acessam sua plataforma e bloquear acessos indevidos.

Para fechar com chave de ouro esse tutorial, vamos agora colocar um tema no nosso Rails Admin para deixá-lo mais apresentável.

Mas antes, uma tarefa simples para você se aprofundar

Você deve ter percebido que onde nós colocamos relações entre os models (has_one) nós acabamos ficando com dois campos visíveis. Por exemplo, nessa imagem abaixo da criação do Aluguel, nós temos duas vezes o campo “carro” e duas vezes o campo “cliente”. Você pode fazer com que apareça apenas uma vez adicionando no arquivo “config/initializers/rails_admin.rb” quais campos do model você gostaria que aparecessem. Para saber como fazer isso clique aqui.

Instalando o Template

Já estamos com nosso site pronto e funcional, mas é claro que adicionar novas funcionalidades nele está nas suas mãos (se precisar de dicas, mande-nos uma mensagem pelo Facebook). Com base no que aprendemos até aqui, já é possível criar um sistema administrativo rapidamente e impressionar aquele seu chefe que vive te apressando ou finalmente criar um admin de qualidade pra sua Startup. 🙂

Vamos Instalar!

Primeiro, adicione a seguinte linha em “config/application.rb” após Bundler.required

Ruby

ENV['RAILS_ADMIN_THEME'] = 'rollincode'

1

ENV['RAILS_ADMIN_THEME'] = 'rollincode'
Agora, rode os seguintes comandos:

Ruby

rm -rf tmp/cache/assets/development/

1

rm -rf tmp/cache/assets/development/

* Se o tema não funcionar, rode esse comando antes:

Ruby

rake assets:clean && rake assets:precompile

1

rake assets:clean && rake assets:precompile

Finalmente o último passo! Crie o seguinte arquivo (“app/assets/javascripts/rails_admin/custom/ui.js”) e cole o código abaixo nele:

$(document).on('ready pjax:success', function() {
  handleActiveBase();
  function handleActiveBase() {
    $('.sub-menu').each(function () {
      if ($(this).hasClass('active')) {
        $(this).parent().prev().addClass('active');
        $(this).parent().prev().addClass('open');
        $(this).parent().slideDown();
      }
    });
  }
});

$(function () {
  var width = $('.nav-stacked').width();
  $('.navbar-header').width(width);

  var array_menu = [];
  var lvl_1 = null;
  var count = 0;

  $('.sidebar-nav li').each(function (index, item) {
    if ($(item).hasClass('dropdown-header')) {
      lvl_1 = count++;
      array_menu[lvl_1] = []
    } else {
      $(item).addClass('sub-menu sub-menu-' + lvl_1);
    }
  });

  for (var i = 0; i &lt;= array_menu.length; i++) {
    $('.sub-menu-' + i).wrapAll("

$(document).on('ready pjax:success', function() {

handleActiveBase();

function handleActiveBase() {

$('.sub-menu').each(function () {

if ($(this).hasClass('active')) {

$(this).parent().prev().addClass('active');

$(this).parent().prev().addClass('open');

$(this).parent().slideDown();

}

});

}

});

$(function () {

var width = $('.nav-stacked').width();

$('.navbar-header').width(width);

var array_menu = [];

var lvl_1 = null;

var count = 0;

$('.sidebar-nav li').each(function (index, item) {

if ($(item).hasClass('dropdown-header')) {

lvl_1 = count++;

array_menu[lvl_1] = []

} else {

$(item).addClass('sub-menu sub-menu-' + lvl_1);

}

});

for (var i = 0; i <= array_menu.length; i++) {

$('.sub-menu-' + i).wrapAll("

");
  }

  $('.sub-menu-container').hide();

  handleActiveBase();
  function handleActiveBase() {
    $('.sub-menu').each(function () {
      if ($(this).hasClass('active')) {
        $(this).parent().prev().addClass('active');
        $(this).parent().slideDown();
      }
    });
  }

  $('.dropdown-header').bind('click', function () {
    $('.dropdown-header').removeClass('open');
    $(this).addClass('open');

    $('.dropdown-header').removeClass('active');
    $('.sub-menu-container').stop().slideUp();
    $(this).toggleClass('active');
    $(this).next('.sub-menu-container').stop().slideDown();
  });
});

");

}

$('.sub-menu-container').hide();

handleActiveBase();

function handleActiveBase() {

$('.sub-menu').each(function () {

if ($(this).hasClass('active')) {

$(this).parent().prev().addClass('active');

$(this).parent().slideDown();

}

});

}

$('.dropdown-header').bind('click', function () {

$('.dropdown-header').removeClass('open');

$(this).addClass('open');

$('.dropdown-header').removeClass('active');

$('.sub-menu-container').stop().slideUp();

$(this).toggleClass('active');

$(this).next('.sub-menu-container').stop().slideDown();

});

Agora é só rodar o Rails s e ver como seu admin ficou bonito 🙂

12 formas de vencer o bloqueio criativo e escrever textos memoráveis (e 6 dicas extras)

Não perca nenhum conteúdo

Receba nosso resumo semanal com os novos posts, cursos, talks e vagas o/

Conclusão e indicações

Obrigado por seguir esse tutorial até aqui \o/, esperamos que ele tenha o ajudado a criar sistemas administrativos de maneira simples usando Ruby On Rails + Rails Admin.

O Rails Admin é bem útil e existem mais opções dentro dele que podem ser exploradas. Para saber mais, dê uma olhada no Wiki dele nesse link.

Caso queira acessar o código completo do que fizemos aqui para referência, acesse pelo GitHub clicando aqui.

Estamos trabalhando bastante para criar conteúdos de qualidade e em Português então, se você gostou desse e dos outros tutoriais, compartilhe-os com seus amigos :), nos ajuda bastante (tem alguns botões de share aí em baixo).

Se você ficou com alguma dúvida, escreva nos comentários ou fale conosco no Facebook. Ficaremos muito felizes em poder ajudá-lo(a).

Se você ainda não se inscreveu, inscreva-se na nossa Newsletter. Toda Sexta-Feira enviamos um resumo com o melhor do que foi produzido na semana para você.

Novamente, muito obrigado pela atenção e pela receptividade que esses conteúdos têm tido na comunidade!

Um grande abraço,

Equipe OneBitCode.

Primeira vez no OneBitCode? Curtiu esse conteúdo?
O OneBitCode tem muito mais para você!

O OneBitCode traz conteúdos de qualidade, e em português, sobre programação com foco em Ruby on Rails e também JavaScript.
Além disso, aqui sempre levamos à você conteúdos valiosos sobre a carreira de programação, dicas sobre currículos, portfólios, perfil profissional, soft skills, enfim, tudo o que você precisa saber para continuar evoluindo como Programador(a)!

Fique por dentro de todos os conteúdos o/

Nossas redes sociais:

📹 • https://youtube.com/Onebitcode [Live todas as terças-feiras às 19h)
💻 • https://linkedin.com/company/onebitcode
🙂 • https://facebook.com/onebitcode
📱 • https://instagram.com/one_bit_code
🐦 • https://twitter.com/onebitcode

Nossos cursos:

🥇 • Programador Full Stack Javascript em 8 Semanas
💎 • Curso Completo de Ruby
⚙ • Minicurso: API Rails 5 Completo
🐞 • Minicurso de Testes para Ruby on Rails com RSpec

Espero que curta nossos conteúdos e sempre que precisar de ajuda, fala com a gente!
Estamos aqui para você 🙂

Bem-vindo à família OneBitCode o/

janeiro 17, 2020