A simple “Asteroid Detection System” with Lightning Components and a NASA Asteroids NeoWs API

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.

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.
I am a huge fan of space exploration and space in general and try to keep up with new developments there.
NASA has been a world leader in space exploration and now you also have private space companies doing mind boggling stuff like SpaceX.
Meanwhile 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!

So in the coming years, be prepared to be amazed by achievements in this sector.

NASA has a good listing of API’s related to their space exploration. You can find it here.
NASA API’s

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.
https://api.nasa.gov/api.html#NeoWS

They have some other pretty cool API’s too including pictures from the Mars rovers.

For this app, I wanted to achieve the following:

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.
This 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.

You can find the application here.(I have hosted it on a community).
Asteroid Detection System

So lets go ahead and build this:

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

2. 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.
Follow these steps if you haven’t already done so.
https://developer.salesforce.com/trailhead/en/lex_dev_lc_basics/lex_dev_lc_basics_prereqs

Please note: 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.

3. After this you should be ready to build the app.
The 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”

4. Create the backend APEX classes
To create a class go to: File | New | Apex Class.
For this app, we will use APEX to make a callout to the NASA API and retrieve the list of asteroids.
Firstly construct the API URL in a text editor such as notepad. We need to see how the API response looks like.

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

Here, “DEMO_KEY” is your API key.
So 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.

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.
Our 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.
I use this website to convert my JSON response to an APEX class. Its a pretty nifty tool.
https://www.adminbooster.com/tool/json2apex

Just paste your JSON response and name the resulting APEX class as needed. This is the resulting code for me.

You can choose what data to display but I selected the following and created a wrapper class for it.
Not that each class member has the “@AuraEnabled” class annotation as we are displaying this data in the Lightning Component UI.

You may ask why this wrapper class cannot be an inner class?
As of now in Lightning Components, wrapper classes cannot be inner classes. They need to be in their own standalone class and also the class members need the “@AuraEnabled” annotation.

Now lets move on to the main APEX class itself. Here it is:

This class is doing the following:
1. The start and end dates are the two parameters being sent in to the method in the class.
2. We need to format the dates as per the format expected by the API.
3. Next we construct the API endpoint with the dates. Make sure to add your API key here.
4. A simple http GET request is made to the API.
5. Next we parse the API response into the JSON class structure
6. For each asteroid entry, a wrapper object is created, populated with the relevant data and added to the list which will be displayed in the UI.

Now our server side set up is done.

5. Create the lightning Component
Go to File | New | Lightning Component.
Create your component. See the code below.

The highlights of the code are:
1. Change the path of the static resource to what you have in your org in the tag.
2. The component uses a slds-form as a container for the two date picker fields and the button.
3. The results from the Asteroids API are displayed in a table by iterating over the results using

6. Create the client side controller
Click on “Controller” on the right hand side (Component bundle).
Add the following code:

These methods are invoked by the component.

7. Create the client side helper
Click on “Helper” on the right hand side (Component bundle).
Add the following code:

The highlights here are:
1. The helper takes the dates from the user input to format them. During initial load, it shows the next 3 days as default.
2. An Action call is made to the APEX controller to retrieve the results of the API and pass the data to the component.

8. Update CSS style as needed

I had made some minor modifications to the styling. This can be tweaked as needed.
Since this was built as a demo I went easy on the styling 🙂

.THIS .slds-input {
width: 60%;
}

.THIS .uiButton {

height: 35px;
width:5%;
}

9. Create the Application
Go to File | New | Lightning Application.
Give a suitable name and add the following code.

Once again, replace the path to your static resource. Also here we are including our component in the Lightning Application.

So there you have it. You can now preview your app or create a community and expose the app in that so that it is available publically.
Happy Asteroid Hunting!

Further Enhancements:
As this is a simple demo app, I have not gone tried to build out each component in detail. If I had the time I would do the following in the future.
1. Improve the look and feel of the app. Update CSS styling.
2. Try to make the callout in the client code to avoid server callout.
3. Add robust error handling.

Please do add your comments and questions below. Any suggestions to improve this or do things differently are very welcome. Thanks for reading!