- 1.1 Prerequisites
- 1.2 Setting up the Project on your computer
- 2.1 Architecture
- 2.2 UI component
- 2.3 Logic component
- 2.4 Model component
- 3.1 Login Implementation
- 3.2 User Interface(UI)
- 3.3 Files
- 3.4 Announcements
- 3.5 Exam Details
- 3.6 To-Do-List
- 3.7 Outlook
- 3.8 CAP Calculator
- 4.1 Types of testing
- 4.2 Conclusion
- Firstly, you have to download Qt Creator from https://www.qt.io/download.
- Important: to download any version of Qt 5.4 or lower. This is because the orignal code written here https://github.com/yyjhao/IVLEDownloader uses QWebKit which is library used by Qt 5.4 or lower.
- Open the whole project file using Qt Creator
- Follow the picture below and press the green + button to add your version of Qt installed. Then, you will be able to build and run.
The Architecture Diagram given below explains the high-level design of the App. Given below is a quick overview of each component.
When the app is executed, the first time users will be called to extract their APIKey and login. Users that are logged in and done set-up procedures will be brought into a UI.
- Logic - This is the code that allows everything to function. It acts as a controller.
- UI - This is how information is displayed to the user. It acts as the view.
- Model - This is the database formats used in the application.
- IVLE API - This is functions used to retrieve information from IVLE.
- After user has been granted access to IVLE through OAuth, a UI will pop-up to view all relevant information.
- As the UI is created, the logic runs independently to retrieve data.
- The logic can choose to pull data from the model or from the Internet and store it in the model and then retrieve information from the model.
- Below is a example model that should clarify your understanding:
| No | Arrow | Elaboration and Example functions |
|---|---|---|
| 1 | User executes app | User will activate app and input information. For example, opening files, logging in to outlook, adding CAP scores and adding items in to-do-list. |
| 2 | Code to set-up UI | UI will prompt Logic to run code to make the UI intended for the user. For example, creating the DownloaderUI object along with all the different UI objects found in DownloaderUI. |
| 3 | Request for information | Logic will retrieve information from model. For example, files, exam details, announcements, to-do-list items and outlook information. |
| 4 | Returns information | Information needed from request for information will be given here. |
| 5 | Logic polls for updates | Logic will poll IVLE for updates using the IVLE API. For example, getting files, announcements and exam details. |
| 6 | Returns info from API | Model returns all information on updates from IVLE. |
| 7 | Code to display on UI | Logic used information obtained from Model to display on the UI. |
| 8 | User interacts with app | For Users to further interact with the app |
The UI components work hand in hand with the logic component to get relevant information to display on the UI to allow users to view all offline IVLE information.
- MainWindow.ui : Sets up information such as API key, log in and directory to allow users to enjoy the full experience of the IVLE Downloader. This also provides a settings function that can be seen as a running application at the icons running.
- DownloaderUI.ui : Contains the UI information for all the mentioned tabs above. For a detailed view, visit User Guide.
Since this is written in C++ in OOP, there is always a .cpp file and .h file. If we want to create a UI, there will be a .ui file as well. Therefore, the way every .cpp,.h and .ui file is written to create a single class. In each class, different objects from different .h files can be called.
This is the UI whereby files, announcements, exam details, timetable, CAPCalculator, to-do-list and NUSWhispers can be seen.
Below is the exchanges between model and logic components to clarify the type of storage used in this application:
This is a self-developed project, therefore, we experiemented with different kinds of data storage methods to learn more about the Qt library and external programs. The table below shows the different ways that can store data in Qt:
| No. | Method | Explanation |
|---|---|---|
| 1 | Local Directory | Qt has a library called QDir and this library enables Qt applications to read/write from/to local files |
| 2 | QSettings | Qt has a library called QSettings. The QSettings class provides persistent platform-independent application setting |
| 3 | SQLite DB | Qt has a library called QtSQL. This class allows users to create SQLite DB and store information there |
Everything can be found here regarding the IVLE API.
- This code can be found in MainWindow.cpp.
- This login implementation is mainly about ensuring every user has a unique API key to poll using the IVLE API. A common issue for users who use an API is revoking of API keys/tokens. When a user polls too much from a server, higher than the poll limit that is set by administrators, it will revoke the API key/token and render the API key/token useless.
- A method of setting up first time users is necessary to ensure such a problem would not exist.
- From the User Guide you will see the procedure of setting up.
- A QWebView is created to load the URL to log in to generate a API key unique to every user of IVLE. A custom parsing code using QWebView, QWebFrame and QWebElements will extract the API key and save it into QSettings.
- When users log in, they poll from the API with their own API key.
- This code can be found in DownloaderUI.cpp.
- The UI is created using QTabWidgets in the class DownloaderUI. Every tab is hardcoded to make a Files Tab, Announcements Tab, Exam Details Tab, TimeTable Tab, CAP Calculator Tab, To-Do-List Tab and NUSWhispers Tab.
- The NUSWhispers Tab uses QWebview to display a browser with a URL, this is found in DownloaderUI class.
- setupFiles(QString) is used to display Files Tab is made using QFileModelSystem and QTreeView.
- 80% of the code here was found in https://github.com/yyjhao/IVLEDownloader. Bugs fixed were addressing the API Key issue in 3.1 and increasing the frequency of polling from 5 minutes to 1 hour.
- Yu Jian implemented his own version of Promises in Promises.cpp similar to javascript. He then uses the promises throughout his code.
- ExternalPageParser.cpp is implemented to parse workbin files in IVLE.
- Settings.cpp is implemented to store setting by QSettings.
- SettingsDialog.cpp is implemented to have a UI to let the user see the settings changed. It also creates a AdvanceDialog object from advanceDialog.cpp. This object is to allows user to view updates of files.
- ExternalPageParser.cpp is implemented to parse pages,
- IVLEFetcher.cpp is implemented to poll from the IVLE api and obtain files using the ExternalPageParser object and promises to provide concurrent downloading of files.
- initParsing() called in DownloaderUI.cpp.
- Uses parsing with QWebview, QWebFrame, QWebElement, IVLE API and qtJSON to parse module ID, module name and announcements.
- Uses QDir to store announcements into a txt file.
- Uses QTabWidgets to create announcements based on the number of modules present.
- initParsing() called in DownloaderUI.cpp.
- Uses parsing with QWebview, QWebFrame, QWebElement, IVLE API and qtJSON to parse announcements using module ID stored in 3.4.
- Uses QTableWidget to make a custom number of tables based on number of modules.
- initDB() called in in DownloaderUI.cpp.
- Uses QDialog to allow users to input information written in addItem.cpp.
- Uses QWidget to custom create widgets written in Item.cpp.
- Uses QtSQL to interact with SQLite to have a database to store to-do-list information.
- When a user adds an item, the item will be stored on the database. When the user changes the slider value, it will update the database.
- startOutlook() called in downloaderui.cpp
- In startOutlook(), if user details were stored previously, loadOutlook() is called to log into outlook. If not, groupbox will show for user to input user information.
- Uses QSettings to allow user to input information written in on_pushbutton_login_clicked().
- loadOutlook() evaluates javascript of outlook and inserts user information into username, password placeholders and logs in.
- on_pushButton_forgetMe_clicked() resets user information back to null in Qsettings and brings user back to login page.
- Connect statements make sure that the webpage is loaded before keying inserting information.
- setTableHeaders() called in DownloaderUI.cpp.
- Uses QDialog to create a dialog to allow user to input information in written in Dialog.cpp.
- Uses QTableWidget to display CAP by user.
- Custom code written to help students determine average score they need for future semesters.
- Since it was done in the summer, there was no modules available. However, we requested help from professors to get CP2106 and CS2040 available to be used for testing when we were developing the project prototype.
- After the prototype was created we had asked NUS Students that took different modules as well as people who have no modules at all to test. The use case document is here https://github.com/Geraldcdx/IVLEDownloader/blob/master/Use%20Cases.docx and they followed the github User guide to download and test our project.
- Here is the test data of 10 people collated on 30th July 2018
The reason why there were some people said it was not working is because they faced internet connectivity issues and if there are no modules available on IVLE, there would not be any information displayed in the UI, hence they were could not conclude if it was working. The app works for both MACOS and Windows and people have feedback a few bugs that we have fixed. Overall, students enjoyed used all the tabs except the NUSWhisper ( which we feel too is a novelty on it's own but we included it just cause it would be more interesting).
The testing of the IVLE Downloader has been successful and there are still a few bugs that we are trying to fix. In all, it is reliable as it works for all users MACOS,Windows, students that have no IVLE modules and students with up to 5 modules.
