As Mega App needs to store audio and image files in the device's storage so that users can access them later, we need to be aware of the nature of every platform's filesystem to properly store our app's audio and image files.
In Android, we do not have any restrictions on storing our app files under the device's SD card root if the SD card is available, so we can save our audio and picture files in our app's directory under the device's SD card root without any issues.
At the time of writing this book, storing app files outside the app directory is not possible in iOS. iOS places each app (including its preferences and data) in a Sandbox at the time of installation for security reasons. As part of the Sandboxing process, the system installs each app in its own Sandbox directory, which acts as the home for the app and its data. The following screenshot shows the subdirectories for an iOS app's Sandbox directory:
An iOS app's Sandbox directory content
As shown in the preceding screenshot, an iOS app's Sandbox directory mainly contains the following subdirectories:
Documents: This directory can be used to store the user's documents and app's data files.Library: This is a directory for the files that are not user data files.tmp: This directory can be used to store temporary files that you don't need to persist between launches of your app. Note that iOS might purge files from this directory when your app is not running.
We will store our app's voice and picture files under the Documents directory of our iOS app's Sandbox directory.
Finally, in Windows Phone 8, we will save our audio and picture files under the app local directory. Note that using the native Windows Phone 8 API (Window.Storage), you can read and write files in an SD card with some restrictions, check: http://msdn.microsoft.com/en-us/library/windows/apps/xaml/dn611857.aspx. However, at this moment, you cannot do this using Apache Cordova; hopefully, this capability will be supported soon by Cordova.
Now, let's check the Mega App structure. The following screenshot shows the structure of our Mega App:
Mega App structure
The www directory contains the following files and subdirectories:
css: This directory contains the custom app's Cascading Style Sheets.jqueryMobile: This directory contains the jQuery Mobile framework files.js: This directory contains all the app JavaScript code. It has three subdirectories:api: This directory contains the app's services (managers).model: This directory contains the app's model.vc: This directory contains the app's view controllers, which register and implement the event handlers of every page and its user interface elements. An event handler usually calls one or more of the app's services (specifying a model object or more if needed) in order to perform an action and optionally display the returned results on an app page.
This js directory also includes common.js file, which includes the common app utilities. Under the www directory, the index.html file contains all the app pages, and finally, the img directory can contain any app custom images.
The details of the most important app files will be illustrated in the next sections of the chapter.