CSC73010 – Programming Mobile Systems

Part 1 – Basic Typescript App

The aim is to develop a simple one-page TypeScript app to maintain a small database of media library information while the browser window is open. You can initialize your app with hard coded data, or you can start with an empty data structure. Types are important in your code, however there is no need to type everything, and general applicability of typing is as you have seen in the study guide. 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 media data has the following fields:

• Title

• Author

• Publisher

• Type (“video”, “game”, “music”, “other”)

• Notes (one line of comments that user can enter)

The data has the following requirements (1 mark):

- Each record must have a value for all fields. Only the Notes field can be blank.

- The media Type must be one of the options shown.

- A Title can only be entered and saved once (it must be unique for each media).

Your database would probably be a Typescript array of JavaScript objects, each of which has properties corresponding to the above fields. You can use another data structure if you wish but types will be necessary to ensure integrity of the data Your app should implement:

- A way to edit media data . Remember you do not have to permanently save the data between browser sessions, but you do have to save it while the app is active. HTML form widgets are the easiest here.

- A way to add a new media information . Consider re-using the edit form above, it will require careful thought so as not to confuse the user.

- A way to delete individual media with a “Do you really want to…” interaction to reduce accidental deletions.

- A way to search the media by the Title field . This will probably done with a HTML list but you may use other techniques (e.g. implement a search text field).

Your app should also:

- Provide an interface equally viewable by narrow and wider mobile screens (it will be tested). Note that this is just a request to keep your app simple and displayable on narrow screen as well as possibly wider screens. You can put links in a long page to navigate your app on narrow screens. This will be important when we get to mobile device apps later in the unit

- Use interactive features (e.g. use innerHTML assignments) to improve user experience (not alert() calls!). You are expected to add error messages where necessary 

Part 2 – Expand the App 

Modify the app from part 1 to become a multipage Angular app. For example, place the add record on a separate page to the search facility. You can use as many pages as you like but don’t forget to use an error page (for malformed URLs), an Information page e.g., about the app and have your name as app developer. A Help page showing how to use the app would be nice as well.

Marks are allocated as follows:

1. Having a working Angular app with appropriate Angular coding . Minimally the app will have one component and one module, but to implement the following requirements you will need more components.

2. Using Angular forms . This is separate to the multipage facility. If you just add Angular code to the one-page Typescript app from Part 1, you have not used Angular forms.

3. The multipage facility using the Angular router . This includes the navigation between pages,error indicators and no broken links.

4. 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 error messages, when data entry is incorrect .

5. Use of CSS styles. 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 on-line sources(a reference to the original designer should be made in your code if appropriate).