/ /

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

Integrar Mongoid con Ruby on Rails

Overview

En esta guía, aprenderá a crear una aplicación web Ruby que utiliza Ruby on Rails 8 como framework web. Ruby on Rails es un framework de aplicaciones web full-stack para Ruby que sigue el patrón de arquitectura modelo-vista-controlador (MVC) para la creación de aplicaciones.

La aplicación de 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: Plantillas Ruby integradas y CSS representan datos del restaurante en páginas web.

Tip

Para aprender a integrar Mongoid en una aplicación existente, consulte Agregar Mongoid a una guía de aplicación existente.

¿Por qué utilizar MongoDB con Ruby y Rails?

Al integrar MongoDB con Ruby y Rails, puede usar el Mapeador de Objetos y Documentos (ODM) de Mongoid para interactuar con el modelo de documentos flexible de MongoDB. Mongoid reemplaza el ORM de Registro Activo predeterminado de Rails, y puede aprovechar la flexibilidad del esquema de MongoDB mientras usa Rails para controlar fácilmente cómo se modelan y muestran sus datos.

Tutorial de inicio rápido

Este tutorial muestra cómo crear una aplicación web con Ruby y Rails. La aplicación accede a datos de muestra de restaurantes, los consulta y muestra los resultados en un sitio web alojado localmente. El tutorial también incluye instrucciones para conectarse a un clúster de MongoDB alojado en MongoDB Atlas y acceder y mostrar datos de su base de datos.

Tip

Si prefiere conectarse a MongoDB utilizando el controlador Ruby sin Mongoid, siga las Comience con el tutorial del controlador Ruby.

Configurar el proyecto

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

Verificar los prerrequisitos.

Antes de crear la aplicación de inicio rápido, instale el siguiente software en su entorno de desarrollo:

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

Crear un clúster de MongoDB Atlas.

MongoDB Atlas es un servicio de base de datos en la nube totalmente administrado que aloja sus implementaciones de MongoDB. Si no tiene una implementación de MongoDB, puede crear un clúster de MongoDB gratis (sin tarjeta de crédito) completando el tutorial de introducción a MongoDB. Este tutorial también muestra cómo cargar conjuntos de datos de muestra en su clúster, incluyendo... sample_restaurants base de datos que se utiliza 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

Guarde su 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, debe especificar la base de datos con la que desea interactuar como predeterminada en la cadena de conexión. Debe agregar el nombre de la base de datos a la 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

Instalar 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.

Ejecute el siguiente comando para instalar rails:

gem install rails

Cree una aplicación Rails con andamiaje predeterminado.

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.

Configure las dependencias de su proyecto.

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

bundle add mongoid
bundle install

Generar la configuración de Mongoid.

Ejecute 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 a su 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 su conexión MongoDB.

Navegue hasta el archivo config/mongoid.yml y reemplace su contenido con el siguiente código:

development:
  clients:
    default:
      uri: <connection_URI>

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

Cree un modelo de datos.

Genere 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 de controlador y vista para el modelo Restaurant. Puede encontrar los directorios que contienen estos archivos en el directorio app de su aplicación.

Configurar rutas y agregar acciones personalizadas.

Navegue hasta el archivo config/routes.rb y reemplace 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:

aplicación/controladores/restaurantes_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, siga los pasos de esta sección para crear plantillas y estilos para la interfaz de usuario.

Actualizar el diseño principal.

Navegue hasta el archivo app/views/layouts/application.html.erb y reemplace su contenido con el siguiente código:

aplicación/vistas/diseños/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.

Navegue hasta el archivo app/views/restaurants/index.html.erb y reemplace 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.

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

aplicación/vistas/restaurantes/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 de restaurantes filtrados, mostrando solo los 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 estilo al diseño de cuadrícula del sitio.

Ejecute su aplicación

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

Inicie 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.

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

La página web que muestra todos los restaurantes.

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

La página web que muestra restaurantes filtrados

Explorar la funcionalidad CRUD.

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

Crear: haga clic en New Restaurant para agregar un nuevo restaurante a la restaurants colección.
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.

¡Felicitaciones por completar el tutorial de inicio rápido! Tras completar estos pasos, tendrá una aplicación web Ruby y Rails que se conecta a su implementación de MongoDB, ejecuta consultas sobre datos de ejemplo de restaurantes y muestra los resultados en una interfaz web alojada localmente con funcionalidades CRUD completas.

Recursos adicionales

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

Documentación deRuby on Rails
Documentación del controlador Ruby
Documentación del lenguajeRuby

Tip

Otros tutoriales de Framework

Si prefieres usar Sinatra como tu framework web, consulta la guía Inicio rápido - Sinatra.

Volver

Overview

Inicio rápido - Sinatra