PROG6003 Programming Mobile and Cloud Systems: TypeScript App

Part 1 – TypeScript App (20 marks)

Overview: 

Assume that you are making an app for elderly people to track their daily medications and appointments. You app should help the users to store and edit all current medication information. Your app also should allow making and editing appointments with GPs. All of your data need to be temporarily stored and modified using TypeScript variables. Use of database server and session variable are not allowed. The app needs to hold the data as long as it runs on browser, and therefore, TypeScript variables are sufficient for this. You need to create a project folder named yourusername_ts_app, e.g., pchakrab15_ts_app.

Details: 

Create a two-page TypeScript app that runs on browsers. Your app should implement two html pages – medication.html (this will be your default starting page, similar to index.html) and appointment.html. You will place the TypeScript codes into separate file(s). The app is required to implement the following features.

The pages need to navigate between each other. Hint: you can implement it easily by adding an  element in each page.

Both pages will be independent of each other. Remember that while navigating between pages, the data stored in pages would be lost due to reload. Do not worry about this. Two pages can be checked in separate browser tabs to avoid this issue.

Medication page:

• Users can addnew medication record. The users will be able to add their daily medication record. Each new record will be added with the current record(s). Each record will have these information – identifier, medication name, daily dose, number of repeats. Use appropriate date type for these fields.

• All existing records need to be displayedincluding all the information fields. Hint: you should use a HTML table for this purpose.

• Users can deletea medication record by using the identifier field. Users will be notified by error message if invalid identifier is provided.

• Users can updatea medication record by using the identifier filed. Users will be notified by error message if invalid identifier is provided.

• Users can searchmedication record(s) using the medication name field. Users will be notified by error message if invalid identifier is provided.

• All error/warning messages should use Alert control.

• You can use separate buttons that would enable implement these functionalities. oYou can use record(s) of demo information to display when the pages load.

Appointment page:

• In the backend, you need to maintain two separate sets of records for the appointments – one is for all currently available appointments (master records), another is for all booked appointments by a user (user’s records). The records will be unique and can only be included into ONE of the two sets at a time, not both.

• When this page loads, the master records have to be populated from which users can select one. Each record of appointment has to include – identifier, GP name, date, and time. A HTML list can be used to display the records.

• Users can selectan appointment from the master records of appointments. Upon selection, the selected appointment will be removed from the master records and will be added to the user’s records. A HTML table can be used display the user’s records.

• Users can viewall appointments booked so far.

• Users can cancelan already booked appointment using identifier field. Upon cancellation, the particular appointment should move from the user’s list to master list.

• Users can searchboth of the appointment lists by the GP name.

• You can use separate buttons that would enable implement these functionalities.

Part 2 – Report (10 marks)

Overview: You need to write a 200 words on what you have learnt, what issues you have faced and how you have resolved that. The word file should be named as yourusername_report.docx, e.g., pchakrab15_report.docx.

Details: With your 200-word report you need to discuss/describe the followings.

The data structures you have implemented for the ‘Medication’ and ‘Appointment’ pages.

Discuss why you have chosen those particular data structures.

Your implementations of ‘add’ and ‘search’ features in both pages.

Issues/challenges you have faced while implementation and how you have rectified the issues/challenges.