/ /

ODM Mongoid em Ruby

Página inicial do Docs

Bibliotecas do cliente

Ruby

ODM Mongoid em Ruby

Página inicial do Docs

Bibliotecas do cliente

Ruby

ODM Mongoid em Ruby

Integrar Mongoid com Ruby on Rails

Visão geral

Neste guia, você aprenderá a criar um aplicativo web Ruby que utiliza Ruby on Rails 8 como framework web. Ruby on Rails é um framework de aplicativo da web de pilha completa para Ruby que segue o padrão de arquitetura modelo-visualização-controlador (MVC) para criar aplicativos.

O aplicativo neste tutorial consiste nas seguintes camadas:

Camada de banco de dados: o MongoDB fornece armazenamento e recuperação de dados.
Camada de aplicativo: o Rails lida com solicitações HTTP, roteamento e processamento lógico.
Camada de apresentação: modelos Ruby incorporados e CSS renderizam dados de restaurantes em páginas da web.

Dica

Para saber como integrar o Mongoid a um aplicação existente, consulte o guia Adicionar Mongoid a um aplicativo existente.

Por que usar MongoDB com Ruby e Rails?

Ao integrar o MongoDB com Ruby e Rails, você pode usar o Object-Document Mapper (ODM) do Mongoid para interagir com o document model flexível do MongoDB. O Mongoid substitui o ORM de registro ativo padrão do Rails, e você pode aproveitar a flexibilidade de esquema do MongoDB enquanto usa o Rails para controlar facilmente como seus dados são modelados e exibidos.

Tutorial de início rápido

Este tutorial mostra como criar um aplicativo da web que utiliza Ruby e Rails. O aplicativo acessa dados de restaurantes de amostra, queries os dados e exibe os resultados em um site hospedado localmente. O tutorial também inclui instruções para se conectar a um cluster MongoDB hospedado no MongoDB Atlas e acessar e exibir dados de seu banco de dados.

Dica

Se você preferir se conectar ao MongoDB usando o driver Ruby sem o Mongoid, siga o tutorial Introdução ao driver Ruby.

Configurar seu projeto

Siga as etapas nesta seção para instalar as dependências do projeto, criar um cluster do Atlas e configurar a estrutura do aplicativo.

Verifique os pré-requisitos.

Antes de criar o aplicativo Quick Start, instale o seguinte software em seu ambiente de desenvolvimento:

Pré-requisitos	Notas
Ruby	Use a versão 3.1 ou posterior.
RubyGems	Este é um gerenciador de pacote para Ruby.
Editor de código	Este tutorial usa Visual Studio Code com a extensão Ruby, mas você pode usar o editor de sua escolha.
Aplicativo de terminal e shell	Para usuários do MacOS, use o Terminal ou um aplicativo semelhante. Para usuários do Windows, use o PowerShell.

Crie um cluster do MongoDB Atlas.

O MongoDB Atlas é um banco de dados em nuvem gerenciado que hospeda suas implantações do MongoDB. Se você não tiver uma implantação do MongoDB, poderá criar um cluster do MongoDB gratuitamente (nenhum cartão de crédito necessário) concluindo o tutorial MongoDB Get Started. O tutorial de Introdução ao MongoDB também demonstra como carregar conjuntos de dados de amostra em seu cluster, incluindo o banco de dados sample_restaurants usado neste tutorial.

Para se conectar ao cluster MongoDB, você deve usar um URI de conexão. Para aprender como recuperar seu URI de conexão, veja a seção Adicionar sua string de conexão do tutorial de Introdução ao MongoDB.

Importante

Salve sua string de conexão em um local seguro.

Especifique o banco de dados de destino em sua string de conexão.

Ao se conectar a um Atlas cluster, você deve especificar o banco de dados com o qual deseja interagir como o banco de dados padrão em sua string de conexão. Você deve adicionar o nome do banco de dados à sua string de conexão após o nome do host e antes das opções de conexão.

