Criando um sistema administrativo com Rails Admin em 25 minutos!

rails admin
O que vamos fazer e porque Rails Admin?
Nesse tutorial nós vamos criar 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 aonde é 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 você 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

Eu gostaria de agradecer a todos os leitores pela receptividade que o Blog está tendo. Cada feedback que eu recebi nos dois primeiros Posts está  servindo  enormemente de incentivo para que eu continue a produzir conteúdos de valor e melhore ainda mais a qualidade do 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
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 vai estar no GitHub completo caso você queira ver o código acesse esse link!  Aproveite e me segue no GitHub 🙂

Mãos a Obra
Primeiro vamos criar o Projeto e instalar as Gems
  1. Para instalar usando Rails 5, rode no terminal:
    1
    
    gem install rails
  2. Verifique se a versão do Rails é realmente a 5 rodando:
    1
    
    rails -v
  3. Se tudo estiver certo, deve aparecer que a versão é a 5 no console.
  4. Rode no terminal para criar o seu projeto
    1
    
    rails new car_rent_admin --database=postgresql
  5. Agora vá até o seu Gemfile e adicione as seguintes gems:
    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).

  6. Agora Rode o Bundle no console:
    1
    
    bundle install
  7. Para instalar o Rails Admin rode no console:
    1
    
    rails g rails_admin:install
  8. Quando você rodar o comando, o Rails Admin vai perguntar em qual rota que você gostaria de instalar, neste tutorial eu vou deixar em /admin como no default, mas você pode escolher outra rota ou até mesmo instalar na home.
    1
    
    Where do you want to mount rails_admin? Press  for [admin]
  9. 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,  olhe essa referência!
  10. Depois de você configurar o seu arquivo “db/database.yml” rode no console:
    rake db:create
  11. Agora para ver o resultado rode no console:
    1
    
    rails s

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

Rails 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. Vamos criar apenas os Models, não é necessário a criação de Controllers ou mesmo rotas quando se usa o Rails Admin.
Vamos criar os seguintes Models:

  • Carro: Armazenar os veiculos da empresa.
  • Cliente: Pessoas que vão alugar 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 armazena o que ocorreu. (exp: a porta foi amassada e o cliente deve pagar R$300).
  • User: A pessoa que vai usar o sistema de administração. (vamos gerar com o devise)
Vamos Criar:
    1.  Para criar o Model Carro, rode no console:
      1
      
      rails g model carro marca:string tipo:string disponivel:boolean
    2. Agora para o Model Cliente, rode:
      1
      
      rails g model cliente nome:string documento:string telefone:string
    3. Para o Aluguel, rode:
      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:
      1
      
      "t.decimal :preco"

      por:

      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:
      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:
      1
      
      "t.decimal :preco"

      por:

      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:
      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:
        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:
        1
        
        belongs_to :aluguel
      • Para finalizar inclua a seguinte linha no model “Sinistro”.
        1
        
        has_one :aluguel

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

Rode:

1
rails s

Acesse no browser http://localhost:3000/admin e veja como está seu site administrativo agora com as novas tabelas.
tutorial rails admin
\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ê vai 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á:

  1. Para criar o Model do nosso  Administrador do sistema, rode:
    1
    
    rails g model User
  2. Vamos instalar o Devise, rode:
    1
    
    rails generate devise:install
  3. Agora para criar os campos do devise e adicionar as opções ao Model User, rode:
    1
    
    rails generate devise User
  4. No console, rode:
    1
    
    rake db:migrate
  5. 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 “descomente” ele:
    1
    2
    3
    4
    5
    
    ## == Devise ==
    # config.authenticate_with do
    # warden.authenticate! scope: :user
    # end
    # config.current_user_method(&:current_user)
  6. Excelente, agora no browser vá até http://localhost:3000/admin e você vai ser redirecionado para a tela de Login.
    captura-de-tela-de-2016-09-16-18-30-40
  7. Maravilha, já temos a nossa página de login (você pode personalizar ela, nos documentos do Devise você pode aprender como, clique aqui), como você ainda não tem uma conta você pode clicar em “Sign Up” e criar a sua conta 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ê pode ter percebido que aonde 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.

captura-de-tela-de-2016-09-16-19-07-56

 

Instalando o Template

Já estamos com nosso site pronto e funcional, mas é claro que adicionar novas funcionalidades nele está nas suas mãos (mas se precisar de dicas, é só falar comigo pelo Facebook). Com a base no que aprendemos até aqui já dá pra você 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!
  1. Primeiro, adicione a seguinte linha em “config/application.rb” após Bundler.required
    1
    
    ENV['RAILS_ADMIN_THEME'] = 'rollincode'
  2. Agora, rode os seguintes comandos:
    1
    
    rm -rf tmp/cache/assets/development/

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

    1
    
    rake assets:clean && rake assets:precompile
  3. Finalmente o último passo, crie o seguinte arquivo (“app/assets/javascripts/rails_admin/custom/ui.js”) e cole o código abaixo nele:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    
    $(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("<div class='sub-menu-container' />");
     }
     
     $('.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();
     });
    });

     

  4. Agora é só rodar o Rails s e ver como seu admin ficou bonito 🙂
Conclusão e indicações

Obrigado por seguir esse tutorial até aqui \o/, espero que ele te ajude a criar sistemas Administrativos de maneira simples usando Ruby On Rails + Rails Admin.
O Rails Admin é bem legal e existem mais opções  dentro dele que podem ser exploradas, para saber mais dê uma olhada no Wiki deles nesse link.
Eu já fiz um sistema de gerenciamento de estoque para a Trust Filmes usando o Rails Admin e o resultado ficou incrível, então dá pra você fazer coisas bem legais com essa Gem.

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

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

Se você ficou com alguma dúvida, escreve aí nos comentários ou fala comigo no Facebook. Eu ficarei muito feliz em poder te ajudar.

Se você ainda não se inscreveu, se inscreva na nossa Newsletter aqui na lateral direita e em cima, toda Sexta-Feira eu envio um resumo com o melhor que eu produzi na semana para você.

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

Um grande abraço
Leonardo Scorza

Deixe seu Feedback!

Comentários