Aprenda a criar filtros (e buscas) otimizados com as gems Ransack e Select2 no Ruby on Rails de uma forma fácil, ágil, e direto ao ponto!
Você pode consultar a documentação das gems nos links abaixo:
Sem mais enrolação, bora lá!
Criação do Projeto
Dependências:
- Ruby
- Rails
- Algum banco de dados (SQLite, PostgreSQL ou MySQL)
Passo a passo
Preparando o Projeto
1 – Gere um projeto com o seguinte comando:
|
1 |
rails new projeto-ransack |
2 – Entre no projeto criado:
|
1 |
cd projeto-ransack |
3 – Rode o seguinte Scaffold no terminal:
|
1 |
rails g scaffold people name:string about:string |
4 – Rode as migrations:
|
1 |
rake db:migrate |
Buscando com o Ransack
1 – Coloque no seu Gemfile:
|
1 |
gem 'ransack' |
2 – Execute o bundle no seu projeto:
|
1 |
bundle install |
3 – Cole no seu config/routes.rb o seguinte código:
|
1 2 3 4 |
Rails.application.routes.draw do root 'people#index' resources :people end |
4 – Rode o projeto:
|
1 |
rails s |
5 – Acessando o localhost:3000, seu projeto deve parecer com a seguinte tela:
6 – Clique em New Person e adicione alguns registros de teste:
7 – Após inserir esses registros, seu localhost:3000 deve parecer com a seguinte tela:
Agora vamos adicionar o Ransack \o/
1 – Em seu controller people_controller.rb, substitua o método Index pelo seguinte código:
|
1 2 3 4 |
def index @q = Person.ransack(params[:q]) @people = @q.result(distinct: true) end |
2 – Em sua view people/index.html.erb, cole o seguinte código acima do <table>:
|
1 2 3 4 5 |
<%= search_form_for @q do |f| %> <%= f.label :name %> <%= f.collection_select :name_eq, Person.all, :id, :name, {} %> <%= f.submit %> <% end %> |
3 – Sua view deve ficar da seguinte forma:
|
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 |
<p id="notice"><%= notice %></p> <h1>People</h1> <%= search_form_for @q do |f| %> <%= f.label :name %> <%= f.collection_select :name_eq, Person.all, :name, :name, {include_blank: 'Selecione um nome'} %> <%= f.submit %> <% end %> <table> <thead> <tr> <th>Name</th> <th>About</th> <th colspan="3"></th> </tr> </thead>9 <tbody> <% @people.each do |person| %> <tr> <td><%= person.name %></td> <td><%= person.about %></td> <td><%= link_to 'Show', person %></td> <td><%= link_to 'Edit', edit_person_path(person) %></td> <td><%= link_to 'Destroy', person, method: :delete, data: { confirm: 'Are you sure?' } %></td> </tr> <% end %> </tbody> </table> <br> <%= link_to 'New Person', new_person_path %> |
4 – É isso!!! Ao abrir o projeto no navegador, o campo de pesquisa estará filtrando os objetos da tabela Person do banco de dados.
Facilitando com o Select2
1 – Quando você tem poucos records, fica confortável a busca nesse modo. Mas quando se tem um banco de dados muito populado, precisamos otimizar esse buscador. Para isso, o select2 consegue nos servir muito bem!!
2 – Para começar, cole o seguinte código no seu Gemfile:
|
1 2 |
gem "select2-rails" gem "jquery-rails" |
3 – Rode o bundle, executando o seguinte código no terminal:
|
1 |
bundle install |
4 – Dará o seguinte erro:
indian christian dating sites
5 – Rode o seguinte comando:
|
1 |
bundle update |
6 – E rode o bundle novamente com:
|
1 |
bundle install |
7 – Execute o projeto novamente!!
8 – Substitua o código do app/assets/javascripts/application.js pelo seguinte:
|
1 2 3 4 5 6 7 8 9 10 |
//= require jquery //= require rails-ujs //= require activestorage //= require turbolinks //= require select2 //= require_tree . $(document).ready(function() { $( "#q_name_eq" ).select2(); }); |
9 – Agora substitua o código do app/assets/stylesheets/application.css pelo seguinte:
|
1 2 3 4 5 |
/* *= require select2 *= require_tree . *= require_self */ |
10 – Na sua view people/index.html.erb, modifique o collection_select, deixando-o como no código abaixo:
|
1 |
<%= f.collection_select :name_eq, Person.all, :name, :name, {}, style: 'width: 200px;' %> |
11 – Pronto!!! Agora você tem um buscador altamente eficiente, interativo e funcional para pequenas, médias e grandes aplicações!! \o/
dating latino men white girl
Conclusão
Criar filtros/buscadores é visto como uma tarefa complexa, podendo trazer bugs e te fazer perder algumas horinhas. O Ransack veio para desmistificar isso e ainda conseguimos potencializá-lo com o Select2.
Se você curtiu o artigo deixe um comentário abaixo para nos incentivar,
Obrigado o/
Não perca nenhum conteúdo
Receba nosso resumo semanal com os novos posts, cursos, talks e vagas o/
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/
Parabéns pelo artigo. Conteúdo muito bom e transmitido de forma clara. Continue aassim 😀
Muito 10
Fiquei com uma dúvida. Esse Person.all aqui não daria uma sobrecarga na memória caso tenha 1 milhão de pessoas?
<%= search_form_for @q do |f| %>
<%= f.label :name %>
<%= f.collection_select :name_eq, Person.all, :name, :name, {include_blank: ‘Selecione um nome’} %>
<%= f.submit %>
<% end %>
Deu até vontade de aprender Ruby! =)
Este sitio es lo máximo, los sigo desde México. Saludos, muy buen artículo
Muito obrigado por estar com a gente Fabián 🙂
Deixa eu ver se eu entendi, é um live-search com 5 linhas de código ?