Développez votre application

Créé par Vesa Vänskä, @vesan

Premièrement, installez Ruby on Rails en suivant ce guide.

Étape 0: Étudier les outils

Étape 1: Créer l’application

Vous allez créer une application appelée railsgirls.

Ouvrez le Terminal / Ligne de commande :

Tapez les commandes:

mkdir projects
cd projects
rails new railsgirls
cd railsgirls
rails s

Ouvrez http://localhost:3000 dans votre navigateur.

CTRL-C pour quitter le serveur dans le Terminal/Ligne de commande.

Coach: Expliquez chaque commande. Qu’est ce qui a été généré ? Comment marche le serveur ? Un mot à propos de MVC.

Étape 2: Créer le scaffold Idea

Vous allez utiliser les scaffolds de Rails pour générer un point de départ qui vous permettra de lister, ajouter, supprimer, éditer et voir des choses ; dans notre cas, des idées (Idea).

Coach: Qu’est-ce qu’un scaffold : (échafaudage, les fondations d’un immeuble) la commande, le nom des modèles et des tables, les conventions de nommage, les attributs et les types de données. Que sont les migrations, et quand en a t’on besoin ? Pourquoi ?

rails generate scaffold idea name:string description:text picture:string
rake db:migrate
rails s

Ouvrez http://localhost:3000/ideas dans votre navigateur.

Ctrl+C arrête le serveur quand vous avez fini de jouer avec.

Étape 3: Design

Coach: Parlez de la relation entre HTML et Rails, quelles parties des vues sont HTML et lesquelles sont du Ruby (ERB)? Quel est le rapport avec MVC ?

Le design n’est pas très beau. Essayons de faire quelque chose pour changer ça. Nous utiliserons le projet Twitter Bootstrap pour mettre un style par défaut plus joli facilement.

Ouvrez app/views/layouts/application.html.erb et ajouter au-dessus de

<%= stylesheet_link_tag "application" %>

la ligne

<link rel="stylesheet" href="http://railsgirls.com/assets/bootstrap.css">

et remplacez

<%= yield %>

par

<div class="container">
    <%= yield %>
</div>

Let’s also add topbar and footer to the layout and style those and the ideas table. Ajoutez la barre de menu et le footer à la page et stylez-les, ainsi que la table des idées.

Dans application.html.erb sous <body> ajoutez :

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="/">The Idea app</a>
            <ul class="nav">
                <li class="active"><a href="/ideas">Ideas</a></li>
            </ul>
        </div>
    </div>
</div>

et avant </body> ajoutez :

<footer>
    <div class="container">
        Rails Girls 2012
    </div>
</footer>

Ouvrez app/assets/stylesheets/application.css et ajoutez à la fin :

#logo { 
    font-size: 20px;
    font-family: &quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif;
    float: left;
    padding: 10px;
}
body { padding-top: 100px; }
footer { margin-top: 100px; }
table, td, th { vertical-align: middle !important; border: none !important; }
th { border-bottom: 1px solid #DDD !important; }
td.picture { width: 140px; }
td.picture img { width: 140px; }

Coach: Parlez un peu des layouts et de CSS.

Étape 4: Ajout de l’upload d’images

Vous avez besoin d’installer une bibliothèque pour charger les images.

Ouvrez Gemfile dans le projet et ajoutez

gem 'carrierwave'

sous

gem 'sqlite3'

Coach: Tell what libraries are and why they are used. Maybe few words about Open Source? Coach: Quelles sont les bibliothèques utilisées et pourquoi sont elles utilisées ? Parler de l’Open Source.

Maintenant, générez le code nécessaire à l’upload des images. Dans le Terminal/Ligne de commande, lancez :

bundle
rails generate uploader Picture

Ouvrez app/models/idea.rb et ajoutez

mount_uploader :picture, PictureUploader

sous la ligne

class Idea < ActiveRecord::Base

Dans app/views/ideas/_form.html.erb, remplacez

<%= f.text_field :picture %>

par

<%= f.file_field :picture %>

et

<%= form_for(@idea) do |f| %>

par

<%= form_for(@idea, :html => {:multipart => true}) do |f| %>

La vue n’est pas jolie, elle affiche seulement le chemin vers le fichier. Changez ça

Ouvrez app/views/ideas/show.html.erb et remplacez

<%= @idea.picture %>

par

<%= image_tag(@idea.picture_url, :width => 600) if @idea.picture.present? %>

Coach: un mot sur HTML.

5: Modifiez les routes

Si vous essayez d’ouvrir http://localhost:3000, vous verrez que cela affiche toujours la page par défaut. Faites en sorte que cela redirige vers la page des idées.

Sur OS X et Linux, dans le Terminal, lancez :

rm public/index.html

Sur Windows, dans la Ligne de commande, lancez :

del public\index.html

Enfin, ouvrez config/routes.rb et ajoutez à la seconde ligne du fichier :

root :to => redirect("/ideas")

Allez plus loin

Guides additionnels