{"id":160,"date":"2016-06-26T23:46:04","date_gmt":"2016-06-27T04:46:04","guid":{"rendered":"http:\/\/www.decodingthecloud.com\/?p=160"},"modified":"2016-06-27T01:12:53","modified_gmt":"2016-06-27T06:12:53","slug":"a-simple-asteroid-detection-system-with-lightning-components-and-a-nasa-asteroids-neows-api","status":"publish","type":"post","link":"https:\/\/www.decodingthecloud.com\/?p=160","title":{"rendered":"A simple “Asteroid Detection System” with Lightning Components and a NASA Asteroids NeoWs API"},"content":{"rendered":"

Over the last few days, my attention has turned towards Lightning components. I have worked through some of the tutorials in the past – chiefly on Trailhead.<\/p>\n

I was a little rusty with it and thought why not create a simple app which makes a call out to an API and displays the results. I wanted it to be a little fun too.
\nI am a huge fan of space exploration and space in general and try to keep up with new developments there.
\nNASA has been a world leader in space exploration and now you also have private space companies doing mind boggling stuff like SpaceX.
\nMeanwhile you have ISRO from India which was the first country to successfully send an orbiter to Mars on the first attempt and without a cryogenic rocket!<\/p>\n

So in the coming years, be prepared to be amazed by achievements in this sector. <\/p>\n

NASA has a good listing of API’s related to their space exploration. You can find it here.
\nNASA API’s<\/a><\/p>\n

One of the API’s that caught my eye was the Asteroid API which lists the Asteroids and NEOs(Near Earth objects) based on when they are closest to the Earth.
\nhttps:\/\/api.nasa.gov\/api.html#NeoWS<\/a><\/p>\n

They have some other pretty cool API’s too including pictures from the Mars rovers. <\/p>\n

For this app, I wanted to achieve the following:<\/p>\n

    \nSimple app which utilizes Lightning components and the SLDS.
    \nUse a server side controller to make a callout to a simple unauthenticated external API
    \nParse the JSON response and contruct a list of results to display in the UI
    \nPopulate the UI with the API results
    \nAllow the user to specify inputs and refresh the UI.<\/ol>\n

    So I went ahead and built it. I am not a Lightning expert and so this is probably not the optimal implmentation. As I continue to learn Lightning I will probably improve this.
    \nThis basically displays basic information about Asteroids which are near to the Earth based on the given dates. A link is also provided for each asteroid to learn more about them. <\/p>\n

    You can find the application here.(I have hosted it on a community).
    \n    Asteroid Detection System<\/a><\/p>\n

    So lets go ahead and build this:<\/p>\n

    1. <\/strong>Firstly, sign up for a NASA API developer key so that you can start making call outs.
    \n    https:\/\/api.nasa.gov\/index.html#getting-started<\/a><\/p>\n

    2.<\/strong> Get Lightning set up in your dev org. You basically need to create a domain, roll it out to users and add the SLDS (Salesforce Lightning Design System) to the org.
    \nFollow these steps if you haven’t already done so.
    \n    https:\/\/developer.salesforce.com\/trailhead\/en\/lex_dev_lc_basics\/lex_dev_lc_basics_prereqs<\/a><\/p>\n

    Please note:<\/strong> Make a note of the static resource that you created for uploading the Lightning Design zip file. This needs to be modified in the code below. <\/p>\n

    3.<\/strong> After this you should be ready to build the app.
    \nThe Developer console is the easiest place to build the app so go ahead and open it up. So go there by clicking “Your Name | Developer Console”<\/strong><\/p>\n

    4. <\/strong>Create the backend APEX classes
    \nTo create a class go to: File | New | Apex Class.<\/strong>
    \nFor this app, we will use APEX to make a callout to the NASA API and retrieve the list of asteroids.
    \nFirstly construct the API URL in a text editor such as notepad. We need to see how the API response looks like. <\/p>\n

    So it will be of the form:
    \n    https:\/\/api.nasa.gov\/neo\/rest\/v1\/feed?start_date=2015-09-07&end_date=2015-09-08&api_key=DEMO_KEY<\/a><\/p>\n

    Here, “DEMO_KEY”<\/em> is your API key.
    \nSo we can see that the API needs the start date, end date and your API key. Also note that the date format is yyyy-MM-dd<\/strong>.<\/p>\n

    Now construct this URL and paste it in a browser address bar and hit ENTER to see the results of the API in JSON format. Review it for a bit to understand the JSON structure.
    \nOur code will need to parse this response and there are quite a few options for it. A good method in my option is to read the JSON into a class structure which can then easily be processed as needed.
    \nI use this website to convert my JSON response to an APEX class. Its a pretty nifty tool.
    \n    https:\/\/www.adminbooster.com\/tool\/json2apex<\/a><\/p>\n

    Just paste your JSON response and name the resulting APEX class as needed. This is the resulting code for me. <\/p>\n