Reference no: EM133121051

PROG2005 Programming Mobile Systems - Southern Cross University

Assignment: Part - Ionic app using Ionic Native APIs

In this section, you will Develop a multipage Ionic app to use Cordova and Ionic Native plugins, which access some of your device's hardware sensors. It is unnecessary to test your app on a real device, but you should if you have one available. The app should be working correctly on an emulator (it will be tested).

You are requested to develop an Ionic app with five pages. The pages required are:

Question 1. A page to display the following device information:
• device's model
• device's operating system name and version
• device's hardware serial number
• device's manufacturer
• Cordova version running on the device

To display the above information, you will need to add ‘Device' Ionic native plugin to your application.

Question 2. A page to implement Text-To-Speech service. Add
• 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 ‘en- US', ‘zh-CN', etc.) if you wish, but this is optional. You will need to research the ‘text to speech' plugin for this.

Question 3. A page that has an audio player implemented to play audio files (4 marks). Your player needs
• a button that plays the audio when tapped
• a button to stop the play

• a range input to adjust the volume

To implement the above, you will need to use the ‘Native Audio' Ionic native plugin. Add the audio file to the ‘assets' folder of the Ionic project.

Question 4. A page to display the current magnetic compass heading in degrees. 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). 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.

Question 5. A page to display the current charge percentage of the device's battery, as well as the charger connection status (1 mark). The page should also display a warning message when the battery level goes low (1 mark). You will need to add the ‘Battery Status' ionic native plugin to your app. Also, add a button that toggles the flashlight on/off when the battery charge level is 50% or above (use the ‘Flashlight' plugin)

Add a splash screen to your app. Any graphic will do. You will need to research the splash-screen plugin for this. You will not need to call show() or hide() as the default configuration will show the screen for three seconds. However, you will need to configure your splash screen by editing config.xml. There are many useful instructions on the internet, so look further than the official documentation.

Part 2 - Ionic app to manage a veterinary clinic's pet database

The aim is to develop an Ionic multipage app for a veterinary clinic that uses Ionic components, to maintain a small database of pet information while the app is running on a mobile device or in a browser window. The app will access a remote website using RESTful operations (see below) to create, edit and delete records on the website (To implement the RESTfull operations, you will need to incorporate concepts learned in the HTTP, AJAX and Rest topic in Module 4).

Your app will implement an injectable service to access the remote website using AJAX techniques. Each page component will access this injectable service for remote HTTP operations.
The data records have the following format
• Pet name - string (this will be a unique key for the data)
• Pet species - string (must be "dog", "cat", "rabbit", "guinea pig", "bird", "snake", or "other")
• Pet age - number (will be the whole number of years)
• Pet sex - string (must be "male" or "female")
• Phone number (owner's number) - string The data has the following requirements:
• Each record must have a value for all fields. No field can be blank.
• The pet ‘species' and ‘sex' must be one of the options shown.
• The pet name can only be entered and saved once (it must be unique for each pet). Your app will have several pages:
• Home page with greetings and your name as app author
• A page for listing all pets
• A page for adding new pets
• A page for searching pets. This page will also allow editing and deleting a pet from the data.

Your app will have help information that appears over the current page when requested (each page requires a help widget). The delete operation will require a prompt to confirm the delete. This prompt should be an Ionic dialogue (not a JavaScript alert!).
You must have at least four pages on your app, and since you will use the tabs template, you must change the icons to be appropriate

Use appropriate Ionic user interface components to implement the app. Several things are missing here from the usual app. For example, no splash screen is requested and no media or other native interfaces (e.g. pictures of pets). You can add them if you wish, but these have not been added as requirements to simplify the app.

Attachment:- Programming Mobile Systems.rar