Understanding How PhoneGap & Appcelerator Apps Communicate With A Web Server

There is a rather large difference between a jQuery Mobile (or HTML5, appMobi, sencha etc) web app and using those same technologies in PhoneGap to create a native app. The main difference is how the code interacts when built directly on a server and run in a web browser versus running directly on the user’s device. By definition, a mobile web app is a remote site that runs off a web server at all times. That allows us to easily use programming languages such as PHP, Ruby and Python to create them. Using those languages, we can perform easy functions such as creating contact forms and sending mail directly from the server.

However, when you package your web app into PhoneGap you have to build your code with HTML5/CSS3/JavaScript and you cannot use server side programming languages such as PHP. The other difference is when an action is ran on PhoneGap it is native/local to your device, meaning the device doesn’t have to be connected to the internet.

Below is a picture describing how a regular mobile web app that runs in a browser via a website looks and functions.

So then, how do we send mail using contact forms? Or pull MySQL data from a remote server and populate our native web app built with PhoneGap?

The question is how do we allow someone to enter a contact form, pass that data to the server which would then processes the data from the form and email it to the designated recipient?

Take a look at the image below; the process is as follows. All actions on the native application happen locally to the device. If you need to communicate with a server you need to use JavaScript functions to send JSON to and from your remote server.

For example, in a contact form, all the information from the form will be processed on the local device. Once the user submits the form your JavaScript will then package it up all nicely into JSON and then you will post that data to a server. Your JavaScript will query a PHP page in our example with the JSON data. From there, your PHP will get the JSON data using $_POST or $_GET and you can process the data using json_decode() functions (or whatever is equivalent in the language you are using).

From there you can use your PHP functions to do whatever you would like with your data. Such as storing it in a database, process it using the mail() function and other items.

What other times would you need to use a remote server?
So here is a list of a few tasks that would use this method for communicating. It’s a guideline as you go forward and build your apps.

  • Transfering data from a remote MySQL server to your native application
  • Processing a contact form (without using native mail functions) to your server
  • Communicating with remote API’s
  • Parsing remote JSON
  • Parsing XML Files

2 thoughts on “Understanding How PhoneGap & Appcelerator Apps Communicate With A Web Server

  1. Nice article. It’s really helps me to understand.
    So, I’ll would like to see any tutorials or samples to use that system using JqueryMobile + Json+PHP.
    Does anybody know any links about that?

    Thanks in advance.

Leave a Reply

Your email address will not be published. Required fields are marked *