QR code generator API with Django
Collect image files from your api into your flutter app
About a week or two ago, I heard about the python qrcode library for the first time in a Harvard cs50 lecture. Though I was really impressed by how easy the library was to use, all I could think of were the cool pranks I could pull on my friends with it. I decided to make an api for generating QR code and a mobile app to access the api (I started learning Django not so long ago so it would also be good practice).
Why Django?
Django is a python web framework for full-stack web application development and server development. Django uses a very powerful language, Python, which is library-rich and has an enormous and still growing user base. And so it can be used for a whole lot of things, which I’ll not talk about because you probably know all that if you’re reading this. Django’s REST framework also come with enormous support for web api development… So yea Django is great and I have been playing around with python for a while so it was perfect for me.
Getting started with Django
Open your code editor (I used visual studio code) and go into the folder in which you want to create the project. The first thing you have to do is create a virtual environment specifically for your project. This is a safety precaution that you will appreciate in the future. Run this code in your terminal to install virtualenv, a tool for creating virtual environments.
python -m pip install virtualenv
Create a virtual environment by running this command
virtualenv name_of_env
Activate your virtual environment by running this code
source name_of_env/bin/activate
Make sure the python interpreter is set to the one in your virtual environment. Now install django by running this code
python -m pip install django
Create a django project by running this command
python django-admin startproject name_of_project
Enter your project folder and then run server. If it runs successfully then you’re all set
cd name_of_project
python manage.py runserver
Now create your django app. For this project, you need only one app.
startapp name_of_app
The next thing you have to do is to go into settings in your project folder, and add your app to the installed apps list. Inside INSTALLED_APPS, put this:
‘name_of_app’
Now run these two commands to migrate your app into your project
python manage.py makemigrations
python manage.py migrate
You’re all done setting things up now!
Making QR code API
Run this code to install the qrcode library. That’s what we’re going to use to generate the QR code images
python -m pip install qrcode
In views.py (which is inside your app folder), make sure to import render and qrcode.
from django.shortcuts import render
import qrcode
Create a folder inside your app folder that you’re going to keep the qrcode image after generating it. In Django, this folder is called static. It is used for keeping images, videos etc that we normally want to display on our webpages. Inside views.py, create a variable called path which should a contain the path to your statics folder. For eg:
path = ‘/Users/…/static/’
Now create a function that takes a url as an argument, generates a qrcode image of that url and then saves it inside static. This is my function:
Now create your view. This view should take a string (which is supposed to be the url) and then run the function that generates the url. The view should then render an html page containing the image
The next thing we’ll have to do it to create the html file being rendered. Html files are normally created in a folder called templates in django. Create the folder inside the app folder and inside the templates folder create the html file. Now put this inside the html file:
Let’s then go into settings and make sure the path for static is well set. If not, the image might not display on the browser when we make a get request to the server. Inside settings, add the following:
The last thing we’ll have to do is add the get_code view to our url. Go into your urls.py in your project folder and add the views. But first make sure you import views. It should look like this:
You can finally go ahead and run the server. It should look something like this in your browser:
If you have already read the QR code above, I’m sorry hehehe. If you haven’t… maybe don’t.
Connecting API to mobile app
To use the api, I made a fairly simple flutter application. This application contains only one screen. In this screen, I put a text field (to collect url from the user) and a button to send the get request to the api. Anytime a get request is sent to the api, a new qr code is created and this image is saved as m.jpg in the static folder. If an image already exists there, it is replaced by the new one because they have the same name. I therefore created a function in my flutter app that would download the image stored as m.jpg unto the mobile device if and only if the get request is successful (that is, the status code of the response is 200). You have to add platform specific permissions to be able to write and read the mobile device. You also have to get a number of libraries to be able download images unto the mobile device and even send requests to the api. Additionally, you have to go into settings inside your api folder and add this host to the ALLOWED_HOSTS list:
‘10.0.2.2’
This is the host that is used for communications between mobile devices and django APIs. Other hosts might not work properly (or might not work at all).
I have uploaded both the API and the flutter app to my github. Download them and take a look if you’re interested:
Link to API: https://github.com/Kwakyecodes/qrcodeAPI
Link to app: https://github.com/Kwakyecodes/qrcodeMaker
I hope this post was helpful one way or the other. Do with this project what you will :)
Cheers!