O exemplo a seguir especifica o banco de dados de destino sample_restaurants em uma string de conexão de exemplo :

mongodb+srv://user0:pass123@mongo0.example.com/sample_restaurants?retryWrites=true&w=majority

Instalar Trilhos.

Instale a joia rails, que fornece uma interface da linha de comando para criar uma estrutura básica de aplicação e componentes de aplicação .

Execute o seguinte comando para instalar o rails:

gem install rails

Crie um aplicativo Rails com andaime padrão.

Execute os seguintes comandos para criar um novo diretório de aplicação Rails com andaime padrão e inserir o aplicação:

rails new my-rails-app --skip-active-record
cd my-rails-app

O sinalizador --skip-active-record instrui as Rails a não adicionar o Active Record como uma dependência. Você não precisa dessa dependência porque usará o Mongoid em vez disso.

Configure as dependências do seu projeto .

Navegue até o diretório my-rails-app e execute os seguintes comandos para instalar o Mongoid e as dependências:

bundle add mongoid
bundle install

Gere a configuração Mongoide.

Execute o seguinte comando para gerar o arquivo de configuração Mongoid:

rails generate mongoid:config

Este comando cria um arquivo config/mongoid.yml para configurar a conexão com sua implantação do MongoDB

Configurar o back-end

Após configurar a estrutura e as dependências do projeto, siga as etapas desta seção para se conectar ao MongoDB e configurar seus modelos de dados.

Configure sua conexão MongoDB .

Navegue até o arquivo config/mongoid.yml e substitua seu conteúdo pelo seguinte código:

development:
  clients:
    default:
      uri: <connection_URI>

Substitua o espaço reservado <connection_URI> pelo URI de conexão que você salvou em uma etapa anterior. Certifique-se de que o URI inclua o nome do banco de dados sample_restaurants.

Crie um modelo de dados.

Gere um modelo Restaurant com campos name, cuisine e borough executando o seguinte comando:

bin/rails g scaffold Restaurant name:string cuisine:string borough:string

O modelo Restaurant representa a coleção restaurants no banco de dados sample_restaurants . O comando anterior também cria o controlador e arquivos de visualização para o modelo Restaurant. Você pode encontrar os diretórios que contêm esses arquivos no diretório app do seu aplicativo.

Configure rotas e adicione ações personalizadas.

Navegue até o arquivo config/routes.rb e substitua seu conteúdo pelo seguinte código:

config/routes.rb

Rails.application.routes.draw do
  resources :restaurants
  get "browse" => "restaurants#browse"
  # Defines the root path route ("/")
  root "restaurants#index"
end

Em seguida, adicione o seguinte método ao arquivo app/controllers/restaurants_controller.rb:

app/controllers/restaurants_controller.rb

  # GET /browse
  def browse
    @restaurants = Restaurant
      .where(name: /Moon/i).and(borough: "Queens")
  end

Este método faz query de restaurantes no Queins que têm "Moon" em seu nome usando uma correspondência de expressão regular insensível a maiúsculas e minúsculas.

Configurar o front-end

Depois de configurar a camada de dados, siga as etapas desta seção para criar modelos e um estilo para a interface do usuário.

Atualize o layout principal.

Navegue até o arquivo app/views/layouts/application.html.erb e substitua seu conteúdo pelo seguinte código:

app/views/layouts/aplicativo.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "Restaurant Directory" %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>
  <body>
    <div class="container">
      <nav class="navigation">
        <%= link_to "All Restaurants", root_path, class: "nav-link" %>
        <%= link_to "Browse Filtered", browse_path, class: "nav-link" %>
      </nav>
      <%= yield %>
    </div>
  </body>
</html>

Esse arquivo é o principal wrapper do modelo para todas as páginas do seu aplicativo. Ela inclui links de navegação, títulos de páginas e as tags assistente do Rails necessárias para segurança e carregamento de ativos.

