- SAP Managed Tags:
Hey friends! We are bringing #APIFriday back this week! Let go out of this world to explore APIs.
Let's take a look at Mars from the point of view of someone who is there...Curiosity! Curiosity was sent to Mars back in 2011 by NASA, and has been sitting on the surface since August 2012.That means we have over 2160 days (or 2103 Martian sols) of data we can access. Let's use this data to build out our Martian dashboard.
I know it's been a little while since we've done an API Friday here together, but hopefully you've been coding up a storm out there!
The API we'll be using today is provided by MIT and you can find the documentation here. This API returns weather data about the current sol on Mars where Curiosity is hanging out. If you are curious about Curiosity's course on Mars, check out this map!
If you grab the API endpoint and test it in your favorite API tool, we can see what the data looks like. It is a super simple API for us today that only returns 1 object: the weather data about the indicated sol. If no sol is provided, it gets the latest sol. Simply put:
And the data returns is things like the atmosphere, sunrise and sunset, and high and low temps for the sol, all from Curiosity's current location.
Cool right? Let's use it in an app!
Open up for Web IDE Full Stack edition. If you aren't sure how to get there, try out this tutorial.
Let's create a new project, by going to File > New > Project from Template.
Select SAPUI5 Application as we want just a basis, blank app to work with. Click Next.
Give your project a Name and Namespace. I used the following:
Click Next.
You can leave the Initial View Details as is, and click Finish.
First thing to do is build out our controller and API call. Open up the View1.controller.js file (or if you renamed the view, the file in your controller folder).
In this file, we need to add in an additional library to start with. Let's add in the JSONModel. In the sap.ui.define, add in the following code:
And in the function parameters, add in the JSONModel so you app looks like this:
Now let's create our onInit function. Add the skeleton of the function to your app. If you need help with that, just copy and paste the code below in-between the curly braces of the return.
First thing we should do in our onInit function is create a model to set for the view that we can also bind our data to. Define a new JSONModel and set it to the view.
Now we have a data model we can access on the view.
Before we move into our AJAX, remember that we need to save the state of this as it's current context will be lost when we move into the AJAX call. So assign this to another variable.
Ready to do our API call with AJAX? Remember how? Give it a try! Here's your endpoint url: https://api.maas2.jiinxt.com/.
Need some help? Feel free to copy the code below.
Remember that it is always better to use a destination when calling an API! SAP Cloud Platform will handle a lot of security flaws that APIs expose. However, since this API is completely open and we're just playing around, it's ok this time to leave it unsecured.
Once our call returns, we need to handle the data. Let's bind the results value from the done function to the mars model we created on our view.
And finally, make sure to SAVE your changes.
Now head over to the view once everything is saved.
In our view (like View1.view.xml), we need to add a control that can hold our data for us. I decided to use an ObjectHeader so that I can build out this page more later!
If you want to do that, keep following along! If not, I'll let you freestyle now. Just don't forget to check back in to the end of this post!
Let's create a blank ObjectHeader control to work with.
I defined the title and intro of the ObjectHeader to tell us a little about what we will be looking at. The intro will introduce the data set (ie Today on Mars), and the title will give us the current sol we are looking at so you will need to bind in the data from the mars object and the sol field here. Can you add those in?
Here's some help!
Nice! Save you changes! Let's make sure you are getting data in before we continue on. Run your app, by right clicking on the project and going to Run > Run as > Web Application. If you set everything up properly so far, you should see the Sol number on your app!
If you are not seeing this, use your developer tools built into the browser to try and debug the issue.
Back in the Web IDE, let's add some more information! We can add attributes to the ObjectHeader to show the season and weather, and some statuses for the high and low temps for the day.
To add attributes, inside of the opening and closing ObjectHeader tag, add in the attributes aggregation with a opening and closing <attributes> tag.
Inside these tags, you can add in the ObjectAttribute tag with the data you want to display. For example, let's show the weather for today's sol.
Add in another one to show the season from the season field in the mars data object.
That one should look like this:
Statuses work similar to the attributes. Can you add in the statuses aggregation with ObectStatus for both the max_gts_temp and min_gts_temp?
If you need some help, the code is below. But first, try yourself!
.
.
.
Did you give it a try?
Last warning before I reveal the code!
.
.
Ok, here it is:
I added in an icon for a little visual context on the fields, but how close were you?
And here's what the code all looks like together.
SAVE your changes and run your app again! Now we'll being seeing temp and seasonal data.
Cool! Now we know what it's like on Mars! Seems quite cold. Who wants to live in -16 degrees Celsius??? BRRRR!
NASA also has some APIs from the Mars Curiosity Rover, so come back again next time and we'll see what else we can do!
Back your space suit because #APIFriday is out of this world!
Let's take a look at Mars from the point of view of someone who is there...Curiosity! Curiosity was sent to Mars back in 2011 by NASA, and has been sitting on the surface since August 2012.That means we have over 2160 days (or 2103 Martian sols) of data we can access. Let's use this data to build out our Martian dashboard.
I know it's been a little while since we've done an API Friday here together, but hopefully you've been coding up a storm out there!
The API we'll be using today is provided by MIT and you can find the documentation here. This API returns weather data about the current sol on Mars where Curiosity is hanging out. If you are curious about Curiosity's course on Mars, check out this map!
If you grab the API endpoint and test it in your favorite API tool, we can see what the data looks like. It is a super simple API for us today that only returns 1 object: the weather data about the indicated sol. If no sol is provided, it gets the latest sol. Simply put:
- https://api.maas2.jiinxt.com/ returns the current sol
- https://api.maas2.jiinxt.com/2000 returns sol 2000
And the data returns is things like the atmosphere, sunrise and sunset, and high and low temps for the sol, all from Curiosity's current location.
Cool right? Let's use it in an app!
Open up for Web IDE Full Stack edition. If you aren't sure how to get there, try out this tutorial.
Let's create a new project, by going to File > New > Project from Template.
Select SAPUI5 Application as we want just a basis, blank app to work with. Click Next.
Give your project a Name and Namespace. I used the following:
| Field | Value |
| Project Name | MarsApp |
| Namespace | mars.app.com |
Click Next.
You can leave the Initial View Details as is, and click Finish.
First thing to do is build out our controller and API call. Open up the View1.controller.js file (or if you renamed the view, the file in your controller folder).
In this file, we need to add in an additional library to start with. Let's add in the JSONModel. In the sap.ui.define, add in the following code:
,
"sap/ui/model/json/JSONModel"And in the function parameters, add in the JSONModel so you app looks like this:
Now let's create our onInit function. Add the skeleton of the function to your app. If you need help with that, just copy and paste the code below in-between the curly braces of the return.
onInit: function() {
}First thing we should do in our onInit function is create a model to set for the view that we can also bind our data to. Define a new JSONModel and set it to the view.
var oMarsData = new JSONModel();
this.getView().setModel(oMarsData, "mars");Now we have a data model we can access on the view.
Before we move into our AJAX, remember that we need to save the state of this as it's current context will be lost when we move into the AJAX call. So assign this to another variable.
var self = this;Ready to do our API call with AJAX? Remember how? Give it a try! Here's your endpoint url: https://api.maas2.jiinxt.com/.
Need some help? Feel free to copy the code below.
$.ajax({
type: 'GET',
url: "https://api.maas2.jiinxt.com/",
async: true
}).done(function(results) {
});Remember that it is always better to use a destination when calling an API! SAP Cloud Platform will handle a lot of security flaws that APIs expose. However, since this API is completely open and we're just playing around, it's ok this time to leave it unsecured.
Once our call returns, we need to handle the data. Let's bind the results value from the done function to the mars model we created on our view.
self.getView().getModel("mars").setProperty("/data", results);And finally, make sure to SAVE your changes.
Now head over to the view once everything is saved.
In our view (like View1.view.xml), we need to add a control that can hold our data for us. I decided to use an ObjectHeader so that I can build out this page more later!
If you want to do that, keep following along! If not, I'll let you freestyle now. Just don't forget to check back in to the end of this post!
Let's create a blank ObjectHeader control to work with.
<ObjectHeader>
</ObjectHeader>I defined the title and intro of the ObjectHeader to tell us a little about what we will be looking at. The intro will introduce the data set (ie Today on Mars), and the title will give us the current sol we are looking at so you will need to bind in the data from the mars object and the sol field here. Can you add those in?
Here's some help!
<ObjectHeader
intro="Today on Mars"
title="SOL {mars>/data/sol}" >Nice! Save you changes! Let's make sure you are getting data in before we continue on. Run your app, by right clicking on the project and going to Run > Run as > Web Application. If you set everything up properly so far, you should see the Sol number on your app!
If you are not seeing this, use your developer tools built into the browser to try and debug the issue.
Back in the Web IDE, let's add some more information! We can add attributes to the ObjectHeader to show the season and weather, and some statuses for the high and low temps for the day.
To add attributes, inside of the opening and closing ObjectHeader tag, add in the attributes aggregation with a opening and closing <attributes> tag.
<attributes>
</attributes>Inside these tags, you can add in the ObjectAttribute tag with the data you want to display. For example, let's show the weather for today's sol.
<ObjectAttribute text="Weather: {mars>/data/atmo_opacity}" />Add in another one to show the season from the season field in the mars data object.
That one should look like this:
<ObjectAttribute text="Season: {mars>/data/season}" />Statuses work similar to the attributes. Can you add in the statuses aggregation with ObectStatus for both the max_gts_temp and min_gts_temp?
If you need some help, the code is below. But first, try yourself!
.
.
.
Did you give it a try?
Last warning before I reveal the code!
.
.
Ok, here it is:
<statuses>
<ObjectStatus
text="High: {mars>/data/max_gts_temp} *C"
icon="sap-icon://temperature" />
<ObjectStatus
text="Low: {mars>/data/min_gts_temp} *C" />
</statuses>I added in an icon for a little visual context on the fields, but how close were you?
And here's what the code all looks like together.
SAVE your changes and run your app again! Now we'll being seeing temp and seasonal data.
Cool! Now we know what it's like on Mars! Seems quite cold. Who wants to live in -16 degrees Celsius??? BRRRR!
NASA also has some APIs from the Mars Curiosity Rover, so come back again next time and we'll see what else we can do!
Back your space suit because #APIFriday is out of this world!
1 Comment
