Mois : mars 2014

[RBS Cooking] Créer un vhost dynamique pour les nuls

31/03/2014 /

Cette opération va vous permettre de consulter depuis son IP un projet hébergé sur votre VM à partir d’un support mobile connecté au réseau local (wifi).

Récupérer l’adresse IP à placer dans l’url

Connectez-vous à votre VM en SSH et tapez :

L’adresse IP qui nous intéresse commence par 10.199.xx.xx

Créez un vhost pour le projet

Créez un vhost pour le projet que vous souhaitez rendre accessible depuis un support mobile connecté au réseau local.

**1.** Depuis la racine de votre VM, rendez-vous dans le répertoire qui stocke les fichiers vhosts :

Commencez par faire une copie du vhost servant de base à tous les projets Change hébergés sur votre VM en la nommant comme votre projet :

La commande « sudo » permet de jouir des droits d’administrateur requis à ce type de manipulations.

**2.** Lancez l’édition du vhost que vous venez de créer :

**Remarque** : le répertoire « sites-available » contient l’ensemble des vhosts disponibles, tandis que le répertoire « sites-enabled » contient l’ensemble des vhosts en cours d’éxecution (n’éditez rien dans ce répertoire; cette remarque est faite pour info).

**3.** Depuis l’interface d’édition que vous venez de lancer, modifiez en deux endroits l’adresse IP par celle fournie par le ifconfig :
* //ligne 1// «  »
* //ligne 3// « ServerName 10.199.xx.xx »

**4.** Modifiez également le répertoire cible du projet :
* //ligne 2// « DocumentRoot /home/intlangf/change30//webapp/www »
* //ligne 7// « webapp/www> »

**Petit rappel des fonctionnalités vi utiles :**
* [activer/quitter le mode insertion] echap
* [sauvegarder les modifications] :wq (:write quit)
* [quitter sans sauvegarder] :q!

Modifiez l’url du site dans Change

* Depuis un éditeur de code, modifiez l’url du site dans le fichier « config/project.xml » par l’IP fournie par le ifconfig : 10.199.xx.xx
* Modifiez également l’url en backoffice dans les propriétés du site.
* Puis, sous SSH, éxecuter : ch cconf

Activer/désactiver un vhost

**1.** Un seul host doit être activé à la fois, donc toujours désactiver le host en cours avant d’en activer un autre :

*

*

**Attention :** « change » est le vhost qui fera tourner l’ensemble des sites se trouvant sur la VM. Si vous activez le vhost que vous venez juste de créer, les autres sites hébergés sur votre VM ne seront plus consultables à moins de switcher à nouveau sur le vhost « change ».

**2.** Relancer apache après avoir enablé/disablé un vhost :

**3.** Lancer le site dans le navigateur depuis son IP :
10.199.xx.xx

**4.** Le site est en maintenance ?

[RBS Cooking] Création d’un projet vierge pour les nuls

31/03/2014 /

Déployer un pack [[http://www.rbschange.fr/addons/distributions/RBS-Change-complet-Open-Source,67203.html|RBS Change complet]] comprenant le thème //Default//, l’ensemble des modules open-source, des pages et du contenu fictifs.

===== Méthode de déploiement =====

**1.** Sous SSH, rendez-vous à la racine du répertoire dans lequel vous avez l’habitude de déployer vos projets et débuter par un **cook update** :

cook update

**2.** Créez le nouveau projet :

cook create_new_project:,

(exemple: **cook create_new_project:aubert,3.6.4**)

Si aucune version de Framework n’est spécifiée dans la commande, c’est la version la plus récente qui sera installée.

**3.** Dans un éditeur de code, ouvrir le fichier //change.xml// du projet que vous venez de déployer et commenter les modules qui commencent par « wf ». Exemple :


<!--module source="wfgit@wf.ssxbgit01.intra.rbs-fr.net:repo/module.wf.git">wf-4.0.0</module-->

**4.** Toujours dans le fichier //change.xml//, ajouter la liste des modules à installer. Une liste à jour est disponible sous git dans le fichier //change.xml// du projet [[http://wf.ssxbgit01.intra.rbs-fr.net/gitweb/?p=project.demo.git;a=summary|Demo]].

**5.** Sous SSH, se rendre à la racine du nouveau projet et lancer la commande **ch create-new-project** (où **ch** est un alias de la commande change) :

ch create-new-project

**6.** Si des erreurs interviennent lorsque le script exécute la commande **rebuildFiles** :

ch gdb ; ch ca ; ch richtext.rebuild-files

**7.** Dans le fichier //change.xml//, dé-commenter les modules qui commencent par « wf ».

**8.** Faire un theme.install :
* du thème //Default// :

cook e:local c.install_theme

* du thème de votre choix :

cook e:local c.install_theme:,branch=master

**9.** Si pas encore installé, installer le module sample :

ch install-module sample-3.6.4 (ou autre version, suivant la version de Change que vous venez de déployer)

Cette commande vaut pour installer n’importe quel module supplémentaire.

**10.** Déployer les pages et le contenu fictif (cette commande peut être lancée à chaque fois qu’un nouveau module est installé – **Attention : pour déployer le contenu fictif, il faut __obligatoirement__ avoir installé le thème Default.**) :

ch sample.import full-os

**11.** (optionnel) Exécuter les commandes suivantes :

ch compile-all ; ch clear-all

**12.** Pour les e-commerces (notamment ceux avec facettes, qui ne font pas partie du pack open-source) :

ch catalog.compile-catalog ; ch indexer reset

**13.** Ne pas oublier d’ajouter votre nouveau site dans votre //host//.

===== Troubleshooting =====

=== Si la connexion en admin est impossible ===

ch reset-database

=== Si le site s’affiche mal (pas de css, problème d’url) ===
**1.** Vérifier le contenu du fichier //profile// se trouvant à la racine du site. Par exemple :


intlangf

**2.** Se rendre à la racine du répertoire //config// de votre projet.

**3.** Repérer le fichier //project..xml//. Dans notre exemple : project.intlangf.xml.

**4.** Vérifier dans ce fichier que l’url vers votre projet est correcte.


<entry name="server-fqdn">url_de_mon_projet</entry>

===== Installer le module wfslider =====

**1.** Dans change.xml (toujours, pour les nouveaux déploiements) :

wfslider-1.0

**2.** Pour téléchargement depuis git quand projet déjà déployé :

git clone ssh://wfgit@wf.ssxbgit01.intra.rbs-fr.net/home/wfgit/repo/module.wfslider.git repository/modules/wfslider/wfslider-1.0

**3.**

php framework/bin/change.php install-module wfslider-1.0

[RBS Cooking] Déploiement d’un projet existant pour les nuls

31/03/2014 /

Déployer un projet existant __en local__.

===== Méthode de déploiement en local =====

Sous SSH, rendez-vous à la racine du répertoire dans lequel vous avez l’habitude de déployer vos projets et débuter par un **cook update** :

=== Récupérer les fichiers du projet : ===

**A.** Si projet versionné sous Git :

**B.** Si projet versionné sous SVN :

=== Récupérer la base de données : ===

**1.** Faire un //dump// de la base :

**2.** Faire un //fetch// de la base :

**3.** Le //fetch// terminé, une url va vous être communiquée. Par exemple :

**3a.** Faire un copier de cette url en prenant garde à :
– retirer tout ce qui se trouve après « <- /data/www..." qui ne fait pas partie de l'url - **BIEN RESTAURER LA BASE DANS LE PROJET LOCAL (paramètre __e:local__ de la commande) LORS DE L'EXECUTION DE LA COMMANDE QUI VA SUIVRE!!!** **3b.** Faire un coller de cette url à la suite de la commande suivante :

Par exemple : **cook manbow e:local c.db.restore:/tmp/manbow.prod/prodmanbow@10.128.0.114/prod.2012-10-08.sql.gz** === Quelques manipulations pour finir : === **1.** Définir l'url du site :

**2.** Pour les e-commerces (notamment ceux avec facettes) :

**3.** Webdeveloper toolbar : Cookies > Delete session cookies

**4.** Ne pas oublier d’ajouter votre nouveau site dans votre //host//.

===== Déployer un projet qui nécessite une clé webfactory =====

Il peut arriver que le déploiement s’arrête et que cook nous affiche une erreur du type //Unable to download : /modules/synchronizer/synchronizer-3.5.1 in local repository//.
Le projet utilise un module payant qui nécessite l’ajout d’une clé webfactory dans les settings de cook.

Les settings de cook, si ils sont identiques par défaut pour chaque projet, peuvent être surchargés pour des besoins spécifiques.
Le fichier //defaults.py// se trouve dans le répertoire :// /home/nom_du_user/projects/nom_du_projet/settings/ //.

ATTENTION : vous pouvez modifier ce fichier pour vos besoins, mais ne commitez pas vos modifications !

===== Mettre à jour les médias =====

Il est possible que le projet ait été déployé sans les médias.

Pour mettre à jour les médias sur votre projet local __depuis__ un serveur distant (demo, prod, int), utiliser c.media.rsync.__to__ :

Pour mettre à jour les médias sur un serveur distant (demo, prod, int) __depuis__ votre projet local, utiliser c.media.rsync.__from__ :

===== Troubleshooting =====

=== Si la connexion en admin est impossible ===

=== Si le site s’affiche mal (pas de css, problème d’url) ===
**1.** Vérifier le contenu du fichier //profile// se trouvant à la racine du site. Par exemple :

**2.** Se rendre à la racine du répertoire //config// de votre projet.

**3.** Repérer le fichier //project..xml//. Dans notre exemple : project.intlangf.xml.

**4.** Vérifier dans ce fichier que l’url vers votre projet est correcte.

===== Méthode de déploiement en intégration ou en production =====
(à mettre au propre choli-bô)

Depuis la branche ‘master’ :

* git st -> on vérifie d’abord que tout a bien été commité.
* git co integration/production
* git pull
* git merge master -> (où ‘master’ est la branche de travail)
* git push
* git co master -> (où ‘master’ est la branche de travail)

* cook update
* cook rbscorpo e:int/e:prod c.deploy

Effectuer un déploiement qui comprend uniquement des changements de fichiers (ne lance aucune commande Change) :
* cook rbscorpo e:int/e:prod c.deploy.dirty

Pour lancer une commande après le c.deploy.dirty (clear-webapp-cache par exemple) :
* cook rbscorpo e/int/e:prod c.cmd: »cwc »

Pour lancer plusieurs commandes après le c.deploy.dirty :
* cook rbscorpo e/int/e:prod c.cmd: »clear-all,compile-all »

cook groupauto e:int c.deploy.dirty:branch=forfait

Connexion impossible à la base de données pendant un déploiement de projet existant en local

Se connecter à mysql :

Extraction et remplissage d’une base de données

ATTENTION: veiller à créer d’abord une base de données vide sous mysql (C4_manbow dans notre exemple) !

[grep] Effectuer des recherches en SSH au sein d’une arborescence de fichiers avec la commande Grep

14/03/2014 /

grep: inclure ou exclure certains formats de fichiers dans la recherche :

-rn : va chercher dans tous kles fichiers à partir de la racine des répertoires spécifiés

-i : case insensitive

[Ergonomie] Infinite scroll, une solution pas toujours pertinente

10/03/2014 /

Articles externes à propos de l’infinite scrolling:

Attention: l’article suivant n’est pas à prendre au pied de la lettre. Il s’agit de la réflexion d’un seul concepteur web sur le sujet de l’infinite scroll. Pour vous inspirer, préférez les critères d’ergonomie de Baymard Institute qui sont fondés sur des sessions d’AB testing sur 50 des sites e-commerce les plus rentables des Etats-Unis.

Source : When infinite scroll doesn’t work

Une tentative de remplacement de la pagination traditionnelle par un infinite scroll dans les listes de produits chez Etsy s’est révélée infructueuse (le nombre de commandes est resté sensiblement le même).

La rapidité de chargement des pages ou le volume des données affiché n’est probablement pas à incriminer. La raison pour laquelle l’infinite scroll n’a pas fonctionné réside dans le fait que le type d’interaction que l’utilisateur a avec les données sied d’avantage à une interface paginée.

  • Dans le cas d’un site comme Etsy, l’utilisateur est à la recherche d’un produit en particulier (qui correspond à un besoin spécifique) au sein d’une liste de résultats.
  • Dans le cas d’un site comme Twitter ou Facebook (qui implémentent tous deux l’infinite scroll), l’utilisateur scanne et consomme un flux d’informations.

Dans le cas de Twitter, l’infinite scroll fonctionne car les utilisateurs sont essentiellement en-train de scanner une succession de tweets jusqu’à ce qu’ils en aient marre. Dans le cas d’Etsy (ou de tout autre e-commerce), les utilisateurs ne sont pas simplement en-train de consommer linéairement des informations. Leurs cerveaux traitent et trient les informations. Ils mettent de côté les produits qu’ils pensent être en mesure de répondre à leurs besoins pour une recherche antérieure, plus approfondie (comparatif produits, consultation de fiche produit, etc…).

Offrir une interface paginée permet à l’utilisateur de conserver un “emplacement mental” du ou des produits repérés. L’infinite scroll casse cette dynamique et rend la navigation en haut et en bas de la liste plus difficile, notamment lorsque l’utilisateur retourne sur la page un peu plus tard et se retrouve en haut de page et forcé à scroller et à subir à nouveau le chargement dilué des résultats.

Vu sous cet angle, l’interface de type infinite scroll est plus lente que l’interface paginée.