/ /

ODM para Mongoid en Ruby

Docs Home

Librerías de clientes

Ruby

ODM para Mongoid en Ruby

Docs Home

Librerías de clientes

Ruby

ODM para Mongoid en Ruby

Integra Mongoid con Ruby on Rails

Overview

En esta guía, puedes aprender cómo crear una aplicación web en Ruby que utilice Ruby on Rails 8 como el marco web. Ruby on Rails es un framework de aplicaciones web full stack para Ruby que sigue el patrón de arquitectura de modelo-vista-controlador (MVC) para construir aplicaciones.

La aplicación en este tutorial consta de las siguientes capas:

Capa de base de datos: MongoDB proporciona almacenamiento y recuperación de datos.
Capa de aplicación: Rails gestiona las solicitudes HTTP, el enrutamiento y el procesamiento lógico.
Capa de presentación: Las plantillas de Ruby embebido y CSS renderizan los datos del restaurante en páginas web.

Tip

Para aprender a integrar Mongoid en una aplicación existente, consulte Guía para Agregar Mongoid a una Aplicación Existente.

¿Por qué usar MongoDB con Ruby y Rails?

Al integrar MongoDB con Ruby y Rails, puedes usar el Mapeador Objeto-Documento (ODM, por sus siglas en inglés) de Mongoid para interactuar con el modelo orientado a documentos de MongoDB. Mongoid reemplaza el ORM Active Record por defecto de Rails, y puedes aprovechar la flexibilidad de MongoDB en el esquema utilizando Rails para controlar fácilmente cómo se modelan y muestran los datos.

Tutorial de inicio rápido

Este tutorial te enseña a compilar una aplicación web que usa Ruby y Rails. La aplicación accede a una muestra de datos de restaurantes, hace query los datos y muestra los resultados en un sitio hosteado localmente. El tutorial también incluye instrucciones para conectarse a un clúster de MongoDB alojado en MongoDB Atlas, acceder y mostrar datos de su base de datos.

Tip

Si prefiere conectarse a MongoDB mediante el driver Ruby sin Mongoid, siga el Empieza con el controlador Ruby tutorial.

Configurar el proyecto

Sigue los pasos de esta sección para instalar las dependencias del proyecto, crear un clúster de Atlas y configurar la estructura de la aplicación.

Verificar los prerrequisitos.

Antes de crear la aplicación Quick Start, instala el siguiente software en tu entorno de desarrollo:

Requisito previo	notas
Ruby	Usa la versión 3.1 o posterior.
RubyGems	Este es un gestor de paquetes para Ruby.
Editor de código	Este tutorial utiliza Visual Studio Code con la extensión Ruby, pero puedes utilizar el editor de tu preferencia.
Aplicación de terminal y shell	Para usuarios de macOS, usen Terminal o una aplicación similar. Para usuarios de Windows, usen PowerShell.

Crea un clúster de MongoDB Atlas.

MongoDB Atlas es un servicio de base de datos en la nube completamente gestionado que aloja tus implementaciones de MongoDB. Si no tienes una implementación de MongoDB, puedes crear un clúster de MongoDB de forma gratuita (no se requiere tarjeta de crédito) completando el tutorial Introducción a MongoDB. El tutorial Get Started de MongoDB también demuestra cómo cargar conjuntos de datos de muestra en tu clúster, incluido el sample_restaurants base de datos que se emplea en este tutorial.

Para conectarte a tu clúster de MongoDB, debes usar un URI de conexión. Para saber cómo recuperar tu URI de conexión, consulta la sección Agrega tu cadena de conexión del tutorial Primeros pasos de MongoDB.

Importante

Guarda tu cadena de conexión en una ubicación segura.

Especifique la base de datos de destino en su cadena de conexión.

Al conectarse a un clúster de Atlas, se debe especificar la base de datos con la que se desea interactuar como la base de datos predeterminada en la cadena de conexión. Debe añadir el nombre de la base de datos a su cadena de conexión después del nombre de host y antes de las opciones de conexión.

El siguiente ejemplo especifica la base de datos de destino sample_restaurants en una cadena de conexión de muestra:

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

Instala Rails.

Instale la gema rails, que proporciona una interfaz de línea de comandos para crear una estructura de aplicación básica y componentes de aplicación.

Ejecuta el siguiente comando para instalar rails:

gem install rails

Crea una aplicación Rails con andamiaje por defecto.

Ejecute los siguientes comandos para crear un nuevo directorio de aplicación Rails con el andamiaje predeterminado e ingresar a la aplicación:

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

El indicador --skip-active-record indica a Rails que no agregue Active Record como dependencia. No necesita esta dependencia porque usará Mongoid en su lugar.

Configura las dependencias de tu proyecto.

Navega al directorio my-rails-app y ejecuta los siguientes comandos para instalar Mongoid y las dependencias:

bundle add mongoid
bundle install

Generar la configuración de Mongoid.

