formação ruby & redu :: ruby on rails

31
Novo Cronograma Data Assuntos 13 de Março Ruby on Rails I 20 de Março Ruby on Rails II 27 de Março Ruby on Rails III 10 de Abril Ruby on Rails IV 08 de Maio Ruby on Rails V 15 de Maio Checkpoint do Projeto 22 de Maio Chef, Solr e Delayed Job 27 de Maio Código do Redu 12 de Junho Código do Redu 19 de Junho Código do Redu

Upload: openredu

Post on 28-Dec-2015

70 views

Category:

Documents


0 download

DESCRIPTION

Helper de Tags, Partials, Ajax, Sessão e Cookies.

TRANSCRIPT

Page 1: Formação Ruby & Redu :: Ruby on Rails

Novo Cronograma

Data Assuntos

13 de Março Ruby on Rails I

20 de Março Ruby on Rails II

27 de Março! Ruby on Rails III

10 de Abril! Ruby on Rails IV

08 de Maio Ruby on Rails V

15 de Maio Checkpoint do Projeto

22 de Maio Chef, Solr e Delayed Job

27 de Maio Código do Redu

12 de Junho Código do Redu

19 de Junho Código do Redu

Page 2: Formação Ruby & Redu :: Ruby on Rails

Ruby on Rails 104

Tiago Lima Líder técnicos e Sócio do Redu

!8 de maio de 2014

Page 3: Formação Ruby & Redu :: Ruby on Rails

Antes de tudo

Page 4: Formação Ruby & Redu :: Ruby on Rails

Antes de tudo

• A Documentação é sua amiga

• http://api.rubyonrails.org/

• http://guides.rubyonrails.org/

• http://rubyonrails.org/

Page 5: Formação Ruby & Redu :: Ruby on Rails

Helper de tags

Page 6: Formação Ruby & Redu :: Ruby on Rails

Helper de tags

• Disponibilizadas pela view para geração de tags HTML

• link_to!

• image_tag!

• form_for!

• ...

Page 7: Formação Ruby & Redu :: Ruby on Rails

• Alguns helpers de tag

Helper de tags

<%= image_tag "header.png", size: "100x80" %>!!<h1>Sprint</h1>!<ul class="stories">! <% @stories.each do |story| %>! <li>! <%= link_to "Visualizar #{story.name}", ! story_path(story) %>! </li>! <% end %>!</ul>

story

<%= link_to "Visualizar #{story.name}", story %>

Convenção

Page 8: Formação Ruby & Redu :: Ruby on Rails

Helper de tags

<% if user.online? %>! <%= link_to "#{user.name}", @user %>!<% end %>

• if • unless

<% unless user.online? %>! <%= link_to "#{user.name}", @user %>!<% end %>

Page 9: Formação Ruby & Redu :: Ruby on Rails

Helper de tags

• Para formulários:

• form_for, label, text_field, text_area, submit, ...

<%= form_for @story do |f| %>! <%= f.label :name %>! <%= f.text_field :name %>! <%= f.text_area :description, :size => "60x12" %>! <%= f.submit %>!<% end %>

Page 10: Formação Ruby & Redu :: Ruby on Rails

Helper de tags

• O estado do objeto @story definirá a URL e o método HTTP adequados

• Instância não salva no banco

• POST /stories (criação)

• Instância salva no banco

• PUT /stories (edição)

Page 11: Formação Ruby & Redu :: Ruby on Rails

Partials

Page 12: Formação Ruby & Redu :: Ruby on Rails

Partials

• Fragmentos de view

• Facilita a organização (e manutenção)

• São identificados pelo underline

• _story.html.erb

<%= render 'story' %>

Page 13: Formação Ruby & Redu :: Ruby on Rails

Partials

Sprint

_story.html.erb_story.html.erb_story.html.erb_story.html.erb

_story.html.erb<%= link_to "Visualizar #{story.name}", ! story %>

app/views/stories/_story.html.erb

Para efeitos demonstrativos, o ideal é que haja mais conteúdo para que o uso do partial seja

justificado

Page 14: Formação Ruby & Redu :: Ruby on Rails

• View anterior com uso de partials

Partials

<%= image_tag "header.png", size: "100x80" %>!!<h1>Sprint</h1>!<ul class="stories">! <% @stories.each do |story| %>! <li>! <%= render 'story', :story => story %>! </li>! <% end %>!</ul>

story

<%= render story %>

Convenção

Page 15: Formação Ruby & Redu :: Ruby on Rails

• Melhor ainda:

Partials

<%= image_tag "header.png", size: "100x80" %>!!<h1>Sprint</h1>!<ul class="stories">! <%= render 'story', :collection => @stories %>!</ul>

<li><%= link_to "Visualizar #{story.name}", story %></li>

app/views/stories/_story.html.erb

Page 16: Formação Ruby & Redu :: Ruby on Rails

Ajax

Page 17: Formação Ruby & Redu :: Ruby on Rails

Ajax

• Ajax — Asynchronous JavaScript and XML

• Várias tecnologias em conjunto

• Propósito: Através de uma requisição assíncrona, parte da página é atualizada sem ser necessário recarregá-la totalmente

Page 18: Formação Ruby & Redu :: Ruby on Rails

Ajax

• Rails possibilita que a requisição seja assíncrona através de um indicador:

• remote: true

<%= form_for story, remote: true, ! html: {id: "story_form"} do |f| %>! <%= f.label :name %>! <%= f.text_field :name %>! <%= f.submit %>!<% end %>

Page 19: Formação Ruby & Redu :: Ruby on Rails

• Convenção sobre Configuração

• StoriesController#create

!

• create.js.erb

Ajax

POST /storiesRouting

create

js

Requisição feita através de JavaScript

JavaScript com Embedded Ruby

Page 20: Formação Ruby & Redu :: Ruby on Rails

Ajax

• A resposta contém JS, o qual modificará a página

• Adiciona a Story recém criada a listagem

Page 21: Formação Ruby & Redu :: Ruby on Rails

Ajax

var $newForm = "<%= escape_javascript render 'stories/form', story: Story.new %>";!$("#story_form").replaceWith($newForm);!!var $createdStory = "<%= escape_javascript render @story %>";!$(".stories").append($createdStory);

app/views/stories/create.js.erb

<h1>Sprint</h1>!<%= render "stories/form", story: @new_story %>!<ul class="stories">! <%= render partial: "stories/story", collection: @stories %>!</ul>

app/views/stories/index.html.erb

Page 22: Formação Ruby & Redu :: Ruby on Rails

Sessão

Page 23: Formação Ruby & Redu :: Ruby on Rails

Sessão

• Guarda dados que devem ser persistidos entre requisições

• Identifica o usuário

• Disponível no controlador e na view

• Através de um objeto que herda de Hash

• session!

• session[:current_user_id] = user.id!

• session[:current_user_id] = nil

Page 24: Formação Ruby & Redu :: Ruby on Rails

Sessão

• Opções armazenamento:

• Tudo no cliente (default)

• Banco de dados

• Cache do Rails

• Independente da opção escolhida, o ID da sessão será guardado em um cookie (segurança)

Page 25: Formação Ruby & Redu :: Ruby on Rails

Sessão

• Configuração:

Rails102::Application.config.session_store :cookie_store, !! key: '_rails-102_session'!! domain: '.rails102.com.br'

config/initializers/session_store.rb

Page 26: Formação Ruby & Redu :: Ruby on Rails

Cookies

Page 27: Formação Ruby & Redu :: Ruby on Rails

Cookies

• Guarda dados no cliente

• Dados persistidos entre requisições e sessões

• Funciona similar à sessão no Rails

• cookies!

• cookies[:boring_browser] = true!

• cookies.delete(:boring_browser)

Pequena diferença comparado a session

Page 28: Formação Ruby & Redu :: Ruby on Rails

Dojo

Page 29: Formação Ruby & Redu :: Ruby on Rails

Dojo

• Projeto base: https://github.com/redu/formacao-ruby-redu/tree/master/2-exercicio-rails-models

Page 30: Formação Ruby & Redu :: Ruby on Rails

Dojo

• Requisitos:

• Link para visualizar usuário

• Criar um usuário

• Criar um usuário via Ajax

Page 31: Formação Ruby & Redu :: Ruby on Rails

Obrigado. :)