QR code creation in Kuika is an effective way to improve the user experience in your app and make data more accessible. QR codes are especially useful in product tracking, user verification or mobile payment systems. General functions of the QR code generation process:
Data Encoding: By turning your data into a QR code, you can provide quick access to information about a product, user profile or transaction. QR codes are created by converting string format data (e.g. text, URL, etc.) into base64 format and can be read via browsers or mobile devices.
Customization: QR codes can be integrated into your visual content. You can dynamically generate QR codes for different data and create codes specific to each user or product.
Performance: QR codes can be created and read quickly, especially with large data sets. By optimizing the data size, the scanning speed of QR codes can be increased and fast feedback can be provided when scanning with mobile devices. Using QR codes makes your application high-performance and user-friendly.
This training content consists of the following topics:
QR Code creation,
QR Code display,
QR Code scanning.
Create QR Code
The first step to create a QR code is to select the data you want to convert into a QR code. This data is usually kept in string format and is converted to base64 format during the QR code generation process. In this tutorial, you will learn how to create a QR code using the URL element.
After logging into the Kuika platform, open the project you will work on from the “Apps” screen.
In the “UI Design” module, drag and drop the URL element under the “Text Input” category from the “Elements” panel on the left side.
From the Properties panel on the right side, enter the URL you want to convert to QR Code in the “Value” field.
Then select “On Change > Export > Generate QR Code” from the “ADD ACTION” drop-down menu.
Select “Components → URL” by clicking Symbol Picker from the “Value” field in the drop-down menu.
View QR Code
If you want to view the QR Code on a different screen, you can use the “Navigate” action to redirect to a new screen.
After creating a QR Code, follow the steps below:
To display the QR code on a different screen, click on the “+” icon from the Screens panel of the UI Design module.
Select “New Screen” and name the screen you created “QR Code”.
Drag and drop the Image element under the “Display” category from the “Elements” panel on the left side.
Go back to the screen where you added the Generate QR Code action.
Add the “On Change → Navigation → Navigate” action from the “ADD ACTION” drop-down menu on the right side.
In the “To Screen” field, select the “QR Code” screen and the method of opening it.
Then click on “Screen Input” on the right side and define the ID of the QR code.
Your QR code will now be displayed on the screen you just created.
Reading the QR Code
Mobile devices and scanners can be used to scan QR codes. Simply add the “Scan Barcode” action to the element where you want to scan the QR code.
Go back to the URL element.
Add the “On Change → Device → Scan Barcode” action from the “ADD ACTION” drop-down menu.
With this action, you can scan QR code on mobile devices and browsers.
