Exemplo em Rails – parte 3

Rails-3_parte_final

Na parte anterior deste exemplo em Rails a aplicação foi deixada funcional, ou seja, já era possível demostrá-la visto que tudo aquilo que o programa precisava fazer estava sendo feito — e até fora algumas coisas a mais como a tal opção “Sobre” no menu de navegação. Mas ele ainda não estava muito muito homogênea com o leiaute meio “torto” e algumas mensagens em inglês.

Então, agora, a conclusão do desenvolvimento da “Agenda Mequetrefe”… 😀

Alterando o leiaute

É necessário editar quatro arquivos da visão do “contacts” para ajustar o leiaute. Destes é possível alterar agora três deles: “./app/views/contacts/edit.html.erb”, “./app/views/contacts/new.html.erb” e “./app/views/contacts/show.html.erb” que correspondem, respectivamente, às opções edição, criação e visualização dos contatos.

Quem ficará faltando, por enquanto, é o “./app/views/contacts/_form.html.erb” que contém o formulário em HTML usado nas opções de criação e também edição dos contatos. Motivo? Prefiro alterar o modelo antes, só isso.

Também é necessário acrescentar mais uma linha ao arquivo de localização da aplicação, o “./config/locales/pt_BR.yml”:

   editing_contact: "Editar contato"

Daí é salvar estas alterações no repositório:

$ git add .
$ git commit -m "before start third part"
[parte2 2360ca8] before start third part
 4 files changed, 9 insertions(+), 21 deletions(-)
...

E agora estamos prontos para o próximo passo.

Alterando o modelo

Claro que fiz de propósito mas na “vida real” não é bom deixar que este tipo de coisa aconteça, ou seja, bastante atenção durante a fase de modelagem de dados. Porém eu sei muito bem que também na “vida real” o banco de dados não é assim uma coisa tão imutável.

Adicionando um campo

O que preciso fazer é inserir mais um campo na lista de contatos, um simples campo para endereço de e-mail, e vou fazê-lo do jeito que o Rails recomenda que seja feito: através do recurso de migration (migração) do Active Record.

Para fazer uma migração, use:

$ rails generate migration AddEmailToContacts email:string
      invoke  active_record
      create    db/migrate/20160515181849_add_email_to_contacts.rb

Geralmente o Rails criará um arquivo vazio para que você defina o que será precisa ser feito.

Porém, se o nome da migração for algo como “Add«campo»To«objeto»”, ou “Remove«campo»From«objeto»”, seguido por uma sequência de nomes de campos o Rails se encarregará de criar o código necessário para esta operação.

O meu arquivo de migração ficou assim:

$ cat db/migrate/20160515181849_add_email_to_contacts.rb
class AddEmailToContacts < ActiveRecord::Migration
  def change
    add_column :contacts, :email, :string
  end
end

E o Active Record cuidará do resto, ou seja, fazer o “ALTER TABLE …”.

Fazendo a migração

Para aplicar¹ a migração use:

$ rake db:migrate
== 20160515181849 AddEmailToContacts: migrating =======================
-- add_column(:contacts, :email, :string)
   -> 0.0323s
== 20160515181849 AddEmailToContacts: migrated (0.0325s) ==============

E pronto! Claro que meu exemplo é bastante simplório mas a ideia aqui é apenas mostrar o recurso e para conhecer um pouco mais vale a pena consultar a documentação.

(¹) Nas versões 4.x do Rails  a migração é executada com o rake mas na versão de desenvolvimento, e provavelmente na série 5.x, usa-se o comando rails.

Não esqueça o controlador

Lembrando que, independente da linguagem de programação usada, não é bom confiar nos parâmetros que a aplicação receberá via HTTP. Por isto em Rails há o bom hábito (ou boa prática) de filtrar os parâmetros recebidos, utilizando apenas os necessários.

A estrutura que foi automaticamente criada com o “rails g scaffold …” segue esta recomendação e dentro do controlador de “contatos”, o arquivo “./app/controllers/contacts_controller.rb”, há um método privado responsável por tratar os parâmetros recebidos.

