Tutorial
1 Criar um repositório no github
1. Acessar a URL [Link]
2. Clicar no menu da sua conta
3. Clicar em “Your Repositories”
4. Clicar em “New”
5. Preencha os campos “Repository Name”, “Description”, marque a opção “Add a README
file” e clique em “Create repository”
2 Criar um Codespace
1. Clique no botão “Code”, na aba “Codespaces” e no botão “Create codespaces on main”
3 Instalar os Requisitos
1. Localize o terminal do Codespaces
2. Digitar o comando no terminal
gem install rails
4 Criar um Projeto Rails
1. Digitar o comando no terminal
rails new . --javascript esbuild --css bootstrap
2. Ele vai pedir para resolver o conflito, escreva n e aperte enter para não sobreescrever o
arquivo readme
3. Rode o seguinte comando para executar o servidor de desenvolvimento
bin/dev
4. Vai aparecer um diálogo com a opção “Open in Browser”, clique nessa opção
5. Você deve ver uma tela assim:
6. Volte ao terminal e pressione as teclas “control” + “c” para parar a execução do servidor de
desenvolvimento.
5 Criar um hello world
1. Executar o seguinte comando para gerar a ação index do controlador Articles
bin/rails generate controller Articles index
2. Alterar o arquivo app/views/articles/[Link] e adicionar o seguinte conteúdo
<h1>Hello World</h1>
3. Inicializar o servidor da aplicação
bin/dev
4. Quando aparecer o diálogo clique em “Open in Browser”
5. Acrescente “/articles/index” no final da URL. No meu caso ficou assim
“[Link]
articles/index”.
6. Volte ao terminal e pressione as teclas “control” + “c” para parar a execução do servidor de
desenvolvimento.
6 MVCS
1. Criar um model para Artigo
bin/rails generate model Article title:string body:text
2. Migre o banco de dados para ficar de acordo com o modelo
bin/rails db:migrate
3. Entre no console do Rails
bin/rails console
4. Crie um artigo e salve
article = [Link](title: "Hello Rails", body: "I am on Rails!")
[Link]
5. Saia do console do Rails apertando “control” + “d”
6. Altere o arquivo do apps/controller/article_controller.rb para o seguinte
class ArticlesController < ApplicationController
def index
@articles = [Link]
end
end
7. Altere o arquivo do apps/views/articles/[Link] para o seguinte
<h1>Artigos</h1>
<% @[Link] do |article| %>
<div>
<h1><%= [Link] %></h1>
<div><%= [Link] %></div>
</div>
<% end %>
8. Inicializar o servidor da aplicação
bin/dev
9. Quando aparecer o diálogo clique em “Open in Browser”
10. Acrescente “/articles/index” no final da URL. No meu caso ficou assim
“[Link]
articles/index”.
11. Volte ao terminal e pressione as teclas “control” + “c” para parar a execução do servidor de
desenvolvimento.
7 Bootstrap Style
1. Altere o arquivo do apps/views/articles/[Link] para o seguinte:
<div class="container bg-dark text-white vh-100">
<h1>Artigos</h1>
<% @[Link] do |article| %>
<div class="card">
<div class="card-body">
<h5 class="card-title"><%= [Link] %></h5>
<div class="card-text"><%= [Link] %></div>
</div>
</div>
<% end %>
</div>
2. Inicializar o servidor da aplicação
bin/dev
3. Quando aparecer o diálogo clique em “Open in Browser”
4. Acrescente “/articles/index” no final da URL. No meu caso ficou assim
“[Link]
articles/index”.
5. Volte ao terminal e pressione as teclas “control” + “c” para parar a execução do servidor de
desenvolvimento.