Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
quovadis
Product and Topic Expert
Product and Topic Expert
2,080





















In this blog I will be showing how to expose the Nasa APOD (Astronomy Picture of the Day) REST API with SAP API Management and how to use this API with Appgyver to create a simple Astronomy Picture of the Day app.

Quoting after the NASA API portal:
One of the most popular websites at NASA is the Astronomy Picture of the Day. In fact, this website is one of the most popular websites across all federal agencies. It has the popular appeal of a Justin Bieber video. This endpoint structures the APOD imagery and associated metadata so that it can be repurposed for other applications. ...

The full documentation for this API can be found in the APOD API Github repository.


Putting it all together.








Pre-requisites:

  • Nasa API portal free developer key

  • SAP BTP free trial account with Integration Suite subscription enabled

  • Appgyver composer free account

  • a laptop/chromebook/RaspberryPi with internet access


Good to know:

  • SAP Productivity tools in use, namely APIM and Appgyver are browser-based thus no other additional/local tools installation is required.

  • Appgyver composer needs a laptop-based browser.



Nasa API Gateway.










The first thing is to acquire an API key to get access to the nasa apis at https://api.nasa.gov.

Your API key is personal to you and linked to the email address you have used to obtain the key.

Having this key you can start making web service requests. Simply pass the key in the URL when making a web request, for instance:
https://api.nasa.gov/planetary/apod?api_key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

But wait, does it mean the key will need to be passed in the URL each time to make a web request?

Actually, not great when it comes to using it from javascript....for instance in a Single Page Application (SPA).

APIM.










Create an API proxy using APIM (which is part of the SAP Integration Suite bundle).

See appendix for further details.



Appgyver.










Create an appgyver project in composer and use the Nasa API from APIM to connect the dots...

See appendix for further details.



 

Nasa app deployment options











In a nutshell, Appgyver platform offers an automated build factory for your projects allowing you to build and distribute your apps to many targets at a time like to native iOS/and Android devices and/or have it as a static web app.




 

For instance,  if you opted for the latter choice you could be deploying your Appgyver-crafted web application to a HTML5 repository on SAP BTP CF:

Deploy your AppGyver App to the HTML5 Applications Repository using CLI Plugin | SAP Blogs

 

Conclusion










As already said, both APIM and Appgyver Composer/Platform are browser based.  However, they both require some upfront learning and trialing.

Especially when it comes to APIM if you wanted to implement OAuth2 or OAuth2SamlBearerAssertion security policies for instance.

APIM offers an out-of-the-box integration with API Business Hub allowing you to explore the API packages and policies SAP and 3rd parties have shipped...

Appgyver offers an integrated app build and distribution service.

 

And indeed. There is no code but there are many screenshots....

 

__________

 

Appendix.


APIM.

Create an API proxy using APIM (which is part of the SAP Integration Suite bundle).

 

1. Let's use the Nasa API portal gateway, namely https://api.nasa.gov as API provider in APIM:


2. we also need to create a key value map with our api_key query parameter value as follows:


 

3. create, save and deploy our Nasa API

 


 

4. add policies to retrieve and add the api_key to a web service URL as follows:

 


 
<!-- Key/value pairs can be stored, retrieved, and deleted from named existing maps by configuring this policy by specifying PUT, GET, or DELETE operations -->
<!-- https://help.sap.com/viewer/66d066d903c2473f81ec33acfe2ccdb4/Cloud/en-US/b72dc3f262c1441587e76d0e808... -->
<!-- mapIdentifier refers to the name of the key value map -->
<KeyValueMapOperations mapIdentifier="NasaAPIKey" async="true" continueOnError="false" enabled="true" xmlns="http://www.sap.com/apimgmt">
<Get assignTo="private.sapapim.apiKey" index="1">
<Key><Parameter>api_key</Parameter></Key>
</Get>
<!-- the scope of the key value map. Valid values are environment, organization, apiproxy and policy -->
<Scope>environment</Scope>
</KeyValueMapOperations>



<!-- This policy can be used to create or modify the standard HTTP request and response messages 
https://help.sap.com/viewer/66d066d903c2473f81ec33acfe2ccdb4/Cloud/en-US/523efe6d0a9d43beb5d62ad0793...
-->
<AssignMessage async="false" continueOnError="false" enabled="true" xmlns='http://www.sap.com/apimgmt'>
<Add>
<QueryParams>
<QueryParam name="api_key">{private.sapapim.apiKey}</QueryParam>
<!-- <QueryParam name="api_key"><api_key></QueryParam> -->
</QueryParams>
</Add>

<IgnoreUnresolvedVariables>false</IgnoreUnresolvedVariables>
<AssignTo createNew="false" type="request">request</AssignTo>
</AssignMessage>


 

5. and bingo...after adding the /planetary/apod suffix to the API Proxy the Nasa APOD API retrieves the data as depicted below:

 


 

Appgyver.

Create an appgyver project in composer and use the Nasa APOD API from APIM.

 


The user interface is fairly intuitive and will guide you through the learning process...

 

 


After you have defined your data source it's time to go back to the application view and create a data variable for this very view....

 


 

__________

 

Additional resources



2 Comments