JQuery Mobile App development by using XML, JSON, PhoneGap and PHP
Tags: jquerymobile, xml, json, phonegap
Published: 2019-04-14 16:40:17

---
title: JQuery Mobile App development by using XML, JSON, PhoneGap and PHP
cover_image : https://thepracticaldev.s3.amazonaws.com/i/irzptvyqd56pz1r04jac.jpg
published: true
description: Building & deploying a mobile application.
tags: jquerymobile, xml, json, phonegap
---

Hello folks,

During these couple of days, I was developing a basic mobile application that's only functionality was to display some data that it retrieves somewhere on the web. I named it "**RSS FEED**"

## Here is how it looks like !

![App Icon](https://thepracticaldev.s3.amazonaws.com/i/eiuoe8xo62dv5srxbdal.png)<figcaption>App Icon</figcaption>

![App landing page #1](https://thepracticaldev.s3.amazonaws.com/i/sntbsiqdn1hs0v6cr0c0.png)<figcaption>App landing page</figcaption>

![App landing page #2](https://thepracticaldev.s3.amazonaws.com/i/eg5ehprd2kx3lpnw2zwi.png)<figcaption>App landing page (scrolling a bit down)</figcaption>

![Clicking on an article and pop up](https://thepracticaldev.s3.amazonaws.com/i/fndlrj7f5b0weq87itkh.png)<figcaption>Clicking on an article & it pop up</figcaption>


## Let's get to the core of what's exactly happening !

So, there is this website [NETWORK WORLD FROM IDG](https://www.networkworld.com/) that has an [RSS](https://www.networkworld.com/index.rss). As usual, they are in XML format.

So what am doing is, I am using these XML, converting them into JSON by a PHP script hosted on my server and sending those JSON to the JQuery Mobile App and displaying them there and when a user click on a particular article's title, the whole article pop up so they can read it.

Any updates that is made is the XML file will update the mobile app in real time.


## How did I work it out ?

### Advice

To work on this, I used PhoneGap, which you can use to easily create mobile app in HTML, CSS & JavaScript. I also used WampServer as I was working on localhost during development. And finally you will need a Hosting & Domain.

**_Pssst, you can use free [000Webhost](https://www.000webhost.com/) web hosting_**

1. Start PhoneGap and build a blank project
2. Checking the [JQuery Mobile Demos](http://demos.jquerymobile.com/1.4.5/) in order to know which element to use to develop the mobile app front-end.
3. Build an Static Mobile App according to the design's wireframing.

After this part was completed, It was time to work with the XML. My only reason why I choose to work with JSON and not XML was simply because I feel more at ease with JSON.

I used a PHP Script that convert XML to JSON. Then I uploaded it on my server and it's done. It is returning JSON formatted data.

{% github saqueib/qrss %}


### How to make them talk ?

For this I use AJAX. So when you open the application on your mobile, it trigger the AJAX which send a request to the server. The server responds with the JSON.

All I had to do was to loop over the JSON and append them to the List View of my application in order for it to display.

### Deploy APK

I used Adobe PhoneGap Build for compiling the files and generate the APK, hence I downloaded the APK and installed it on my mobile phone.


Done !!! Works completely fine..


Below is the link of the app, just in case someone wants to check it.


 **[Google Drive Link](https://drive.google.com/open?id=1j5H20zifoI7lQ6Fbh_xQOLVso9nBwysn)**