Visão geral
Neste guia, você pode aprender como criar um aplicativo web Mongoid que utiliza Sinatra como framework web. Sinatra é uma linguagem específica de domínio (DSL) para criar aplicativos da web em Ruby. Os aplicativos Sinatra são simples de configurar e podem fornecer um processamento de solicitações mais rápido do que outras estruturas.
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 Sinatra lida com solicitações HTTP, roteamento e processamento lógico.
Camada de apresentação: modelos Ruby incorporados 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 Mongoid e Sinatra?
Ao integrar o MongoDB com o Mongoid e o Sinatra, você pode usar o Object-Document Mapper (ODM) do Mongoid para interagir com o modelo de documento flexível do MongoDB. O Mongoid fornece uma alternativa leve ao ORM do Active Record do Rails, e você pode aproveitar a flexibilidade de esquema do MongoDB enquanto usa a abordagem mínima do Sinatra 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 Sinatra. O aplicativo acessa dados de restaurantes de amostra, query 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.
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.
Crie um cluster do MongoDB Atlas.
O MongoDB Atlas é um serviço de banco de dados em nuvem gerenciado que hospeda suas implantações do MongoDB. Se você não tiver uma implementação do MongoDB, poderá criar um cluster do MongoDB gratuitamente concluindo o tutorial de Introdução ao MongoDB. O tutorial de Introdução ao MongoDB também demonstra como carregar conjuntos de dados de exemplo 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
A string de conexão de amostra inclui o banco de dados após o nome de host mongo0.example.com e antes das opções de conexão retryWrites e w.
Crie um Gemfile e adicione gems.
Todos os aplicativos Ruby devem ter um Gemfile que liste as gems necessárias. Execute o seguinte comando para criar um Gemfile em seu aplicação:
touch Gemfile
Em seguida, execute os seguintes comandos para adicionar as gems necessárias ao Gemfile e instalá-las:
bundle add mongoid sinatra rackup webrick bundle install
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 .
No seu diretório my-sinatra-app, crie um subdiretório config. Em seguida, crie um arquivo neste subdiretório chamado mongoid.yml.
Cole o código abaixo no arquivo mongoid.yml :
development: clients: default: uri: <connection string>
Substitua o espaço reservado <connection string> 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 o arquivo do aplicativo.
No seu diretório my-sinatra-app, crie um arquivo chamado app.rb. Cole o seguinte conteúdo no arquivo app.rb para carregar as gems necessárias e seu arquivo de configuração:
require 'sinatra' require 'mongoid' Mongoid.load!(File.join(File.dirname(__FILE__), 'config', 'mongoid.yml'))
Crie um modelo de dados.
No arquivo app.rb, crie um modelo chamado Restaurant adicionando o seguinte código:
class Restaurant include Mongoid::Document field :name, type: String field :cuisine, type: String field :borough, type: String end
O modelo Restaurant representa a coleção restaurants no banco de dados sample_restaurants . Define name, cuisine e borough campos para armazenar dados de restaurante.
Adicione rotas personalizadas.
No arquivo app.rb, adicione as seguintes rotas para exibir dados do restaurante:
get '/' do @restaurants = Restaurant.all erb :index end get '/browse' do @restaurants = Restaurant .where(name: /Moon/i).and(borough: "Queens") erb :browse end
A rota / exibe todos os restaurantes, enquanto as consultas de rota /browse para restaurantes no Queins que têm "Moon" em seu nome usando uma correspondência insensível a maiúsculas e minúsculas.
Configurar o front-end
Após configurar a camada de dados, siga as etapas nesta seção para criar modelos para a interface do usuário.
Crie o modelo de layout principal.
No seu diretório my-sinatra-app, crie um subdiretório denominado views.
Em seguida, crie um arquivo no subdiretório views chamado layout.erb e cole o seguinte 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 arquivo é um modelo Ruby incorporado (ERB). Esses modelos incluem HTML com código Ruby incorporado usado para gerar conteúdo HTML dinâmico.
Crie a visualização da lista de restaurantes.
No subdiretório views, crie um arquivo chamado index.erb e cole o seguinte 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 arquivo de visualização exibe todos os restaurantes em um layout de grade na interface do usuário do aplicativo.
Crie a visualização filtrada.
No subdiretório views, crie um arquivo chamado browse.erb e cole o seguinte 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 arquivo de visualização exibe os restaurantes da rota personalizada browse, que filtra restaurantes no Queins que têm "Moon" em seu nome.
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 Sinatra.
Navegue até o diretório do projeto e execute o seguinte comando:
bundle exec ruby app.rb
Este comando inicia um servidor web na porta 4567, a porta padrão do Sinatra. Se for bem-sucedida, a saída do comando será semelhante ao exemplo a seguir:
[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
Abra o aplicativo da web.
Abra http://localhost:4567 em seu navegador da web. A página de destino inicial exibe todos os restaurantes na coleção sample_restaurants.restaurants, na ordem em que aparecem no banco de dados:
Em seguida, clique no link Browse Filtered Restaurants para visualizar os restaurantes no Queins que têm "Moon" em seu nome:
Parabéns por concluir o tutorial Início Rápido do Sinatra! Depois de concluir essas etapas, você terá um aplicativo web Ruby e Sinatra que se conecta à implantação do MongoDB, executa queries em dados de restaurantes de amostra e exibe os resultados em uma interface web hospedada localmente.
Recursos adicionais
Para saber mais sobre Ruby, Sinatra, Mongoid e MongoDB, consulte os seguintes recursos:
Modele seus dados: saiba como personalizar seus modelos Mongoid.
Interaja com dados: saiba como interagir com os dados do MongoDB usando modelos Mongoid.
Dica
Outros tutoriais de estrutura
Se você preferir usar o Rails como seu framework web, consulte o guia Integrar Mongoid com Ruby on Rails.