Your first flask project.

Wed, 01 Jun 2022 00:00:00 +0000

When I started my journey in Python, the first web framework that I learned was Flask. It was a valuable tool to showcase my projects and create simple simulations and dashboards. One of the starter projects that I did was ‘Contact Card’. This project is a simple web application that allows users to generate a QR code from a text/URL.

So, what is a QR code?

QR (Quick Response) codes are two-dimensional matrices that store information scattered across messy lines and chaotic geometric shapes. They come in multiple shapes, sizes, and colors and link to text, marketing campaigns, and business cards. One widespread use case is Snapcodes.

The images above show that QR code can be of different types,sizes and color.

And why is the project named Contact Card?

This project explores a single use-case of QR code - creating your contact information. For example, you may store simple textual details about yourself or add a link that redirects to your bio in LinkedIn/Twitter/Facebook/personal website.

Here, I would like to explain three features of flask . For the complete code please visit Github .

1. Using dynamic routes

Dynamic routing is an approach to selecting paths based on real-time changes. For example, say you are creating a route /profile, to show the profile of 50 students in a class. However, the same route can show the personalized profile of each student if we associate a student to an id. We can do so by making our route dynamic.

@app.route(’/profile/<int:id>’,methods= [’GET’])
def profile(id):
# Create different profile for different user.

Notice how the id parameter is passed to the function profile, implying that personalized information can be returned to the same route. Thus, www.example.com/profile/1 points to a personalized page for student A, and www.example.com/profile/2 points to a personalized page for student B, and so on.

A similar approach was used to pass the URL that generated the QR code. However, Flask throws an error if the text or the URL contains backslash ‘/’. A workaround for this was /display/path:URL. Specifying the URL as path allowed us to send any URL type to another page without any error.

@app.route(’/display/<path:url>’,methods=[’POST’,’GET’])

2. Returning file object

It is not necessary to render a template for each route. You can return any file you wish using send_file. I have added a feature to download the QR image as an attachment when /download route is called for this project. The name and type of the file must be added.

return send_file(str_io,
attachment_filename=”my_image.png”,
mimetype=’image/png’,
as_attachment=True)

The type of file you wish to return is specified in the mime-type attribute. The image, “my_image.png” is converted to a string object. Since the as_attachment is set to True, the file is downloaded.

3. Temporary storage of files

 with NamedTemporaryFile(delete=True) as tmp:
qrimage.save(tmp.name)
str_io = io.BytesIO(tmp.read())

NamedTemporaryFile is used to return a file-type object which can be stored temporarily. For example, the QR object is saved using a temporary name and is converted to an IO object. Since I just wanted to display the picture and not store it in the project directory, I set the delete parameter to True .The BytesIO object is just a chunk of memory that behaves like a file.