Project Wiki

File Structure

controller/                     // Backend components
dist/                           // Webpack output folder
data/                           // User config and storage
├── config.js
├── userdb.json
└── datadb.json
...
views/                          // Frontend components
├── components
│   ├── Shared/
│   │   └── styles/             // Styles shared among components
│   ├── .../
│   ├── NavBar.jsx
│   └── navbar.css              // CSS modules 
│
├── styles/                     // Base style / non CSS modules
├── App.jsx                     // React entry point
└── index.html
...
main.js
webpack.config.base.js
webpack.config.development.js
webpack.config.production.js

Electron (Backend)

The entry point for Electron is main.js. Additional logics are located at controllers/.

The initialisation step for this app:

1. Launch electron app
2. Search for authentication token in userdb.json. (user login if token is unavailable)
3. Download the list of modules taken by the students into userdb.json
4. Download resources for each modules into datadb.json
5. Check resources update at a fixed time interval (e.g. 5 minutes)

Storage

The storage operation is abstracted inside controllers/storage.js. storage.js uses lowdb to update and retrieve data from the json files. It also provides methods to watch for file changes using jsonwatch.

LAPI

Reference for the usage of NUS LAPI can be found here.

API call is abstracted inside controllers/requester.js. A HTTP request can be obtained using Requester.requestJson(service, requestParams). This method takes in the name of service and additional parameters required by the services.

Example:

A request to https://ivle.nus.edu.sg/api/Lapi.svc/Modules?APIKey=${apiKey}&AuthToken=${authToken}&Duration=${duration}&IncludeAllInfo=${includeAllInfo} can be broken down into:

let service = 'Modules';
let authParams = {
  apiKey: '1a2B3c4D5e6F7g8H9i0J1',
  authToken: '00000000000000000000'
};
let requestParams = {
  duration: 0,
  includeAllInfo: false
};

You can then pass in service and requestParams into Requester.requestJson(service, requestParams). The apiKey and authToken will be included automatically by the method when constructing the request. Therefore, there is no need to pass in apiKey and authToken when calling requestJson.

React (Frontend)

The entry points for the view components are views/index.html and views/App.jsx. The view is automatically updated, whenever new data is available in the datadb.json.

Webpack

Webpack is responsible for bundling and serving the view components.

Different webpack configurations are provided for different environment. views/index.html will look up different resources depending on the node environment.

NODE_ENV=development

Webpack-dev-server will be used during development mode to enable Hot Module Replacement (HMR). The default port for this server is set to 3030.

npm run dev is used to run this product in development mode.

NODE_ENV=production

Webpack will be used to bundle the JavaScript and CSS modules into dist.

npm run build is used to run this product in production mode.

CSS Modules

CSS for each component will be bundled using webpack.

Each component should have its own CSS located in the same directory as itself. If a common CSS is used among different components, the CSS should be located at views/components/Shared/styles.