Integra Mongoid con Sinatra

Verificar los requisitos previos.

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

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 al completar el Tutorial de 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.

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 sample_restaurants base de datos objetivo en una cadena de conexión de muestra:

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

La cadena de conexión de muestra incluye la base de datos después del nombre del host mongo0.example.com y antes de las opciones de conexión retryWrites y w.

Crea un directorio de aplicación de Sinatra.

Ejecuta los siguientes comandos para crear un nuevo directorio de aplicación llamado my-sinatra-app y navega hacia él:

mkdir my-sinatra-app
cd my-sinatra-app

Crear un Gemfile y añadir gemas.

Todas las aplicaciones Ruby deben tener un Gemfile que enumere los gemas requeridas. Ejecute el siguiente comando para crear un Gemfile en su aplicación:

touch Gemfile

A continuación, ejecuta los siguientes comandos para agregar e instalar las gemas requeridas en el Gemfile:

bundle add mongoid sinatra rackup webrick
bundle install

Configure tu conexión a MongoDB.

En tu directorio my-sinatra-app, crea un subdirectorio config. Luego, crea un archivo en este subdirectorio llamado mongoid.yml.

Pega el siguiente código en el archivo mongoid.yml:

development:
  clients:
    default:
      uri: <connection string>

Reemplace el marcador de posición <connection string> 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 el archivo de la aplicación.

En tu directorio my-sinatra-app, crea un archivo llamado app.rb. Pega el siguiente contenido en el archivo app.rb para cargar las gemas necesarias y tu archivo de configuración:

require 'sinatra'
require 'mongoid'
Mongoid.load!(File.join(File.dirname(__FILE__), 'config', 'mongoid.yml'))

Cree un modelo de datos.

En el archivo app.rb, crea un modelo llamado Restaurant agregando el siguiente código:

class Restaurant
   include Mongoid::Document
   field :name, type: String
   field :cuisine, type: String
   field :borough, type: String
end

El modelo Restaurant representa la colección restaurants en la base de datos sample_restaurants. Define los campos name, cuisine y borough para almacenar los datos de los restaurantes.

Agrega rutas personalizadas.

En el archivo app.rb, añada las siguientes rutas para mostrar los datos del restaurante:

get '/' do
    @restaurants = Restaurant.all
    erb :index
end
get '/browse' do
    @restaurants = Restaurant
        .where(name: /Moon/i).and(borough: "Queens")
    erb :browse
end

La ruta / muestra todos los restaurantes, mientras que la ruta /browse query los restaurantes en Queens que tienen "Moon" en su nombre usando una coincidencia sin distinguir mayúsculas o minúsculas.

Crea la plantilla de diseño principal.

En tu directorio my-sinatra-app, crea un subdirectorio llamado views.

Luego, crea un archivo en el subdirectorio views llamado layout.erb y pega el siguiente código:

<!DOCTYPE html>
<html>
<head>
    <title>Restaurant Directory</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #a8d5ba;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        .nav {
            text-align: center;
            margin-bottom: 20px;
        }
        .nav a {
            text-decoration: none;
            color: #6a9bd2;
            margin: 0 10px;
            font-size: 16px;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 10px;
        }
        .restaurant-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .restaurant-card {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            border: 1px solid #ddd;
        }
        .restaurant-card h3 {
            margin-top: 0;
            color: #333;
        }
        .cuisine-tag {
            background: #4a9d5f;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Restaurant Directory</h1>
    </div>
    <div class="nav">
        <a href="/">All Restaurants</a>
        <a href="/browse">Browse Filtered Restaurants</a>
    </div>
    <div class="container">
        <%= yield %>
    </div>
</body>
</html>

Este archivo es una plantilla Embedded Ruby (ERB). Estas plantillas incluyen HTML con código Ruby embebido que se utiliza para generar contenido HTML dinámico.

Crea la vista de la lista de restaurantes.

En el subdirectorio views, cree un archivo llamado index.erb y pegue el siguiente código:

<h2>All Restaurants</h2>
<p>Total restaurants: <%= @restaurants.count %></p>
<div class="restaurant-grid">
    <% @restaurants.each do |restaurant| %>
    <div class="restaurant-card">
        <h3><%= restaurant.name %></h3>
        <p><strong>Borough:</strong> <%= restaurant.borough %></p>
        <span class="cuisine-tag"><%= restaurant.cuisine %></span>
    </div>
    <% end %>
</div>

Este archivo de vista muestra todos los restaurantes en una estructura de cuadrícula en la interfaz de usuario de la aplicación.

Crear la vista filtrada.

En el subdirectorio views, cree un archivo llamado browse.erb y pegue el siguiente código:

<h2>Browse Restaurants</h2>
<p>Restaurants in Queens with "Moon" in the name</p>
<h3>Filtered Results</h3>
<div class="restaurant-grid">
    <% @restaurants.each do |restaurant| %>
    <div class="restaurant-card">
        <h3><%= restaurant.name %></h3>
        <p><strong>Borough:</strong> <%= restaurant.borough %></p>
        <span class="cuisine-tag"><%= restaurant.cuisine %></span>
    </div>
    <% end %>
</div>

Este archivo de vista muestra los restaurantes de la ruta personalizada browse, que filtra los restaurantes en Queens que tienen "Moon" en su nombre.

Inicia la aplicación de Sinatra.

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

bundle exec ruby app.rb

Este comando inicia un servidor web en el puerto 4567, el puerto por defecto de Sinatra. Si tiene éxito, la salida del comando se asemeja al siguiente ejemplo:

[2024-10-01 12:36:49] INFO  WEBrick 1.8.2
[2024-10-01 12:36:49] INFO  ruby 3.2.5 (2024-07-26) [arm64-darwin23]
== Sinatra (v4.0.0) has taken the stage on 4567 for development with backup from WEBrick
[2024-10-01 12:36:49] INFO  WEBrick::HTTPServer#start: pid=79176 port=4567

Abre la aplicación web.

Abre http://localhost:4567 en tu navegador web. La página de inicio muestra todos los restaurantes de la colección sample_restaurants.restaurants, en el orden en que aparecen en la base de datos:

Luego, haz clic en Browse Filtered Restaurants enlace para ver restaurantes en Queens que tienen "Moon" en su nombre: