Desenvolvimento web com Ruby on Rails (parte 2)

  • 654 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
654
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
11
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Desenvolvimento Web com Ruby on Rails João Lucas Pereira de Santana gtalk | linkedin | twitter: jlucasps
  • 2. Layouts e Partials @jlucasps <!DOCTYPE html> <html> <head> <title>FirstApp</title> <%= stylesheet_link_tag "application", :media => "all" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> </head> <body> <%= yield %> </body> </html>
  • 3. Layouts e Partials Alterar application.js @jlucasps //= require jquery //= require jquery_ujs //= require_tree . //= require jquery //= require jquery_ujs //= require bootstrap.js
  • 4. Layouts e Partials Alterar application.css @jlucasps *= require_self *= require_tree . *= require bootstrap.css *= require bootstrap-responsive.css *= require custom.css
  • 5. Layouts e Partials $ git add . $ git commit -m "Especificando arquivos no application.js e application.css" @jlucasps
  • 6. Layouts e Partials Criar novo arquivo de layout /app/views/layouts/application_black.html.erb Adicionar atributo style à tag body <body style='background-color:black;'> Criar nova action 'black' no controller Welcome @jlucasps def black render :layout => 'application_black' end
  • 7. Layouts e Partials Criar rota para action 'black' match 'black' => 'welcome#black', :via => :get, :as => :black Criar template para a nova action: /app/views/welcome/index.html.erb Acessar URL http://localhost:3000/black @jlucasps
  • 8. Layouts e Partials $ git add . $ git commit -m "Utilizando mais de 1 layout" Tente definir um layout para várias actions Dica: layout 'application_black', :only => :black @jlucasps
  • 9. Layouts e Partials Utilizando o content_for Atualizem o layout application.html.erb @jlucasps <!DOCTYPE html> <html> <head> <title>FirstApp</title> <%= stylesheet_link_tag "application", :media => "all" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> </head> <body> <div class='row-fluid'> <div class='span3'> <%= yield :sidebar %> </div> <div class='span9'> <%= yield %> </div> </div> </body> </html>
  • 10. Layouts e Partials Atualizem o template welcome/index.html.erb @jlucasps <h1>Conteúdo central</h1> <%= content_for :sidebar do %> <h4>sidebar</h4> <% end %>
  • 11. Layouts e Partials @jlucasps $ git add . $ git commit -m "Configurando a sidebar"
  • 12. Layouts e Partials @jlucasps Configurar layout para que fique como no exemplo abaixo utilizando partials e content_for
  • 13. Layouts e Partials @jlucasps Criar arquivo /app/assets/stylesheets/custom.css body { padding-top: 60px; padding-bottom: 40px; } .sidebar-nav { padding: 9px 0; } @media (max-width: 980px) { /* Enable use of floated navbar text */ .navbar-text.pull-right { float: none; padding-left: 5px; padding-right: 5px; } }
  • 14. Layouts e Partials @jlucasps Alterar layout /app/views/layouts/application.html.erb <!DOCTYPE html> <html> <head> <title>FirstApp</title> <%= stylesheet_link_tag "application", :media => "all" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> </head> <body> <%= render :partial => 'shared/menu_top' %> <div class="container-fluid"> <div class="row-fluid"> <%= yield :sidebar %> <%= yield %> </div> <%= render :partial => 'shared/footer' %> </div> </body> </html>
  • 15. Layouts e Partials @jlucasps Criar partial views/shared/_footer.html.erb <hr> <footer> <p>&copy; Company 2013</p> </footer>
  • 16. Layouts e Partials @jlucasps Criar partial views/shared/_menu_top.html.erb <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=". nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" href="#">Project name</a> <div class="nav-collapse collapse"> <p class="navbar-text pull-right"> Logged in as <a href="#" class="navbar-link">Username</a> </p> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> </div>
  • 17. Layouts e Partials @jlucasps Criar partial views/shared/_sidebar.html.erb <div class="span3"> <div class="well sidebar-nav"> <ul class="nav nav-list"> <li class="nav-header">Sidebar</li> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div><!--/.well --> </div><!--/span-->
  • 18. Layouts e Partials @jlucasps Alterar template /app/views/welcome/index.html.erb <div class="span9"> <div class="hero-unit"> <h1>Hello, world!</h1> <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> <p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p> </div> <div class="row-fluid"> <div class="span6"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn" href="#">View details &raquo;</a></p> </div><!--/span--> <div class="span6"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn" href="#">View details &raquo;</a></p> </div><!--/span--> </div><!--/row--> </div><!--/span--> <%= content_for :sidebar do %> <%= render :partial => 'shared/sidebar' %> <% end %>
  • 19. Layouts e Partials @jlucasps $ git add . $ git commit -m "Configurando layout com partial e content_for"
  • 20. Primeiros Testes Antes..... Configurar arquivo Gemfile com links e documentações Adicionar ao Gemfile group :test do gem 'capybara' gem rspec-rails' end Executar $ bundle install Remover diretório /test Executar $ rails g rspec:install @jlucasps
  • 21. Primeiros Testes @jlucasps $ rails generate rspec:install create .rspec create spec create spec/spec_helper.rb Modificar o arquivo spec/spec_helper.rb
  • 22. Primeiros Testes @jlucasps Adicionar as linhas em negrito ao arquivo require File.expand_path("../.. /config/environment", __FILE__) require 'rspec/rails' require 'rspec/autorun' require 'capybara/rails' require 'capybara/rspec' # Requires supporting ruby files with custom matchers and macros, etc, # in spec/support/ and its subdirectories. Dir[Rails.root.join("spec/support/**/*.rb")].each { |f| require f }
  • 23. Primeiros Testes @jlucasps Adicionar as linhas em negrito ao bloco config do arquivoRSpec.configure do |config| # ## Mock Framework # If you prefer to use mocha, flexmock or RR, uncomment the appropriate line: # config.mock_with :mocha # config.mock_with :flexmock # config.mock_with :rr config.include Capybara::DSL config.include Rails.application.routes. url_helpers # Remove this line if you're not using ActiveRecord or ActiveRecord fixtures config.fixture_path = "#{::Rails.root} /spec/fixtures" # .......
  • 24. Primeiros Testes @jlucasps $ git add . $ git commit -m "Setup RSpec" Criar o primeiro Teste /spec/features/welcome/index.html.erb_spec.rb
  • 25. Primeiros Testes @jlucasps require 'spec_helper' describe ".index", :type => :feature do it "access index page" do visit index_path page.should have_content("Hello, world!") end end /spec/features/welcome/index.html.erb_spec.rb
  • 26. Primeiros Testes @jlucasps jlucasps@lotus:/media/first_app$ rspec . Finished in 0.18264 seconds 1 example, 0 failures Randomized with seed 64721 jlucasps@lotus:/media/first_app$ $ git add . $ git commit -m "Primeiro teste com sucesso"
  • 27. Primeiros Testes @jlucasps require 'spec_helper' describe ".about", :type => :feature do it "access about page" do visit about_path page.should have_content("About us") end end /spec/features/welcome/about.html.erb_spec.rb
  • 28. Primeiros Testes @jlucasps jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec F. Failures: 1) .about access about page Failure/Error: visit about_path NameError: undefined local variable or method `about_path' for #<RSpec::Core::ExampleGroup::Nested_1: 0x00000003991378> # ./spec/features/welcome/about.html.erb_spec.rb:6:in `block (2 levels) in <top (required)>' Finished in 0.18221 seconds 2 examples, 1 failure Failed examples: rspec ./spec/features/welcome/about.html.erb_spec.rb:5 # . about access about page Randomized with seed 10191 jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$
  • 29. Primeiros Testes Criar uma nova rota para action about @jlucasps FirstApp::Application.routes.draw do root :to => 'welcome#index', :as => :index match 'about' => 'welcome#about', :as => : about match 'black' => 'welcome#black', :via => :get, :as => :black end
  • 30. Primeiros Testes @jlucasps jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec F. Failures: 1) .about access about page Failure/Error: visit about_path AbstractController::ActionNotFound: The action 'about' could not be found for WelcomeController # ./spec/features/welcome/about.html.erb_spec.rb:6:in `block (2 levels) in <top (required)>' Finished in 0.19052 seconds 2 examples, 1 failure Failed examples: rspec ./spec/features/welcome/about.html.erb_spec.rb:5 # .about access about page Randomized with seed 45018 jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$
  • 31. @jlucasps Primeiros Testes class WelcomeController < ApplicationController def index end def black render :layout => 'application_black' end def about end end
  • 32. Primeiros Testes @jlucasps jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec .F Failures: 1) .about access about page Failure/Error: visit about_path ActionView::MissingTemplate: Missing template welcome/about, application/about with {:locale=> [:en], :formats=>[:html], :handlers=>[:erb, :builder, :coffee]}. Searched in: * "/media/truecrypt1/handsonrails/first_app/app/views" # ./spec/features/welcome/about.html.erb_spec.rb:6:in `block (2 levels) in <top (required)>' Finished in 0.21562 seconds 2 examples, 1 failure Failed examples: rspec ./spec/features/welcome/about.html.erb_spec.rb:5 # .about access about page Randomized with seed 15753 jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$
  • 33. Primeiros Testes Criar arquivo /app/views/welcome/about.html.erb e executar $ rspec @jlucasps jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec F. Failures: 1) .about access about page Failure/Error: page.should have_content("About us") expected to find text "About us" in "Project name Logged in as Username Home About Contact © Company 2013" # ./spec/features/welcome/about.html.erb_spec.rb:7:in `block (2 levels) in <top (required)>' Finished in 0.21174 seconds 2 examples, 1 failure Failed examples: rspec ./spec/features/welcome/about.html.erb_spec.rb:5 # .about access about page Randomized with seed 30415 jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$
  • 34. Primeiros Testes Criar conteúdo para /app/views/welcome/about.html.erb @jlucasps
  • 35. Primeiros Testes Executar $ rspec @jlucasps jlucasps@lotus: /media/truecrypt1/handsonrails/first_app$ rspec .. Finished in 0.19564 seconds 2 examples, 0 failures Randomized with seed 30993 jlucasps@lotus: /media/truecrypt1/handsonrails/first_app$
  • 36. Primeiros Testes Executar mesmos procedimento para página /app/views/welcome/contact.html.erb @jlucasps jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec ... Finished in 0.20856 seconds 3 examples, 0 failures Randomized with seed 28272 jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ $ git add . $ git commit -m "Páginas index, about e contact"
  • 37. Primeiros Testes Adicionar mais um bloco it .... do @jlucasps require 'spec_helper' describe ".index", :type => :feature do it "access index page" do visit index_path page.should have_content("Hello, world!") end it "access public pages" do visit index_path page.should have_content("Hello, world!") click_link "About" page.should have_content("About us") click_link "Contact" page.should have_content("How to find us") click_link "Home" page.should have_content("Hello, world!") end end
  • 38. Primeiros Testes @jlucasps jlucasps@lotus:/media/truecrypt1/handsonrails/first_app$ rspec .F.. Failures: 1) .index access public pages Failure/Error: page.should have_content("About us") expected to find text "About us" in "Project name Logged in as Username Home About Contact Sidebar Link Link Link Link Hello, world! This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique. Learn more » Heading Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. View details » Heading Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. View details » © Company 2013" # ./spec/features/welcome/index.html.erb_spec.rb:15:in `block (2 levels) in <top (required)>' Finished in 0.30914 seconds 4 examples, 1 failure Failed examples: rspec ./spec/features/welcome/index.html.erb_spec.rb:10 # .index access public pages Randomized with seed 34047
  • 39. Primeiros Testes Alterar o partial /app/views/shared/_menu_top.html.erb @jlucasps <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav- collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <%= link_to "Project name", index_path, :class => "brand" %> <div class="nav-collapse collapse"> <p class="navbar-text pull-right"> Logged in as <a href="#" class="navbar-link">Username</a> </p> <ul class="nav"> <li class="active"><%= link_to "Home", index_path %></li> <li><%= link_to "About", about_path %></li> <li><%= link_to "Contact", contact_path %></li> </ul> </div><!--/.nav-collapse --> </div> </div> </div>
  • 40. Primeiros Testes @jlucasps jlucasps@lotus: /media/truecrypt1/handsonrails/first_app$ rspec .... Finished in 0.3571 seconds 4 examples, 0 failures Randomized with seed 51426 jlucasps@lotus: /media/truecrypt1/handsonrails/first_app$ $ git add . $ git commit -m "Navegação em páginas públicas" $ git push
  • 41. Desenvolvimento Web com Ruby on Rails João Lucas Pereira de Santana gtalk | linkedin | twitter: jlucasps Obrigado