.png)
Display QR code in AppGyver application
If you have read my movie ticket booking application, you would know that I displayed the ticket details as a QR code after the seats are booked. I was new to AppGyver, so I achieved it using custom JavaScript code. When I read the documentation, I understood that there is no need for custom code and that can be achieved using an existing formula.
The two free services available to create QR codes are
Google Charts QR Code (This API is deprecated but can be used until available)
The details what needs to be displayed as QR code should be encoded to URI first as we cant have spaces, special characters in URL.
In the above image, you can see the difference between normal text and URI encoded text. If you notice the link to this post, you will also be able to see it.
Google Charts
The root URL is https://chart.googleapis.com/chart? and the query parameters are
cht=qr (indicates we are requesting QR)
chs=<width>x<height> (Size of the QR code) and
chl=<data>(Data to be displayed as QR)
Example URL: https://chart.googleapis.com/chart?cht=qr&chl=Lorem%20ipsum&chs=500x500&choe=UTF-8
This will return the QR code as an image. So, add an image component to the screen where you need to display a QR code and using formula binding, pass the above URL. (You will get warnings, but they can be ignored). QR data is encoded by using ENCODE_FOR_URL provided by AppGyver. The final formula combining root URL, data, and other query parameters, can be seen in the below image.
Check out the Web build of the above application to get a better understanding.
GO QR generator
Goqr.me provides a free API to generate QR codes like Google charts. The root URL is http://api.qrserver.com/v1/create-qr-code/? and the query parameters are
data=<data> ( Data to be displayed as QR) -Mandatory parameter
size=<width>x<height> (Size of the QR code) -Defaulted to 200x200
Example URL: https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=Lorem%20ipsum
This will return the QR code as an image in png format by default. This can be changed by using the parameter format.
Example URL: https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=Lorem%20ipsum&format=jpg
There are also parameters to change the background, color and margin of the QR code to be generated. But changing the colors of QR might make it a little difficult to be read by the scanner.
Add an Image component to the screen where you need to display a QR code and pass the required URL with the function ENCODE_FOR_URL provided by AppGyver using formula binding . The final formula combining root URL, data and other query parameters can be seen in the below image.
Check out the Web build of the above application to get a better understanding.
Suggestions and feedback are much appreciated. It encourages me to improve and share more content based on my experience with no code tools. If you have any doubts or queries, drop them in the comment section.