The ubiquity and portability of modern smartphones, and the explosive growth of fintech and cryptocurrencies have made QR readers an important tool in any app developer’s repertoire. In the wake of an increasingly cashless society, QR code readers are a quick and easy way to link physical assets to digital ones.
In this tutorial, we will be covering how to create such a reader using Thunkable X. We will be using a public HTTP API for decoding our QR codes (http://goqr.me/api/), as well as the Cloudinary Media DB for preprocessing our images. You can find a link to the completed project at the end of this post. Let’s get started!
Add a Row and a Column for some basic Interface Structure
Drag and drop a Row component into the phone, as well as a Column component beneath it.
2. Add an Image Component into the Row
This will serve to show a preview of the QR code you are scanning.
3. Add a Label and a Button to the Column
The Button will open the camera so you can scan a new QR code. The Label will display the results of the scanned code.
4. Add a Camera Component
From the Image section, drag a Camera into the phone.
5. Add a Web API and a Media DB Component
Drag these out from the Data section. The Media DB Component will allow us to store our photos of QR codes in the cloud before scanning them using the Web API.
6. Make a Cloudinary Account
In order for the QR codes in our photos to be scannable, the photos must be edited to be the correct quality and format. To do this, we need to make our own free Cloudinary account. Go to cloudinary.com, click on ‘SIGN UP FOR FREE’, fill in your details and press ‘CREATE ACCOUNT’.
7. Copy your Cloudinary Account Details
You will need to Copy and Paste your Cloudinary Account details into the Thunkable Media DB component so that your app is able to access your uploaded photos. The details you need are the ‘Cloud name’, ‘API Key’ and ‘API Secret’, on the Cloudinary Dashboard.
8. Paste your Cloudinary Account Details into Thunkable X
Back in Thunkable, click on the Media_DB1 component and paste your Cloudinary ‘CloudName’, ‘APIKey’ and ‘APISecret’ into the component properties. Once you are done, return to Cloudinary to finish setting up your Upload Presets.
9. Adding a Cloudinary Upload Preset
Cloudinary allows you to automatically edit your images upon upload. We will need to do this to our photos to be able to read the QR code from them. Click on the Settings Cog on the top toolbar and then on the Upload tab. Then, scroll down and click on ‘Add upload preset’.
10. Change your Preset Name
Give your preset a name that you will remember and that will allow you to keep track of what it is used for. To do this, edit the ‘Preset name: ’ field.
11. Add an Incoming Transformation
An Incoming Transformation will automatically edit any images that we upload to Cloudinary. To create a new one, scroll down to ‘Incoming Transformation’ and click ‘Edit’.
12. Change the Images to Black and White
To be able to scan their QR codes, the images must first be converted to Black and White. In the ‘Edit Transformation’ window, select ‘Blackwhite’ under ‘Look & Feel’ and ’Effect’.
13. Limiting the Image Size
The API we will be using to read the QR codes from the images (http://goqr.me/api/) requires that all images are below 1Mb in size. Since mobile cameras vary in quality, we will limit the image size to ensure that all phones are able to use the app. Start off by selecting ‘Fit’ for the ‘Resize and Crop’ mode, and entering 1000 only for the Height. By leaving the Width blank, the image will retain its original aspect ratio.
14. Limiting the Image Quality
We can also further ensure that the image is below 1MB be reducing its quality under the ‘Format & Shape’ and ‘Quality:’ headings. Set the slider to about 50, which would reduce the quality by 50%. Click OK once you are finished.
15. Save and Set your Default Preset
Scroll down the page and click ‘Save’. When you return to the Upload Settings page, make sure that the preset you just made is selected as the ‘Default upload preset:’. Click ’Save’ again.
16. Back to the Blocks
We want to take a photo when we press the button. Drag out the ‘when Button1 Click’ block from the Button1 drawer. Place the ‘in Camera1 call Take Photo’ block from the Camera1 drawer inside it.
17. Set the Preview Picture
In Image1’s drawer, drag out the ‘from Image1 set Picture to’ block. Place this inside the TakePhoto block of the Camera and drag the ‘Photo’ output block into it. This will change Image1’s picture to be whatever photo you took with the camera, giving the user a preview of the QR code you are about to scan.
18. Upload your Photo to Cloudinary
From the Media_DB1 drawer, drag out the ‘in Media_DB1 call Upload’ block and place it in the ’TakePhoto’ block. In the ‘media’ input, place the ‘Photo’ output from the ‘TakePhoto’ block.
19. Forming the Web API Request URL
The API we will be using is the goqr.me QR Code Reader API. To read a QR code, we must set the URL of the Web API component to ‘http://api.qrserver.com/v1/read-qr-code/?fileurl=’ and whatever the URL is of the image we want to scan. To do this, use the ‘join’ block from the Text section to combine the above URL with the ‘mediaURL’ output from the ‘in Media_DB1 call Upload’ block.
20. Setting the Component URL
Once we have combined the Request URL, we need to set it to the Web API component’s URL input. Place these blocks inside the ‘from Web_API1 set URL to’ block from the Web_API1 drawer. Place all of these blocks inside the ‘then do’ input of the Media_DB1 Upload block.
21. Making the API GET Request
Once we have formed our request URL, we need to use the ‘in Web_API1 call Get’ block from the Web_API1 drawer to request a scan of our QR code image from the API. Place this block under where you defined the Web API component’s URL.
22. Make an object from the JSON response
Create a new variable to contain your API response. This is done by clicking on ‘Create variable…’ in the ‘Variables’ drawer. Use the ‘get object from JSON’ block from the Objects section with the ‘response’ output block from the Web API component and set your new variable to be equal to this using the ‘set [] to’ block.
The square brackets indicate that the data is in the form of a list of objects, so we need to get the first element in that list. Then we need to get the ‘symbol’ property of that element. Again, the square brackets in the value for the ‘symbol’ property mean that it contains another list of objects. After we take the first element in this list, we can get the value for the ‘data’ property to find what the QR code decodes to.
25. Extracting the QR Information (1/3)
We will now set the ‘data’ property of the response to a new variable. To start, we will need to get the first element of the response. To do this, use the ‘in list [] get #’ block from the Lists section, setting the ‘#’ dropdown to ‘first’, and place the variable containing the API response object inside the input.
26. Extracting the QR Information (2/3)
Next, we will need to get the value of the ‘symbol’ property of this list element. To do this, drag out the ‘get property [] of object’ block and type ‘symbol’ into its text field. Attach this block to the ‘in list [] get first’ block from before.
27. Extracting the QR Information (3/3)
To get the ’data’ property from the ‘symbol’ value of the object, you will have to follow the same steps. Use the ‘in list [] get #’ block (again setting it to ’first’) along with the ‘get property [] of object’ in combination with the blocks from before.
28. Set this result to a variable
Create a new variable to hold your QR code result using the ‘Create variable…’ in the ‘Variables’ drawer. Drag out the ‘set [] to’ block and place the blocks which find the ‘data’ property inside it.
29. Setting the Result Label
We want to have a label tell the user if a QR code was successfully scanned, and to try again if it wasn’t. Use the ‘from Label1 set Text to’ block from the Label1 drawer to change the text in the label.
30. Adding a Conditional Expression
Drag out the ‘test [] if true [] if false []’ block from the Control section and place it in the Label block. This will allow us to set the Label’s text to either the ’if true’ input or the ‘if false’ input, depending on whether or not the blocks in the ‘test’ input have a result of ‘true’.
31. The Test Condition
The API we are using will return ‘null’ for the ’data’ property if no QR codes were detected. Therefore, we will test if the result of is ’null’ for our test condition. Drag out the ‘=’ block from the Logic section and place your API ’data’ response in one input and a ’null’ block (again from the Logic section) in the other input.
32. If True…
If the Test Condition is true, we want to set the text of the Label to ‘Please try again…’. To do this, take a Text block from the Text section, type this between the quotation marks, and place it in the ’if true’ input.
33. If False…
If the Test Condition is false, we want to set the Text of the Label to the decoded result of the QR code. To do this, place the variable to which you have assigned the API request result inside the ‘if false’ input.
That’s it! You can now Live Test your app and take a photo of a QR code you want to scan. Its decoded message will appear in the bottom label.
