CSC73010 – Programming Mobile Systems

You should submit your source code as a ZIP archive for all parts of the assignment by upload to MySCU at the provided link. Note that to receive full marks for each of the indicated assignments parts you will need to submit well-structured and well commented code. All source code files submitted must include title comments that at least identify you as the author and the assignment component. The separate parts of the assignment are to be submitted in separate subdirectories (e.g. Part1, Part2 etc.) – submissions that ignore this instruction and leave all assignment files in one directory will not be considered for full marks.

Please note that this assignment will be due some weeks after the weekly sessions have covered the last of required materials. Do not leave this assignment to the last minute – you can start on it while concepts are fresh in your mind. You may start Part 1 before you have studied all the required materials at the due date. Topic 2 and Laboratory 2 are sufficient to do Part 1. If you require an extension you must apply to your tutor before the due date to be considered. Unless an extension is approved there is a standard University wide penalty (see MySCU site).

This assignment requires you to develop an application using Typescript for Part 1 and Angular 2 for Part 2, to demonstrate your knowledge of the Typescript language and Angular 2 framework. Your apps should will be stand-alone apps without remote server contact for data. The app will not save data after the browser window is closed but you will need to maintain a JavaScript object so that changes made remain while the browser window is open (Assignment 2 will have permanent storage to save data between sessions).

Part 2 can reuse the data structure you create in 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 because both parts must be submitted. 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 preferred method and will receive lower marks. Hints will be published on the unit Forums.

Part 1 – Basic Typescript App (12 marks)

The aim is to develop a simple one-page TypeScript app to maintain a small database of university unit 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, especially for the marks indicated below. 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 unit data has the following fields (1 mark): Unit code - 8 character string: 3 characters and 4 digits, e.g. “CSC73010” Unit name - line of text Session - “Session 1”, “Session 2”, or “Session 3” only Level - “Introductory”, “Intermediate” or “Advanced” Enrolments - integer number 0 or higher
The data has the following requirements: Each record must have both a Unit code and Unit name. The Session and Level fields must have one of the three options above. The enrolment field is an integer (no fractions allowed) and must be zero or higher. Your database will 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 program. You can use Typescript interfaces or go full object-oriented using Typescript classes for each record (1 mark).

Your app should implement: (2 marks) A way to move through the records and edit all the unit data fields. 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 to edit fields here. (2 mark) A way for the user to add a new unit. Consider re-using the edit form above, it will require careful thought so as not to confuse the user! It must be clear what is being added in your implementation. (2 marks) A way to delete individual units with a “Do you really want to…” interaction to reduce accidental deletions (2 marks) A way to search the unit data by the Unit Code field. There are many ways to do this. You could use a HTML list, use a new text field to enter a code to search for, or chose other techniques.
Your app should also: (1 marks) 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 while still being OK for wider screens. You may 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. (1 mark) Use interactive features (e.g. use innerHTML assignments) to improve user experience (not alert() calls!). You are expected to do error messages where necessary but not in alert calls. There are many opportunities to be creative here. However, marks will be awarded for achieving the outcomes indicated above.

Part 2 – Implement the app in Angular (13 marks)

Modify the app from part 1 to become a multipage Angular app, or start a new app may be easier. Your app must be multi-page, 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: Having a working Angular 2 app with appropriate Angular 2 coding (3 marks). Minimally the app will have one component and one module, but to implement the requirements you will need more components. For full marks structure and comments are required.
Using Angular forms (3 marks) as we saw in laboratory sessions. 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.
The multipage facility using the Angular router (3 marks). This includes the navigation between pages, error indicators and no broken links.
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 e.g., when either Unit Code or Unit Name are missing. Note that your code should prevent user errors happening when possible, e.g. use of a list or radio buttons for the Session and Level data (3 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. Feel free to use styles you find in the Angular documentation or other on-line sources including the study guide (a reference to the original designer should be made in your code if you copy large CSS definitions).

To Continue Click Here > CSC73010 Programming Mobile Systems.pdf