How to Create a Simple Flask Application for Book Search by@suchinravi

How to Create a Simple Flask Application for Book Search

Read on Terminal Reader
Open TLDR
react to story with heart
react to story with light
react to story with boat
react to story with money
Gutendex is a free education API for Project Gutenberg eBooks. GutendEx is a web API for the free online library of free electronic books or eBooks, Project Gutenberg. In this tutorial, we will use a single-page Flask application to create a book search. We will use the API to fetch the results for a keyword. The result will look something like this: "Book search", "title", "image/jpeg", "text/plain"; "book" "book search" and "title"
image
Suchin Ravi  HackerNoon profile picture

Suchin Ravi

I am an educator & technologist, I teach computer science at YoungWonks & work as a lead software developer at Wonksknow

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).

image

  • Install the Python dependencies.


image

STEP 2: Testing the API

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


image

  • Fetch the results for a keyword.


image

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


image

  • 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.
  • Import Flask and initialize the app.
  • Add the home route that renders the home.html file.

image

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



image

image

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


image

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.

image

  • 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/


image

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:

image

image

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.


image

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


image

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

react to story with heart
react to story with light
react to story with boat
react to story with money

Related Stories

L O A D I N G
. . . comments & more!