class ContactsController < ApplicationController
    ...
  private
    ...
    def contact_params
      params.require(:contact).permit(:name, :nickname)
    end
end

Daí é editá-lo para que também recupere o valor do campo que foi inserido:

params.require(:contact).permit(:name, :nickname, :email)

E assim os demais métodos dentro do objeto “saberão” que o endereço de e-mail agora existe e passarão o valor dele para o modelo.

Ajustando o resto da aplicação

De volta à edição das visões para acrescentar o campo de endereço de e-mail, o principal deles é justamente no arquivo “./app/views/contacts/index.html.erb” que ganhou uma coluna extra.

Rails-3_meus_contatos

Os mais observadores devem ter reparado que eu alterei a ordem na barra de navegação e também revisei alguns textos.

Rails-3_Exibir_contato

Para a confecção do formulário eu descartei o modelo básico (e rápido) que é criado pelo Rails e montei um baseado nos exemplos que o Bootstrap disponibiliza.

Rails-3_formulário

Este sujeito, o “./app/views/contacts/_form.html.erb”, carece de alguma explicação:

Eu adaptei o leiaute do formulário horizontal do Bootstrap mas sem deixar de usar os helpers do próprio Rails. O primeiro DIV já existia no arquivo original. O que ele faz é verificar se ocorreram erros na criação de um novo contato ou edição de um já existente e os mostra ao usuário.

Os três DIV centrais correspondem aos campos do formulário enquanto que o último deles é o botão de envio dos dados e todos estão utilizando o suporte a localização para exibir as mensagens corretamente. Inclusive o botão de envio, apesar de não estar explícito pois estou usando o arquivo de localização para traduzir também as mensagens dos helpers:

...
  helpers:
    submit:
      create: "Criar"
      update: "Atualizar"

O helper sabe em que situação ele está sendo utilizado e exibe o texto adequado.

Armazenando as alterações

Agora que a aplicação está pronta é a vez de usar mais uma vez o Git:

$ git add .
$ git commit -m "end of third part"
[parte2 65308b8] end of third part
 17 files changed, 180 insertions(+), 118 deletions(-)
...

Porém ainda estou no ramo “parte2” e não no “master” e já que não preciso mais da versão original dos arquivos não há necessidade de trabalhar em outro ramo, logo posso simplesmente juntá-los numa coisa só:

$ git checkout master
Switched to branch 'master'
$ git merge parte2
Updating 1c6e3cb..65308b8
Fast-forward
 Gemfile                                        |   1 -
 app/assets/stylesheets/contacts.css.scss       |   7 +++++++
 app/assets/stylesheets/home.css.scss           |  11 +++++++++++
 app/controllers/contacts_controller.rb         |  10 +++++-----
 app/controllers/home_controller.rb             |   1 -
 ...
 public/favicon.ico                             | Bin 0 -> 16958 bytes
 21 files changed, 188 insertions(+), 121 deletions(-)
 create mode 100644 app/views/home/about.html.erb
 create mode 100644 db/migrate/20160515181849_add_email_to_contacts.rb
 create mode 100644 public/AM_logo_128x128.png

Pronto, aproveitei para também criar um repositório no GitHub com estes arquivos e agora a “Agenda Mequetrefe” está disponível para o mundo! 🙂

Finalizando

Recapitulando o que foi feito. Foi criada uma aplicação em Rails seguindo o modelo MVC (uma exigência da ferramenta) e utilizando Bootstrap para produzir tanto o HTML como o CSS ² e o Git para fazer o controle das versões.

Tratei um pouco sobre o uso do Active Record (mais especificamente do Migrations), como criar páginas estáticas dentro da aplicação e também do método utilizado para a localização dos programas. E o resultado final foi disponibilizado no GitHub para quem quiser se divertir e aprender um pouco.

Até a próxima! 🙂

(²) A parte em Javascript do Bootstrap poderia ser usada mas optei por não aumentar desnecessariamente a complexidade do projeto.

Anúncios

Um comentário sobre “Exemplo em Rails – parte 3

  1. Pingback: Exemplo em Rails - agenda – parte 3 - Peguei do

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s