Mobile application development became easier now a days. But Challenging application development is always difficult one. The major reason for this difficulty is that developers are not familiar with all the programming languages while they are having enough programming skills. So these people could not able to succeed in cross platform developments. So what developers needs to understand is to write a common code to implement in cross platforms.
Well, Most of the developers are good in front end web development like HTML, JavaScript and CSS. Are you the one? Here is an open source framework that allows you to develop your mobile application with your favorite languages like HTML, JavaScript and CSS.
Here is an idea that how these framework works.
Write your code in Java Script and HTML. It will give a nice rich application look when you are applying nice CSS with it. Warp it with phone Gap framework and deploy it in mobile or host it in the app itself locally.
Phone Gap provides some functions that can be interface with the native mobile OS and it can get result of these. For example accessing phone call via network provider, Accessing Location service and getting location etc. here is some example for accessing the Location service service of operating system.
HTML:
<body> <p id="geolocation">Finding geolocation...</p> </body>
Java Script:
function onDeviceReady() { navigator.geolocation.getCurrentPosition(onSuccess, onError); } function onSuccess(position) { var element = document.getElementById('geolocation'); element.innerHTML = 'Latitude:'+ position.coords.latitude +'Longitude:'+ position.coords.longitude } // onError Callback receives a PositionError object function onError(error) { alert("Error"); }
Then in your phone should allow the function to access the service which again have to access the Location service device so you have to add the Uses- permission on your respective devices. For example in android manifest.xml should have the following codes to get permission for usage of services. .
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> <uses-permission android:name="android.permission.INTERNET" />
So after this android device can be able to access services which are required for the JavaScript functions.
What kind of effective mobile application can be built by using phone gap?
Application which are working in web services for example the famous social networking applications, famous mailing application. All we need is API.
What is an API?
APIs (Application programming interface) are nothing but the data which comes on demand of particular request. Let’s come out from too technical. If you are trying to develop an social networking application we have to populate the page with few things like number of likes, comments, updated feed, notifications. These data can be accessible through the Ajax call which can be written inside the JavaScript. For example
$.ajax({ type : ‘get’, url : http://www.your_API_provider_link , dataType:'json', success : function(data) { //your manipulations } error : function(msg) { //Error Handeling }
API can be sent to the end user in the form of several format like XML, JSON. JSON format is light weighted. So most of the providers uses JSON for API response. Once we get the response from the server in the form of JSON we can be able to make use of it. Data inside the JSON response will be saved in the object called “data” as per the code above. And these JSON data will be looking like this
{"employees":[ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter", "lastName":"Jones"} ]}
So its all ours now, either we can populate it directly to the HTML or we can able to manipulate the data. Let’s have an example scenario.
Let us consider the Example Page
Code for this page is:
<!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="example_javascript.js"></script> <h1 style="text-align:center; color:red"> Example for You</h1> <title>Example Page</title> </head> <div style="text-align:center; color:blue" id="Word_id">We can change this text with other data which is from JSON response</div> </html>
So here we can able to change the content from the javascript
$('document').ready(function(){ $.ajax({ type : ‘get’, url : http://www.your_API_provider_link , dataType:'json', success : function(data) { $(“#Word_id”).html(data.text[1]+ ”this value is from JSON”); } error : function(msg) { //Error Handeling } }
And assume the JSON response is like
{"data":[ {"text":[{‘0’:”1st text”]}, "text":[{‘1’:”2st text”]}, "text":[{‘2’:”3st text”]}, "text":[{‘3’:”4st text”]} ]}
So finally we can ge the output page as following
This way you can use the JSON.
So My next article will be having the “My First Phone Gap project”
All the best
Certified Cloud Automation Architect and DevSecOps expert, skilled in optimizing IT workflows with Six Sigma and Value Stream Management. Proficient in both technical and leadership roles, I deliver robust solutions and lead teams to success.
Pingback: Cross Platform Application from PhoneGap with HTML5, JavaScript | Curiosity Needed
Nice blog thanks for sharing…!
It is a simple cross-platform app development framework that uses HTML5, CSS, and JavaScript.making it is one of the most preferred frameworks for developing cross-platform Apps