Wiki source code of Tour Application
Last modified by Vincent Massol on 2024/11/19 16:15
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
 |
2.2 | 1 | This application aims to help first-time-users understand how to use your product through tour guides. |
| 2 | 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. | ||
| 3 | In order to have a preview of the tour, see http://bootstraptour.com/. | ||
| 4 | |||
| |
5.5 | 5 | ((( |
| |
3.2 | 6 | == Requirements and Use-cases == |
| 7 | |||
| |
5.6 | 8 | === Major use-cases === |
 |
6.1 | 9 | |
| |
2.2 | 10 | {{usecase}} |
| |
5.7 | 11 | Every user should be able to create different tours on different pages. |
| |
2.2 | 12 | {{/usecase}} |
| 13 | |||
| 14 | {{usecase}} | ||
| |
5.6 | 15 | Application should display for each user what tour was/ wasn’t visualised. |
| |
2.2 | 16 | {{/usecase}} |
| 17 | |||
| |
5.6 | 18 | === Minor use-cases === |
| |
6.1 | 19 | |
| |
2.2 | 20 | {{usecase}} |
| 21 | A tour should be marked as “Seen”, if the user clicked “End tour” button. | ||
| 22 | {{/usecase}} | ||
| 23 | |||
| 24 | {{usecase}} | ||
| 25 | Every user should have the possibility to unmark a “Seen” tour and review it. | ||
| 26 | {{/usecase}} | ||
| |
2.5 | 27 | |
| 28 | |||
| 29 | == Document organisation == | ||
| |
5.1 | 30 | |
| |
5.3 | 31 | === Brainstorming === |
| |
5.1 | 32 | |
| 33 | |||
| |
2.5 | 34 | Before starting implementation, there were some problems that needed to be resolved first: |
| |
3.3 | 35 | |
| |
2.5 | 36 | Q1. How should we integrate the steps of the tour in our JavaScript code? Through JSON files or velocity scripts using XWiki API? |
| 37 | 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? | ||
| 38 | 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? | ||
| 39 | 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)? | ||
| 40 | |||
| 41 | After the brainstorm, we decided to: | ||
| |
3.3 | 42 | |
| |
2.5 | 43 | A1. Use JSON files, because their parsing is a lot faster. |
| 44 | 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. | ||
| 45 | A3. Have just a velocity script that generates the JSON file. | ||
| 46 | A4. Create ViewedTourClass that has a static list property containing the id’s of the already viewed tours. | ||
| 47 | |||
| 48 | === Conclusion === | ||
| |
5.1 | 49 | |
| |
2.5 | 50 | A tour is a wiki page that will contain: |
| |
5.1 | 51 | |
| |
2.5 | 52 | * 1 TourClass object |
| 53 | * N StepClass objects | ||
| 54 | |||
| 55 | This application will be divided in: | ||
| |
5.1 | 56 | |
| |
2.5 | 57 | * Tour (xar): which will contain the non-technical part of the application |
| 58 | ** WebHome - home page of the application (add new tour button + liveable containing existing tours) | ||
| 59 | * TourCode (xar): which will contain the technical pages of the application | ||
| 60 | ** WebHome - home page of TourCode space | ||
| |
3.3 | 61 | ** Translations - a page with translation keys |
| |
2.5 | 62 | ** TourClass - a class with tour properties |
| 63 | ** StepClass - a class with step properties | ||
| 64 | ** TourJson - a velocity script that creates a JSON file representing steps information | ||
| 65 | ** TourJs - a page with: | ||
| 66 | *** a ssx object with the css corresponding to bootstrap-tour | ||
| 67 | *** a jsx object with a js script creating the actual tour | ||
| 68 | ** ViewedTourClass - a class with a static list property containing the id’s of the already viewed tours. | ||
| 69 | |||
| |
3.3 | 70 | === Overview === |
| |
5.1 | 71 | |
| |
4.2 | 72 | This is how an entry would look like. |
| |
2.5 | 73 | |
| |
6.1 | 74 | {{image reference="preview.png"/}} |
| |
5.5 | 75 | ))) |
