How To Develop A Mobile App That Supports Multiple Platforms
Designing a mobile app that can efficiently target multiple platforms is a challenging task. This is because while targeting multiple platforms, multiple skill sets are required, and it is quite hard to determine when to implement hybrid approach and when to use the native controls of the platform.
For an increased user engagement and intuitive experience, it is essential to get started with the empathy of your target audience and your business goals. Fortunately, there are several mobile technologies available that support cross-platform mobile app development. And, in order to target multiple mobile platforms, one has to implement a high end mobile technology.
How To Design A Mobile App That Supports Multiple Platforms
The best benefit of the advanced cross-platform mobile development frameworks and tools is that most of them demand the HTML, CSS and JavaScript skills. They, thus facilitate development without using the native programming language, and make the task more convenient.
This article will unveil a complete guide to develop a proficient mobile application via jQuery Mobile. The jQuery Mobile framework is the most popular and proficient mobile development tool that helps develop touch-optimized, cross-platform mobile apps with native look and feel.
Let’s see how to develop an Android application to scrutinize the contact list with names by implementing prolific PhoneGap APIs and jQuery Mobile framework.
- Requisites:
1. Once the PhoneGap has been installed, run a few commands on the terminal window of your system to define the directory in which you will create the application. Here are the commands.
$ cordova create ContactsList com.example.contactlist ContactList $ cd ContactsList $ cordova platform add ios $ cordova platform add android
2. PhoneGap offers a plethora of resourceful plugins and there are several plugins that can augment a seamless access to the native APIs of a device. Here, we will use the “contacts” plugin, and it can be added by running the below mentioned command.
$ cordova plugin add org.apache.cordova.contacts
3. Please verify following lines should be included in platform oriented config.xml file
for ios please find the config file from following path.
app/config.xml
<feature name="Contacts">
<param name="ios-package" value="CDVContacts" />
</feature>
in android find the config file from following path
app/res/xml/config.xml
<feature name="Contacts">
<param name="android-package" value="org.apache.cordova.contacts.ContactManager" />
</feature>
4. Now Please verify in the “AndroidManifest.xml” file of the application that following permissions should be inclueded ,using CLI theses lines will be added automatically to config file.
<uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" />
Developing An Application For Multiple Platforms
With the permissions and access to the APIs, we are now ready to start developing the application.
1. Developing a page that will display the contact list for a requisite name
Since, we will need a page that will hold an array of contacts for a peculiar search, it is paramount to begin with the development of that page. This can be done by using the jQuery Mobile. Simply, copy the following code chunk, open your app’s “index.html“ file and paste the code.
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" /> <script type="text/javascript" src="cordova.js"></script> <script src="js/jquery-1.7.1.min.js"></script> <script src="js/jquery.mobile-1.1.0.min.js"></script> <script type="text/javascript" src="js/index.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Show contacts having name Gary</h1> </div> <!-- /header --> <div data-role="content"> <div id="searchList"></div> </div> <!-- /content --> </div> <!-- /page --> </body> </html>
In this code, the jQuery Mobile script and stylesheet is implemented in the <head> tag. The <div data-role=”page”> element is used for creating a page, and within this element, the <div data-role=”header”> and <div data-role=”content”> elements are also defined. These two elements basically define the content that will render in the header and the content section respectively.
2. Retrieving the contacts
The contacts with a requisite name can be retrieved and showcased on the page by using the JavaScript. The <div id=”contactsList”> element, which has been defined in the previous step, will hold the contact list. For fetching and displaying the contacts, you can use an event offered by PhoneGap that facilitates one to hook into the moment when the app is loaded and the device is ready.
By adding the below mentioned code in the “www/js/index.js” file, a listener will be added that will retrieve all the contacts from the list, which are saved with the “Gary” name in the Phone. The fetched data will be then passed to an onSuccess method. This data will include the contact names and phone numbers.
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//filter: The search string used to find contacts. (DOMString) (Default: "")
//multiple: Determines if the find operation returns multiple contacts. (Boolean) (Default: false)
var options = new ContactFindOptions();
options.filter = "Gary";
options.multiple = true;
var fields = ["displayName", "name", "phoneNumbers"];
navigator.contacts.find(fields, onSuccess, onError, options);
}
3. Displaying the Contacts
For showcasing the searched contact list for a particular name to users, the jQuery Mobile Collapsible list can be used. This list will simply include the contact names that can be further expanded to fetch the phone numbers. To accomplish this, add the following code to the “www/js/index.js” file.
function onSuccess(contacts) {
for(var i = 0; i < contacts.length; i++) {
var html = '<div data-role="collapsible" data-inset="false">';
html += '<h2>' + contacts[i].displayName + '</h2>';
html += '<ul data-role="listview">'
var contact = contacts[i];
for(var j = 0; j < contact.phoneNumbers.length; j++) {
html += '<li>' + contact.phoneNumbers[j].type +
": " + contact.phoneNumbers[j].value + '</li>';
}
html += '</ul></div>';
$('#searchList').append(html);
}
$('[data-role=collapsible]').collapsible().trigger('create');
}
function onError(contactError) {
alert('onError!');
}
Note: All the fields that you want to use for searching the contact list has to be included here.
4. Run the app
First, ensure that your Android device and iPhone device or emulator is configured appropriately, and then, deploy the following command to run the application.
$ cordova build ios $ cordova build android
To test it on emulator
$ cordova emulate android/ios
To test it on device
$ cordova run android/ios
Reflection:
You can efficiently create a prolific application to target multiple mobile devices without delving deep into the native programming languages of the targeted devices by choosing a proficient mobile development framework. jQuery Mobile and PhoneGap offer helpful features that help develop a requisite app with a flair. The aforementioned tutorial shows a simple cross platform mobile app that represents a list of all the contacts corresponding to a particular name.
Author Bio:
Lucie Kruger is an application developer for Mobiers Ltd, a leading Android application development company. She provides concrete information on latest Android, iPhone and other mobile technologies.
Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts
If you want any of my script need to be customized according to your business requirement,
Please feel free to contact me [at] muni2explore[at]gmail.com
Note: But it will be charged based on your customization requirement
