Faire un tutoriel de son application web avec Bootstrap Tour

Expliquer l’application aux utilisateurs

Il y a moultes façons de présenter une application et son fonctionnement aux utilisateurs.

xr7710_7-tips-for-creating-a-professional-powerpoint-presentation2x

La règle d’or de base veut que l’ergonomie porte le sens de l’application, mais quand tout est neuf, il est bien difficile de s’y repérer, même avec la meilleure ergonomie du monde.

On a de plus en plus souvent de nos jours, une petite introduction en douceur des mécanismes de l’outil, souvent via un petit tutoriel qui nous permet de comprendre comment cela fonctionne.

Des fois, ça peut-être une documentation écrite, parfois des vidéos, parfois autre chose, parfois rien.

L’effet waouh

effet-waouh-468x290

On peut avoir l’impression de base, que de dépenser de l’argent pour une fonctionnalité qui sert à présenter les autres fonctionnalités, est un peu de l’argent perdu.

Mais en fait, lorsque l’on a quelque chose de sympa, qui nous parle, qui nous explique les différentes briques de l’application, on est directement immergé, et beaucoup plus enclin à utiliser l’outil et l’utiliser mieux qui plus est.

Bootstrap tour

Dans le cadre du développement d’une application web, nous avons utilisé bootstrap tour pour réaliser le tutoriel.

Bootstrap tour est une petite librairie JavaScript permettant de présenter de façon assez simple l’application, l’avantage, comme pour toutes les librairies en fait, c’est qu’il y a déjà des bouts de fonctionnalités toutes faites, ce qui évite de réinventer la roue, et du coup, évite de dépenser de l’argent inutilement.

Comment l’utiliser

Une fois les sources récupérées et incorporées à votre application, la première étape est de construire votre « tour ».

var tour;

tour = new Tour({});

Celui-ci accepte un bon nombre de paramètres que l’on peut retrouver sur leur documentation.

Il vous est ainsi possible de définir le conteneur sur lequel celui-ci doit s’appliquer, par exemple « body » :

container: « body »,

Afficher uniquement l’élément désiré

L’un des effets intéressant du bootstrap tour, et qui pour le coup est très « waouh », et qu’il permet de n’afficher que ce que l’on veut pour l’étape concernée et de cacher le reste

apercu-espace

Pour cela, il faut lui définir :

backdrop: « true »,

Rendu visuel et modèle utilisé

Le rendu comme vous pouvez le voir dépend de ce que vous désirez, ici, nous avons défini un template html sous forme de popover, celui-ci correspond plus ou moins à celui proposé sur le site de bootstraptour avec des petites modifications mineures :

template-screenshot

NB : Parce que l’html ici est directement lu, je dois passer par un screenshot, au besoin, le code est présent dans un gist en fin d’article

Et c’est ce même template qui sera appliqué sur toutes les étapes, sauf si contre indication de notre part.

Définir ses étapes

Jusque là, nous n’avons pas encore défini les étapes de notre parcours.

Pour cela, il suffit de donner des étapes à notre tour, soit à l’initialisation, soit en utilisant addStep.

Définissons par exemple 2 étapes, la première que vous avez vu plus haut, ainsi qu’une seconde pour y accéder via le bouton suivant :

steps: [
{
// Step 0
element: « .page-header .label »,
title: « Nom de votre espace »,
content: « Bienvenue dans votre espace. Vous retrouverez le nom de votre espace affiché ici. »,
placement: « bottom »
},
{
// Step 1
element: « #clients-container »,
title: function () {
return $.trim($(« #clients-container »).siblings(« legend »).text());
},
content: function () {
return $.trim($(« #clients-container »).siblings(« legend »).text()) === « Affectation cliente »
? « Vous retrouvez la liste de tous les clients qui ont accès à cet espace. »
: « Vos informations personnelles en tant que client ayant accès à cet espace. »;
},
placement: « bottom »
},

Concernant les attributs que nous lui définissons :

  • Element : Elément sur lequel vous désirez afficher votre popover
  • Title : Titre affiché sur le popover
  • Content : Message affiché dans le corps du popover
  • Placement : Permet d’indiquer dans quel sens vous désirez afficher la bulle, dans notre cas, comme vous pouvez le voir sur le screenshot affiché précedemment, nous avons défini qu’il serait affiché en dessous, donc « bottom »

A savoir qu’il est également possible au niveau des étapes, d’override le parent et d’avoir un comportement spécifique, il est par exemple possible de définir qu’on ne veut pas sur une étape d’un fond noir autour et donc de spécifier :

backdrop : false

Par exemple pour la fin du tutoriel, nous pouvons définir de ne pas avoir de fond :

{
element: « .navbar-fixed-top »,
title: « Fin du tour »,
content: « Cet tutoriel est terminé. Nous espérons que cet espace est désormais plus clair pour vous. »,
placement: « bottom »,
backdrop: false
}

Créer de fausses données pour l’exemple

Il est possible d’exécuter du code qui sera chargera au lancement, à l’affichage, au moment où on cache, ou à la fin du tour.

Cela permet de créer, par exemple, de fausses données au chargement, qui serviront pour l’exemple, et de les supprimer à la fin.

Dans notre cas, nous créeons par exemple, de fausses pièces-jointes sur notre application via l’événement « onStart » :

onStart: function (t) {
if (!t.ended()) {
exemplesCharges = true;

GG.ESP.chargerPieceJointeExemple();
}
},

// Et la méthode qui charge, par exemple, de fausses pièces-jointes

GG.ESP.chargerPieceJointeExemple = function () {
if ($(« #documents-pj .document »).length > 0 || requetePjEnCours)
return;

requetePjEnCours = true;
$.post({
url: xx,
data: {
ID: 0,
Libelle: « Mon-Document.pdf »,
Date: new Date().toISOString(),
PersonneNomComplet: « Jean-Luc LE TESTEUR »,
IconeUrl: « pdf »,
PeutSupprimer: true
},
success: function (data) {
$(« #documents-pj »).prepend(data);
$(« #documents-pj > p »).hide();
requetePjEnCours = false;
},
error: function () {
notifyError();
requetePjEnCours = false;
}
});
};

Ainsi, lorsque votre exemple se lancera, la personne pourra voir des données fictives, qui disparaîtront lorsqu’il décidera de terminer le tutoriel.

Le lancer

Une fois que tout est prêt, il ne vous reste plus qu’à exécuter 2 méthodes sur votre tour, init et start :

tour.init();
tour.start();

Et pour le relancer, via un bouton d’aide par exemple, il vous suffit d’exécuter la méthode restart :

tour.restart();

 

Si vous voulez du code un peu plus lisible que ce qui est dans des blocs de citation ici, vous pourrez retrouver le code sur ce gist.

La bonne journée hein,

XoXo,

Cédric

Une réflexion sur “Faire un tutoriel de son application web avec Bootstrap Tour

  1. Ping : Faire un tutoriel de son application web avec Bootstrap Tour – Goood! | Programming Tools

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s