Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
-
Upload
cafenarlon -
Category
Technology
-
view
103 -
download
1
Transcript of Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
![Page 1: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/1.jpg)
Je code mon blog
avec Ruby et Ruby on Rails
![Page 2: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/2.jpg)
WIFI
SSID : OFAC_BUREAU1Pwd : oFaC-wireless
![Page 3: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/3.jpg)
Ruby on Rails developer depuis 2008Freelance depuis 2010● Pepper & Koffee (2008 - 2012)● 2houses.com (fév. 2012 - mars 2014)● Apptweak.com (depuis mars 2014)
Cédric Bousmanne (@akyrho)
![Page 4: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/4.jpg)
Sondage d’opinion
Qui a déjà utilisé un langage de programmation ?
Si oui, le(s)quel(s) ?
![Page 5: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/5.jpg)
Installation de Ruby
https://bitnami.com/stack/ruby/installer
![Page 6: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/6.jpg)
Ruby vs. Ruby on Rails (RoR)
Langage de programmation interpreté, orienté objet
Framework construit sur Ruby
![Page 7: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/7.jpg)
MVC
Modèle : traitement des données, interaction BDDVue : Présente les résultats, recevoir les actions de l’utilisateurContrôleur : Réception des événements, enclenche les actions à effectuer
![Page 8: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/8.jpg)
MVC par l’exemple
Je souhaite envoyer un commentaire● La vue me présente un formulaire que je
rempli● Le contrôleur réceptionne la requête
lorsque j’ai envoyé mon commentaire● Le modèle valide les informations reçues
avant de les enregistrer
![Page 9: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/9.jpg)
DRY (Don’t Repeat Yourself)Facilité par MVC et la métaprogrammation
Convention over configurationSuivre les conventions plutôt que de les préciser
Philosophie de Ruby on Rails
![Page 10: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/10.jpg)
Exemple de convention
Singulier vs. plurielModèle : UserController : UsersController
![Page 11: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/11.jpg)
Vérifier l’installation
cd C:/Bitnami/rubystack-2.0.0-20use_ruby.bat
ruby -v-> ruby 2.0.0p481
![Page 12: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/12.jpg)
Editeur de texte
http://www.sublimetext.com/2
![Page 13: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/13.jpg)
Créer un projet Rails
gem install rails # gem install <gem>
rails new blog # rails new <project>
cd blog
![Page 14: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/14.jpg)
Architecture d’un projet rails
app- assets- controllers- helpers- mailers- models- views
![Page 15: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/15.jpg)
invoke active_record create db/migrate/20141009165133_create_articles.rb create app/models/article.rb invoke test_unit create test/models/article_test.rb create test/fixtures/articles.yml invoke resource_route route resources :articles invoke scaffold_controller create app/controllers/articles_controller.rb (...)
Création du premier scafold
rails generate scaffold article title:string content:text
![Page 16: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/16.jpg)
Ce qu’il s’est passé
● Création d’une migration● Création du modèle● Création des routes● Création du controlleur● Création des vues● Création des assets (js/css)● Création des tests
![Page 17: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/17.jpg)
Migration de la base de donnée
rake db:migrate
-- create_table(:articles)
![Page 18: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/18.jpg)
Publier un article
http://localhost:3000/articles/new
![Page 19: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/19.jpg)
Liste des articles
http://localhost:3000/articles
![Page 20: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/20.jpg)
resources :articles
Les routesfichier config/routes.rb
Prefix Verb URI Pattern Controller#Action
articles GET /articles articles#index
POST /articles articles#create
new_article GET /articles/new articles#new
edit_article GET /articles/:id/edit articles#edit
article GET /articles/:id articles#show
PUT /articles/:id articles#update
DELETE /articles/:id articles#destroy
![Page 21: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/21.jpg)
Ajouter la route par défautconfig/routes.rb
resources :articles
root ‘articles#index’
![Page 22: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/22.jpg)
Modifier l’index des articles
<% @articles.each do |article| %>
<%= render article %>
<% end %>
<%= link_to 'New Article', new_article_path %>
puis rafraîchir la page
app/views/articles/index.html.erb
![Page 23: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/23.jpg)
<section><h2><%= link_to article.title, article %></h2><%= article.content %>
</section>
<hr>
Création du partielapp/views/articles/_articles.html.erb
![Page 24: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/24.jpg)
Un peu de styleapp/assets/stylesheets/articles.css.scss
https://gist.githubusercontent.com/cedricbousmanne/4b0a4bed2cb46a07a8fd/raw/cd8362e32e917c4648ed47b91870f91b6381e8b6/articles.css.scss
![Page 25: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/25.jpg)
Articles#showapp/views/articles/show.html.erb
<%= render @article %>
puis rafraîchir la page
![Page 26: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/26.jpg)
Le layoutapp/views/layouts/application.html.erb
<h1><%= link_to “My awesome blog”, root_path %></h1>
<%= yield %>
puis rafraîchir la page
![Page 27: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/27.jpg)
Un peu d’ordreapp/models/article.rb
class Article < ActiveRecord::Base
default_scope { order(“created_at DESC”) }
end
puis rafraîchir la page
![Page 28: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/28.jpg)
Valider la présence d’attributs
class Article < ActiveRecord::Base
default_scope { order(“created_at DESC”) }
validates_presence_of :title
validates_presence_of :content
end
puis tenter d’ajouter un article sans titre et/ou sans contenu
app/models/article.rb
![Page 29: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/29.jpg)
Et après ?● Déporter les actions create, destroy, update dans une
interface d’administration sécurisée● Ajouter un système de commentaire● Gérer la mise en page des articles● Gérer l’ajout d’image/vidéo● Implémenter un système de pagination● Gestion multi-utilisateur● Gestion d’état (en ligne/hors ligne)● ...
![Page 30: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/30.jpg)
Les gems
Rubygems est gestionnaire de paquets pour ruby (~= plugins)
+/- 90,000 gems disponibles
![Page 31: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/31.jpg)
Installation d’une gem
- En ligne de commande$ gem install devise
- Via le Gemfile (recommandé)Ajout d’une ligne dans le Gemfile$ bundle install
![Page 32: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/32.jpg)
Gems populairesDevise Authentification / Gestion des
utilisateurs
Cancan Gestion des permissions
Kaminari Pagination
Capistrano Automatisation du déploiement
Carrierwave Dragonfly
Upload / gestion d’image / fichier
![Page 33: Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a1bcea1a28ab7e218b472c/html5/thumbnails/33.jpg)
Pour aller plus loin
● rubygems.org● ruby-toolbox.com● railscasts.com● guides.rubyonrails.org