Telerik blogs

Consuming Services - How to get useful data into your app

January 08, 2013 Mobile 0 Comments


One of the first questions I routinely get from people who are starting with Icenium is, "How do I get useful data into my application?" So, I would like to show how to consume a few different services. I will be using jQuery to consume these services.

To start, I will create a new project in Icenium using the jQuery template.

Next, we need some data to read so I will just consume a twitter feed. The request is quite simple:
                http://search.twitter.com/search.json?q=some search term

Now to get the project ready

I will clean up the html to remove what we don’t want and modify one of the template's page div tags to show our found tweets.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Get Service Data</title>
    <link href="jquery-mobile/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" />
    <link href="styles/main.css" rel="stylesheet" type="text/css" />
    <script src="cordova.js" type="text/javascript"></script>
    <script src="jquery-mobile/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="jquery-mobile/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="js/hello-world.js" type="text/javascript"></script>
</head>
<body>
    <div data-role="page" id="home">
        <div data-role="header">
            <h1>Get Service Data</h1>
        </div>
        <div data-role="content"></div>
        <div class="nav">
            <ul data-role="listview">
                <li><a href="#twitterData" data-transition="slide">Twitter Example</a></li>
            </ul>
        </div>
    </div>
    <div data-role="page" id="twitterData" data-add-back-btn="true">
        <div data-role="header">
            <h1>Twitter Search</h1>
        </div>
        <div data-role="content">
            <div id='searchTermInput'>
                <label for="txtSearchTerm">Enter text to search for:</label>
                <input type="text" id="txtSearchTerm" value="" />
            </div>
            <div id='searchTermText' style="display:block;"></div>
            <div align="center">
                <div data-role="controlgroup" style="display:inline-block;" data-type="horizontal">
                    <button data-theme="a" onClick="twitterSearch();">Search</button>
                </div>
            </div>
            <div align="center">
                <ul id="twitterResults"></ul>
            </div>
        </div>
    </div>
</body>
</html>
Note: I have minimized all code in this post but you can get the full code below 

Now that we have a UI let's look at making the call to get the data


function twitterSearch() {
    var searchTermElem = document.getElementById('txtSearchTerm');
     
    $.getJSON('http://search.twitter.com/search.json?q=' + searchTermElem.value,
        function(data) {

            var items = data.results;
            var list = $('#twitterResults');
             
            list.html("");
            $.each(items, function() {
                list.append($(document.createElement('li')).html(this.from_user));
            });
        });
}

The code will get the JSON data from Twitter and then we show the user where each tweet is from. The response can further be explored to display all the information desired. This method of calling a service is simple and straight forward but will only load data via a HTTP GET request. The pattern will not allow any flexibility for more complex JSON calls. You can see the full documentation for the jQuery.getJSON() api at http://api.jquery.com/jQuery.getJSON/.

If this only allows for get requests, how can we make more use of JSON? It turns out that jQuery.getJSON() is a shorthand method function.  I would suggest if you really want to get deep, do some exploring of the jQuery.getJSON() method -  you will learn a lot (maybe more than you wanted to). If we look there is a jQuery.ajax() method provided by jQuery that gives complete control of any asynchronous HTTP request. Using the jQuery.ajax() method is a little more complex but once the pattern is learned it will provide all the flexibility you will need to make all types of service calls. You can see the full documentation for the jQuery.ajax() api at http://api.jquery.com/jQuery.ajax/

Let see what our code looks like if we use jQuery.ajax():

function twitterSearch() {
    var searchTermElem = document.getElementById('txtSearchTerm');
     
    $.ajax({
        url: 'http://search.twitter.com/search.json?q=' + searchTermElem.value,
        success: function(data) {
                    var items = data.results;
                    var list = $('#twitterResults');           
                    list.html("");
                    $.each(items, function() {
                        list.append($(document.createElement('li')).html(this.from_user));
                    });},
        error: function(){ alert('error getting result'); },
        datatype: 'json',
        type: 'GET'
    });
}

In this version of the code we can see we now have access to a lot more functionality and this is just the tip of the usage capabilities. For the purposes of this post I will stick with what is here. First, you will see we need to create an object with the settings we want specified for the call. In the settings object we specify the “type” of call and the “datatype” we expect. These two settings give a lot of flexibility and control. In this instance the call is the same. It is a HTTP GET and returned JSON data.

Now let's see what we need to do to make a different service call.

This time let’s get some data about names using the behindthename.com api. We will get a random set of names and have the option to specify the gender and the originating usage of the names. The response from this service is in XML format. We will do a simple finding of the data we are interested in for the response but there a several options for parsing simple XML in to JSON or right in to JavaScript objects.

Note: This service requires an api key that you will need to get in order to make this call, I have redacted my key from the code here and from what I have posted. To get your key go here and register for one, it is quick and simple.

The UI looks like:

<div data-role="page" id="nameData" data-add-back-btn="true">
    <div data-role="header">
        <h1>Name Search</h1>
    </div>
    <div data-role="content">
        <div id='optionSelect'>
            <label for="selGender">Gender:</label>
            <select id="selGender">
                <option value='f'>Female</option>
                <option value='m'>Male</option>
            </select>
            <label for='selUsage'>Select Name Usage:</label>
            <select id='selUsage'>
                <option value='anci'>Ancient</option>
                <option selected value='bul'>Bulgarian</option>
                <option value='eng'>English</option>
            </select>
        </div>
        <div id='nameSearchText' style="display:block;"></div>
        <div align="center">
            <div data-role="controlgroup" style="display:inline-block;" data-type="horizontal">
                <button data-theme="a" onClick="nameSearch();">Search</button>
            </div>
        </div>
        <div align="center">
            <ul id="nameResults"></ul>
        </div>
    </div>
</div>

Note: I removed a lot of the usage options to save space here. You can get the full list in the source code.

And the code to get the names is:

function getNames(){
    var genderElem = document.getElementById('selGender');
    var usageElem = document.getElementById('selUsage');
     
    $.ajax({
        url: 'http://www.behindthename.com/api/random.php?key=xxxxxxx&number=6&usage=' + usageElem.value + '&gender=' + genderElem.value,
        success: function(data) {
                    var name = $(data).find('name');
                    var list = $('#nameResults');
                    list.html("");
                    $.each(name, function() {
                        list.append($(document.createElement('li')).html(this.childNodes[0]));
                    });
            },
        error: function(){ alert('error getting result'); },
        datatype: 'xml',
        type: 'GET'
    });
}

With this code we will need to use the jQuery.ajax() method because we are expecting XML data in response. The response is a simple xml document that we just iterate through all the name nodes adding each name to a list.

The xml document looks like this:

<response>
    <script/>
    <names>
        <name>Evvie</name>
        <name>Nicky</name>
        <name>Mavis</name>
        <name>Richardine</name>
        <name>Charis</name>
        <name>Alice</name>
    </names>
</response>

We have seen different ways to call some simple services and how to handle different response types. This is just scratching the surface of what can be done in Icenium with jQuery to retrieve data from services. We would like to know what type of services you are using.

To see the full code you can see it in my Github repo at https://github.com/woodyp/getServiceData-Demo.

Happy coding!

AppBuilder, Mobile

Comments

Comments are disabled in preview mode.