rails na prática

RAILS NA PRÁTICA 3 e 5 de Outubro

[email protected]

marcoafilho

@marcoafilho

LICENÇA

MARCO ANTONIO FILHO

COORDENADOR DE TI INPACT.ME

Rails? #Framework

#Ruby

#DesenvolvimentoWeb

#MVC

#DRY

#ConvencaoSobreConfiguracao

#REST

#What? #FirstSteps #Bootstrapping #Mastering #Logic #KeepWalking

Rails?

“#Framework implementado em #Ruby para

#DesenvolvimentoWeb seguindo a arquitetura #MVC e tem como filosofia as seguintes práticas: #DRY, #ConvencaoSobreConfiguracao, #REST.”


Ruby # 1. Tudo eh um objeto 5.times { print "Hello World!" } # 2. Blocos sample_array.each { |element| print element } # 3. Retorno de funcao implicito def sum(a,b) a + b end # 4. Tudo eh aberto class Fixnum def previous self – 1 end end 6.previous # 5. Operadores unarios. Nao ha ++, -‐-‐; Use +=


Ruby # 6. Atribuicao paralela a, b = b, a # 7. Cada string é um objeto print "hello".object_id print "hello".object_id # Um novo objeto # 8. Verdadeiro e falso em Ruby if 0 print "Hello World" end # 9. Suporte a faixa de numeros e expressoes regulares de forma nativa (1..10).each { print "Hello World" } # 10. Indicadores de metodo class Woman def loves?(thing) thing == "chocolate" ? true : false end end


MVC

MODEL

DATABASE

VIEW CONTROLLER 4. RESPONSE

1. REQUEST

2. DEMAND

3. DATA


MÃOS À OBRA

OBJETIVO

Desenvolver uma plataforma para gerenciamento de finanças pessoais.

A aplicacão

FUNCIONALIDADES

Manutenção de contas (Corrente, Poupança, Carteira); Manutenção de gastos; Relatórios.


Wireframes #What? #FirstSteps #Bootstrapping #Mastering #Logic #KeepWalking

Configuração

Abra o terminal e digite:

Criando Uma Aplicação Rails Configuração

Ruby 1.9.3 Rails 3.2.8 Git 1.7.4.x

$ rails new my_budget


Estrutura de diretórios #What? #FirstSteps #Bootstrapping #Mastering #Logic #KeepWalking

Git

Preparando para implantar Gemfile group :development, :test do gem 'sqlite3' end group :production do gem 'pg' end

$ git config -‐-‐global config.name "Marco Antonio" $ git config -‐-‐global config.email "[email protected]" $ git init $ git add . $ git commit -‐m "Meu primeiro commit."


2. Configure o heroku com a sua aplicação

Dentro da pasta do seu projeto:

Heroku 1. Crie uma conta em heroku.com

$ gem install heroku $ ssh keygen -‐t rsa $ heroku login $ heroku keys:add $ heroku create -‐-‐stack cedar $ git push heroku master $ heroku open


Editando o html

Uma página é criada em app/views/pages/home

Página inicial Criando um controle para abarcar páginas

$ rails g controller Pages home

<img alt="Welcome picture" src="/assets/welcome.png">


Página inicial Visualizando alterações localmente

Execute o comando a seguir e acesse http://localhost:3000

$ rails s

Alterando as rotas

Entre no arquivo config/routes.rb e adicione a seguinte linha:

root to: "pages#home"

Remova a public/index.html e reinicie o servidor caso seja necessário.


Publicando as alterações $ git rm public/index.html $ git add . $ git commit -‐m "Nova home page." $ git push heroku master $ heroku open


CRUD de contas Definindo um modelo de contas

$ rails g scaffold Account name:string model:string

Compondo o bando de dados

$ rake db:migrate

Acesse a rota http://localhost:3000/accounts e veja o reultado final


O que aconteceu?

$ git add . $ git commit -‐m "Pagina de gerenciamento de contas." $ git push heroku master $ heroku run rake db:migrate $ heroku open

