Introduction à Rails

Introduction à Rails.

Présentation réalisée à l'Université de Sherbrooke dans le cadre de l'APIUS devant un groupe de gens n'ayant jamais touché à Rails.

Transcript

1. I!"r#$%&"'#! à Rails 1
2. Mathieu @allaire Charles @cvallieres 2
3. 3 www.lodgem.com
4. 4 P#%rq%#' %"'(')*r Rails?
5. 5 Rails est %! fr+,*w#r- w*b D*p%') 2004...
7. 7 Convention > Configuration
8. 8 Don’t repeat yourself (DRY)
9. 9 MVC modèle-vue-contrôleur
10. 10 RESTful Inspiré du protocole HTTP
11. 11 O! '!)"+((* ç+ &#,,*!"?
12. 12 $ gem install rails $ rails new my-app
15. 14 Application La base
16. ★ Traitements des données ★ Interactions avec la base de données ★ Active record pattern (ORM) 15 L* ,#$è(*
17. 16 class Contact < ActiveRecord::Base has_one :company # (models/company.rb) has_many :comments # (models/comment.rb) validates :first_name, presence: true validates :last_name, presence: true validates :email, presence: true, email: true end app/models/contact.rb
18. 17 # Compagnie du contact avec le id 1 Contact.find(1).company # Retourne #<Company id: 1, uuid: "d4a08530", name: "Lodgem", tenants_count: 54, tasks_remaining_count: 0, created_at: "2013-07-02 19:47:30", updated_at: "2013-07-04 17:57:00" @contact = Contact.where(first_name: 'Mathieu').first @comments = @contact.comments #[<Comment:0x36bff9c @attributes={"name"=>"Ruby Meetup", "description"=>"Lorem ipsum..."}>, ...]
19. 18 Post.find_by_sql "SELECT p.title, c.author FROM posts p, comments c WHERE p.id = c.post_id" #[<Post:0x36bff9c @attributes={"title"=>"Ruby Meetup", "first_name"=>"Quentin"}>, ...]
20. ★ Affiche l’information ★ HTML, JSON, XML, etc. 19 L+ v%*
21. 20 <p> <strong>First name:</strong> <%= @contact.first_name %> </p> <p> <strong>Last name:</strong> <%= @contact.last_name %> </p> <p> <strong>Email:</strong> <%= @contact.email %> </p> <p> <strong>Phone:</strong> <%= @contact.phone %> </p> app/views/contacts/show.html.erb
22. 20 <p> <strong>First name:</strong> <%= @contact.first_name %> </p> <p> <strong>Last name:</strong> <%= @contact.last_name %> </p> <p> <strong>Email:</strong> <%= @contact.email %> </p> <p> <strong>Phone:</strong> <%= @contact.phone %> </p> app/views/contacts/show.html.erb ?
23. ★ Fait le lien entre le modèle et la vue ★ Gestion de la requête et de la réponse 21 L* &#!"rô(*%r
24. 22 class ContactsController < ApplicationController ... # GET /contacts/:id # GET /contacts/:id.json # GET /contacts/:id.pdf def show @contact = Contact.find(params[:id]) respond_to do |format| format.html format.pdf { render :pdf => generate_pdf(@contact) } format.json { render :json => @contact } end end ... end app/controllers/contacts_controller.rb
25. 22 class ContactsController < ApplicationController ... # GET /contacts/:id # GET /contacts/:id.json # GET /contacts/:id.pdf def show @contact = Contact.find(params[:id]) respond_to do |format| format.html format.pdf { render :pdf => generate_pdf(@contact) } format.json { render :json => @contact } end end ... end app/controllers/contacts_controller.rb
26. 22 class ContactsController < ApplicationController ... # GET /contacts/:id # GET /contacts/:id.json # GET /contacts/:id.pdf def show @contact = Contact.find(params[:id]) respond_to do |format| format.html format.pdf { render :pdf => generate_pdf(@contact) } format.json { render :json => @contact } end end ... end app/controllers/contacts_controller.rb PHP $_POST $_GET = params
27. 23 E" ,+'!"*!+!" (* "#%" *!)*,b(*...
28. 24 Navigateur Contrôleur Modèle Vue
29. 24 Navigateur Contrôleur Modèle Vue
30. 24 Navigateur Contrôleur Modèle Vue
31. 24 Navigateur Contrôleur Modèle Vue
32. 24 Navigateur Contrôleur Modèle Vue
33. 24 Navigateur Contrôleur Modèle Vue
34. 25 Les routes Par où on va?
35. 26 MyApp::Application.routes.draw do # Authentication get 'signin', to: 'session#new' post 'signin', to: 'session#create' delete 'signout', to: 'session#destroy' # Forgot password get 'forgot_password', to: 'password_resets#new' post 'forgot_password', to: 'password_resets#create' # Locale get 'locale/switch/:locale', to: 'locale#switch', as: 'locale_switch' end config/routes.rb
36. 27 Bundler Gestionnaire de gems
37. ★ Gestion des dépendances ★ Versionnement de chaque gem 28 B%!$(*r & G*,.(*
38. 29 source 'https://rubygems.org' # Rails framework gem 'rails' # I18n for default messages gem 'rails-i18n' # Deploy gem 'capistrano' # Background jobs gem 'sidekiq' # Mail receiver gem 'mailman' # jQuery with rails addons gem 'jquery-rails' # Mass assignment protection gem 'strong_parameters', git: 'git://github.com/rails/strong_parameters.git' # Encryption gem 'bcrypt-ruby', '~> 3.0.0' # Postgres + Postgres full-text search gem 'pg', '~> 0.14.1' Gemfile
39. 30 O- *" &’*)" "#%"? Non.
40. 31 Assets pipeline
42. 33 $blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 9%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; } .content-navigation { border-color: #3bbfce; color: #2b9eab; } .border { padding: 8px; margin: 8px; border-color: #3bbfce; } Sass CSS
43. 34 .my-table { margin: 2em 0; td { text-align: right; } } Sass CSS .my-table { margin: 2em 0; } .my-table td { text-align: right; }
44. 35 Sass mixins @mixin image-2x($image, $width, $height) { @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { /* on retina, use image that's scaled by 2 */ background-image: image-url($image); background-size: $width $height; } } .icon-house { background: image-url('icons/house.png') no-repeat; @include image-2x('icons/house@2x.png', 23px, 22px); display: block; margin-top: 8px; width: 23px; height: 22px; }
45. 36 body{margin-bottom:390px;background:#fff;font-size:16px;font-size:1.6rem}::selection{background:#e2f2fb}p{font-weight:300;line- height:1.5em}a{border-bottom:1px solid #0185c6;color:#018fd5;text-decoration:none;-webkit-transition:color 0.1s ease-in-out;-moz- transition:color 0.1s ease-in-out;transition:color 0.1s ease-in-out}a:hover{border-color:#014b6f} a:active,button:active{position:relative;top:1px}img{max-width:100%}address{font-style:normal}em{color:#018fd5;font-style:normal} hr{margin:40px 0;height:3px;border:0;background:#dddddd}.thin{height:1px}form{margin-bottom:40px} input[type="text"],input[type="email"],textarea,select{display:block;padding:10px;-webkit-box-sizing:border-box;-moz-box- sizing:border-box;box-sizing:border-box;width:100%;border:1px solid #dddddd;border-top-color:#d0d0d0;box-shadow:inset 0 1px 0 #e5e5e5;color:#3d424f}textarea{resize:none}.placeholder{color:#d0d0d0}select{-webkit-appearance:none;-moz-appearance:none;-ms- appearance:none;-o-appearance:none;appearance:none;border-radius:0;background:transparent url("/assets/dropdown- arrows-68732eee76dcaf111726bb24299a3926.png") no-repeat 97% center;box-shadow:none}h2,h3,h4{color:#3d424f;font-weight:300}h2{font- size:28px;font-size:2.8rem;color:#3d424f;font-weight:300}h3{font-size:22px;font-size:2.2rem}.is-hidden{display:none}.is- centered{margin-bottom:40px;text-align:center}.is-low-opacity{opacity:0.99}.is-not-padded{padding:0}.is-not-bordered{border- bottom:0}.l-container{position:relative;margin:auto;max-width:960px;*zoom:1}.l-container:before,.l-container:after{content:" ";display:table}.l-container:after{clear:both}.l-container-tall{height:100%}.l-row,.l-duo{*zoom:1}.l-row:before,.l-duo:before,.l- row:after,.l-duo:after{content:" ";display:table}.l-row:after,.l-duo:after{clear:both}.l-content{float:left;width:58%}.l- aside{float:right;width:30%}.l-header{position:relative;z-index:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box- sizing:border-box;padding:12px 20px;width:100%;background-color:white;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(50%,#fff),color-stop(100%,#f4fafd));background-image:-webkit-linear- gradient(#fff,#fff,#f4fafd);background-image:linear-gradient(#fff,#fff,#f4fafd);box-shadow:0 1px 3px rgba(0,0,0,0.4)}.l- homepage .l-header{position:fixed;top:0;left:0}.l-header-logo{float:left;margin-top:0px;width:230px}.l-header- nav{float:right;margin-top:17px}.rgba .l-header.is-low-opacity{background-color:transparent}.l-main{padding:20px 20px}.l- homepage .l-main{padding-left:0;padding-right:0}.l-footer{position:absolute;bottom:0;left:0;-webkit-box-sizing:border-box;-moz- box-sizing:border-box;box-sizing:border-box;padding:40px 20px;width:100%;height:390px;background:#3b404c;color:#dddddd}.l-footer- box{float:left;margin:0 8% 40px 8%}.l-footer-box:first-child{margin-left:0}.l-footer-box:last-child{margin-right: 0}.error{background:#e74c3c;color:white}.success{background:#1abc9c;color:white}.h-extend{position:absolute;top:50%;right: 50%;margin-top:-25px;margin-right:480px;width:100%;height:60px;background:#20232b;background:rgba(32,35,43,0.7)}.h- extended{position:absolute;top:50%;left:0;margin-top:-25px;padding:7px 20px 7px 0;height: 46px;background:#20232b;background:rgba(32,35,43,0.7);color:#fff;font-weight:400;font-size:38px;font-size:3.8rem}.h- bordered{padding:20px 0;border-top:1px solid #dddddd;border-bottom:1px solid #dddddd;text-align:center;line-height:1.5em}.h2- large{font-size:34px;font-size:3.4rem;font-weight:600}.btn{display:inline-block;-webkit-box-sizing:border-box;-moz-box- sizing:border-box;box-sizing:border-box;padding:10px 15px;border-radius:4px;box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.35),0 1px 2px 0 rgba(0,0,0,0.1);vertical-align:middle;text-align:center;text-decoration:none;font-weight:700;line-height: 1em;cursor:pointer}.btn-big{padding:13px 18px;font-size:18px;font-size:1.8rem}.btn-wide{padding:12px 40px}.btn-outline{border:2px solid #dddddd;background:#fcfeff;box-shadow:none;color:#5e5e5e}.btn-outline:hover{border-color:#d0d0d0}.btn-flat{border:2px solid white;background:white;box-shadow:none;color:#657b88}.btn-flat:hover{color:#3d424f;border-color:white}.btn-primary{background- color:#15b1fe;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#15b1fe),color- stop(100%,#0188cb));background-image:-webkit-linear-gradient(#15b1fe,#0188cb);background-image:linear- gradient(#15b1fe,#0188cb);border:1px solid #0181c1;color:white;text-shadow:0 -1px 0px rgba(0,0,0,0.5)} Fait cela automatiquement...
46. http://smacss.com/ SMACSS 37
47. 38 Sécurité
48. 39 ★ Sessions sécurisées ★ Cross-Site Request Forgery (CSRF) ★ SQL Injection ★ Cross-Site Scripting (XSS) ★ Etc... http://guides.rubyonrails.org/security.html
49. 40 Suite de tests
50. 41 class UserTest < ActiveSupport::TestCase it 'wont validate password when less than 8 characters' do user = FactoryGirl.build(:user) user.password = '1234567' user.valid?.must_equal false end it 'must require first name' do user = FactoryGirl.build(:user, :first_name => nil) user.valid?.must_equal false end end test/models/user_test.rb
51. 42 Mailers
52. 43 Internationalisation I18N
53. 44 en: # Navigation nav: home: "Home" dashboard: "Dashboard" properties: "Properties" tasks: "Tasks" documents: "Documents" contacts: "Contacts" accounting: "Accounting" search: "Search" options: "Options" account: "My account" organization: "Organization" subscription: "Subscription" admin: "Administration" sign_out: "Sign out" fr-CA: # Navigation nav: home: "Accueil" dashboard: "Tableau de bord" properties: "Propriétés" tasks: "Tâches" documents: "Documents" contacts: "Contacts" accounting: "Comptabilité" search: "Recherche" options: "Options" account: "Mon compte" organization: "Organisation" subscription: "Abonnement" admin: "Administration" sign_out: "Se déconnecter" config/locales/en.yml config/locales/fr-CA.yml
54. 45 <nav> <ul> <li><a href="#"><%= t('nav.home') %></a></li> <li><a href="#"><%= t('nav.properties') %></a></li> ... </ul> </nav> app/views/nav.html.erb
55. 46 Et beaucoup plus...
56. 47 C#,p+r+"'f) +v*& %! fr+,*w#r- PHP
57. Framework PHP 48 ‣ Hébergement facile et simple ‣ Beaucoup de programmeurs ‣ Simple à apprendre ‣ Peut être utilisé pour les très petits projets
58. http://laravel.com Laravel 49 S','(+'r* à R+'()
59. Ruby on Rails 50 ‣ Très structuré ‣ Communauté dynamique ‣ À l’avant-garde des meilleures pratiques du web ‣ Syntaxe agréable et flexible (Ruby)
60. 51 L* /+/!+!"? Aucun.
61. 52 Q%*(q%*) b#!) ('*!)...
62. http://railscasts.com Railscasts 53
63. http://guides.rubyonrails.org 54 Rails Guides
64. 55 http://ruby.railstutorial.org/ruby-on- rails-tutorial-book Rails tutorial book
65. 56 https://www.ruby-toolbox.com Ruby toolbox
66. 57 http://www.opensourcerails.com Open source Rails
67. 58 http://www.sinatrarb.com Sinatra
68. 59 Q%*)"'#!) ?
69. 60 M*r&' !