Wiki source code of Tour Application
Last modified by Vincent Massol on 2024/11/19 16:15
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 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 | ((( | ||
| 6 | == Requirements and Use-cases == | ||
| 7 | |||
| 8 | === Major use-cases === | ||
| 9 | |||
| 10 | {{usecase}} | ||
| 11 | Every user should be able to create different tours on different pages. | ||
| 12 | {{/usecase}} | ||
| 13 | |||
| 14 | {{usecase}} | ||
| 15 | Application should display for each user what tour was/ wasn’t visualised. | ||
| 16 | {{/usecase}} | ||
| 17 | |||
| 18 | === Minor use-cases === | ||
| 19 | |||
| 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}} | ||
| 27 | |||
| 28 | |||
| 29 | == Document organisation == | ||
| 30 | |||
| 31 | === Brainstorming === | ||
| 32 | |||
| 33 | |||
| 34 | Before starting implementation, there were some problems that needed to be resolved first: | ||
| 35 | |||
| 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: | ||
| 42 | |||
| 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 === | ||
| 49 | |||
| 50 | A tour is a wiki page that will contain: | ||
| 51 | |||
| 52 | * 1 TourClass object | ||
| 53 | * N StepClass objects | ||
| 54 | |||
| 55 | This application will be divided in: | ||
| 56 | |||
| 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 | ||
| 61 | ** Translations - a page with translation keys | ||
| 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 | |||
| 70 | === Overview === | ||
| 71 | |||
| 72 | This is how an entry would look like. | ||
| 73 | |||
| 74 | {{image reference="preview.png"/}} | ||
| 75 | ))) |
