Recently I was in a restaurant where I was told to scan a qr and get the menu on my mobile and after I came back home I just wondered how we can add it as a feature or build one which replicates the same. I thought of giving it a try and just made a simple qr code generator and how to add the qr feature in your Django-powered application!

The mobile phone has become a must in our day-to-day life and is quite useful as it is the simplest means for communication, sharing, and creation of data. One simple way of sharing data is by using QR. We often do see in restaurants, on the dining tables, a small board with QR code embedded and asking us to scan the code for getting the menu. There could be multiple reasons for this setup and what reasons I have found is like following the norms of COVID, which includes no contact of the menu card as it will be touched by many people in the restaurant, also once the QR code is scanned redirects to a webpage, which possibly can give some details about the user using, and also there could be possible chances of the user reopening the menu and a possibility of ordering from the same restaurant.

Let's now dive into the details of the blog:

The idea of the blog is simple, to have a django app, an html page with the details of our restaurant, and a corresponding view for the same in place. By making a QR code for that URL and render in our app, we are done. We share can the embedded qr and try using a QR reader and test it. I've used Django, we can use flask or any other framework of our choice, but the idea will be the same across the frameworks. The overview of the idea can be seen in the image below:

The following packages are used for building the application:

    django       pip install django    
    pyqrcode     pip install pyqrcode
    pypng        pip install pypng

First let's see the logic to use pyqrcode, the logic is simple, we provide the URL to be embedded as an input to the method create in pyqrcode and use the png package to save the embedded QR as png.

from pyqrcode import create
import png

def embed_QR(url_input, location_name):
     embedded_qr = create(url_input)
     embedded_qr.png(location_name, scale=7)

We have a method in place for generating the qr code, let's now see how we can integrate to our Django app. There are multiple tutorials on how we can setup our Django app, but I am not going to touch on the setup, assuming we have django app in place and let's see how we can use the qr code for the same.

We can simplify our use case to only render an already existing view and embed the code in the django project. Suppose say, myblog.com/menu is already an existing view of our django app, we embed this URL as QR code and return to the landing page of our app or save and distribute. Since we are developing the app locally, we can embed the url as something as following ip_of_your_computer:8000/menu in the qr. The saved image can be put as an image embedded in our landing page.

We should make sure that the device which we are using to test the QR, the server are on the same subnetwork and the server is listening to all the ip's of the subnet.

Okay so let's go into some coding now!!!.

We have already the method for generating QR in place, also assuming we have django app in place which renders menu for the path menu/, if not then we can add, a URL in urls.py which actually does it. So in our django app(assuming an app existing in our project), open urls.py(if not existing create one and add the urls to urls.py in the project) and add the following line

    import views ## from the app
    path("menu", views.menu, "menu")

this line communicates to the django server that if any request related to the menu is received then redirect to the view related to the menu present in the views.py.

In views.py we can have a simple view something as following:

    def menu(request):
          menu_items = some_menu_model.objects.get()
          return render(request, 'menu.html', {'menu': menu_items})

We see that in the above view, for the request obtained, we get all the items of the menu, assuming a model for the menu exists, and then render a menu.html with menu items into it.

So when a user(to whom we have shared the qr code, scans the qr code gets redirected to the URL of the menu and this view is rendered which has all the menu items.

That's it, it is very simple! Give it a try and let me know if it is working in the comments below :).

Few checkpoints to be made before we running the app:

1. Make sure all the required packages are installed.
2. Make sure to run the server listening to all the intranet IP address.

     python manage.py runserver 0.0.0.0:8000
   

3. Make sure the server and the testing devices are in the same subnetwork so that the testing device browser on opening the URL redirects our request to the server running locally.
4. Also make sure that you the url should have the ip address of the computer used as server rather than local host. Say 192.178.0.12 is ip of your computer then redirect url for the view of menu can be something like 192.178.0.12/menu.

That's it !!! we have embedded a simple qr feature into our django app. Cheers!!!!

We can improve upon, by having qr for the features of inviting new users to your web app, or some personalized things for the user in the web app or any other feature!

I've uploaded the code on my github repo. This is the link for the repo.

We can make our project more generic and rename it to qr generating app. Let us see how we can make it happen. We take input of the url and then embedded the url and return the qr code to the view and boom that's it we made our own QR generator app!!!!. Few screenshots for the same:

I have included the same in the github project, feel free to go through it and give it a try. Cheers.

I have made a small video of the demo for the same, hope you find it useful:

I hope this article could be useful to someone who is reading the article, I am open to any comments, suggestions, feedback and clarifications. You can encourage me by buying me a coffee for writing me more such content. Thanks and have a nice day!!!