Tutorial de Aplicação Rails Girls

Criado por Vesa Vänskä, @vesan

Certifique-se de que você tem o Rails instalado! Siga o guia para instalar.

Conheça as ferramentas

Importante

É importante que você selecione e siga instruções específicas para o seu sistema operacional - os comandos que você precisa executar em um computador com Windows são um pouquinho diferentes daqueles que você usaria em um Mac ou em um computador com Linux. Se você tiver alguma dúvida em relação a isso, verifique o seletor de Sistema Operacional logo abaixo dos comandos. Caso você esteja utilizando um serviço de nuvem (Nitrous, por exemplo), você precisa executar os comandos para Linux mesmo que seu computador use Windows.

1.Criando a aplicação

Nós vamos criar uma nova aplicação Rails chamada railsgirls.

Primeiro, vamos abrir uma janela do terminal:

• Mac OS X: Abra a busca Spotlight, digite Terminal e clique no aplicativo Terminal.
• Windows: Clique em Iniciar (Start) e procure por Prompt de Comando (Command Prompt), então clique Command Prompt with Ruby on Rails.
• Linux (Ubuntu/Fedora): Procure por Terminal no dash e clique em Terminal.
• Serviço de nuvem (Nitrous, entre outros): Faça login na sua conta, inicie seu projeto e mude para a respectiva IDE (veja o guia de instalação para maiores detalhes). O terminal geralmente está na parte de baixo da janela do seu naveador.

Depois, digite os seguintes comandos no terminal:

mkdir projects

cd projects

rails new railsgirls

cd railsgirls

rails server

mkdir projects

cd projects

rails new railsgirls

cd railsgirls

rails server

Abra a URL http://localhost:3000 no seu navegador. Se você estiver usndo um serviço de nuvem (Nitrous, por ex.), use sua funcionalidade de pré-visualização (veja o guia de instalação para maiores detalhes).

Você deverá ver uma página “Welcome aboard”, o que significa que a criação da sua nova aplicação funcionou direitinho.

Note que nesta janela o prompt de comando não está visível porque você está agora no servidor Rails, o prompt de comando se parece com isso:

$

>

Quando o prompt de comando não está visível, você não pode executar novos comandos. Se você tentar executar ‘cd’ ou outro comando, não funcionará. Para retornar ao prompt normal:

Pressione Ctrl+C na janela do terminal para encerrar o servidor.

Treinadores: Expliquem o que cada comando faz. O que foi gerado? O que o servidor faz?

2.Crie o scaffold para Ideias

Nós vamos usar a funcionalidade de scaffold do Rails para gerar um ponto de partida que nos permita listar, adicionar, remover, editar e visualizar coisas; no nosso caso, ideias.

Treinadores: O que é o scaffolding do Rails? Explique o comando, o modelo, o nome do modelo e a tabela do banco de dados relacionada a ele, convenções de nomes, atributos e tipos, etc. O que são as migrações e por que você precisa delas?

rails generate scaffold idea name:string description:text picture:string

O scaffold cria os novos arquivos no diretório do seu projeto, mas para que isso funcione nós precisamos executar alguns outros comandos para atualizar nosso banco de dados e reiniciar o servidor.

rake db:migrate
rails server

Abra a URL http://localhost:3000/ideas no seu navegador. Usuários de serviços na nuvem (Nitrous, por ex.) devem acrescentar ‘/ideas’ à URL de pré-visualização (veja o guia de instalação).

Clique por aí e teste o que você obtém ao executar estes poucos comandos.

3.Design

Treinadores: Fale sobre a relação entre HTML e Rails. Que parte das views é HTML e que parte é Ruby Embutido (ERB)? O que é MVC e como isso se relaciona? (Models e controllers são responsáveis por gerar as views em HTML.)

A aplicação ainda não está bonita. Vamos fazer algo em relação a isso! Nós usaremos o Twitter Bootstrap para nos ajudar a deixar as coisas mais bonitas facilmente.

No seu editor de texto, abra o arquivo app/views/layouts/application.html.erb e acima da linha

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>

adicione

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.css">

e substitua

<%= yield %>

por

<div class="container">
  <%= yield %>
</div>

Também vamos adicionar uma barra de navegação e um rodapé ao layout. No mesmo arquivo, abaixo de <body> adicione

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Ideias App</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/ideas">Ideias</a></li>
      </ul>
    </div>
  </div>
</nav>

e antes de </body> adicione

<footer>
  <div class="container">
    Rails Girls 2016
  </div>
