Primeiros passos com o MongoDB Atlas e Ruby no Rails
Avalie esse Tutorial
O curinga, no entanto, é que eu não seja um programador Ruby, muito menos um programador Ruby on Rails. Felizmente, esse foi um evento bem organizado, com tutoriais a serem seguidos e muitos instrutores caso algum de nós ficasse preso. Então, além de puxar um chat com os participantes sobre o MongoDB, eu tinha a chance de acompanhar e aprender algo novo.
No início, acompanhei o Tutorial do Aplicativo Rails Tools e entrei em funcionamento com um aplicativo Ruby on Rails funcional. Como isso usa SQLite (eu reconheço, booo), então decidimos pegar o que aprendera, combinado com nossa própria documentação para começar a usar o Rails, e criar um aplicativo Rails que permita que você use o MongoDB Atlas!
Estou sempre tendo novas ideias para conteúdo ou projetos paralelos. Meu cérebro está zumbindo constantemente e encontra inspiração em muitos lugares. Então, adorei a ideia do tutorial RailsGirls de um site que permite armazenar uma ideia, incluindo o nome, a descrição e uma imagem para mostrar o Spark dessa ideia.
Neste artigo, mostrarei o que aprender ao longo do caminho para criar isso e como você pode fazer a mesma coisa! Se você preferir navegar pelo código, ele está disponível publicamente no Github.
Você precisará de algumas ferramentas para seguir este artigo:
- Cluster MongoDB Atlas gratuito - ele irá orientá-lo na criação do primeiro cluster e na obtenção da importante connection string que será usada neste tutorial.
O primeiro passo é criar o aplicativo. Podemos aproveitar a ferramenta cli do Rails que faz parte da instalação do Rails para inicializar nosso novo aplicativo.
1 rails new inspiration --skip-active-record --skip-bundle 2 cd inspiration
Passamos a opção
--skip-active-record porque não usaremos um adaptador ActiveRecord para nos comunicarmos com nosso MongoDB database. Também passamos -–skip-bundle porque queremos modificar o Gemfiledo aplicativo para incluir a gemamongoid antes de instalar o pacote.Agora que temos o projeto criado, queremos configurar o MongoDB. O primeiro passo é adicionar a joia mongoid. Mongoid é o mapeador de documentos de objetos (ODM) oficialmente suportado para Ruby. Um ODM é o banco de dados de documentos equivalente ao mapeador relacional de objetos (ORM) que é usado para mapear entre os modelos e o banco de dados relacional.
- Dentro do seu Gemfile, adicione
gem mongoid, que define que queremos usar esta gem. - Em sua CLI, execute
bundle installpara obter os arquivos necessários para incluir o mongoid em seu aplicativo. - Depois de concluído, execute o comando
rails g mongoid:config, que gerará o arquivo mongoid.yml dentro do diretório de configuração do seu aplicativo. Esse arquivo de configuração define como se conectar ao seu MongoDB database. - Atualize a seção de configuração de desenvolvimento dentro
config/mongoid.ymlcom o seguinte código, substituindo a seção uri por sua própria connection string:
1 development: 2 clients: 3 default: 4 uri: mongodb+srv:/<username>:<password>@<cluster url>/?retryWrites=true&w=majority 5 options: 6 server_selection_timeout: 5 7
Agora que adicionamos nossa connection string, podemos armazenar nossos documentos de ideias no MongoDB Atas.
Em seguida, queremos executar o aplicativo para garantir que tudo esteja funcionando corretamente.
1 rails server
Isso iniciará um servidor em https://localhost:3000, então abra isso no navegador de sua escolha e certifique-se de que a página carregue. Você obtém um logotipo Ruby on Rails.
O Ruby on Rails usa a arquitetura Model-View-Controller. Isso significa que teremos um modelo
Ideaque representa o documento que queremos armazenar, uma visualização para exibir essa ideia no front-end do nosso aplicativo e um controlador que nos permite interagir com nossas ideias.Felizmente, criar tudo isso é muito simples. No CLI do Rails, você pode executar um comando que desenvolverá tudo o que precisamos, incluindo nosso modelo com as propriedades que especificamos, a visualização e o controlador.
1 rails generate scaffold idea name:string description:string picture:string
No comando acima, especificamos as três propriedades que queremos incluir em nosso modelo de ideia. Isso gerará uma saída parecida com o código abaixo, mostrando as ações que o comando realizou e os arquivos que ele criou.
1 invoke mongoid 2 create app/models/idea.rb 3 invoke test_unit 4 create test/models/idea_test.rb 5 create test/fixtures/ideas.yml 6 invoke resource_route 7 route resources :ideas 8 invoke scaffold_controller 9 create app/controllers/ideas_controller.rb 10 invoke erb 11 create app/views/ideas 12 create app/views/ideas/index.html.erb 13 create app/views/ideas/edit.html.erb 14 create app/views/ideas/show.html.erb 15 create app/views/ideas/new.html.erb 16 create app/views/ideas/_form.html.erb 17 create app/views/ideas/_idea.html.erb 18 invoke resource_route 19 invoke test_unit 20 create test/controllers/ideas_controller_test.rb 21 create test/system/ideas_test.rb 22 invoke helper 23 create app/helpers/ideas_helper.rb 24 invoke test_unit 25 invoke jbuilder 26 create app/views/ideas/index.json.jbuilder 27 create app/views/ideas/show.json.jbuilder 28 create app/views/ideas/_idea.json.jbuilder
Como aprendemos no início, imediatamente, um aplicativo Rails usará como padrão a página raiz. Agora temos um endpoint de ideia, queremos que seja a página padrão que abre quando o aplicativo é iniciado.
- Abra route.rb dentro da pasta de configuração.
- Substitua o conteúdo pelo seguinte:
1 Rails.application.routes.draw do 2 root to: 'ideas#index' 3 resources :ideas 4 end
Se executássemos nosso aplicativo agora, você veria uma das duas coisas: uma página principalmente em branco ou quaisquer ideias adicionadas no banco de dados fora desse aplicativo , por exemplo, usando a UI do Atlas ou oMongoDB Compass.
Mas queremos a capacidade de adicionar novas ideias. Também podemos aproveitar essa oportunidade para melhorar um pouco a aparência do aplicativo.
- Abra o arquivo .html.erb do aplicação.
- Substitua o arquivo atual pelo seguinte código:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Inspiration</title> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <%= csrf_meta_tags %> 7 <%= csp_meta_tag %> 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 9 <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> 10 </head> 11 <nav class="navbar navbar-expand-lg navbar"> 12 <div class="container"> 13 <a class="navbar-brand" href="/ideas">The Idea App</a> 14 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"> 15 <span class="navbar-toggler-icon"></span> 16 </button> 17 <div class="collapse navbar-collapse" id="navbarSupportedContent"> 18 <ul class="navbar-nav mr-auto"> 19 <li class="nav-item"> 20 <%= link_to 'New Idea', new_idea_path, class: "nav-link text-info" %> 21 </li> 22 </ul> 23 </div> 24 </div> 25 </nav> 26 <body> 27 <div class="container"> 28 <%= yield %> 29 </div> 30 </body> 31 <footer> 32 <div class="container"> 33 MongoDB Atlas and Ruby on Rails <%= Time.now.year %> 34 </div> 35 </footer> 36 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 37 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> 38 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> 39 </html>
- Abra o aplicação.css.
- Substitua o arquivo atual pelo seguinte:
1 footer { margin-top: 100px; } 2 table, td, th { vertical-align: middle; border: none; } 3 th { border-bottom: 1px solid #DDD; } 4 body { margin: 0; } 5 .navbar { 6 min-height: 38px; 7 background-color: #ECA72C; 8 } 9 .navbar-brand { 10 font-size: 24px; 11 color: #080357; 12 } 13 .navbar a.brand:hover { 14 color: #fff; 15 background-color: transparent; 16 text-decoration: none; 17 } 18 .container { 19 margin: auto ; 20 }
- Certifique-se de que ambos os arquivos alterados estejam salvos e execute-o. Você deve ver uma página semelhante à abaixo, onde agora temos uma barra de navegação na parte superior com um link para adicionar uma nova ideia.
Eu sei que não parece muito bonito (se você tem boas habilidades de design / CSS, tenho certeza de que poderia fazer coisas maravilhosas com isso), mas se você clicar em Nova ideia agora, ele carregará um formulário que lhe dará a capacidade de criar uma nova ideia.
Você notará que nunca criamos este formulário. Este é um dos poderes do Ruby on Rails. Como estruturamos nosso modelo de ideia, ele gerou o que precisamos para interagir com ele também.
Clicar no botão Criar Ideia fará com que você retorne à tela de detalhes da ideia com uma mensagem "success" e sua ideia recém-criada.
Em seguida, você pode clicar em para editar ainda mais a ideia usando o hiperlink ou clicando em voltar a ideias para visualizar sua nova ideia em sua lista de ideias. Há também um botão aqui para excluir a ideia. Não precisvamos configurar nada disso - ufa!A melhor parte é que, graças a nós configurando o driver MongoDB, essa ideia será armazenada no Atlas e você poderá ver a ideia dentro do seu banco de dados, usando qualquer uma das ferramentas disponíveis. Abaixo está uma imagem disso sendo visualizado dentro do Compass.
Assim, com alguns comandos CLI e algumas alterações de código, temos um aplicativo Ruby on Rails funcional que nos permite criar, ler, atualizar e excluir ideias, todas armazenadas no MongoDB Atlas gratuitamente!
Claro, como mencionado anteriormente no artigo, isso não parece ótimo, então você pode querer brincar com o estilo para torná-lo melhor. Mas isso está fora do escopo deste artigo.
Mas um recurso que vamos adicionar em uma publicação futura que você pode procurar é a capacidade de pesquisar uma ideia usando oAtlas Search, o recurso de pesquisa de texto completo do MongoDB que é executado no Apache Lucene.
Graças novamente às RailsGirls London por servir de fonte de referência para este post e pelo guia soberbo que nos forneceu uma base sólida para construir este post!