- Install NodeJS from : https://nodejs.org/en/
- Install the current release to test out new features.
- Install Cordova and Ionic (for now install ionic but use jQuery Mobile). More about jQuery Mobile : http://jquerymobile.com/
- Do check jQuery Mobile API demos here : http://demos.jquerymobile.com/1.4.5/
- Open CMD after NodeJS installation and type below command to install Cordova and Ionic :
npm install -g cordova ionic
- Wait for the command to finish installing the components.
- That’s it, installation part is over.
-
Goal is to make an App which reads contacts from contact database using cordova plugin.
-
Create a folder where you want to store cordova project files
-
Navigate to that folder and open command line tool then create a cordova project using command
cordova create showcontacts com.example.showcontacts ShowContacts
-
Wait for the command to finish creating the cordova project
-
Here “showcontacts” is the project folder, “com.example.showcontacts” is the package name and “ShowContacts” is the project name
-
Now navigate to project folder :
cd showcontacts
-
Now add Android platform using command:
cordova platform add android --save
-
Make sure you have added ANDROID_HOME to your environment variable (Windows) and path variable contains %ANDROID_HOME% variable defined. It usually points to :
C:\Users\<user-name>\AppData\Local\Android\sdk
-
Where “user-name” is the Windows user folder name.
-
If ANDROID_HOME variable doesn’t exist then you might get an error while adding Android platform.
-
Now add contacts plugin, since we are going to read contacts we need to add the cordova plugin for that. Command :
cordova plugin add cordova-plugin-contacts
-
Know more about usage of the plugin here : https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-contacts/index.html
-
Now navigate to “www” folder and edit “index.html”. “www” folder is where we will do all the coding.
-
Replace the meta tag with below value to bypass content violation issues (because server hosting and access is being done on same machine)
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'" />
-
After that add jQuery Core, jQuery Mobile and stylesheet. Copy over the below content. Currently using jQuery Core 2.2.4 as jQuery Mobile has some issues with core 3.x versions (as of today i.e. 08/02/2017).
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
-
Now read some intro to jQuery Mobile : http://demos.jquerymobile.com/1.4.5/intro/
-
Modify body tag of HTML with below content
<div data-role="page"> <div data-role="header" data-position="fixed"> <h1>All Contacts</h1> </div> <!-- /header --> <div role="main" class="ui-content"> </div> <!-- /content --> <div data-role="footer" data-position="fixed"> <h4>Page Footer</h4> </div> <!-- /footer --> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> <!-- /page -->
-
Now navigate to “js” folder which is inside “www” folder. Edit “index.js” file and add below content. Replace the existing ones as we don’t need those codes and will be proceeding with simple jQuery to keep it simple.
document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady(){ // find all contacts var options = new ContactFindOptions(); options.filter = ""; options.multiple = true; var filter = ["displayName"]; // Add the properties you want to fetch. Add property separated by ',' $.mobile.loading("show"); navigator.contacts.find(filter, onSuccess, onError, options); } var contactsHtml = ""; // display the names of all contacts function onSuccess(contacts) { for (var i = 0; i < contacts.length; i++) { contactsHtml += "<p>" + contacts[i].displayName + "</p><hr>\n"; } $('.ui-content').html(contactsHtml); $.mobile.loading("hide"); }; function onError(contactError) { $.mobile.loading("hide"); alert("Unable to retrieve contacts."); };
-
The code is quite simple, we are just querying for all the contacts using contacts plugin for android and forming a html to show all the contacts inside a div tag.
-
Now to compile the code use command :
cordova build android
-
Wait for command to finish. For first time it will download gladle plugin, so it may take a while.
-
Now once build is done connect your Android device and run the project. To run the App use command :
cordova run android
-
On first app launch you need to allow contacts access (Marshmallow and above). Once access is allowed you can see the list of the contacts inside body segment.
-
That’s it. Simple, isn’t it ?
Happy Coding :) Fork -> Improve -> Share -> Repeat