</footer>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.js"></script>

Agora, vamos mudar também a cara da tabela de ideias. Abra o arquivo app/assets/stylesheets/application.css e no final adicione

body { padding-top: 100px; }
footer { margin-top: 100px; }
table, td, th { vertical-align: middle; border: none; }
th { border-bottom: 1px solid #DDD; }

Certifique-se que você salvou seus arquivos e recarregue a janela do navegador para ver as mudanças. Você pode modificar ainda mais o HTML e o CSS.

Caso sua janela do Terminal mostre uma mensagem de erro que meio que sugere que algo está errado com seu JavaScript ou CoffeeScript, instale o nodejs. Esse problema não deve acontecer caso você tenha utilizado o RailsInstaller (e sim quando você instalou o Rails via gem install rails).

Treinadores: Falem um pouco sobre CSS e layouts.

4.Adicionando upload de imagens

Precisamos instalar um pequeno software que nos permita fazer o upload de arquivos no Rails.

Abra o arquivo Gemfile no diretório do projeto utilizando o seu editor de textos e abaixo da linha

gem 'sqlite3'

adicione

gem 'carrierwave'

Treinadores: Expliquem o que são as bibliotecas (libraries) e porque elas são úteis. Descrevam o que é o software de código aberto (open source).

Pressione Ctrl+C na janela do terminal para encerrar o servidor.

No terminal, execute:

bundle

Agora nós poderemos gerar o código para gerenciar uploads. No terminal, execute:

rails generate uploader Picture

Por favor, inicie o servidor Rails agora.

Nota: Algumas pessoas talvez estejam usando uma segunda janela do terminal para executar o servidor Rails continuamente. Neste caso, você precisa reiniciar o processo do servidor Rails agora. Isso é necessário para que a aplicação carregue a biblioteca recém-adicionada.

Abra o arquivo app/models/idea.rb e abaixo da linha

class Idea < ApplicationRecord

adicione

mount_uploader :picture, PictureUploader

Abra o arquivo app/views/ideas/_form.html.erb e modifique

<%= f.text_field :picture %>

para

<%= f.file_field :picture %>

Às vezes, você pode obter um erro assim: TypeError: can’t cast ActionDispatch::Http::UploadedFile to string.

Se isso acontecer, no arquivo app/views/ideas/_form.html.erb modifique a linha

<%= form_for(idea) do |f| %>

para

<%= form_for(idea, html: {multipart: true}) do |f| %>

No seu navegador, adicione uma nova ideia (idea) com uma imagem. Quando você fizer o upload da imagem, não vai estar bonito porque só mostrará o caminho para o arquivo. Vamos ajeitar isso!

Abra o arquivo app/views/ideas/show.html.erb e modifique

<%= @idea.picture %>

para

<%= image_tag(@idea.picture_url, width: 600) if @idea.picture.present? %>

Agora, recarregue a janela do seu navegador para ver o que mudou.

Treinadores: Falem um pouco sobre HTML.

5.Aperfeiçoando as rotas

Abra a URL http://localhost:3000 (ou sua URL de pré-visualização no caso de utilizar um serviço na nuvem). Ela ainda mostra a página “Welcome aboard”. Vamos fazer com que ela redirecione para a página que contém as ideias.

Abra o arquivo config/routes.rb e após a primeira linha, adicione

root to: redirect('/ideas')

Teste a mudança abrindo o caminho raiz (ou seja, http://localhost:3000/ ou sua URL de pré-visualização) no seu navegador.

Treinadores: Falem sobre rotas (routes) e incluam detalhes sobre a ordem das rotas e sua relação com arquivos estáticos.

Crie uma página estática em sua aplicação

Vamos adicionar uma página estática à sua aplicação que conterá informações sobre sua autoria, ou seja, sobre você!

rails generate controller pages info

Este comando criará uma nova pasta sob app/views chamada /pages e sob ela um arquivo chamado info.html.erb que será sua página de informação.

O comando também adiciona uma rota simples ao seu arquivo routes.rb.

get "pages/info"

Agora você pode abrir o arquivo app/views/pages/info.html.erb e adicionar as informações sobre você no HTML. Para ver sua nova página de informação, abra a URL http://localhost:3000/pages/info em seu navegador ou, caso esteja utilizando um serviço na nuvem, acrescente ‘/pages/info’ à sua URL de pré-visualização.

6+.O que vem agora?

• Dê uma olhada nos arquivos em app/views/ideas e traduza eles
• Siga para a próxima parte do tutorial

Anterior   Próximo