Building UI for NASA Astronomy Image of the Day API using AppSmith

A step by step tutorial to build an app to view a random image from the “NASA Astronomy Picture of the Day” database within just 10 minutes (using Appsmith)

Transcript

1. Random NASA Astronomy Picture of the Day Viewer A step by step tutorial to build an app to view a random image from the “NASA Astronomy Picture of the Day” database within just 10 minutes (using Appsmith) 1 Ajinkya Kulkarni
2. Appsmith Appsmith is an open source web framework for building internal tools, admin panels, dashboards, and workflows 2 Credits: https://www.appsmith.com/ We will use
3. Step 1: Get access to the NASA API
4. Step 1: NASA API Access Go to https://api.nasa.gov/ and generate an API key to use with the Astronomy Picture of the Day API 4
5. Step 2: Setup the API Endpoint in Appsmith App
6. Step 2.1: Create an Appsmith App Go to https://app.appsmith.com/ and create your app 6
7. Step 2.1: Name Your App Go to your app, name it, and add new API 7
8. Step 2.2: Import API Import NASA Astronomy Picture of the Day API into your Appsmith app 8
9. Step 2.3: Setup API Parameter – api_key ⇨ Enter endpoint as https://api.nasa.gov/planetary/apod ⇨ Add api_key parameter and enter key generated on https://api.nasa.gov/ ⇨ Add date parameter which will be dynamically generated using JavaScript code ⇨ Name this endpoint as ‘astronomyPicture' 9
10. Dynamic JavaScript Execution In Appsmith, you can use JavaScript to dynamically generate values for fields 10 https://docs.appsmith.com/how-to- guides/writing-javascript-in-appsmith
11. Step 2.4: Setup API Parameter – date ⇨ In Appsmith, any field value can be dynamically generated by evaluating a JavaScript snippet ⇨ JavaScript code needs to be wrapped inside {{ }} ⇨ For the date field, we need to generate new random date on each API invocation ⇨ We will write an anonymous function which upon execution returns random date for this API parameter 11 Anonymous function Function execution
12. Step 2.5: Generate Random Date ⇨ For the date parameter, we will write following JavaScript to generate a random date. Images on NASA server are available from 1995-6-16. 12 Ref: https://stackoverflow.com/questions/9035627/elegant-method-to-generate-array-of-random-dates-within-two-dates https://stackoverflow.com/questions/23593052/format-javascript-date-as-yyyy-mm-dd https://github.com/nasa/apod-api/blob/d392c158aefe1625f902241699b4a5892f8a76f3/application.py#L79
13. Step 3: Build the UI
14. Step 3.1: Add Image Widget ⇨ On Page 1, from the Widgets panel, add an image widget 14
15. Step 3.2: Set Image URL (1/2) ⇨ Set image source to the picture URL coming from the API endpoint ‘astronomyPicture' 15
16. Step 3.2: Set Image URL (2/2) ⇨ If you have set the API endpoint and the image source of the widget correctly, you should now see an image from NASA Astronomy Picture of the Day database as shown below!! 16
17. Step 3.3: Add Text Widget ⇨ Add the text widget to display explanation of the image as shown below 17
18. Step 3.4: Add Text Widget ⇨ Add another text widget to display the image date 18
19. Step 3.5: Add Title and Logo ⇨ Add text and image widgets to show title and logo 19
20. Step 3.6: Add Button ⇨ Add a button to generate new random image 20
21. Step 3.7: Add Click Listener ⇨ Now, add a click listener for the button which triggers the API endpoint again to fetch new random image from the NASA server 21
22. Step 4: Deploy and Share
23. Step 4.1: Deploy the App ⇨ Deploy your app by clicking the deploy button as shown below 23
24. Step 4.2: Share the App ⇨ Share your app by clicking the share button and making it public as shown below 24
25. Step 5: Share your app on social media and tag @theappsmith https://app.appsmith.com/applications/608be1d78ceca 96bed80a3e9/pages/608be1d78ceca96bed80a3eb
26. That’s it! Thank you for your time! 26 Slide Template Credits : SlidesCarnival