Assignment 1: App in Ionic with Demo and Reflective Report


In this large individual assignment you will need to develop a mobile phone App using Ionic Framework that meets as many goals below as possible. The App does not have to be deployed on the actual phone and can be demonstrated using a simple ionic serve command. You need to stick to the App described in your AppDescription submission for both assignment 1 and 2.

The overall assignment marks break into the following parts (roughly): you get 30% for working application; you get 30% for sufficient description and organisation of your code that someone else can take over and work to extend your app as well as detailed and reasonable discussion of 3 distinct UX decisions with multiple alternatives; you get 30% for an insightful discussion of your architecture, good design for your app, and discussion of the software engineering implications of using a framework (this last 30% are very hard to get full marks for!); finally the 10% Demo tests both your understanding of what different parts of your own app do and your explanations and insight into a good design and organisation of your code and well thought out UX decision(s).

Implementation Starter (To Be Done Individually) (Worth 3%)

As a starter task, you need to create a simple App with at least one screen or a tabbed interface that displays a message using one of the Ionic templates. You then need to add a login page that asks the user for their name and remembers it throughout the App. You should display a welcome message that utilises the name. You can then display the main screen with the user name. Here are three screenshots of what my version of this starter App looks like.

Login Screen Welcome Message Internal Screen
LoginScreen.png WelcomeMessage.png InternalScreen.png

What to submit. As you will be submitting a URL linking to your GitLab repository tagged with the "SWEN3252019A1" tag ensure that you place the starter up into a clearly identified folder such as starter and mention it in the 325-a1-readme-username.txt that you will submit as per below.

NB! If your App clearly includes and exceeds the functionality described above, you do not need to submit such separate starter and would be given this mark automatically.

The App Implementation (Worth 27%)

NB! If you are working in a group of 2 or 3 people then you will need to explicitly assign screens and API items to different group members to be assessed individually and you will thus need to have a much larger App (proportional to your group size) to get full marks. You will need to describe such assignment in your 325-a1-readme-username.txt and during your in person marking session.

This is the main thrust of the assignment and is likely to take you at least 4 weeks to complete out of 5 weeks given to you, assuming you spend around 8-10 hours every week working on this assignment.

It is extremely important to follow good Software Architecture; organise your code clearly and well without any unnecessary materials; documenting and making it easy for someone else to take over your app in the future (imagine you are doing it in a large company and then have to move on to a different project); provide relevant readme.txt files and self-documenting code and folder names. Good design will be assessed at both code, report, and demo level by the markers.

Goal: Use at least 7 different screens and 15 different API items (like Button, NavController etc). Additionally you need to utilise at least one other major external component (like Firebase DB or ideally more interesting than that) and be able to demonstrate required number of different UX decisions to help you with your report below.

NB! To get full marks for the implementation, you should follow a clear and reasonable Architecture - ideally with three layers as discussed in the lectures and reflect on this in your report.

What to submit. Tag the relevant state of your GitLab repository with the Assignment 1 and submit a URL for it in your 325-a1-readme-username.txt file that you put in the submission system. PLEASE DO NOT UPLOAD ANY CODE.

Demo (Presented in a Marking Slot, To Be Done Individually) (Worth 10%)

Present a good demo to the tutor using a video that should be uploaded as per the instructions below. YOU NEED TO SIGN UP FOR MARKING SLOT OR NO MARKS.

What to submit. Submit the video (at most 3 minutes long) of your demo called created/uploaded using Panopto linked from the Blackboard page of this course (where you see the lecture videos being posted). Try to call your recording: 325-a1-demo-username to make it easier for us even though only tutors and you can see the video you upload (not others in the class). You should be able to use Panopto to record the video of your desktop so hopefully no external tool will be required but this may not work properly in the labs (in which case use QuickTime available there to record and then upload the video).

NB! Then upload a video-uploaded.txt file to the appropriate ECS submission system item and click complete the submission button to ensure we can mark your submission in the ECS submission system! The file can be blank or contain a link to the Panopto recording.

DURING THE DEMO (15 MINUTE SLOT). Start by showing your code to the tutor and explain how you organised your App and what Architecture you followed. Then demonstrate either using a laptop or phone or the demo video that you submitted and talk through at least one of your UX decisions (the most interesting one). Then be prepared for the tutor's questions regarding what different parts of your code do and how and for what purpose.

Written Report (To Be Done Individually) (Worth 60%)

NB! The reports are assessed individually and therefore if you are in a group of two or three people, you will need to write it yourself and present different UX decisions from your other group members.

