ADD French Translation for Episode 298

episodes/298 - Getting Started With Spree/fr.html

@@ -0,0 +1,195 @@
+<p><a href="http://spreecommerce.com/">Spree</a> est une solution e-commerce complète qui peut facilement être intégrée dans une application Rails. Si vous avez besoin de transformer une application Rails en une boutique de vente de produits alors Spree est une des solutions les plus rapides. Dans cette épisode, nous allons déployer Spree dans une nouvelle application Rails et personnaliser quelques unes de ses fonctionnalités pour que vous ayez une idée de la façon dont Spree fonctionne et que vous voyiez si Spree répond aux besoins de votre application.</p>
+
+<h3>Installer Spree</h3>
+
+<p>Spree est dépendant de <a href="http://www.imagemagick.org/script/index.php">ImageMagick</a> pour manipuler les images donc nous allons l'installer en premier. La meilleure façon de faire est d'utiliser HomeBrew.</p>
+
+``` terminal
+$ brew install imagemagick
+```
+
+<p>Une fois qu'ImageMagick est installé, nous pouvons créer une nouvelle application Rails 3.1 que nous appellerons <code>store</code>. Spree peut être intégré dans une applications Rails existante mais c'est une bonne idée de l'essayer dans une nouvelle application d'abord pour bien voir ce que ça apporte.</p>
+
+``` terminal
+$ rails new store
+```
+
+<p>Pour installer Spree et ses nombreuses dépendances, nous avons besoin l'ajouter au fichier <code>Gemfile</code> de l'application et d'exécuter la commande <code>bundle</code>. Spree est reegulièrement mis à jour donc nous devons préciser la version. La version <code>0.70.1</code> est la version courante au moment de la rédaction de cette article.</p>
+
+``` /Gemfile
+source 'http://rubygems.org'
+
+gem 'rails', '3.1.1'
+
+gem 'sqlite3'
+
+# Gems used only for assets and not required
+# in production environments by default.
+group :assets do
+  gem 'sass-rails',   '~> 3.1.4'
+  gem 'coffee-rails', '~> 3.1.1'
+  gem 'uglifier', '>= 1.0.3'
+end
+
+gem 'jquery-rails'
+
+group :test do
+  # Pretty printed test output
+  gem 'turn', :require => false
+end
+
+gem 'spree', '0.70.1'
+```
+
+<p>Dès que les gems sont installées, il nous faut exécuter un générateur pour ajouter Spree à notre site.</p>
+
+``` terminal
+$ rails g spree:site
+```
+
+<p>Cette commande fait un certain nombre de choses. Elle copie les fichiers de migrations qui créent les tables de la base de données dont a besoin Spree et personnalise plusieurs fichiers de notre application, principalement dans le dossier <code>app/assets</code>. Le générateur va aussi supprimer les fichiers <code>application.js</code> et <code>application.css</code>, donc si vous avez modifié ces scripts, vous aurez besoin de les réintégrer en suivant la manière dont Spree organise les assets de l'application.</p>
+
+<p>Si on regarde le répertoire <code>/app/assets</code> maintenant, nous verrons que chaque répertoire à l'intérieur , <code>images</code>, <code>javascripts</code> et <code>stylesheets</code>, ont dorénavant des sous-répertoires <code>admin</code> et <code>store</code>. Ceci est fait pour garder les assets pour la partie publique de la boutique et ceux de l'administration séparés. Si on inspecte le fichier <code>all.css</code> (ou <code>application.js</code>), on peut voir qu'il requiert (<code>require</code>) plusieurs fichiers qui sont à l'intérieur de Spree et les charge automatiquement.</p>
+
+``` /app/assets/stylesheests/store/all.css
+/*
+ * This is a manifest file that'll automatically include all the stylesheets available in this directory
+ * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
+ * the top of the compiled file, but it's generally better to create a new file per style scope.
+ *
+
+ *= require store/spree_core
+ *= require store/spree_auth
+ *= require store/spree_api
+ *= require store/spree_promo
+ *= require store/spree_dash
+
+ *= require_self
+ *= require_tree .
+*/
+```
+
+<p>Il y a encore une commande que nous devons exécuter pour finir l'installation. Elle lancera les migrations qui ont été copiées plus tôt. Note qu'il vous sera demandé si vous voulez détruire les données de la base de données existantes.</p>
+
+``` terminal
+$ rake db:bootstrap
+This task will destroy any data in the database. Are you sure you want to 
+continue? [y/n] y
+db/development.sqlite3 already exists
+...
+```
+
+<p>Cette commande demandera également une adresse email et un mot de passe pour l'administrateur; nous allons utiliser ceux fournis par défaut. Finalement, on nous demandera si on veut charger quelques données d'exemple, ce que nous accepterons pour avoir quelque chose dans notre boutique.</p>
+
+``` terminal
+Email [spree@example.com]: 
+Password [spree123]: 
+Load Sample Data? [y/n]: y
+```
+
+<p>On peut finalement démarrer le serveur de notre application et jeter un oeil.</p>
+
+<h3>Un premier regard sur Spree</h3>
+
+<p>Voilà à quoi ressemble notre boutique. Par défaut, il n'y a aucun thème appliqué donc c'est un peu vilain mais nous avons une boutique e-commerce complète contenant les produits d'exemples que nous avons chargés.</p>
+
+<div class="imageWrapper">
+  <img src="http://asciicasts.com/system/photos/841/original/E298I01.png" width="842" height="368" alt="The basic Spree site."/>
+</div>
+
+<p>Il y a aussi une section d'administration disponible <a href="http://localhost:3000/admin"><code>http://localhost:3000/admin</code></a> et une fois connecté en utilisant l'adresse email et le mot de passe que nous avons donné, on peut la consulter. Elle est aussi plutôt complète en fonctionnalité et nous permet de consulter les commandes et différents graphiques. Il y a aussi des pages pour nous permettre de voir et modifier les produits et les commandes.</p>
+
+<div class="imageWrapper">
+  <img src="http://asciicasts.com/system/photos/842/original/E298I02.png" width="842" height="464" alt="The admin site."/>
+</div>
+
+<p>La section d'administration propose également plusieurs options de configurations incluant la possibilité de changer les méthodes de paiement que votre boutique supporte. Il y a différentes méthodes de paiement pour différents environnements et quand on en modifie une on peut changer la passerelle de paiement qu'elle utilise. Quand on fait ceci, Spree nous donne les options pour saisir les certificats pour cette passerelle afin qu'on puisse configurer notre boutique pour n'importe quelle passerelle de paiement que nous avons.</p>
+
+<h3>Personnaliser Spree</h3>
+
+<p>Nous avons une solution e-commerce facilement compréhensible dans notre application Rails mais qu'en est-il si on veut gérer à quoi ressemble notre application pour nos clients ? Nous allons prendre le temps de voir différentes façons pour personnaliser l'apparence et le comportement de la boutique.</p> 
+
+<p>Spree supporte les thèmes et les extensions et <a href="https://github.com/spree/spree_blue_theme">Blue Theme</a> sert d'exemple de comment nous personnaliser Spree. Ce thème, comme la plupart des choses dans Spree, est un moteur Rails et nous pouvons l'utiliser pour surcharger différentes choses dans les répertoires <code>app/assets</code> et <code>app/overrides</code>. Pour installer le thème, on ajoute la ligne suivante dans le <code>Gemfile</code> et on exécute <code>bundle</code>.</p>
+
+``` /Gemfile
+gem 'spree_blue_theme', :git => 'git://github.com/spree/spree_blue_theme.git'
+```
+
+<p>Pour que le thème fonctionne, nous avons vu qu'il était nécessaire de changer un fichier de style et de remplacer les styles par défaut (ceux qui commencent par <code>require store/</code>) par ceux fournis par le thème.</p>
+
+``` /app/assets/stylesheets/store/all.css
+/*
+ * This is a manifest file that'll automatically include all the stylesheets available in this directory
+ * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
+ * the top of the compiled file, but it's generally better to create a new file per style scope.
+ *
+
+ *= require store/screen
+ *= require_self
+ *= require_tree .
+*/
+```
+
+<p>La boutique est maintenant vraiment différente et que nous ayions choisis d'utiliser des thèmes ou non, ça suffit comme exemple de personnalisation de l'apparence de l'application Spree.</p>
+
+<div class="imageWrapper">
+  <img src="http://asciicasts.com/system/photos/843/original/E298I03.png" width="842" height="562" alt="The site with the theme applied."/>
+</div>
+
+<h3>Personnaliser des parties individuelles du site</h3>
+
+<p>Maintenant, nous allons voir comment personnaliser des parties du site. Si, par exemple, on veut changer le logo en haut à gauche de la page par un de notre propre création, on peut le faire. L'image par défaut est stockée là <code>/assets/admin/bg/spree_50.png</code> et est fournie par le moteur de Spree mais on peut la surcharger dans notre application.</p>
+
+<p>Il y a deux façons de faire ça. La première est de créer un dossier <code>/app/assets/images/admin/bg</code> dans notre application et copier une autre image, par exemple <code>rails.png</code>, dans ce dossier, en la renommant en <code>spree_50.png</code>. Cette image surchargera celle par défaut et nous la verrons en rechargeant la page (bien qu'il puisse être nécessaire de redémarrer le serveur pour que les changements soient pris en compte).</p> 
+
+<p>Une autre façon de changer le logo est de surcharger une partie de la configuration de Spree. La configuration par défaut est défini dans un <a href="https://github.com/spree/spree/blob/master/core/app/models/spree/app_configuration.rb">file</a> qui a un grand nombre d'options de configuration. Est notamment inclue l'option pour le logo qui pointe vers le chemin par défaut. Spree fourni un système entier de préférences qui permet de configurer ces options de différentes façons. On peut le faire via la base de données, via un panneau d'administration ou on peut créer un initializer et faire ces changements via Ruby. On va choisir la dernière option et créer un nouveau fichier de configuration <code>spree.rb</code>.</p>
+
+``` /config/initializers/spree.rb
+Spree::Config.set(logo: "store/rails.png")
+```
+
+<p>On appelle <code>Spree::Config.set</code> pour définir les options de configuration et définir le chemin du logo en <code>/app/assets/images/store/</code> et le renommer en <code>rails.png</code>. Quand on recharge la page, l'image est à <code>http://localhost:3000/assets/store/rails.png</code>.</p>
+
+<p>On peut aussi personnaliser Spree en surchargeant des parties de template. Pour ce faire, il faut d'abord trouver le template dans Spree. Ce qui n'est pas difficile à faire mais il faut être sûr de parcourir la bonne version de Spree. Dans notre cas, nous aurons besoin de parcourir la <a href="https://github.com/spree/spree/tree/v0.70.1">version 0.70.1</a>. Dès qu'on est sûr de chercher dans la bonne version, on peut aller dans <code>core/app/views/layouts</code> où on trouvera un fichier <code>spree_application.html.erb</code>. C'est le template qu'on veut surcharger puisqu'il contient le code qui rend le logo.</p>
+
+``` /app/views/layouts/spree_application.html.erb
+<div id="logo" data-hook>
+  <%= logo %>
+</div>
+```
+
+<p>Il y a différentes façons de surcharger la façon dont ça apparait. On peut copier le layout complet au même niveau dans notre application. Spree utilisera ensuite ce template au lieu de celui par défaut et chaque changement que nous ferons sera réfléchi dans notre application.</p>
+
+<p>Une autre façon est d'utiliser une gem appelée <a href="https://github.com/railsdog/deface">Deface</a>. Nous n'avons pas besoin de l'installer puisqu'il s'agit déjà d'une dépendance de Spree et on peut l'utiliser dans le dossier <code>/app/overrides</code> que Spree a généré pour surcharger les parties de templates de Spree. Les informations README sur la page d'accueil du projet contiennent différentes informations montrant comment faire. Nous allons copier le premier exemple listé dans le fichier dans ce répertoire appelé <code>logo.rb</code> et le modifier pour la partie que l'on veut changer.</p>
+
+``` /app/overrides/logo.rb
+Deface::Override.new(:virtual_path => "layouts/spree_application", 
+                     :name => "logo", 
+                     :replace_contents => "#logo", 
+                     :text => "Store")
+```                     
+
+<p>Il y a quatre options à spécifier ici. <code>virtual_path</code> est le chemin vers le template erb que l'on veut modifier, <code>name</code> peut être ce qu'on veut. On veut remplacer le contenu d'un <code>div</code> avec un <code>id</code> de <code>logo</code> donc nous allons utiliser l'option <code>replace_contents</code> et lui donner le sélecteur CSS qui correspond au <code>div</code>. L'option finale spécifie ce par quoi on veut remplacer; pour l'instant nous remplacerons le logo avec le texte &ldquo;Store&rdquo;.</p>
+
+<p>Quand on recharge la page, le logo est disparu et le texte apparait à sa place.</p>
+
+<div class="imageWrapper">
+  <img src="http://asciicasts.com/system/photos/844/original/E298I04.png" width="842" height="370" alt="The logo has now been replaced by the word &ldquo;Store&rdquo;."/>
+</div>
+
+<p>Nous avons remplacé l'image avec le text mais il faut le styler un peu. On peut ajouter le style dans le dossier <code>stylesheets/store</code> et c'est une bonne pratique de le faire dans un nouveau fichier. On va rendre le texte plus large et le mettre en blanc.</p>
+
+``` /app/assets/stylesheets/store/layout.css.scss
+#logo {
+  font-size: 32px;
+  color: #FFF;
+}
+```
+
+<p>Quand on visite l'application, on peut voir le nouveau style.</p>
+
+<div class="imageWrapper">
+  <img src="http://asciicasts.com/system/photos/845/original/E298I05.png" width="842" height="370" alt="The text is now styled."/>
+</div>
+
+<p>C'est tout pour cet épisode. Il y a encore beaucoup de chose sur Spree à connaitre et nous vous encourageant à lire <a href="http://guides.spreecommerce.com/">Spree Guides</a> pour plus d'informations. Il y a un sujet pour à peu près toute chose qu'il y a savoir sur Spree.</p>