Hello, Thunkers!
I am back with another Tutorial, Generating QR Code with Thunkable X
In this Tutorial, we will experiment with the GoQR API.
Intro to QR code API
You can generate and decode/read QR code graphics with our QR code generator web API at api.qrserver.com.
Important features of GoQR
- Create QR codes via Internet (develop your own QR code generator )
- Read / scan QR codes via Internet (develop your own QR code reader )
- Social QR code with logo (Facebook or Twitter logo / image embedded in the QR code) (coming soon)
- Create colored QR codes
- Professional QR code print file formats (vector graphics, QR code EPS and SVG )
- High performance server
- Encrypted communication via HTTPS (SSL/TLS)
Find more at QR code API.
Steps
Designer
At the Designer Area, We just have to Add a Web Viewer, A Button, and a TextInput for the data which we want for the QR code.
Code
In the Coding area, We just have to add a from web view set url block and add the url according to our request.
Description of Blocks
The join block will create the final URL. The structure of our URL is -
http://api.qrserver.com/v1/create-qr-code/?data=textinput.text&size=150x150
The size means the size of the qr code image in pixels. 150x150 looks better.
The " http://api.qrserver.com/v1/create-qr-code/ " is our base URL; " ?data " & " ?size= " are our Query Parameters. These parameters are sent to the GoQR API for a QR Generating Request.
Bonus Tip
- You may store the above URL (created in the join block) to a stored Variable, or in Local Storage. And on other screen, take an image component and set it’s image to the url. -
Storing the URL :
Viewing the image :
For Scanning QR Codes, Refer to this Medium Blog.
Thanks for Reading!
Hope you understand the Tutorial