Chapter 8. Applying it All – the Mega App

In this chapter, you will learn how to design and develop a complete app (the Mega App) using Apache Cordova and jQuery Mobile APIs. Mega App is a memo utility that allows users to create, save, and view audible and visual memos on the three most popular mobile platforms (Android, iOS, and Windows Phone 8). In order to create this utility, Mega App uses jQuery Mobile to build the user interface and Apache Cordova to access the device information, camera, audio (microphone and speaker), and filesystem. In this chapter, you will learn how to create a portable app that respects the philosophy differences between Android, iOS, and Windows Phone 8.

Mega App specification/wireframes

Mega App is a Cordova App that uses some of the Cordova plugins and jQuery Mobile in order to build a memo utility. It allows you to create your audible memos (such as talks, lectures, reminders, business meetings, and kids' voices) and also visual memos using an easy-to-use and responsive user interface. It also allows you to manage all your memos from a single unified listing. Mega App works on the Android, iOS, and Windows Phone 8 platforms. The following screenshot shows the home page of Mega App; it displays a list of the user's audio and visual memos:

Mega App specification/wireframes

Mega App home page

In order to create a new memo, click on the New button on the page header, and you can select to create either "Voice memo" or "Photo memo". When you select creating a new "Voice memo", you will be introduced to the voice memo page in which you can enter the voice memo details in the Title and Details fields and click on the Record button to start recording audio, as shown in the following screenshot:

Mega App specification/wireframes

Creating a new voice memo

Once you are done, click on the Stop Recording button to finish recording. You can then listen to the recorded voice by clicking on the Playback button. After entering all the voice-recording information, you can finally click on the Save Memo button to save your voice memo. After clicking on the Save Memo button, you will be forwarded to the app's home page to view your saved voice memo in the memo list (a voice memo is marked with an audio icon at the end of the voice memo item).

In order to create a new photo memo, click on the New button on the page header and then select the Photo Memo option; you will be introduced to the photo memo page in which you can enter the photo memo details in the Title and Details fields and click on the Get Photo button to get a photo either by capturing it using the camera or by getting it from the device's gallery.

If you choose to get a photo from Gallery, you will be forwarded to the device's gallery to pick a picture from there, and if you choose to get a photo from Camera, then the device's camera app will be launched to allow you to capture a photo. Once you are done with getting the photo, you can view the photo in the photo memo page, as shown in the following screenshot:

Mega App specification/wireframes

Creating a new photo memo

After entering all the photo memo information, you can click on the Save Memo button to save your photo memo. After clicking on the Save Memo button, you will be forwarded to the app's home page to view your saved photo memo in the memo list (a photo memo is marked with a camera icon at the end of the photo memo item).

It is important to note that at any point in time, you can click on any listing item (in the app's home page listing), which represents either a voice or a photo memo, to get its details. The following screenshot shows a detailed saved voice memo:

Mega App specification/wireframes

Editing voice memo details

In the memo details page, you can view and edit the memo information and can also delete the created memo by clicking on the Remove button.

Finally, in the home page, you have the option to delete all of the created memos by clicking on the Remove All Memos button and confirming the deletion of memo items.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
13.59.79.176