Crie a visualização da lista de restaurantes.

Navegue até o arquivo app/views/restaurants/index.html.erb e substitua seu conteúdo pelo seguinte código:

aplicativo/views/restaurants/índice.html.erb

<% content_for :title, "Restaurant Directory" %>
<header>
  <h1>Restaurant Directory</h1>
</header>
<div class="actions-header">
  <h2>All Restaurants</h2>
  <%= link_to "New Restaurant", new_restaurant_path, class: "btn btn-success" %>
</div>
<div class="restaurants-grid">
  <% @restaurants.each do |restaurant| %>
    <div class="restaurant-card">
      <div class="restaurant-name"><%= restaurant.name %></div>
      <div class="restaurant-info">
        <strong>Borough:</strong> <%= restaurant.borough %>
      </div>
      <div class="cuisine-tag"><%= restaurant.cuisine %></div>
      <div class="btn-group">
        <%= link_to "View", restaurant, class: "btn" %>
        <%= link_to "Edit", edit_restaurant_path(restaurant), class: "btn btn-secondary" %>
        <%= link_to "Delete", restaurant_path(restaurant), method: :delete,
                    confirm: "Are you sure?", class: "btn btn-danger" %>
      </div>
    </div>
  <% end %>
</div>

Este arquivo de visualização exibe todos os restaurantes em um layout de grade e inclui botões de ação para visualizar, editar e excluir cada restaurante.

Crie a visualização filtrada.

Crie um novo arquivo chamado app/views/restaurants/browse.html.erb e cole o código a seguir:

app/views/restaurants/browse.html.erb

<% content_for :title, "Browse Restaurants" %>
<header>
<h1>Browse Restaurants</h1>
<div class="subtitle">Restaurants in Queens with "Moon" in the name</div>
</header>
<div class="actions-header">
<h2>Filtered Results</h2>
<div class="controls">
    <%= link_to "New Restaurant", new_restaurant_path, class: "btn btn-success" %>
    <%= link_to "All Restaurants", root_path, class: "btn" %>
</div>
</div>
<div class="restaurants-grid">
<% @restaurants.each do |restaurant| %>
    <div class="restaurant-card">
    <div class="restaurant-name"><%= restaurant.name %></div>
    <div class="restaurant-info">
        <strong>Borough:</strong> <%= restaurant.borough %>
    </div>
    <div class="cuisine-tag"><%= restaurant.cuisine %></div>
    <div class="btn-group">
        <%= link_to "View", restaurant, class: "btn" %>
        <%= link_to "Edit", edit_restaurant_path(restaurant), class: "btn btn-secondary" %>
        <%= link_to "Delete", restaurant_path(restaurant), method: :delete, 
                    confirm: "Are you sure?", class: "btn btn-danger" %>
    </div>
    </div>
<% end %>
</div>

Este arquivo de visualização exibe os resultados do restaurante filtrados, mostrando apenas os restaurantes da ação personalizada do controlador browse .

Add CSS styling.

Adicione o seguinte código ao arquivo app/assets/stylesheets/application.css:

aplicativo/ativos/stylesheets/aplicativo.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #333;
    background: rgb(198, 240, 209);
    min-height: 100vh;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
