TheLazy.Dev
Portfolio GitHub

Blog

streamlit |api |tutorial |beginners

Building QR Code generator

engineeredsoul

Aadarsh Kannan

Posted on July 24, 2022

Building QR Code generator

з поверненням (z povernennyam) - Welcome back in Ukrainian

For this article, we will be exploring QR Code and building a QR Generator App. Let's get started!

rick_QR_CODE

About QR Code

QR Code stands for Quick Response Code and is a type of 2D barcode. It was created by the Japanese corporation Denso Wave in 1994 and is one of the most popular types of barcodes. QR codes are used to store information such as URLs, contact information, and small amounts of text. They are often used to share links to websites or online resources.

A QR code is created by first designing the code using a QR code generator. The generator creates a matrix of small squares, which are then encoded with the data to be stored in the QR code. The data is then translated into a black and white image that can be read by a QR code reader.
There is no one specific algorithm that is used to create QR codes. Instead, there are a variety of different algorithms that can be used, depending on the particular requirements of the QR code.

QR Code gif

So let's build an app that generates a QR Code for the given website with this wonderful technology. We will be using Streamlit and QRTag API to generate the QR code.

If you are new to hearing Streamlit - Check out - You can just turn data scripts into apps!

Let's built it!

Fire up the terminal and install the streamlit module. 



$ pip install streamlit
Enter fullscreen mode Exit fullscreen mode

Import streamlit module



import streamlit as st
Enter fullscreen mode Exit fullscreen mode

st.set_page_config() function will helps to configures the default settings of the page. It has a function signature as follows:

st.set_page_config(page_title=None, page_icon=None, layout="centered", initial_sidebar_state="auto", menu_items=None)



st.set_page_config(page_title = "QR code generator", page_icon = "🏁")
Enter fullscreen mode Exit fullscreen mode

We will add title and heading to our project using st.title() and st.header() function



st.title("QR code generator")
st.subheader("About QR Code")
Enter fullscreen mode Exit fullscreen mode

st.markdown() function will help to display string formatted as Markdown.



st.markdown(
    """
    QR Code stands for Quick Response Code and is a type of 2D barcode. 
    It was created by the Japanese corporation [Denso Wave](https://www.denso-wave.com/en/) in 1994 and is one of the most popular types of barcodes.
    QR codes are used to store information such as URLs, contact information, and small amounts of text. They are often used to share links to websites or online resources.
    """)
Enter fullscreen mode Exit fullscreen mode

st.video() function will helps to display the video.

st.video(data, format="video/mp4", start_time=0)



st.video("https://youtu.be/cswo_6kj0Ug")
Enter fullscreen mode Exit fullscreen mode

Now let's get specific parameters from the user to work further.
The three params are:

  • Size of the image to be generated
  • Image output type
  • Website URL 


size = st.number_input("Size of your QR Code", 5, 30)
img_type = st.radio("Select image type 🖼️", ('png', 'svg'))
web_link = st.text_input("Enter website URL 🔗", value = "https://aadarshkannan.hashnode.dev/")
Enter fullscreen mode Exit fullscreen mode
  • st.number_input() function display a numeric input widget

st.number_input(label, min_value=None, max_value=None, value=, step=None, format=None, key=None, help=None, on_change=None, args=None, kwargs=None, *, disabled=False)

  • st.radio() function display a radio button widget

st.radio(label, options, index=0, format_func=special_internal_function, key=None, help=None, on_change=None, args=None, kwargs=None, *, disabled=False, horizontal=False)

  • st.text_input() function display a single-line text input widget

st.text_input(label, value="", max_chars=None, key=None, type="default", help=None, autocomplete=None, on_change=None, args=None, kwargs=None, *, placeholder=None, disabled=False)

Now we will look at the important part of our App. To create the QR Code we will be using QRTag API. With the parameters that we got above, we will call the API to generate our output as requested.



QRTag_API_URL = f"https://qrtag.net/api/qr_{size}.{img_type}?url={web_link}"
Enter fullscreen mode Exit fullscreen mode

Wait!!! So you hear API right? So what does it mean? Let's see it real quick.

API

API stands for an application programming interface. An API is a set of programming instructions that allow the software to interact with other software. In other words, an API is a way for two pieces of software to communicate with each other. Below is a beautiful illustration of What is an API? from RapidAPI.

what is API?

Image credit: @[RapidAPI](https://rapidapi.com/) on [@Twitter](https://twitter.com/Rapid_API/status/1543252234703872000?s=20&t=eV1m3OhIXspIcHdVx06n2A)

So once the request is sent, the output which we have called above will be the image of the QR Code.
In order to display the image, we will use the st.image() function. 



with st.expander("Generated QR Code", expanded = True):
    st.write("Scan 🤳 / Export ↗️ / do whatever you want 👻")
    st.image(QRTag_API_URL)
Enter fullscreen mode Exit fullscreen mode

There's another function called st.expander() in the above code. You may wonder what it does? It Inserts a multi-element container and it can be expanded or collapsed by the user. To add multiple elements to the container, we can use the "with" notation.

st.expander(label, expanded=False)

Once you run the below script, you will be able to see your app running. You can run this in the beginning and build your app by visualizing each element. Try experimenting around with the different functions. 



$ streamlit run you_file_name.py
Enter fullscreen mode Exit fullscreen mode

The complete code of our app is as follows :



import streamlit as st

st.set_page_config(page_title = "QR code generator", page_icon = "🏁") # Configures the default settings of the page.

st.title("QR code generator")
st.subheader("About QR Code")

st.markdown(
    """
    QR Code stands for Quick Response Code and is a type of 2D barcode. 
    It was created by the Japanese corporation [Denso Wave](https://www.denso-wave.com/en/) in 1994 and is one of the most popular types of barcodes.
    QR codes store information such as URLs, contact information, and small amounts of text. They are often used to share links to websites or online resources.
    """)

st.video("https://youtu.be/cswo_6kj0Ug")

st.markdown("We will be using [QRTag API](https://www.qrtag.net/api/) for this project.")

size = st.number_input("Size of your QR Code", 5, 30)
img_type = st.radio("Select image type 🖼️", ('png', 'svg'))
web_link = st.text_input("Enter website URL 🔗", value = "https://aadarshkannan.hashnode.dev/")

QRTag_API_URL = f"https://qrtag.net/api/qr_{size}.{img_type}?url={web_link}"

with st.expander("Generated QR Code", expanded = True):
    st.write("Scan 🤳 / Export ↗️ / do whatever you want 👻")
    st.image(QRTag_API_URL)
Enter fullscreen mode Exit fullscreen mode

To deploy your app - check out Deploy using Streamlit section

Live demo of our app - QR Code Generator

qr_app_homepage

References

Conclusion

QR code is a good tool for marketing as it helps in the easy and quick dissemination of information to the target audience. It is also a cost-effective way of marketing as it does not require any printing or other such costs.

Hope you like this article. Feedbacks are welcome and stay tuned for more! You can find me on Twitter @dotaadarsh

Original Cover Photo by Risto Kokkonen on Unsplash

Stay safe 😷 Spread Love ❤️ Keep Exploring 🚀

💖 💪 🙅 🚩
engineeredsoul
Aadarsh Kannan

Posted on July 24, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Building QR Code generator
streamlit Building QR Code generator

July 24, 2022