Tour Application
- Related proposals:
- Introductory Wizard (May 2011)
- Implementation:
- Tour Application (May 2015)
- Related proposals:
Description
This application aims to help first-time-users understand how to use your product through tour guides.
A tour represents the best way to see the most important features of our product. As you’ll see, there will be a tooltip telling you what that certain element represents.
In order to have a preview of the tour, see http://bootstraptour.com/.
Requirements and Use-cases
Major use-cases
Minor use-cases
Document organisation
Brainstorming
Before starting implementation, there were some problems that needed to be resolved first:
Q1. How should we integrate the steps of the tour in our JavaScript code? Through JSON files or velocity scripts using XWiki API?
Q2. How can we create the JavaScript that creates the tour? Should we have have a JS file different for each tour or is there a way to have just one?
Q3. There will be just a velocity script that will generate the JSON file with the information for all the steps in the tour or we need a different script for every tour?
Q4. How can we verify if the tour has been visualised or not by the current user? Should we extend XWikiUsers or create another class (ex: ViewedTourClass)?
After the brainstorm, we decided to:
A1. Use JSON files, because their parsing is a lot faster.
A2. Have just one JS file containing a parameterised module, that afterwards will be included into a jsx on every page that has a tour.
A3. Have just a velocity script that generates the JSON file.
A4. Create ViewedTourClass that has a static list property containing the id’s of the already viewed tours.
Conclusion
A tour is a wiki page that will contain:
- 1 TourClass object
- N StepClass objects
This application will be divided in:
- Tour (xar): which will contain the non-technical part of the application
- WebHome - home page of the application (add new tour button + liveable containing existing tours)
- TourCode (xar): which will contain the technical pages of the application
- WebHome - home page of TourCode space
- Translations - a page with translation keys
- TourClass - a class with tour properties
- StepClass - a class with step properties
- TourJson - a velocity script that creates a JSON file representing steps information
- TourJs - a page with:
- a ssx object with the css corresponding to bootstrap-tour
- a jsx object with a js script creating the actual tour
- ViewedTourClass - a class with a static list property containing the id’s of the already viewed tours.
Overview
This is how an entry would look like.