Rails gerou automaticamente as 3 camadas do MVC

-  Um arquivo de migração que descreve a nova tabela no banco de dados; -  Um modelo Account que interage com o banco de dados; -  Um controlador AccountsController que liga o modelo Account a ações; -  5 páginas que representam algumas ações básicas como listagem e edição; -  Folhas de estilo e um javascripts; -  Alguns arquivos para escrever testes;

Publicando as rotas


Entendendo a mágica Migrations

Alterações na estrutura do banco de dados: Abra o arquivo db/migrate/[timestamp]_create_accounts.rb

class CreateAccounts < ActiveRecord::Migration def change create_table :accounts do |t| t.string :name t.string :model t.timestamps end end end


Entendendo a mágica Models

Em sua maior parte são representações de tabelas no banco em objetos Ruby; Abra o arquivo app/models/account.rb

class Account < ActiveRecord::Base attr_accessible :model, :name end


Entendendo a mágica Controllers

Representam ações que podem ser feitas usando modelos ou não; Veja o arquivo app/controllers/accounts_controller.rb

class AccountsController < ApplicationController def index @accounts = Account.all respond_to do |format| format.html # index.html.erb format.json { render json: @accounts } end end ... end


Entendendo a mágica Views

Representam ações que podem ser feitas usando modelos ou não; Veja o arquivo app/views/index.html.erb

<% @accounts.each do |account| %> <tr> <td><%= account.name %></td> <td><%= account.model %></td> <td><%= link_to 'Show', account %></td> <td><%= link_to 'Edit', edit_account_path(account) %></td> <td><%= link_to 'Destroy', account, method: :delete, data: { confirm: 'Are you sure?' } %></td> </tr> <% end %>


Entendendo a mágica Routes

Definem url a partir de ações de controladores; O comando resources cria as rotas para as ações Restful de um controlador; Abra o arquivo config/routes.rb

MyBudgetTraining::Application.routes.draw do resources :accounts root to: "pages#home" end


DANDO VIDA À APLICAÇÃO

Twitter Bootstrap #What? #FirstSteps #Bootstrapping #Mastering #Logic #KeepWalking

Twitter Bootstrap Rails Inserindo a gem na aplicação

Vá no arquivo Gemfile e adicione:

gem 'twitter-‐bootstrap-‐rails', '2.1.3'

$ bundle install $ rails g bootstrap:install $ rails g bootstrap:layout application fixed $ rails g bootstrap:themed Accounts

Instalando e usando a gem

Remova os comandos favicon_link_tag do arquivo layouts/application.html.erb

Para saber mais, verifique a documentação do twitter bootstrap


Publique mais uma vez Envie sua aplicação para o heroku

$ git add . $ git commit -‐m "Template usando twitter bootstrap." $ git push heroku master $ heroku open

Porque estamos fazendo isso?

A entrega contínua é uma prática de desenvolvimento ágil (XP)


APROFUNDANDO UM POUCO MAIS

Gerenciamento de transações Model

$ rails g model Transaction account:references \ > description:string value:decimal performed_at:datetime \ > kind:string

Execute a nova migration

A entrega contínua é uma prática de desenvolvimento ágil (XP)

$ rake db:migrate

Importante!

No arquivo models/transaction.rb adicione como attr_accessible o valor :account_id


Gerenciamento de transações Controllers

$ rails g controller Transactions

Adicione ações ao controller

Adicionaremos sete ações ao controller index, show, new, create, edit, update, destroy; class TransactionsController < ApplicationController def index end end


Gerenciamento de transações Ação index

Representa uma listagem do modelo

def index @transactions = Transaction.all end

Ação show

Representa uma nova instância de um modelo para apresentação

def show @transaction = Transaction.find(params[:id]) end


Gerenciamento de transações Ação new

Representa uma nova instância de um modelo

def new @transaction = Transaction.new end

Ação edit

Representa uma instância de um modelo existente para ser modificada

def edit @transaction = Transaction.find(params[:id]) end


Gerenciamento de transações Ação create

Cria um objeto no banco

