Document2
This assignment requires you to develop an application using TypeScript for Part 1 and
Angular for Part 2 to demonstrate your knowledge of the TypeScript language and Angular
framework. Your apps should be standalone apps without server contact for data. The app
will not save data after the
owser window is closed, but you will need to maintain a
JavaScript structure (e.g. JavaScript object, Class, Interface) so that changes made remain
while the
owser window is open. Part 2 can be an expansion of Part 1 though you can
start again from scratch if you wish. It is recommended that you save your Part 1 before you
start modifying it for Part 2. For lesser marks, you can divide your assignment into several
smaller HTML pages to demonstrate the different aspects without having everything
working together. This is not the prefe
ed method.
Part 1 – Basic TypeScript App (18 marks)
The aim is to develop a simple TypeScript app for a medical clinic to maintain a small
database of patient information while the
owser window is open. You can initialise your
app with hard-coded data or start with an empty data structure. Types are important in your
code; however, there is no need to type everything, and the general applicability of typing is
as you have seen in Module 2 of the unit. For example, there is no need to define
a function type in a function definition as TypeScript, and the reader can easily deduce the
type from the function definition. You will have to type parameters and return values,
though. Marks may be deducted for too few type definitions, i.e. writing JavaScript instead
of TypeScript.
The Patient data has the following fields:
• Patient ID *
• First name *
• Last name *
• Date of birth *
• Gender (“Female”, “Male”, “Unspecified”) *
• Primary insurance (“Medicare”, “Private Health Insurance”) *
• Address *
• Contact number *
• Next of kin
The data has the following requirements (1 mark):
- Each record must have a value for all fields (*). Only the ‘Next of kin’ field can be blank.
- The ‘Gender’ and ‘Primary insurance’ fields value must be one of the options shown.
- A Patient ID can only be entered and saved once (it must be unique for each patient).
Your database would probably be a TypeScript a
ay of JavaScript objects; each object has
properties co
esponding to the above fields. You can use another data structure if you wish
(Such as class or Interface), but types will be necessary to ensure the integrity of the data (1
mark).
Your app should implement the following:
- A way to edit and update patient data (2 marks). Remember, you do not have to
permanently save the data between
owser sessions, but you do have to save it while the
app is active. HTML form widgets are the easiest here.
- A way to add new patient information (2 marks). Consider re-using the edit form above,
and it will require careful thought so as not to confuse the user.
- A way to delete an individual patient with a “Do you really want to…” interaction to reduce
accidental deletions (2 marks).
- A way to search the patient by the Patient ID field (2 marks). This will probably be done
with an HTML list, but you may use other techniques (e.g. implement a search text field –
harder).
- A way to display the list of all patients added to the data structure (2 marks).
- A way to mark patients as an emergency and display the list of all emergency patients (2
marks).
Your app should also:
- Provide an interface equally viewable by na
ow and wider mobile screens (it will be
tested). Note that this is just a request to keep your app simple and displayable on na
ow
screens as well as possibly wider screens. You can put links on a long page to navigate your
app on na
ow screens. This will be important when we get to mobile device apps later in
the unit (1 mark).
- Use interactive features (e.g. use innerHTML assignments) to improve user experience (not
alert() calls!). You are expected to do e
or messages where necessary (2 marks).
- Use of CSS styles (1 mark). Just use them; there are no marks for artistic design. We are
looking for the ability to use styles.
Part 2 – Basic Angular App (22 marks)
Modify the app from part 1 to become a multipage Angular app. For example, place the add
ecords on a separate page to the search facility. You can use as many pages as you like but
don’t forget to use an e
or page (for malformed URLs), an Information page, e.g. about the
app and have your name as an app developer. A Help page showing how to use the app
would be nice as well.
Marks are allocated as follows:
1. Having all options implemented for adding, deleting, displaying (including favourites),
searching and editing patients (4 mark).
2. The app should meet all data requirements stated in Part 1 (1 mark).
3. Having a working Angular app with appropriate Angular coding (3 marks). Minimally, the
app will have one component and one module, but you will need more components to
implement the following requirements.
4. Using Angular forms (3 marks). This is separate from the multipage facility. If you just add
Angular code to the one-page TypeScript app from Part 1, you have not used Angular forms.
There will be no marks for only HTML form elements.
5. The multipage facility using the Angular router (3 marks). This includes the navigation
etween pages, e
or indicators and no
oken links. Your app should have at least four (4)
pages.
6. Add at least one help button on each page that shows appropriate help messages. You
should make interaction with the help facility as easy as possible. Also, add helpful
information, including e
or messages, when data entry is inco
ect (3 marks). Use of CSS
styles (2 marks). Just use them; there are no marks for artistic design. We are looking for the
ability to use styles. Feel free to use styles you find in the Angular documentation or other
online sources (a reference to the original designer should be made in your code if
appropriate). Your app should be user-friendly and less complex and needs to validate all
inputs (e.g., input fields that need numbers only should not accept letters) (3 marks).