header {
    text-align: center;
    margin-bottom: 40px;
    color: rgb(0, 0, 0);
}
h1 {
    font-size: 3rem;
    margin-bottom: 10px;
}
.subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
}
.controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}
.btn {
    background: white;
    color: #0d8958;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    display: inline-block;
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    color: #0d8958;
    text-decoration: none;
}
.btn.btn-success {
    background: #0d8958;
    color: white;
}
.btn.btn-success:hover {
    background: #0a6b44;
    color: white;
}
.btn.btn-danger {
    background: #dc3545;
    color: white;
}
.btn.btn-danger:hover {
    background: #c82333;
    color: white;
}
.btn.btn-secondary {
    background: #6c757d;
    color: white;
}
.btn.btn-secondary:hover {
    background: #5a6268;
    color: white;
}
.restaurants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.restaurant-card {
    background: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.restaurant-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.15);
}
.restaurant-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 10px;
}
.restaurant-info {
    margin-bottom: 8px;
}
.restaurant-info strong {
    color: #555;
}
.cuisine-tag {
    display: inline-block;
    background: #0d8958;
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 10px;
}
.btn-group {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}
.btn-group .btn {
    padding: 8px 16px;
    font-size: 0.9rem;
}
.notice {
    background: white;
    color: #0d8958;
    padding: 15px 20px;
    border-radius: 15px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    text-align: center;
    font-weight: 600;
}
.form-container {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    max-width: 600px;
    margin: 0 auto;
}
.form-group {
    margin-bottom: 20px;
}
.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}
.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}
.form-input:focus {
    outline: none;
    border-color: #0d8958;
}
.form-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 25px;
}
.page-header {
    text-align: center;
    margin-bottom: 30px;
}
.actions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.actions-header h1 {
    font-size: 2rem;
    color: #0d8958;
    margin: 0;
}
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    .controls {
        flex-direction: column;
        align-items: center;
    }
    
    .restaurants-grid {
        grid-template-columns: 1fr;
    }
    
    .actions-header {
        flex-direction: column;
        gap: 15px;
    }
    
    .form-actions {
        flex-direction: column;
    }
}

Este arquivo CSS adiciona estilo ao layout de grade do site.

Execute seu aplicativo

Por fim, siga as etapas desta seção para executar seu aplicativo da web e explorar os dados do restaurante usando a interface do navegador.

Inicie o aplicativo Rails.

Navegue até o diretório do projeto e execute o seguinte comando:

bin/rails s

Se for bem-sucedida, a saída do comando será semelhante ao exemplo a seguir:

=> Booting Puma
=> Rails 8.0.1 application starting in development
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 6.4.3 (ruby 3.2.5-p208) ("The Eagle of Durango")
*  Min threads: 3
*  Max threads: 3
*  Environment: development
*          PID: 66973
* Listening on http://127.0.0.1:3000
* Listening on http://[::1]:3000
* Listening on http://127.0.2.2:3000
* Listening on http://127.0.2.3:3000
Use Ctrl-C to stop

Abra o aplicativo da web.

Abra http://127.0.0.1:3000 em seu navegador da web. A página de destino inicial exibe todos os restaurantes na coleção sample_restaurants.restaurants:

A página web que exibe todos os restaurantes

Em seguida, clique no botão Browse Filtered para visualizar os restaurantes no Queins que têm "Moon" em seu nome:

A página web que exibe restaurantes filtrados

Explore a funcionalidade CRUD.

O Rails fornece automaticamente funcionalidade CRUD (Create, Read, Update, Delete) completa para seus restaurantes. Você pode executar as seguintes ações:

Criar: Clique em New Restaurant para adicionar um novo restaurante à coleção restaurants.
Ler: Clique em View em qualquer cartão de restaurante para ver informações detalhadas.
Atualizar: Clique em Edit em qualquer cartão de restaurante para modificar as informações do restaurante.
Excluir: clique em Delete em qualquer cartão de restaurante para removê-lo da coleção.

Parabéns por concluir o tutorial Início rápido! Depois de concluir essas etapas, você terá um aplicativo web Ruby e Rails que se conecta à implantação do MongoDB, executa queries em dados de restaurante de exemplo e exibe os resultados em uma interface web hospedada localmente com funcionalidades completas de CRUD.

Recursos adicionais

Para aprender mais sobre Ruby, Rails, Mongoid e MongoDB, consulte os seguintes recursos:

Dica

Outros tutoriais de estrutura

Se você preferir usar o Sinatra como sua estrutura da Web, consulte o guia Início rápido - Sinatra.

Voltar

Visão geral

Início rápido - Sinatra