In this blogpost, we shall look at how to create a simple single page Flask website that uses NASA’s ‘Mars Rover Photos’ to display all the images captured by the various cameras mounted on the Curiosity Rover. It will look a little like this.

Pre-requisites:

1. A computer with an internet connection
2. Python3 installed
3. Basic knowledge of Python

Python Modules:

1. Nasapy: https://pypi.org/project/nasapy/
2. Flask: flask.palletsprojects.com/en/2.0.x

Front End: Bootstrap 5 getbootstrap.com

More information on the API: api.nasa.gov

More Related projects: youngwonks.com/blog/How-to-create-a-GIF-of-..

Concepts:

1. API – Application programming interface
2. API key – Authorization key to get data from and API
3. API Request – A call made to the API
4. Response – Data received as a response to the request

Download Flask cheat sheet at: youngwonks.com/flask-cheatsheet.pdf

STEP 1: Signing up for the API key

1. Sign up for the API Key at api.nasa.gov.
2. Save the key to somewhere safe. We will use it in the next step.

STEP 2: Setting up the project

1. Create a new folder.
2. *Create a virtual environment and activate it (recommended but not mandatory).

1. Install the Python dependencies.

STEP 3: Testing the API#

1. Create a new file named api_test.py
2. In this file, import and initialize the library.

1. Fetch the Mars Rover date for a specific Earth date.

1. This displays the response in the form of a list of dictionaries in the format.

1. We are mainly interested in the values of 5 keys for our website: a. Camera Name: camera.name b. Camera Full Name: camera.full_name c. Image Source: img_src d. Rover Name: rover.name e. Launch Date: rover.launch_date

STEP 4: Creating the Flask app

1. Create a new file name app.py.
2. Import Flask and initialize the app.
3. Add the home route that renders the home.html file.

1. Create a folder called templates.
2. Create a file named home.html which just displays some text.

1. Now run the app, python3 app.py. The result will look something like this:

STEP 5: Adding the nasapy module to app.py and send the text to the home.html page

Before creating the app, import nasapy and initialize it using your API key.

STEP 6: Using Bootstrap to create a cool looking page

1. Replace the contents of home.html with the bootstrap5 starter template provided at getbootstrap.com/docs/5.0/getting-started/i...

STEP 7: Developing the front end as you please

Use the documentation in bootstrap to create your desired page. For the purpose of the tutorial, we are going to keep it simple. We have the following elements:

You can find the carousel sample at: getbootstrap.com/docs/5.0/components/carousel.

You can find the form group sample at: getbootstrap.com/docs/5.0/forms/input-group.

STEP 8: Getting the data in the Flask app and sending it to the html page to be rendered

1. Use the code from STEP 3 and add it to the home route. Look for the parameter ‘date’ in the request arguments and use that for the date.

1. Add the code to app.py. Setting the debug parameter to true will auto-reload the server when any code change is made. **You should remove this if you publish the website.

STEP 9 (Final Step): Using Jinja2 to render the data on the html page

1. Add the CSS styles to stretch the page to fit the vertical height.

1. Add the date as the value of the input date element.

1. Retain only one carousel item and delete the remaining. We are going to render the carousel items using a for loop.

2. Add the image, camera name, full name and other parameters to the carousel.

3. Also add a condition to display a message in case no images are found for the date.

Voila! Now you can run the program and visit the URL http://127.0.01:5000 to view the final website.

This article has been written by Suchin Ravi. Suchin is an experienced educator and technologist. Suchin teaches computer science at YoungWonks youngwonks.com and works as a lead software developer on many projects at Wonksknow wonksknow.com.