Tutoriais Rails Girls

Tutorial para criação da app Rails Girls

Criado por Vesa Vänskä, @vesan

Traduzido por Maujor, site do Maujor

Você deverá ter Rails instalado. Consulte o guia de instalação se você ainda não instalou.

Conhecendo as ferramentas

 

Editor de texto

 

Terminal (conhecido como Command Prompt no Windows):

  • Interface onde você vai iniciar o servidor rails e executar comandos.

  • Este é um programa em seu computador que você pode acessar através de sua pesquisa Spotlight no Mac (procure por “Terminal”), ou procurando o “Prompt de comando” em seus programas no Windows.

 

  • (Firefox, Safari, Chrome) usados para visualizar sua aplicação.

Ao longo deste guia, você verá pedaços de código formatados da seguinte forma:

exemplo de código

Isso significa que o texto destacado é um código e provavelmente precisa ser executado ou inserido em um dos seus arquivos de projeto. O ícone ao lado do texto destacado permitirá que você saiba qual ferramenta usar.

Por exemplo, se você ver um ícone de terminal ao lado do código formatado, como no exemplo acima, será necessário copiar o código e colá-lo no Terminal (Mac) / Prompt de Comando (Windows).

Precisa de alguns lembretes pelo caminho? Leia Cola útil para Ruby, Rails, console etc. (em inglês)

Importante

É importante que você conheça a sintaxe de comandos específica para seu Sistema Operacional - os comandos a executar em computadores rodando Windows podem apresentar pequenas diferenças sintáticas em relação àqueles usados em ambientes Mac ou Linux. Se você não estiver seguro com a sintaxe dos comandos use o link para o sistema operacional, que está localizado após os comandos mostrados neste tutorial. Se você estiver usando um serviço na nuvem (por exemplo: Codenvy), você deverá executar os comandos conforme a sintaxe Linux ainda que esteja em ambiente Windows.

1. Criando a aplicação

Vamos criar uma app Rails a partir do zero denominada railsgirls destinada a compartilhar ideias.

Primeiro, vamos abrir o Terminal:

Em seguida digite no terminal os comandos mostrados a seguir :

mkdir projetos

Rodando o comando ls no terminal você poderá constatar que um diretório denominado projetos foi criado. Você verá o diretório projetos na saída do terminal. A seguir você deverá ir para o diretório projetos executando o seguinte comando:

cd projetos

Verifique se você está em um diretório vazio executando novamente o comando ls. Vamos criar nossa nova app denominada railsgirls executando o seguinte comando:

rails new railsgirls

Este comando criará a nova app no diretório railsgirls. Vamos novamente entrar no diretório recém criado executando o seguinte comando:

cd railsgirls

Se você executar o comando ls neste diretório verá que foram criadas pastas, tais como, app e config. Agora podermos iniciar o servidor rails executando o seguinte comando:

rails server
mkdir projects

Execute o camando dir para listar diretórios e verifique que um diretório chamado projects foi criado. Você verá o diretório projects na saída do terminal. Vamos novamente entrar no diretório projects recém criado executando o seguinte comando:

cd projects

Verifique que você está em um diretório vazio executando novamente o comando dir. Vamos criar nossa nova app denominada railsgirls executando o seguinte comando:

rails new railsgirls

Este comando criará a nova app no diretório railsgirls. Vamos novamente entrar no diretório recém criado executando o seguinte comando:

cd railsgirls

Se você executar o comando dir neste diretório verá que foram criadas pastas, tais como, app e config. Agora podermos iniciar o servidor rails executando o seguinte comando:

rails server

Abra http://localhost:3000 no navegador. Se você estiver usando um serviço na nuvem (por exemplo: Codenvy), use a funcionalidade preview do serviço (ver guia de instalação para detalhes).

Se você ver a página denominada “Yay! You’re on Rails!” é porque tudo deu certo e sua nova app está funcionando corretamente.

