CSC73010 – Programming Mobile Systems – Session 1 2020 Assignment 2
Assignment 2: Ionic Native and Ionic UI Component apps
Due Date: 21 May 2020 at 11.00 pm Submission Method: Blackboard Weight: 25% of Overall Grade Type: Individual
CSC73010 – Programming Mobile Systems – Session 1 2020 Assignment 2
Submission: You should submit your source code as a ZIP archive for all parts of the assignment (Part 1, Part 2 project folders) to 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 folder of the projects as a ZIP file, then send the entire project folders via a method specified by your tutor (e.g., email, cloud upload). 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 author and the assignment part.
Assignment Overview: This assignment requires you to develop two applications, to demonstrate your knowledge of Cordova (Ionic native) and Ionic framework. It will start with an Ionic native application in part 1, and you will implement a multipage application using Ionic UI components in part 2. You can use Tabs Ionic templates for your apps for Part 1 and Part 2.
To ensure every aspect of the implemented apps work properly, test your apps in a real device or in an emulator (for Part 1), before the submission, as browser platforms do not support some of the native plugins and hardware sensors, they cannot be tested in a browser window.
Note: You need to go beyond what have been taught in class to implement the apps.
Part 1 – An Ionic App using Ionic Native (15 marks)
In this section, you will develop an app to use Ionic native plugins that access some of the mobile device’s hardware sensors. The app should be working on a real device or an emulator (it will be tested). This app will have three pages. You need to integrate these plugins to your app.
First Page: Text-to-speech conversion: The first page will have the followings functionalities and items:
• an input field to enter a string
• a range control to select and control speed rate of the speech (0 ~ 1) (1 mark)
• a button ‘Speech’ to execute text-to-speech conversion and play the speech audio (4 marks)
• a button ‘Stop’ to stop the playback (2 marks)
Users will need to enter a text. When the speech button is tapped, the app starts generating the synthesised audio output of the input text. The stop button will stop the playback of this audio output. You will need to research the ‘text to speech’ plugin for this.
Second Page: Call a number: The second page will have the followings functionalities and items:
• an input field to enter a valid phone or mobile number (e.g., 04XXXXXXXX, 07XXXXXXXX)
• a button ‘Call’ to call the entered number (4 marks)
Users will need to enter a valid phone or mobile number. When the call button is tapped, the app
starts calling the number entered. You will need to research the ‘call number’ plugin for this. Third Page: Battery status: The second page will have the followings functionalities and items:
• displays the current charge level of the battery and the status if the phone is plugged in (3 marks)
• displays a warning message if the charge level goes below 50% (1 mark)
CSC73010 – Programming Mobile Systems – Session 1 2020 Assignment 2
This screen displays the current battery charge level (e.g., 70%) and whether the device is currently ‘plugged-in’. The screen also shows a warning message if the battery level goes below 50%. You will need to research the ‘battery status’ plugin for this.
Part 2 – An Ionic UI App (10 marks)
The aim is to develop an Ionic multipage app that uses Ionic UI components, to maintain a small database of media information while the app is running on a mobile device, an emulator, or in a browser window. You have to start with an empty data structure.
This app will be a stand-alone app without any server contact for data. The app will not save data after the app is closed in a mobile device, or the browser window is closed (or refreshed), but you will need to maintain a proper data structure so that changes made remain while the app is running. You have to use appropriate Ionic UI components in all pages (e.g., ion-input, ion-button). Have a look into this link: https://ionicframework.com/docs/components.
Implement an injectable service that maintains your data structure: You data structure will have these fields: Id (must be unique for all records); Name; Type (“video”, “game”, “music”, “other”); and Publisher. Each record must have a value for each of these fields. There can be multiple records with the same ‘Name’ and/or ‘Type’ (4 marks).
First Page: On the first page, the app needs to have the following functionalities:
• adds new records (1 mark)
• displays the current records (1 mark)
Second Page: On the second page, the app needs to have the following functionalities:
• searches record(s) by ‘Name’ as well as ‘Type’ (1 mark)
• displays the details of record(s) as search result (1 mark)
Third Page: On the third page, the app needs to have the following functionalities:
• edits data records (1 mark)
• displays the current records (1 mark)
WARNING! Plagiarism is an academic misconduct and would be reported to the misconduct committee in this unit. Your program must be developed by yourself and should be original (not copied from web or friend). Please find details on plagiarism and other academic misconducts in this link: https://www.scu.edu.au/media/scueduau/staff/teaching-and-learning/ctl-document-downloads/as- academic-integrity-guides/Student-Academic-Misconduct-an-Introduction.pdf.