def create @transaction = Transaction.new(params[:transaction]) if @transaction.save redirect_to @transaction, notice: "Transaction created" else render action: "new" end end


Gerenciamento de transações Ação update

Atualiza um objeto no banco

def update @transaction = Transaction.find(params[:id]) if @transaction.update_attributes(params[:transaction]) redirect_to @transaction, notice: "Transaction updated" else render action: "edit" end end


Gerenciamento de transações Ação destroy

Elimina um objeto do banco de dados

def destroy @transaction = Transaction.find(params[:id]) @transaction.destroy redirect_to transactions_path end


Gerenciamento de transações Rotas

Adicionaremos uma rota para os recursos do controle transação

MyBudgetTraining::Application.routes.draw do resources :accounts resources :transactions root to: "pages#home" end

Agora temos o mesmo conjunto de endereços que temos em contas; Precisamos da camada de visualização!


Gerenciamento de transações Views

-  São páginas html com ruby embutido (erb); -  Rails não provê nenhum gerador para criação de views; -  Crie manualmente na pasta views/transactions os arquivos:

-  index.html.erb; -  show.html.erb; -  new.html.erb; -  edit.html.erb; -  _form.html.erb;


<% #index.html.erb %> <div class="page-‐header"><h1>Transações</h1></div> <table class="table table-‐striped"> <thead> <tr>

<td>Descrição</td> <td>...</td> </tr> </thead> <tbody> <% @transactions.each do |transaction| %> <tr> <td><%= link_to transaction.description, transaction %></td> <td>...</td> <td><%= link_to 'Editar', edit_transaction_path(transaction), class: "btn btn-‐mini" %></td> <td><%= link_to 'Remover', transaction_path(transaction), method: :delete, data: { confirm: "Tem certeza?" }, class: "btn btn-‐mini btn-‐danger" %></td> </tr> <% end %> </tbody> </table> <%= link_to 'Nova', new_transaction_path, class: "btn btn-‐primary" %>


<% #show.html.erb %> <div class="page-‐header"><h1>Transação</h1></div> <dl class="dl-‐horizontal"> <dt><strong>Conta:</strong></dt> <dd><%= @transaction.account.name %></dd> <dt><strong>Descrição:</strong></dt> <dd><%= @transaction.description %></dd> <dt><strong>Valor:</strong></dt> <dd><%= @transaction.value %></dd> <dt><strong>Efetuado em:</strong></dt> <dd><%= @transaction.performed_at %></dd> <dt><strong>Tipo:</strong></dt> <dd><%= @transaction.kind %></dd> </dl> <div class="form-‐actions"> <%= link_to 'Retornar', transactions_path, class: 'btn' %> <%= link_to 'Editar', edit_transaction_path(@transaction), class: 'btn' %> <%= link_to 'Remover', transaction_path(@transaction), method: :delete, data: { confirm: 'Tem certeza?' }, class: 'btn btn-‐danger' %> </div>


<% #new.html.erb %> <div class="page-‐header"><h1>Nova transação</h1></div> <%= render 'form' %>

<% #edit.html.erb %> <div class="page-‐header"><h1>Editar transação</h1></div> <%= render 'form' %>


<% #_form.html.erb %> <%= form_for @transaction, html: { class: 'form-‐horizontal' } do |f| %> <div class="control-‐group"> <%= f.label :account_id, class: 'control-‐label' %> <div class="controls"> <%= f.select :account_id, Account.all.map{ |a| [a.name, a.id] }, class: 'number_field' %> </div> </div> <div class="control-‐group"> <%= f.label :description, class: 'control-‐label' %> <div class="controls"><%= f.text_field :description, class: 'text_field' %></div> </div> ... <div class="control-‐group"> <%= f.label :performed_at, class: 'control-‐label' %> <div class="controls"> <%= f.date_select :performed_at, class: 'datetime_select' %> </div> </div> <div class="form-‐actions"> <%= f.submit 'Salvar', class: 'btn btn-‐primary' %> <%= link_to 'Cancelar', transactions_path, class: 'btn' %> </div> <% end %>