Note que nesta nova janela o prompt de comando não é visível, pois você se encontra no servidor Rails. Abra uma nova aba no seu terminal para que consiga acessar o promp de comando, que deve parecer com isso:

$

Dica: Às vezes, tanto neste guia quanto em outros guias on-line, você verá comandos escritos com o símbolo $ no início. Esta é uma convenção que significa o início de uma linha que precisa ser inserida em seu terminal / prompt de comando. Você não precisa digitar este símbolo no início de seus comandos. Seu prompt específico pode não ter um símbolo $ no início dele.

Quando o prompt de comando não é visível você não poderá executar comandos. Se você tentar executar o comando cd ou qualquer outro comando eles não terão efeito algum. Para parar o servidor e retornar ao prompt de comando normal:

Pressione as teclas Ctrl+C no terminal para parar o servidor.

Instrutor(a): Explicar a finalidade de cada comando. O que foi criado? O que o servidor fez?

2. Criar o Scaffold para as ideias

Vamos usar uma funcionalidade do Rails denominada scaffold para criar um ponto de partida que nos permitirá listar, adicionar, remover, editar e ver as “coisas”; no nosso caso as “coisas” serão as ideias.

Instrutor(a): O que é Rails scaffolding? (Explicar o comando, o nome do modelo, as tabelas de banco de dados relacionadas, as convenções de nomes, atributos, tipos, etc.) O que é migração e por que são necessárias?

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

A funcionalidade scaffold cria novos arquivos no diretório do projeto, mas para que tudo funcione apropriadamente é necessário executar alguns comandos com a finalidade de atualizar o banco de dados e reiniciar o servidor.

rake db:migrate
rails server

Abra http://localhost:3000/ideas no navegador. Para serviços na nuvem (por exemplo: Codenvy) acrescente ‘/ideas’ na url do preview (ver guia de instalação).

Teste o que você tem rodando estes comandos no terminal.

3. Design

Instrutor(a): Fale sobre o relacionamento entre HTML e Rails. Quais são as visualizações geradas por HTML e quais são as geradas por Embedded Ruby (ERB)? O que é MVC e como ele se relaciona no contexto? (Modelos e controllers são responsáveis por gerar visualizações com HTML.)

Nossa app apresenta um design bem pobre por enquanto. Vamos providenciar melhorias nesse visual. Vamos usar o projeto Twitter Bootstrap para estilizar de uma maneira fácil nossa app.

Abra app/views/layouts/application.html.erb no seu editor de texto e acima da linha:

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

acrescente o seguinte:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

agora substitua

<%= yield %>

por

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

Vamos criar uma barra de navegação e um rodapé para nosso layout. No mesmo arquivo, logo após a tag de abertura <body> acrescente:

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container">
    <a class="navbar-brand" href="/">The Idea App</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="/ideas">Ideas</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

antes da tag de fechamento </body> acrescente

<footer>
  <div class="container">
    Rails Girls <%= Time.now.year %>
  </div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

Agora vamos alterar a estilização da tabela que contém as ideias. Abra app/assets/stylesheets/application.css e no final acrescente:

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

Agora, verifique se salvou seus arquivos e atualize o navegador para ver o que foi alterado. Nada mudou? Pode ser que você não esteja mais conectado ao Wi-Fi. Você pode alterar o HTML e CSS, e personalizar ainda mais sua página, adicionando regras de estililização ao arquivo app/assets/stylesheets/application.css.

Se o Terminal mostrar uma mensagem de erro informando que há algo errado com a JavaScript ou com CoffeeScript, instale nodejs. Isto não deverá acontecer se você usou RailsInstaller (mas sim, quando você instalou Rails via gem install rails).

Instrutor(a): Fale um pouco sobre CSS e layouts.

4. Criando mecanismo para upload de imagens

Vamos instalar um software que nos permita fazer upload de imagens com Rails.

Abra Gemfile localizado no diretório do projeto e depois da linha:

