Create a QR Code Generator Using ToolJet and Python in 5 Minutes! 🛠️
Tags: webdev, python, beginners, tutorial
Published: 2024-06-20 13:04:57

This quick tutorial will guide you through the steps to create a QR Code Generator application using ToolJet. The app will allow users to select a URL and generate a corresponding QR code. We will utilize ToolJet's visual app-builder to rapidly build a user interface and then connect to a Python module to generate QR codes from URLs.

Here's the preview of the application:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbo8w8oj79llquvfuazh.png)

---

## Prerequisites

- **ToolJet**(https://github.com/ToolJet/ToolJet) : An open-source, low-code business application builder. [Sign up](https://www.tooljet.com/signup) for a free ToolJet cloud account or [run ToolJet on your local machine](https://docs.tooljet.com/docs/setup/try-tooljet/) using Docker.

- Basic knowledge of **Python**.

Begin by creating an application named _QR Code Generator_.

---

## Step 1: Design the User Interface

#### - Add a Container for the Header

1. Drag and drop a `Container` component onto the canvas.
2. Name it `headerContainer`.
3. Set its background color to `#0a60c6ff`.

#### - Add a Text Component for the App Name

1. Inside the `headerContainer`, add a `Text` component.
2. Set the text to "QR Code Generator."
3. Style it with:
    - Text Color: `#ffffffff`
    - Text Size: `24`
    - Font Weight: `bold`
    - Border Radius: `6`

#### - Add an Icon for the App Logo

1. Inside the `headerContainer`, add an `Icon` component.
2. Set the icon to `IconQrcode` and color to `#ffffffff`.

#### - Add a Table with URLs and Other Information

1. Drag and drop a `Table` component onto the canvas.
2. Name it `linksTable`.
3. Below is the database table structure that we are using for this application:
    - `id`: Auto-generated
    - `title`: String
    - `url`: String
    - `description`: String
4. Populate the `Table` component with data, based on the provided structure.

#### - Add a Text Component for the Table Header

1. Above the table, add a `Text` component.
2. Set the text to "URL Information."
3. Style it with:
    - Text Color: `#0a60c6ff`
    - Text Size: `24`
    - Font Weight: `bold`

#### - Add a Modal for QR Code Generation

1. Drag and drop a `Modal` component onto the canvas.
2. Name it `generateButton`.
3. Set the Trigger button label to "Generate QR" and the Background color to `#0a60c6ff`.

#### - Add an Image Component to Display the QR Code

1. Inside the modal, add an `Image` component.
2. Name it `qrOutput`.
3. Use the below code for the Image component's URL property:
    ```python
    data:image/png;base64,{{queries.QRGenerator.data}}
    ```
4. Similarly, use the below code for the Loading state property of the Image component:
    ```python
    {{queries.QRGenerator.isLoading}}
    ```

_The above configuration will display the generated QR code in the Image component after we craft and run the related query(named `QRGenerator`)._

--- 

## Step 2: Implement Functionality

#### - Add a Python Script for QR Code Generation

1. Add a query named `QRGenerator` using the Run Python code data source.
2. Use the following Python code to generate the QR code:
    ```python
    import micropip
    await micropip.install("qrcode")
    import qrcode
    from io import BytesIO
    import base64

    def QR_Generator():
        qr = qrcode.QRCode(
            version=1,
            error_correction=qrcode.constants.ERROR_CORRECT_L,
            box_size=10,
            border=4,
        )
        qr.add_data(components.linksTable.selectedRow.url)
        qr.make(fit=True)
        img = qr.make_image(fill_color="black", back_color="white")
        buffered = BytesIO()
        img.save(buffered, "PNG")  # Specify the format as a string
        img_str = base64.b64encode(buffered.getvalue()).decode('utf-8')
        return img_str
    QR_Generator()
    ```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fde7kmb9xs2i4ocx8ido.png)

_This code uses the `qrcode` library to generate a QR code from a selected URL in a ToolJet table component. The generated QR code is converted to a base64-encoded PNG image and returned as a string._

#### - Link the QR Generator to the Generate Button

1. Select the `generateButton` modal and add a new event handler to it.
2. Set up an `On open` event to run the `QRGenerator` query.
3. After the above configuration, the output of the `QRGenerator` query will be displayed in the `qrOutput` Image component based on the earlier configuration.

---

## Step 3: Test the Application

Select a row on the `Table` component and click on the `generateButton` modal to generate and view the QR code.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vzwezsz8969iqes9gvv6.png)


_You can save the QR code by right-clicking on the image and selecting `Save image as`. Alternatively, you can set up a Button component to download the image directly._

---

## Congratulations

Congratulations! You've successfully built a production-ready QR code generator. This application demonstrates ToolJet's capability to rapidly design clean user interfaces and extend functionality with custom code. While we used Python code in this tutorial, ToolJet also supports JavaScript code and Custom Components for users who want to extend the platform's functionality for very specific use-cases.

For any questions or support, join the [ToolJet Slack community](https://tooljet.slack.com/). You can also check out the [ToolJet docs](https://docs.tooljet.com/docs/) to learn more!