Layout da aplicação De onde vem o menu e a barra lateral?

Da pasta views/layouts/application.html.erb

Substitua os links da ul.nav pelos seguintes comandos:

<%= link_to "Contas", accounts_path %> <%= link_to "Transações", transactions_path %>

No wireframe não há uma barra lateral;

Remova a div.span3 e todo o seu conteúdo Clicar no logo MyBudget deveria levar para home

<%= link_to "MyBudget", root_path, class: "Brand" %>


Publique as alterações Navegue localmente e verifique se tudo está certo

E execute o velho código para publicar

$ git add . $ git commit -‐m "Pagina de gerenciamento de transacoes." $ git push heroku master $ heroku run rake db:migrate $ heroku open


ADICIONANDO UM POUCO DE LÓGICA

Relacionamento de objetos Uma conta tem muitas transações...

Se formos à classe models/transaction.rb vemos a seguinte linha

belongs_to :account

Devemos agora adicionar o inverso na classe models/account.rb

has_many :transactions

Isso fornecerá uma série de métodos para manipular transações a partir de uma conta Observe o uso do plural no segundo comando


Apresentando o total da conta Uma conta tem muitas transações...

Vá até a classe models/account.rb vemos a seguinte linha def current_amount transactions.where(kind: "Income").sum(:value) -‐ transactions.where(kind: "Expense").sum(:value) end

Precisamos apresentar essa informação agora na listagem e na visualização

<% #views/accounts/index.html.erb %> <td><%= account.current_amount %></td>

<% #views/accounts/show.html.erb %> <dt>Total</dt> <dd><%= @account.current_amount %></dd>


Restrigindo os gastos por tipo Uma transação pode ser uma saída ou uma entrada

Vá até a classe models/transaction.rb e adicione a constante

TYPES = ["Income", "Expense"]

E no arquivo views/transactions/_form.html.erb substitua:

<%= f.text_field :kind, class: 'text_field' %>

<%= f.select :kind, Transaction::TYPES %>

Por


NÃO PARE POR AÍ

Exercícios Aplicação:

-  Use páginação com o plugin will_paginate: http://goo.gl/c3OGx -  Estilize com bootstrap-will_paginate: http://goo.gl/XZUy8

Visualização de contas (show) -  Apresente uma paginação para as últimas 5 transações; -  Ordene as transações por data;

Relatórios

-  Crie uma página de relatórios em que deve ser apresentado as despesas por dia e mês; -  Integre com o Google Charts: http://goo.gl/7bWlQ


Gems Anotar

Annotate Models (https://github.com/ctran/annotate_models) Template

Haml e Haml-rails (https://github.com/indirect/haml-rails) Autenticação

Devise (https://github.com/plataformatec/devise) Testes

Rspec (https://github.com/dchelimsky/rspec) Capybara (https://github.com/jnicklas/capybara) Factory Girl (https://github.com/thoughtbot/factory_girl_rails)

Upload de arquivos Carrierwave (https://github.com/jnicklas/carrierwave)


Editores de texto Multiplataforma

Sublime Text 2 (http://www.sublimetext.com/2) Vim (http://www.vim.org/) Aptana (http://www.aptana.com/)

MAC OS X Textmate (http://macromates.com/)

LINUX Komodo Edit (http://www.activestate.com/komodo-edit)


Referências Livros

Learn To Program (http://pine.fm/LearnToProgram/) Rails Tutorial (http://ruby.railstutorial.org/) Rails guides (http://guides.rubyonrails.org/)

Documentação Rails API (http://api.rubyonrails.org/)

Vídeos Railscasts (http://railscasts.com/) An Introduction to Rails (http://goo.gl/HA5Np)

Tutorial dinâmico Code School (http://www.codeschool.com/) Ruby Weekly (http://rubyweekly.com/)


Dúvidas

? ?

? ?

?

? ?

?

? ?

? ?

MUITO OBRIGADO!

[email protected]

marcoafilho

@marcoafilho

rails na prática

Technology