Tour Application

Last modified by Vincent Massol on 2024/02/26 17:54

 XWiki
 Implementation
 Completed
 

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

UC: Every user should be able to create different tours on different pages.
UC: Application should display for each user what tour was/ wasn’t visualised.

Minor use-cases

UC: A tour should be marked as “Seen”, if the user clicked “End tour” button.
UC: Every user should have the possibility to unmark a “Seen” tour and review it.

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.

preview.png


 

Tags:
    

Get Connected