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)
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)