What to submit. Submit a file called 325-a1-report-username.pdf that contains:
  • Description of the overall architecture of your application. 2 Pages of A4, Worth 10% out of 60%
    • Include a description of how you organised your source code to match your architecture.
  • Description of how you utilised at least 1 major existing external component (e.g. Firebase but hopefully much more interesting one than that) to provide either persistent data storage or other major functionality with a description of how it was integrated into your App architecture. 1+ Page of A4, Worth 10% out of 60%
  • Reflective report on Ionic as a framework for App design including its advantages and disadvantages. 2 Pages of A4, Worth 10% out of 60%
  • Description with screenshots of at least 3 different UX decisions made in your App with justification and discussing and showing screenshots of at least TWO alternative implementations (IN TOTAL per UX decision) or mockups presented with a reasoning as to why you went with the one you had in the final version. 3+ Pages of A4, Worth 30% out of 60%
  • Finally, include an appendix with as many pages as there are separate screens in your app, with each page containing a screenshot of the screen and a one paragraph description of its design.
    • This is in addition to the required 3 UX decisions which each would need a minimum of 2 screenshots (one for each implemented alternative) in the previous section. You can reuse the screenshots from that part in the appendix.


  • For Architecture, you need to describe how your code is structured into layers and refer to the book we discussed in the lectures as well as provide relevant diagrams and descriptions of how and why your code design fulfils the architecture you described. You have to show significant insight to get A grade for this part.

  • For External Component, you need to describe how your way of implementing it fits into your proposed architecture and provide technical details of how it works and justify your choices and why it is the best way to fit the component into your app architecture and design.

  • For Framework Reflection, you are expected to provide a lot of technical details, examples, and justifications for how the Ionic or React Native helped or hindered your development. It is essential to not just describe how it works and whether you liked it but rather justify and show technical examples of how it affected your application design and what further improvements or insight you could have hypothetically provided to framework developers.

Marking Guide for App Implementation and Written Report

NB! To get full marks for the implementation, you should follow a clear and reasonable Architecture - ideally with three layers as discussed in the lectures and reflect on this in your report.

The following applies for individual projects. Groups of 2 or 3 are actually much harder as they need to multiply their effort below by the number of people in their group (so 3 external components instead of one, 9 UX different decisions per assignment, up to 30 screens and up to 60 components etc).

Obviously, the "10 screens and 20 components per person" is a goal meant to say that if you have more than that then clearly you are doing too much. smile So yes, complexity of the pages, relevance of UX decisions, complexity of components (e.g. I don’t think there are 60 Ionic components to begin with! :-)) all play a role.

On individual level:

  • A simple App that works with 3-4 screens and around 10 different components with at least some attempt to store assets locally with a reasonable attempt at all the parts of the report including 3 UX decisions should get you a PASS (C- or C or C+).

  • A non-trivial interesting App (doesn’t have to be super cool) having at least 5-6 screens and using over a dozen different components with basic use of external asset (ideally more interesting than just Firebase) and a good attempt at all the parts of the report including clearly different 3 UX decisions should get you a B grade (B- or B or B+).

  • A non-trivial interesting App with 7 or more different purpose screens and using at least 15 different components of which at least 5 are non-trivial and supporting clear coherent navigations through the App, a moderately interesting use of an external asset or two (more cool ones than just Firebase) and very well written reflective report with citations of sources and clear insightful discussion of the non-trivial architecture and frameworks that builds on the reading in the class as well as UX discussion of very different UX decision providing alternatives and citing the sources used in class or outside on UX (e.g. the two books) to justify them would get you A grade (A- or A).

  • Finally, as per the previous paragraph plus a “WOW Factor” for the App, would get you A+.

NB! Regarding the specific "Code Functionality" and "Code Documentation and Style" marks that cover the implementation:

  • The Code Functionality should account for around 70% of the final mark.

  • The Code Documentation and Style should account for around 30% of the final mark and full mark here should only be given if it is very clear how a new incoming person to take over and manage the development of the app.

Marking Guide for Demo

If you have no submission or video submitted but no viable or realistic App other than a basic "starter" level, then 0 marks.

  1. The App has more than one screen showed off but no more than basic one or two interactions that align with the App's task is presented.
  2. The App has at least two App's tasks demonstrated (e.g. adding a to do item and viewing a list of to do's in a To Do App) but no more than this.
  3. The App is shown to perform at least 3 different interactions and at least one UX decision is discussed by the voice over. This should include the interaction with external component.

For Assignment 1 only: Each of the tutors will nominate around 2 or 3 Apps that show off different interactions to be invited to demonstrate them in the lectures. The criteria is to "stand out" and show off interesting and different aspects of Apps.