Channels ▼
RSS

Design

Debugging Mobile Apps with HTML5 and Intel XDK


In the first article in this two-part series on developing mobile apps with HTML5 and the Intel XDK, I explained how to create an HTML5 hybrid app from scratch that uses Intel App Framework and Apache Cordova. In this article, I explain how to debug a more complex app with the tools included in the IDE and the on-device debugging feature.

Making REST API Calls

In the previous article, our sample app uses the accelerometer available on various mobile devices to control the movement of a robot device (an Internet of Things project). The following lines show the JavaScript code for a very simple Node.js REST API that you can run in your environment, so you can see how to debug an Intel XDK project that consumes a REST API. If you don't work with Node.js, you will need to install it in order to run the example. Start Node.js, paste in the code, and the server will be listening at port 1337.

// Require the HTTP library
var http = require("http");
// Require the URL library
var url = require('url');

var server = http.createServer(function(request, response) {

    var parsedUrl = url.parse(request.url, true);
    var query = parsedUrl.query;

    if ((request.method == 'GET') && (parsedUrl.pathname == '/move')) {
        move(query, response);
    }
});

function move(query, response) {

    var deltaX = 0;
    var deltaY = 0;
        
    if (query.x) {
        switch (query.x) {
            case 'left': deltaX = -1;
                         break;
            case 'right': deltaX = 1;
                          break;
        }
    }
    
    if (query.y) {
        switch (query.y) {
            case 'up': deltaY = -1;
                         break;
            case 'down': deltaY = 1;
                          break;
        }
    }

    console.log("Moving X: " + deltaX + "; Y: " + deltaY);

    // Write the response HEAD
    response.writeHead(200, {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "X-Requested-With"
    });

    var obj = {
        message: "Moved OK",
        X: deltaX,
        Y: deltaY,
    };

    // Write the response body
    response.write(JSON.stringify(obj));
    // End of the response
    response.end();
}

// Start listening at port 1337
server.listen(1337);
console.log("Server is listening at port 1337");

The same Cross-Origin Resource Sharing (CORS) restrictions that apply to Web-based HTML5 apps also apply to hybrid apps that run in a webview. Thus, I've added the necessary data in the response header.

response.writeHead(200, {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "X-Requested-With"
    });

Obviously, you won't be able to use localhost to access the REST API as you would in your local Web browser. So, it's necessary to use the IP address for your developer computer (on which you're running Node.js and where you started the previously shown code). I'll use 192.168.2.6 in my examples, but you should replace the IP address with the appropriate address for your computer.

Once you start running the code in Node.js, you can use a Web browser, Telerik Fiddler, or the curl utility to compose and send a GET request to your computer's IP address and port 1337, adding /move and different values for the x and y parameters. The following lines show four curl commands with possible combinations of values for the x and y parameters that the app will send:

curl -X GET '192.168.2.6:1337/move?x=left&y=up'
curl -X GET '192.168.2.6:1337/move?x=left&y=down'
curl -X GET '192.168.2.6:1337/move?x=right&y=up'
curl -X GET '192.168.2.6:1337/move?x=right&y=down'

The API will return the JSON below for x=left and y=up:

{"message":"Moved OK","X":-1,"Y":-1}

You will see a message in the Node.js console each time the move method is called. This message will be helpful when you debug the app that will use this REST API.

Moving X: -1, Y: -1

Make sure the mobile devices that you will use to test and debug your app display a JSON response when you enter the following URL in their Web browsers (when connected to your WiFi network):

http://192.168.2.6:1337/move?x=left&y=up

If you don't see the JSON response and that the previous commands worked correctly, you should check your WiFi network configuration.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video