ICT239: Personal health has Become a Dominant Concern of Modern Professionals: Web Application Development Assignment, SUSS, Singapore

Question 1
Personal health has become a dominant concern of modern professionals. Thus, personal health management is a major theme in web application domains. The well-known brands are Fitbit, Apple iWatch, and Samsung Watch. Among the critical personal health indicators, the calorie consumed per day is important for maintaining the weight of a person, which in turn, is critical to many health factors. In the following table, it describes the calories that would be consumed per Kg of the person’s weight,given the type of exercises, the person engages in a minute.

Table Q1
The following Diagram Q1 (a) demonstrates a Graphic User Interface (GUI) of the application.

Diagram Q1 (a) the Log Page View

Apply HTML/CSS/JS technologies to develop an application by creating a folder named ‘Q1’ and creating the frontend application according to the following module structure:
/home/user/Projects/TMA
└── Q1/
├── log.html
├── register.html
├── index.html
├── dashboard.html
├── upload.html
└── static/
├── logo.png
├── style.css
└── log.js
The targeted application is designed to have several interface to its functions: it consists of (1) the logging page (log.html) to record the calorie consumed when the user completed a certain type of exercise; (2) the register and login pages (register.html and index.html, respectively) that allow an individual to register with the Apps and to use the Apps functions for personal health management, and login to the Apps subsequently; (3) the dashboard page (dashboard.html) that display the trend of calorie consumption in a chart; (4) the upload page (upload.html) that allows the use

Requirement Q1.1 overall design reflected in static/styles.css:

As shown in Diagram Q1 (b), the overall page layout includes (1) a header bar area that includes the logo of the Apps (FITWELL) and the navigation links to functional pages, and (2) the container area that has an entry area alone or a sidebar area, that displays the current user information, and an entry area that may display certain forms and information for various functions, such as register, login and log an exercise. For Q1, the application will only be required to run on the desktop via a browser.

Diagram Q1 (b) Overall Page Layout: Register and Log Page Views

Diagram Q1 (c) Register Page View

Diagram Q1 (d) Login Page View

Requirement Q1.2 – register.html and index.html with relevant codes in static/styles.css:

(1) The Login and Register views are both present as tabs. The non-active tab is greyed out and not underlined, while the active tab is visible and underlined.

(2)(i) The corresponding forms are displayed right below the tabs with the proper input fields. The submit button will change color from blue to green when hovered over, and display the cursor shape.

(ii) When hovered over:

• The cursor shape will show up for tabs and submit buttons
• The input field will be underlined
• The submit button will change background color when hovered over, but no action is to be implemented when clicked

(3) There are TWO (2) ways to access the Login & Register views, one from the
head bar one from the tabs in Diagrams Q1 (c) and (d).

When the Log link is clicked on the header bar, the following Log page view is shown for the user to log their exercises and show the calories consumed by the specific exercise types.

Requirement Q1.3 – log.html and static/styles.css and static/log.js:

(1) The side-bar GUI has an icon that stands for a user with his personal information listed, including the registered email id, the gender of the user, etc. For TMA, the user information can be hardcoded.

(2) The log GUI includes the date/time of the log, the weight of the person, as well as the duration in terms of minutes that the users have engaged in each kind of the exercises at the time of the logging. Note that there could be multiple times that the logging is performed each day at different hours.

(3) After the submit button is pressed the total cories of this logging will be calculated and displayed. The calculation is performed by the JavaScript file log.js.

Question 2 
The system aims to analyze the calorie consumption information recorded over time. Hence, the web application should construct a backend server application and data model to store the user and log data in a database with proper data model design and implementation.

(a) Employ Flask Framework to set up a proper Python environment to organize files for ‘data model’, ‘routes/controllers’, and ‘view templates’, following the directory structure as follows.

(i)/home/user/Projects/TMA
├── Q1/
| …
└── Q2/
├── app.py
├── seed.csv
├── templates/
│ ├── index.html
│ ├── log.html
│ ├── register.html
│ ├── upload.html
│ └── dashboard.html
├── static/
│ ├── logo.png
│ ├── style.css
│ ├── log.js
│ └── dashboard.js
├── requirements.txt
(ii) The register and login webpages (register.html and index.html) will now, upon clicking on the submit button, sent the corresponding parameters to the backend router/controller, and the frontend input parameters will be kept over the testing sessions and printed out at the server-side, but not stored.

(b) Provision a MongoDB database for storing the Apps data that is sufficient to implement the following two functions corresponding to the webpage views.
(i) The log webpage (log.html) view now will pass the parameters to the backend router/controller for calculation and storage in the corresponding collections of the MongoDB, and the results are passed back to the frontend for display (log.js).

(ii) The upload webpage view is shown as follows:

Requirement Q2.1:
(1) As shown in Diagram Q2 (a), the frontend of the Upload page (upload.html) is displayed: the side-bar shows that the id is admin@fitwell.com and the content the side contains the form to upload a test CSV file, seed.csv with the following header:

email, DateTime,weight, walking,running,swimming,bicycling

meaning the rows that follow, contains values to the specific fields, respectively, for the email/account of the user who is logging the activity, the date and time of the activity logged, the weight of the user at the point of logging the activity, and the minutes that s/he has engaged in the specific type of exercise activity, be it: walking, running, swimming and bicycling.

This allows the Apps to be populated with testing data. When the browse is clicked a file directory browser will pop up for users to select local files for upload. When the Upload button is pressed, the CSV files are sent to the backend for processing.

(2) At the backend, the uploaded file is routed to the corresponding controller, which in turn, populates the MongoDB with necessary collections and documents for subsequent visualization required in Requirement Q2.1 (3).

(3) The App would also provide a dashboard view that allows the calorie logs to be displayed in a chart as shown in Diagram Q2 (b). Create the chart based on your understanding of Scalable Vector Graphic (SVG) and JavaScript and D3.js libraries to produce the output. The routines to create the chart is to be stored in dashboard.js

Make sure the chart properly demonstrates the value retrieved from the backend data models. Here, we suppose the user is admin@fitwell.com. All the logs that were uploaded in seed.csv will be used to draw the chart.

                                                                     Diagram Q2 (b)