Generating QR Code with Thunkable X

Tutorials and DIY Guides
1

Hello, Thunkers! :tada:

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.

1%20designer
1%20designer624×521 22.1 KB

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.

1%20code
1%20code755×217 17.6 KB

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 :

2%20code
2%20code783×378 25.1 KB

Viewing the image :

2%20code2

For Scanning QR Codes, Refer to this Medium Blog.

:star: Thanks for Reading! :star:
Hope you understand the Tutorial :smile:

Happy Thunking! :tada:

6 Likes
2

Please feel free to give suggestions!

1 Like
3

Thanks @domhnallohanlon for reccomending this Tutorial to others! :smile:

2 Likes
4

Hey @kartik14, after creating this QR code, do you receive this as an image, or is the image displayed via a URL as the src for a component image. It looks like the second option.

2 Likes
5

Hi, @jared! :wave:

When you format the URL, and call it, the URL displays the QR Code, as an image (jpg/png). Then we set the image component’s image to the URL, which is a direct address to the QR Code image.

Thanks for your interest! :blush:

6

Link for remix?

7

send qr code link please

8

hello I need an updated version of this please as the new thinkable doesn’t have create a block i dont think(please its for a school project due in a week)