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

  • Atom, Sublime Text, Vim e Emacs são alguns dos editores de texto que você poderá usar para escrever códigos e editar arquivos.

 

Terminal (conhecido como Command Prompt no Windows):

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

 

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

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 saida 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 “Welcome aboard” é 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 e o prompt de comando tem o seguinte aspecto:

$
>

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.

Coach: 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.

Coach: 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 porquê 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

Coach: 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 é 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="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.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-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="/">The Idea 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>

antes da tag de fechamento </body> acrescente

<footer>
  <div class="container">
    Rails Girls 2016
  </div>
</footer>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.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:

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

A seguir, após salvar os arquivos e dar um “refresh” no navegador observe as alterações no layout. Você poderá fazer outras modificações na marcação HTML e criar novas regras de estilização.

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).

Coach: 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'

Coach: 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

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:

<%= f.text_field :picture %>

por

<%= f.file_field :picture %>

Em alguns casos poderá ocorrer o erro TypeError: can’t cast ActionDispatch::Http::UploadedFile to string.

Se isso acontecer, abra app/views/ideas/_form.html.erb e substitua a linha:

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

por

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

No seu navegador adicione uma nova idea e nela uma imagem. Esta ação fará com que seja mostrada não a imagrm, 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.

Coach: 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 “Welcome aboard”. 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.

Coach: 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 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.

6.O que vem a seguir?

Outros Guias