You already used the deviceready event in Chapter 4, Architecting Your Mobile App, to handle the bootstrap of our app. Use the device API to get information about the type of device you are running once the event is fired.
- Open the command-line tool and create a new PhoneGap project using the Cordova-client utility you installed in Chapter 3, Getting Started with Mobile Applications.
$ cordova create ~/the/path/to/your/source DeviceApi - Move to the directory you just created, add the platforms you want to test on the device API and install the device API plugin.
$ cordova platform add android $ cordova platform add ios $ cordova plugin add https: //git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
- In the
wwwfolder inside the project folder you just created, open theindex.htmlfile and adddivwithidto render the device information gathered using the PhoneGap API.<p id='deviceInfo'>Loading device properties...</p>
- Define a listener for the
devicereadyevent in order to access all the supported API.document.addEventListener("deviceready", onDeviceReady, false); - Show the device information to the HTML page.
function onDeviceReady() { var element = document.getElementById('deviceInfo'), element.innerHTML = 'Device Name: ' + device.name + '<br />' + 'Device Cordova: ' + device.cordova + '<br />' + 'Device Platform: ' + device.platform + '<br />' + 'Device UUID: ' + device.uuid + '<br />' + 'Device Version: ' + device.version + '<br />'; } - In order to allow the app to access the device information, open the
app/res/xml/config.xmlfile and verify that the device plugin is enabled (you should check if there is the<plugin name="Device" value="org.apache.cordova.Device" />XML node in the file). - Update the permissions file
app/AndroidManifest.xml, allowing the app to read the phone state adding the<uses-permission android:name="android.permission.READ_PHONE_STATE" />XML node - Build the project using the Cordova Client utility.
$ cordova build - Using the command-line tool navigate to the folder
platforms/PLATFORMNAME/cordovaand run the app on an emulator or real device (or run the command$ cordova run PLATFORMNAME).$ ./run
You handled the deviceready event, accessing the relevant device information using the PhoneGap API. The device object you just used describes the device's hardware and software:
device.platform: This gets the operating system namedevice.uuid: This gets the Universally Unique Identifierdevice.version: This gets the operating system versiondevice.cordova: This gets the version of Cordova running on the devicedevice.model: This gets the model name
Note
Due to the rolling release model of PhoneGap, it's strongly suggested to always refer to the GitHub repository at https://github.com/apache/cordova-docs/tree/master/docs/en/edge/cordova/device in order to check whether a specific device API is going to be deprecated.
The app you have been working on starting in Chapter 4, Architecting Your Mobile App, is made up of several screens. In order to keep this discussion focused, I will cover only how to handle the loading of the main view of each screen. Due to the nature of the app, you will follow the single page pattern to implement it; most of the features are designed to work offline.
Each screen is made up of a landing page and several subscreens; the landing page of each screen contains the name of the screen and an icon. The main sections of the app and their relevant features are:
- Create: Allows users to define a trip, select a trip mate, and start to plan the trip selecting a cheap travel service and places where to eat, sleep, and so on
- Open: Allows users to open a planned trip, edit the details, and write about one's trip experiences using text and images
- Share: Lets users share the trips they reported on the social networks
In order to render each section of the app, you will create specific templates. The template for the landing screen is pretty simple due to the layout, as you can see in the following screenshot:
In order to keep the code well organized, you will save the mustache template for each landing page in the tpl folder you already created. The structure of each template looks like the following code snippet:
<section id='create' class='gray-background'>
<div class="centered-vertical">
<h1 class='welcomeText'>{{sectionName}}</h1>
<p class="section-mainIcon create-start shadow">
{{sectionName}}
</p>
</div>
</section>What's actually changed so far between each template is the id assigned to the section and the class to render the right icon (i.e., create-start). In the following chapters you will expand on each template to meet the layout of each section.