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: A computer with an internet connection Python3 installed Basic knowledge of Python Python Modules Flask: https://flask.palletsprojects.com/en/2.0.x/ JSON Requests Front End: Bootstrap 5 More information on the API: More information on Project Gutenberg: https://getbootstrap.com/ http://gutendex.com/ https://www.gutenberg.org/ Concepts: API – Application Programming Interface API Request – A call made to the API 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). Install the Python dependencies. STEP 2: Testing the API Create a new file named api_test.py. In this file, import the requests and the JSON module. Fetch the results for a keyword. This displays the response in the form of a list of dictionaries in the format. 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. Create a folder called templates. Create a file named home.html which just displays some text. Now run the app python3 . The result will look something like this: app.py 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. 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/ 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: You can find the carousel sample at: .
You can find the form group sample at: . https://getbootstrap.com/docs/5.0/components/card/ 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. Add the book title, link to image, link to text, authors and other parameters to the card. Voila! Now, run the program and visit . http://127.0.01:5000

Fetch

Book a free trial class with YoungWonks today!

How to Create a Simple Flask Application for Book Search

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps