Cordova App

This Cordova example app will make REST API calls to NASA’s Open API.

The first API call use APOD API (Astronomy Picture Of the Day). The API returns url to image and descriptive information about it (like copyright, description etc.).

The second API call use same API with date parameter. By passing the date as a parameter you get the picture of the given date.

Example query

https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY

Note! This example is using the special DEMO_KEY API key. This API key can be used for initially exploring APIs prior to signing up, but it has much lower rate limits, so if you are creating your own apps you should signup for your own API key.

The user interface is made by using JQuery Mobile. UI has two buttons in the header for API calls.

screenshot

How to implement this simple app? This is rough description and I am not going to Cordova and JQuery basics.

1. Install Cordova, create a project and install platform Follow the Get Started instructions from Cordova site

2. Include JQuery, JQuery CSS and JQuery Mobile to your index.html file

<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>

3. I have also used responsiveImg library which should be also included. Check more info from their web site

<script type="text/javascript" src="js/responsiveImg.js"></script>

4. Add UI elements

<div data-role="header">
    <h1>NasaApp</h1>
    <button class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-action" id="loadImage">Load 
    image</button>
    <button class="ui-btn-right ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-action" id="randomImage">Random image</button>
</div>
<div data-role="content" id="imgcontent" style="width:95%;">
    <img id="spaceimage" style="max-width:100%;"/>
</div>

<div data-role="content" id="textcontent">
    <p name="copyright" id="copyright"></p> 
    <p name="desc" id="desc"></p> 
</div>

5. Modify index.js file, Add listener to the first button which will load the image of the current day API call is done by using JQuery ajax call.

var url = "https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY";

$("#loadImage").click(function(){
    $.ajax({
        url: url,
        success: handleResult
    });

    function handleResult(result){
        $("#spaceimage").attr("src", result.url);

        // Using http://responsiveimg.com library

        $("#spaceimage").responsiveImg();

        $("#copyright").text("Copyright: " + result.copyright) ;
        $("#desc").text(result.explanation);
    }
});

6. Modify index.js file, Add listener to the second button which will load the random image. randomDate function is modified from miguelmota’s function from GitHub. It will return random date between given two dates. The date is formatted according to NASA APIs date format.

$("#randomImage").click(function(){
    $.ajax({
        url: url + "&date=" + randomDate(new Date(2015, 0, 1), new Date()),
        success: handleResult
    });

    function handleResult(result){
        $("#spaceimage").attr("src", result.url);

        //http://responsiveimg.com/

        $("#spaceimage").responsiveImg();

        $("#copyright").text("Copyright: " + result.copyright) ;
        $("#desc").text(result.explanation);
    }
});  

// based on https://gist.github.com/miguelmota/5b67e03845d840c949c4

function randomDate(start, end) {
    var date = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
    
    var dat = date.getDate();
    var month = date.getMonth() + 1;
    var yr = date.getFullYear();
    
    return yr + "-" + month + "-" + dat;
}

7. Run the project in emulator (for example using command cordova emulate android)

The complete project code can be found from GitHub repository

TODO: Whitelisting