In this article, we shall see how one can make a simple single-page Flask application that uses a free education API called Gutendex to create a book search.

\
But before that, let’s look at Gutendex - what is Gutendex? Gutendex is a JSON web API for Project Gutenberg ebook data. An online library of free electronic books or eBooks, Project Gutenberg, was, in fact, the first provider of these eBooks. Michael Hart, the founder of Project Gutenberg, invented eBooks in 1971, and his memory continues to inspire the creation of eBooks and related content.

\
Pre-requisites for this project:

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

\
Python Modules

1. Flask: <https://flask.palletsprojects.com/en/2.0.x/>
2. JSON
3. Requests

\
Front End: Bootstrap 5	<https://getbootstrap.com/>
More information on the API: <http://gutendex.com/>
More information on Project Gutenberg: <https://www.gutenberg.org/>

\
Concepts:

1. API – Application Programming Interface
2. API Request – A call made to the API
3. Response – Data received as a response to the request

\
Download the Flask cheatsheet from here: <https://www.youngwonks.com/flask-cheatsheet.pdf>

\
STEP 1: Setting up the project

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

 ![](https://cdn.hackernoon.com/images/yMqhdXse06PF7CbZb3T4ig1mFjV2-6i68351j.png)

* Install the Python dependencies.

\
 ![](https://cdn.hackernoon.com/images/yMqhdXse06PF7CbZb3T4ig1mFjV2-p36v35nk.png)

STEP 2: Testing the API

* Create a new file named api_test.py.
* In this file, import the requests and the JSON module.

\
 ![](https://cdn.hackernoon.com/images/yMqhdXse06PF7CbZb3T4ig1mFjV2-kz77356q.png)

* Fetch the results for a keyword.

\
 ![](https://cdn.hackernoon.com/images/yMqhdXse06PF7CbZb3T4ig1mFjV2-s27r35yj.png)

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

\
 ![](https://cdn.hackernoon.com/images/yMqhdXse06PF7CbZb3T4ig1mFjV2-j68g35te.png)

* Now we are mainly interested in the values of 5 keys for our website

  a.	Title: book\['title'\]

  b.	Image: book \[ 'formats'\]\[ 'image/jpeg'\]

  c.	Text: book \[ 'formats'\]\[ 'text/plain; charset=utf-8'\]

  d.	Authors: book\['authors'\]

\
Step 3: Creating the Flask app

* Create a new file name [app.py](http://app.py).
* Import Flask and initialize the app.
* Add the home route that renders the home.html file.

 ![](https://cdn.hackernoon.com/images/yMqhdXse06PF7CbZb3T4ig1mFjV2-2wc135id.png)

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

\
\
 ![](https://cdn.hackernoon.com/images/yMqhdXse06PF7CbZb3T4ig1mFjV2-4rf435g2.png)

 ![](https://cdn.hackernoon.com/images/yMqhdXse06PF7CbZb3T4ig1mFjV2-vofc3525.png)

* Now run the app python3 [app.py](http://app.py). The result will look something like this:

\
 ![](https://cdn.hackernoon.com/images/yMqhdXse06PF7CbZb3T4ig1mFjV2-8cfx35uh.png)

STEP 4: Getting the data and rendering it on the page

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

 ![](https://cdn.hackernoon.com/images/yMqhdXse06PF7CbZb3T4ig1mFjV2-iyga355i.png)

* Add the code to run the app. Setting the debug parameter to true, which developing will auto-reload the server. \*\*You should remove this if you publish the website.

\
STEP 5: Developing the front end with bootstrap

Replace the contents of home.html with the bootstrap5 started template provided at: <https://getbootstrap.com/docs/5.0/getting-started/introduction/>

\
 ![](https://cdn.hackernoon.com/images/yMqhdXse06PF7CbZb3T4ig1mFjV2-34h935xu.png)

STEP 6: Developing the front end as you please Use the documentation in bootstrap to create your desired page. For this tutorial, we are going to keep it simple. We have the following elements:

 ![](https://cdn.hackernoon.com/images/yMqhdXse06PF7CbZb3T4ig1mFjV2-01ho35gd.png)

 ![](https://cdn.hackernoon.com/images/yMqhdXse06PF7CbZb3T4ig1mFjV2-gqhy35hq.png)

You can find the carousel sample at: <https://getbootstrap.com/docs/5.0/components/card/>.
You can find the form group sample at: <https://getbootstrap.com/docs/5.0/forms/input-group/>.

\
\
STEP 7: Final Step: Using Jinja2 to render the data on the html page

* Add the name for the input element.

  \

 ![](https://cdn.hackernoon.com/images/yMqhdXse06PF7CbZb3T4ig1mFjV2-78iy3500.png)

* Add the book title, link to image, link to text, authors and other parameters to the card.

\
 ![](https://cdn.hackernoon.com/images/yMqhdXse06PF7CbZb3T4ig1mFjV2-4gjs35v9.png)

Voila! Now, run the program and visit <http://127.0.01:5000>.

Fetch

Book a free trial class with YoungWonks today!

2022 - Pythonistas Paradise

Nominated for 2022 - Pythonistas Paradise

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

How to Create a Simple Flask Application for Book Search

Too Long; Didn't Read

Company Mentioned

@suchinravi

RELATED STORIES