PROG2005 Programming Mobile System - Assignment 2: Ionic app to manage a fitness centre's
PROG2005 – Programming Mobile System
Assignment 2 (T1 2023)
You should submit your source code as a ZIP archive for all parts of the assignment to the Assignment 2 submission link on the unit website. If the file size is too large to upload via the submission link, please submit only the SRC and Assets folders of the Ionic projects as a ZIP file, then send the entire project folders via a method specified by your tutor. Note that marks will be deducted for poorly structured or uncommented code. All submitted source code files must include title comments that at least identify the authors and the assignment part. The separate parts of the assignment are to be submitted in separate subdirectories (e.g. Part1, Part2 etc.).
This is a group assessment, and you should work in a team of THREE (3) students (your team and members must be approved by your tutor). This assignment is worth 40% of your overall mark, from which 30% is allocated to your group work and 10% to your individual work in the group. Although the assignment is completed in a team, all team members must submit the assignment projects individually. Along with Part 1 and Part 2 application files, you are also required to submit a Microsoft Word document, a time log, for all time spent on this assignment. It should clearly demonstrate the following:
• How long was each of the team members working on this assignment, and when (date/time) were they working on the assignment. If you were working on the tasks together in the same location, indicate this clearly.
• For each such interval recorded in the log, what particular task of Part 1 or Part 2 were you working on.
If your group members are not doing their share of the work, and this cannot be resolved, please contact your tutor or the UA. The marker will act by adjusting marks if somebody is not doing their share of the work.
This assignment will be due after the weekly modules have covered the last of the required materials and covers the relevant tutorial and workshop sessions. Do not leave this assignment to the last minute –complete the relevant tasks of the assignment while concepts are fresh in your mind. This assignment requires you to develop two applications to demonstrate your knowledge of the Ionic and Cordova frameworks. It will start with a multipage application using the Ionic framework in part 1, and you will implement a multipage Ionic application using
Cordova and Native plugins in part 2. You must use only the Tabs Ionic template for your apps in Part 1 and Part
2.
To ensure every aspect of the implemented apps in Parts 1 and 2 works properly, test your apps on a real device or an emulator before submission. The browser platforms do not support some of the plugins and hardware sensors, so the application in part 2 may not be tested thoroughly in a browser window.
Part 1 – Ionic app to manage a fitness centre's member database (18 marks)
The aim is to develop an Ionic multipage app that uses Ionic UI components for a fitness centre to maintain a small database of gym member information while the app is running on a mobile device or in a browser window. You can initialize your app with hard-coded data, or you can start with an empty data structure.
Implement an injectable service that provides data records with the following components (1 mark):
• Member ID *
• Full name *
• Date of birth *
• Gender ("Female", "Male", "Unspecified") *
• Membership type ("Basic", "Premium", "Corporate", "Student", "Day pass") *
• Membership start day *
• Contact number *
• Email *
• Residential address *
• Emergency contact number *
• Medical condition
The data has the following requirements (1 mark):
- Each record must have a value for all fields (*). Only the 'Medical condition' field can be blank.
- The 'Gender' and 'Membership type' fields value must be one of the options shown.
- A Member ID can only be entered and saved once (it must be unique for each member).
Your app will have the following pages:
• Home page with greetings and your names as app authors (1 mark)
• A page for listing all members (2 marks)
• A page for adding new members (2 marks)
• A page for searching existing members (2 marks)
• A page for listing the trial members (1 mark)
• A page for editing/updating existing member records. This will also allow the deletion of a member from the database (3 marks).
Your app should have help information that appears over the current page when requested. The delete operation will require a prompt to confirm the delete (1 mark). This app should be an Ionic app that uses all Ionic components and forms. There will be no marks for only HTML or Angular form elements. Ensure your app functions properly, looks professional, and is user-friendly (4 marks). A well-designed app can make a huge difference in how users interact with it.
Your app will be a stand-alone app without server contact for data. The app will not save data after the app is closed on a mobile device or the browser window is closed, but you will need to maintain a proper data structure so that changes made remain while the app is running. Use appropriate Ionic user interface components to implement the app.
There are several things missing here from the usual app. For example, there is no server contact, splash screen, media (e.g. photos of the members) or other Native interfaces. You can add them if you wish, but these have not been added to simplify the app.
Part 2 – Ionic app using Ionic Native APIs (22 marks)
In this part, you will develop a multipage Ionic app to use Cordova and Ionic Native plugins, which access some of your device's hardware sensors (1 mark for the correct use of Ionic Native). You must test your app in an emulator or on a real device if you have one available. The app should be working correctly on an emulator or a real device (it will be tested). In developing APIs, please use Cordova; applications developed using Capacitor native runtime will not be accepted.
You are requested to develop an Ionic app with six (6) pages. The pages required are:
1. A page with a button to start reading a barcode and displaying the read code on the same page. This page will access your device's camera. Users will hold the device over the barcode they want to scan, making sure the code is within the frame. Use the 'Barcode Scanner' plugin to implement this feature (3 marks).
2. A page that provides the facility in the app to send emails to any email address (3 marks). The page requires the following:
• Input fields for 'To (recipient)', 'Subject', and 'email body (message)'
• A 'Send' button
Use the 'Email Composer' plugin to implement this feature.
3. A page that provides the capability to record and playback audio (3 marks). The page requires the following:
• a button(s) to start/stop recording
• a button to play the recorded audio
To implement this feature, you must use the 'Media' or 'Media Capture' Ionic native plugins.
4. A page to display the current magnetic compass heading in degrees (1.5 marks). This uses the
'Device Orientation' plugin. For full marks, have the page show the heading in symbols N,
NW, SE, SSE, etc. (to three levels) (1.5 marks). For instance, SSE means South-South-East, which is south of South-East. If you want to impress (no extra marks), display a compass and needle pointing to the correct points of the compass.
5. A page to implement OCR (Optical Character Recognition) technology in your app (3 marks). This page will receive an image with text in it as input and display the text on the page as a string. You will need to create/capture an image with text in it and save it in a location in your Ionic project (e.g. the 'Assets' folder). Alternatively, you can allow the user to select an image using an open file dialogue. This page requires the following
• a button to extract the text from the image
• an area to display the extracted digital string
When the first button is tapped, the app extracts the text from the input image and displays it on the page. You will need to use the 'OCR' plugin for this task.
6. A page to implement Text-To-Speech service (2 marks). This page requires the following
• an input field to enter a string
• a range control to select the speed rate of the speech (0 ~ 1)
• a button to call and execute the speak function
• a button to stop the playback Users will need to enter a text.
When the speech button is tapped, the app starts generating the synthesized audio output of the input text. You can also add a list for locale (a string like 'enUS', 'zh-CN', etc.) if you wish, but this is optional. You will need to research the 'text to speech' plugin for this.
Your application should be fully functional, have a professional look, and provide a user-friendly experience (4 marks).
Getting Help:
This assignment, which is to be completed in a group, is your chance to gain an understanding of the fundamental concepts of the Ionic framework, Cordova and Ionic Native. It is important that you master these concepts yourself.
Since you are mastering fundamental skills, you are permitted to work from the examples in the MySCU site or unit content, but you must acknowledge assistance from other textbooks, classmates or online sources. In particular, you must not copy online material or help from others, as this would prevent you from mastering these concepts.
This diagram will help you understand where you can get help:
