Introdução
Neste Screencast, dividido em 5 partes, nós vamos criar um sistema administrativo completo usando Rails Admin, neste exemplo vamos criar uma plataforma para que uma empresa possa gerenciar as vendas do seus representantes comerciais com dois tipos de usuário: gerente e vendedor. O vendedor poderá entrar com novas vendas, clientes e ver as suas comissões, o gerente poderá criar produtos, descontos e outros usuários.
Também vamos aprender a implementar uma série de features úteis e comuns à maioria dos APPs como autenticação usando Devise, autorização usando CanCanCan, filtro de registros baseado em quem é o dono deles, upload de fotos, customização da aparência e exportação de dados para PDF usando gráficos.
Este é o primeiro tutorial do OneBitCode dividido em vários episódios em vídeos para aumentar o detalhamento e simplificar a explicação, então se você gostar desse formato deixa um feedback ainda em baixo para eu saber e produzir mais conteúdo como este.
Episódios
-
- Criando a estrutura do nosso Projeto + Seed (assistir)
- Autenticação + Autorização + Filtrando os resultados (assistir)
- Incluindo fotos + Atribuição automática de comissão (assistir)
- Configurando o Rails Admin + Customizando a aparência (disponível)
- Exportando para PDF com gráficos + Testando tudo isto (Em breve)
O que vamos Aprender?
-
- Como criar um sistema administrativo
- Como implementar a autenticação
- Como implementar a autorização
- Como filtrar para que os vendedores vejam apenas seus próprios clientes, vendas e comissões
- Adicionando comissão automaticamente
- Como receber fotos no nosso sistema administrativo
- Como customizar a aparência do nosso sistema administrativo (Neste episódio)
- Como exportar para PDF e gerar gráficos
Ingredientes
-
- Ruby on Rails
- Sqlite3 (Mas você pode usar outro Database :))
- Gem: Rails Admin
- Gem: Rails Admin Rollincode
- Gem: Devise
- Gem: CanCanCan
- Gem: Carrierwave
Lista de comandos utilizados no Screencast parte 4 (Siga esses comandos enquanto acompanha o vídeo)
-
- Customizando o menu do Admin e traduzindo ele para Português (Acompanhe o vídeo para entender o contextos dos códigos mostrados a baixo)
Adicionar no arquivo: “/config/initializers/rails_admin.rb”
1config.main_app_name = ["Representantes Comerciais", ""]
Adicionar no arquivo: “/config/initializers/rails_admin.rb”
12345config.navigation_static_links = {'OneBitCode' => 'https://onebitcode.com'}config.navigation_static_label = "Lins Úteis"
Adicionar no arquivo: “/config/environments/development.rb”
123config.i18n.enforce_available_locales = falseconfig.i18n.available_locales = ["pt-BR"]config.i18n.default_locale = :'pt-BR'
Adicionar no arquivo: “/config/environments/production.rb”
123config.i18n.enforce_available_locales = falseconfig.i18n.available_locales = ["pt-BR"]config.i18n.default_locale = :'pt-BR'
Crie um arquivo nesse path “/config/locales/pt-BR.yml” e coloque o seguinte conteúdo dentro dele (Aqui já está inserida também o exemplo da mudança dos nomes dos models):
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144pt-BR:datetime:distance_in_words:x_days:one: "1 dias"other: "%{count} dias"activerecord:models:client:one: Clienteother: Clientesattributes:client:name: "Nome"company_name: "Nome da Empresa"views:admin:home:name: Homepagination:previous: "« Anterior"next: "Próximo »"truncate: "…"misc:search: "Procurar"filter: "Filtrar"refresh: "Atualizar"show_all: "Mostrar tudo"add_filter: "Novo Filtro..."bulk_menu_title: "Itens selecionados..."remove: "Remover"add_new: "Criar Novo"chosen: "%{name} escolhido"chose_all: "Escolher tudo"clear_all: "Limpar tudo"up: "Cima"down: "Baixo"navigation: "Navegação"log_out: "Terminar Sessão"ago: "atrás"flash:successful: "%{name} %{action} com sucesso"error: "%{name} %{action} sem sucesso"noaction: "Nenhuma ação executada"model_not_found: "Modelo '%{model}' não encontrado "object_not_found: "%{model} com identificador '%{id}' não encontrado"table_headers:model_name: "Nome do modelo"last_used: "Última vez usado em"last_created: "Última vez criado em"records: "Registros"username: "Usuário"changes: "Alterações"created_at: "Data/Hora"item: "Item"message: "Mensagem"actions:dashboard:title: "Administração do Site"menu: "Dashboard"breadcrumb: "Dashboard"index:title: "Lista de %{model_label_plural}"menu: "Lista"breadcrumb: "%{model_label_plural}"show:title: "Detalhes para %{model_label} '%{object_label}'"menu: "Mostrar"breadcrumb: "%{object_label}"show_in_app:menu: "Mostrar na aplicação"new:title: "Novo %{model_label}"menu: "Criar novo"breadcrumb: "Novo"link: "Criar um novo %{model_label}"done: "criado"edit:title: "Editar %{model_label} '%{object_label}'"menu: "Editar"breadcrumb: "Editar"link: "Editar este %{model_label}"done: "atualizado"delete:title: "Remover %{model_label} '%{object_label}'"menu: "Remover"breadcrumb: "Remover"link: "Remover '%{object_label}'"done: "removido"bulk_delete:title: "Remover %{model_label_plural}"menu: "Remover vários"breadcrumb: "Remover vários"bulk_link: "Remover selecionados %{model_label_plural}"export:title: "Exportar %{model_label}"menu: "Exportar"breadcrumb: "Exportar"link: "Exportar %{model_label_plural} encontrados"bulk_link: "Exportar %{model_label_plural} selecionados"done: "exportados"history_index:title: "Histórico para %{model_label_plural}"menu: "Histórico"breadcrumb: "Histórico"history_show:title: "Histórico para %{model_label} '%{object_label}'"menu: "Histórico"breadcrumb: "Histórico"form:cancel: "Cancelar"basic_info: "Informação Básica"required: "Obrigatórios"optional: "Opcional"one_char: "caracter"char_length_up_to: "comprimento até"char_length_of: "comprimento de"save: "Gravar"save_and_add_another: "Gravar e criar outro"save_and_edit: "Gravar e editar"all_of_the_following_related_items_will_be_deleted: "? Os seguintes item serão apagados ou deixados orfãos:"are_you_sure_you_want_to_delete_the_object: "Tem a certeza que quer apagar este %{model_name}"confirmation: "Sim, tenho a certeza"delete_confirmation: "Confirmar apagar"bulk_delete: "Os seguintes objetos serão apagados, o que pode apagar ou deixar orfãos as dependências relacionadas"export:confirmation: "Exportar para %{name}"select: "Selecionar campos para exportar"fields_from: "Campos de %{name}"fields_from_associated: "Campos associados com %{name}"display: "Mostrar %{name}: %{type}"options_for: "Opções para %{name}"empty_value_for_associated_objects: ""click_to_reverse_selection: 'Click para inverter selecção'csv:header_for_root_methods: "%{name}" # 'model' is availableheader_for_association_methods: "%{name} [%{association}]"encoding_to: "Codificar para"encoding_to_help: "Escolha a codificação. Deixe em branco para manter a codificação original: (%{name})"skip_header: "Sem cabeçalho"skip_header_help: "Não gerar cabeçalhos para (Campos sem cabeçalho)"default_col_sep: ","col_sep: "Separador de colunas"col_sep_help: "Deixar em branco para usar omissão ('%{value}')" # value is default_col_sep
Crie um arquivo nesse path “/config/locales/devise.pt-BR.yml” e coloque o seguinte conteúdo dentro dele:
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859pt-BR:devise:confirmations:confirmed: "Sua conta foi confirmada com sucesso. Você está logado."send_instructions: "Dentro de minutos, você receberá um e-mail com instruções para a confirmação da sua conta."send_paranoid_instructions: "Se o seu endereço de e-mail estiver cadastrado, você receberá uma mensagem com instruções para confirmação da sua conta."failure:already_authenticated: "Você já está logado."inactive: "Sua conta ainda não foi ativada."invalid: "%{authentication_keys} ou senha inválida."locked: "Sua conta está bloqueada."last_attempt: "Você tem mais uma tentativa antes de bloquear sua conta."not_found_in_database: "%{authentication_keys} ou senha inválida."timeout: "Sua sessão expirou, por favor, efetue login novamente para continuar."unauthenticated: "Para continuar, efetue login ou registre-se."unconfirmed: "Antes de continuar, confirme a sua conta."mailer:confirmation_instructions:subject: "Instruções de confirmação"reset_password_instructions:subject: "Instruções de troca de senha"unlock_instructions:subject: "Instruções de desbloqueio"omniauth_callbacks:failure: "Não foi possível autenticá-lo como %{kind} porque %{reason}."success: "Autenticado com sucesso com uma conta de %{kind}."passwords:no_token: "Você só pode acessar essa página através de um e-mail de troca de senha. Se já estiver acessando por um e-mail, verifique se a URL fornecida está completa."send_instructions: "Dentro de minutos, você receberá um e-mail com instruções para a troca da sua senha."send_paranoid_instructions: "Se o seu endereço de e-mail estiver cadastrado, você receberá um link de recuperação da senha via e-mail."updated: "Sua senha foi alterada com sucesso. Você está logado."updated_not_active: "Sua senha foi alterada com sucesso."registrations:destroyed: "Sua conta foi cancelada com sucesso. Esperamos vê-lo novamente em breve."signed_up: "Login efetuado com sucesso. Se não foi autorizado, a confirmação será enviada por e-mail."signed_up_but_inactive: "Você foi cadastrado com sucesso. No entanto, não foi possível efetuar login, pois sua conta não foi ativada."signed_up_but_locked: "Você foi cadastrado com sucesso. No entanto, não foi possível efetuar login, pois sua conta está bloqueada."signed_up_but_unconfirmed: "Uma mensagem com um link de confirmação foi enviada para o seu endereço de e-mail. Por favor, abra o link para confirmar a sua conta."update_needs_confirmation: "Você atualizou a sua conta com sucesso, mas o seu novo endereço de e-mail precisa ser confirmado. Por favor, acesse-o e clique no link de confirmação que enviamos."updated: "Sua conta foi atualizada com sucesso."sessions:signed_in: "Login efetuado com sucesso!"signed_out: "Saiu com sucesso."already_signed_out: "Saiu com sucesso."unlocks:send_instructions: "Dentro de minutos, você receberá um email com instruções para o desbloqueio da sua conta."send_paranoid_instructions: "Se sua conta existir, você receberá um e-mail com instruções para desbloqueá-la em alguns minutos."unlocked: "Sua conta foi desbloqueada com sucesso. Efetue login para continuar."errors:messages:already_confirmed: "já foi confirmado"confirmation_period_expired: "precisa ser confirmada em até %{period}, por favor, solicite uma nova"expired: "expirou, por favor, solicite uma nova"not_found: "não encontrado"not_locked: "não foi bloqueado"not_saved:one: "Não foi possível salvar %{resource}: 1 erro"other: "Não foi possível salvar %{resource}: %{count} erros."
Adicionar no arquivo: “/config/initializers/rails_admin.rb”
123config.model Sale donavigation_icon 'fa fa-money'end
Adicionar no arquivo: “/config/initializers/rails_admin.rb”
12345678910111213141516171819202122232425config.model Discount doparent Productendconfig.model Sale doparent Userweight -2endconfig.model Comission doparent Userweight -1endconfig.model Client doparent Userendconfig.model ProductQuantity dovisible falseendconfig.model Address dovisible falseend - Customizando a aparência do nosso Admin usando uma Gem:Inclua no seu Gemfile:
1gem 'rails_admin_rollincode', '~> 1.0'
Rodar no console:
1bundle
Adicionar ao arquivo “/config/application.rb”
1ENV['RAILS_ADMIN_THEME'] = 'rollincode'
Rodar no console:
1rake assets:clean && rake assets:precompile
Crie o arquivo nesse path “/app/assets/javascripts/rails_admin/custom/ui.js” e coloque o seguinte conteúdo nele:
1234567891011121314151617181920212223242526272829303132$(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("12345678910111213141516171819202122232425");}$('.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 para customizar a Gem que usamos para dar a aparência do nosso Admin, siga os passos:Fora do seu projeto no console, rode:
1git clone git@github.com:rollincode/rails_admin_theme.gitDentro da pasta do projeto que você baixou substitua o conteúdo do arquivo desse path “vendor/assets/stylesheets/rails_admin/themes/rollincode/variables.scss” pelo conteúdo a báixo:
1234$primary: #B4B2AE;$secondary: #E87162;$black: #5F5E5D;$background: #F2EEEA;Crie um repositório vazio no Github ou Bitbucket para receber a nossa Gem, depois rode os seguintes comandos para subir nosso projeto para lá:
1234git add .git commit -m 'My customized version os colors'git remote set-url origin URL_GIT_DO_SEU_REPOSITÓRIOgit push origin masterAgora de volta ao seu Projeto Admin, no seu Gemfile altere a gem “rails_admin_rollincode” normal, pela versão que aponta para nosso repositório do Git como no exemplo a baixo:
1gem 'rails_admin_rollincode', :git => 'URL_GIT_DO_SEU_REPOSITÓRIO'*Lembrando novamente que vocẽ deve realizar esses comandos acompanhando o vídeo para não perder o contexto e entender o que está acontecendo 🙂
- Customizando o menu do Admin e traduzindo ele para Português (Acompanhe o vídeo para entender o contextos dos códigos mostrados a baixo)
Não perca nenhum conteúdo
Receba nosso resumo semanal com os novos posts, cursos, talks e vagas o/
Conclusão – Parte 4
Nesta parte nós customizamos completamente nosso sistema e demos a ele uma aparência mais moderna e elegante. Primeiro nós customizamos o menu e também realizamos a tradução do nosso Admin para Português e depois nós alteramos a aparência do admin usando uma Gem externa e para finalizar nós baixamos o código dessa Gem, alteramos algumas coisas, subimos ela para um repositório nosso no Github e fizemos o nosso Admin usar a Gem de customização que alteramos.
Aprendemos muitos conceitos sobre Rails Admin mas também aprendemos muitos conceitos sobre o Rails em si, então assista essa aula com calma e siga o passo a passo 🙂
Veja as partes anteriores da série:
Você pode ver o código completo acessando o projeto no Github clicando aqui e escolhendo a branch “Part4”, aproveita e me segue lá também 🙂
O último episódio da série sairá nos próximos dias então não se esqueça de se cadastrar no canal do Youtube e habilitar as notificações.
Muito Obrigado por acompanhar este Blog!
Sua presença aqui é uma honra para mim,
Abraço,
Leonardo Scorza.
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:
📹 • social dating sites for young adults [Live todas as terças-feiras às 19h)
💻 • senior gay bdsm dating
🙂 • 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/