Ejecuta el siguiente comando para generar el archivo de configuración de Mongoid:

rails generate mongoid:config

Este comando crea un archivo config/mongoid.yml para configurar la conexión con tu implementación de MongoDB

Configurar el Back-End

Después de configurar la estructura y las dependencias del proyecto, siga los pasos de esta sección para conectarse a MongoDB y configurar sus modelos de datos.

Configure tu conexión a MongoDB.

Navega al archivo config/mongoid.yml y reemplaza su contenido con el siguiente código:

development:
  clients:
    default:
      uri: <connection_URI>

Reemplace el marcador de posición <connection_URI> con el URI de conexión que guardó en un paso anterior. Verifique que el URI incluya el nombre de la base de datos sample_restaurants.

Cree un modelo de datos.

Genera un modelo Restaurant con campos name, cuisine y borough ejecutando el siguiente comando:

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

El modelo Restaurant representa la colección restaurants en la base de datos sample_restaurants. El comando anterior también crea los archivos del controlador y de la vista para el modelo Restaurant. Puedes encontrar los directorios que contienen estos archivos en el directorio app de tu aplicación.

Configura rutas y agrega acciones personalizadas.

Navega al archivo config/routes.rb y reemplaza su contenido con el siguiente 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

Luego, agregue el siguiente método al archivo 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 busca restaurantes en Queens que tengan "Moon" en su nombre mediante una coincidencia de expresión regular que no distingue entre mayúsculas y minúsculas.

Configurar el front-end

Después de configurar la capa de datos, sigue los pasos de esta sección para crear plantillas y estilos para la interfaz de usuario.

Actualiza el diseño principal.

Navega al archivo app/views/layouts/application.html.erb y reemplaza su contenido con el siguiente código:

aplicación/views/layouts/aplicación.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>

Este archivo es el contenedor principal de la plantilla para todas las páginas de la aplicación. Incluye enlaces de navegación, títulos de página y las etiquetas auxiliares de Rails necesarias para la seguridad y la carga de recursos.

Crear la vista de lista de restaurantes.

Navega al archivo app/views/restaurants/index.html.erb y reemplaza su contenido con el siguiente código:

aplicación/vistas/restaurantes/index.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 archivo de vista muestra todos los restaurantes en un diseño de cuadrícula e incluye botones de acción para ver, editar y eliminar cada restaurante.

Crear la vista filtrada.

Cree un nuevo archivo llamado app/views/restaurants/browse.html.erb y pegue el siguiente código:

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 archivo de vista muestra los resultados filtrados de restaurantes, mostrando solo restaurantes de la acción del controlador personalizado browse.

Add CSS styling.

Agregue el siguiente código al archivo app/assets/stylesheets/application.css:

aplicación/recursos/hojas de estilo/application.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 archivo CSS agrega estilos al diseño de cuadrícula del sitio.

Ejecutar la aplicación

Por último, sigue los pasos de esta sección para ejecutar tú aplicación web y explorar los datos del restaurante mediante la interfaz del navegador.

Inicia la aplicación Rails.

Navegue al directorio de su proyecto y ejecute el siguiente comando:

bin/rails s

Si la operación es exitosa, la salida del comando se asemeja al siguiente ejemplo:

=> 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

Abre la aplicación web.

Abre http://127.0.0.1:3000 en tu navegador web. La página de inicio muestra todos los restaurantes en la colección sample_restaurants.restaurants:

La página web que muestra todos los restaurantes

Luego, haga clic en el Browse Filtered botón para ver restaurantes en Queens que tengan "Moon" en su nombre:

La página web que muestra restaurantes filtrados

Explora la funcionalidad CRUD.

Rails proporciona automáticamente la funcionalidad CRUD (Crear, Leer, Actualizar, Eliminar) completa para tus restaurantes. Puedes realizar las siguientes acciones:

Crear: Haz clic en New Restaurant para agregar un nuevo restaurante a la colección restaurants.
Leer:View Haga clic en en cualquier tarjeta de restaurante para ver información detallada.
Actualización: haga clic Edit en en cualquier tarjeta de restaurante para modificar la información del restaurante.
Eliminar: haga Delete clic en en cualquier tarjeta de restaurante para eliminarla de la colección.

¡Felicidades por completar el tutorial de inicio rápido! Después de completar estos pasos, se tiene una aplicación web Ruby y Rails que se conecta a la implementación de MongoDB, ejecuta queries en datos de muestra de restaurantes y muestra los resultados en una interfaz web alojada localmente con capacidades CRUD completas.

Recursos adicionales

Para obtener más información sobre Ruby, Rails, Mongoid y MongoDB, consulta los siguientes recursos:

Documentación deRuby on Rails
Documentación de Ruby Driver
Documentación del lenguaje Ruby

Tip

Otros tutoriales de Framework

Si prefieres usar Sinatra como tu framework web, consulta la guía Integrar Mongoid con Sinatra.

Volver

Overview

Para empezar: Sinatra