I made recently a small introduction on how to implement the Universal Links Deeplinks in a mobile application both for Android or iOS. I told at the time that the operational acceptance testing implementation was pretty tedious both in iOS or Android.
In this post, I will give a more practical approach on a pretty smart solution given by a prominent developer in Android named Sergii Zhuk. The main idea behind is to create a QR code for each deep link that you want to test in your Android or iOS applications.
The previous article presenting the method to implement deep link is the following: Deeplinks, iOS, Android – Implement the Universal Links Deeplinks in Android or iOS applications
Generating and testing the QR codes
Let’s say I want to generate QR code for all the main destinations of my personal website. So I will open the console and with the help of Homebrew, I will install 2 libraries: qrencode to generate the QR code and zbar to analyse the QR code.
So, imagine that I have a mobile application for my website with the integration of universal link for deeplink. The purpose is that, with the application installed, if I test each QR code, it should open the application directly to the proper destination.
Install the libraries via homebrew
#install the library qrencode to generate the QR code $ brew install qrencode #install the library zbar to analyse the QR code $ brew install zbar
Creating the QR code with qrencode for instance for the main navigation of this site
#generate the QR codes for the main navigation of the website $ qrencode -o flaven_home.png "http://www.flaven.fr" $ qrencode -o flaven_blog.png "http://www.flaven.fr/blog/" $ qrencode -o flaven_resume.png "http://flaven.fr/bruno-flaven-resume-cv/" $ qrencode -o flaven_clients.png "http://flaven.fr/clients-et-realisations/" $ qrencode -o flaven_about_3wdoc.png "http://flaven.fr/a-propos-de-3wdoc/" $ qrencode -o flaven_books.png "http://flaven.fr/livres/" $ qrencode -o flaven_quotes.png "http://flaven.fr/les-citations/"
If needed analysing
#analyse the newly generated QR codes $ zbarimg flaven_home.png $ zbarimg flaven_blog.png $ zbarimg flaven_resume.png $ zbarimg flaven_clients.png $ zbarimg flaven_about_3wdoc.png $ zbarimg flaven_books.png $ zbarimg flaven_quotes.png
Example of QR code for a page like http://www.flaven.fr
Using the QR scan built-in tool on iOS 12’s iPhone directly
You can activate and use also directly our Smartphone to test the freshly created QR code. Here is a quick image that explains how to activate the QR scan.
- Open Settings
- Swipe down and tap Control Center, then Customize Controls
- Swipe down and tap Scan QR Code to add the shortcut
- Launch Control Center by swiping up from the bottom of your iPhone 8/8 Plus or earlier or swiping down from the top right corner of your iPhone X
- Look for the QR code icon
View on an iPhone on iOS 12 with scan QR code shortcut in the Control
For those who are looking for application to test QR code, here is some links to scan easily both on iOS or Android.
Create a QRCode for a vCard file
Just for fun, I have discovered that you can generate with qrencode QR code for vCard, also known as VCF (Virtual Contact File). I had fun generating the Forrest Gump vCard and add to my contacts.
Forrest Gump’s vCard saved in forrest_gump_vcf.vcf
BEGIN:VCARD VERSION:4.0 N:Gump;Forrest;;Mr.; FN:Forrest Gump ORG:Bubba Gump Shrimp Co. TITLE:Shrimp Man TEL;TYPE=work,voice;VALUE=uri:tel:+1-111-555-1212 TEL;TYPE=home,voice;VALUE=uri:tel:+1-404-555-1212 ADR;TYPE=WORK;PREF=1;LABEL="100 Waters Edge\nBaytown\, LA 30314\nUnited States of America":;;100 Waters Edge;Baytown;LA;30314;United States of America ADR;TYPE=HOME;LABEL="42 Plantation St.\nBaytown\, LA 30314\nUnited States of America":;;42 Plantation St.;Baytown;LA;30314;United States of America EMAIL:firstname.lastname@example.org REV:20080424T195243Z x-qq:21588891 END:VCARD
In the Terminal, you can execute the following commands to create the QR code from the .vcf file.
#create a QR code from a .vcf $ cat forrest_gump_vcf.vcf | qrencode -o "forrest_gump_qr_code.png" $ zbarimg forrest_gump_qr_code.png
QR for Forrest Gump’s vCard
Here is some possible changes, if you want to co,control the margin of the size of the dots inside the generated QR code.
If you want to change or get rid of the margin, use the -m option with the size in pixels:
#get rid of the margin -m option cat forrest_gump_vcf.vcf | qrencode -o "forrest_gump_qr_code_nomargin.png" -m 0
If you want to change the dots size, use the -s option with the size in pixels:
#change the dots size with -s option cat forrest_gump_vcf.vcf | qrencode -o "forrest_gump_qr_code_dots.png" -s 4
Scanning the the QR code of the VCF will add Forrest Gump to my Contacts on my iPhone
Conclusion: Using QR code is very practical and speed up the operational acceptance testing process of your applications in iOS and Android. In my case, I had to test on 6 applications more than 30 destinations. For the VCF, you may encounter problem if you are using accented letters like in some foreign languages e.g French, Moldavian, Spanish…etc. I did not dig to deep on that question anyway.
To read more
- iOS 12: How to use the Control Center scan QR code shortcut on iPhone
- Generating QR Codes in Linux
- The libray qrencode from Fukuchi Kentaro
- zbar: Suite of barcodes-reading tools on Homebrew
- qrencode also known as: libqrencode on Homebrew
- The libray ZBar bar code reader to read the QR code