gem 'sqlite3'

acrescente o seguinte:

gem 'carrierwave'

Instrutor(a): Explique o que são bibliotecas e qual a sua utilidade. Fale um pouco sobre softwares de código aberto.

Pressione as teclas Ctrl+C no terminal para parar o servidor.

Execute o seguinte comando no terminal:

bundle

Agora estamos em condições de gerar o código para gerenciar uploads. Execute o seguinte comando no terminal:

rails generate uploader Picture

Se um erro for mostrado, falando que o uploader não pôde ser encontrado, adicione também a seguinte linha:

gem 'net-ssh'

Se você adicionou esta gem, por favor, execute em seu terminal novamente:

bundle

Inicie o servidor.

Nota: Alguns preferem usar uma segunda instância do terminal para manter o servidor rails rodando continuamente. Se este for o seu caso é necessário restartar o servidor Rails agora. Isto é necessário para que a app carregue a biblioteca adicionada.

Abra app/models/idea.rb e depois da linha:

class Idea < ApplicationRecord

acrescente a seguinte linha:

mount_uploader :picture, PictureUploader

Abra app/views/ideas/_form.html.erb e substitua:

<%= form.text_field :picture %>

por

<%= form.file_field :picture %>

No seu navegador adicione uma nova ideia e junto com isso adicione uma imagem. Esta ação fará com que seja mostrada, não a imagem, mas o caminho para a imagem. Vamos corrigir isto.

Abra app/views/ideas/show.html.erb e substitua:

<%= @idea.picture %>

por

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

Dê um “refresh” no navegador e constate a renderização da imagem.

Para garantir que a imagem também seja mostrada na página inicial de ideias, abra app/views/ideas/index.html.erb.

Mude a linha:

<%= idea.picture %>

para

<%= image_tag idea.picture_url, width: '100%' if idea.picture.present? %>

Vá para http://localhost:3000/ideas para ver o que mudou.

Instrutor(a): Fale um pouco sobre marcação HTML.

5. Acertos finais nas rotas

Abra http://localhost:3000 (ou o preview da url, caso você esteja usando um serviço na nuvem). Ainda é mostrada a página “Yay! You’re on Rails!”. Vamos fazer o redirecionamento para a página ideas da app.

Abra config/routes.rb e logo após a primeira linha acrescente:

root to: redirect('/ideas')

Teste as alterações feitas abrindo o caminho para a raiz da app (ou seja, http://localhost:3000/ ou o preview da url) no seu navegador.

Instrutor(a): Fale sobre rotas e os detalhes na ordenação das rotas e seus relacionamentos com arquivos estáticos.

Criando uma página estática na sua app

Vamos criar uma página estática na nossa app com a finalidade de fornecer informações sobre o autor da aplicação — você!

rails generate controller pages info

Este comando criará um novo diretório em app/views denominado /pages e dentro deste diretório um arquivo denominado info.html.erb que será a página de informações sobre você, o autor da aplicação.

É também adicionado um novo caminho em config/routes.rb.

get "pages/info"

Abra app/views/pages/info.html.erb e acrescente informações sobre você na marcação HTML. Para visualizar a nova página de informações sobre o autor digite http://localhost:3000/pages/info na barra de endereços do navegador ou se você usa um serviço na nuvem acrescente ‘/pages/info’ na URL do preview.

7. Adicione um botão à sua barra de navegação

Agora que sabemos que sua nova página estática funciona, vamos garantir que as pessoas possam visitá-la criando um botão para ela na barra de navegação.

Abra app/views/layouts/application.html.erb no seu editor de texto e sobre a linha

<li class="nav-item active">
  <a class="nav-link" href="/ideas">Ideas</a>
</li>

adiciona

<li class="nav-item">
  <a class="nav-link" href="/pages/info">Info</a>
</li>

Atualize a página no seu navegador e clique no link recém criado para ver se funciona!

8. O que vem a seguir?

Outros Guias