Deeplinks, iOS, Android, QR code – Operational testing on Universal Links Deeplinks in Android or iOS applications with QR code

by Posted on

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.

You can find all the results and code of this article on my github account

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.

  1. Open Settings
  2. Swipe down and tap Control Center, then Customize Controls
  3. Swipe down and tap Scan QR Code to add the shortcut
  4. 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
  5. Look for the QR code icon

View on an iPhone on iOS 12 with scan QR code shortcut in the Control

Source: https://9to5mac.com/2018/06/26/ios-12-how-to-use-the-control-center-scan-qr-code-shortcut-on-iphone/

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.

Source: https://en.wikipedia.org/wiki/VCard

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:forrestgump@example.com
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

Published by Bruno Flaven

Bruno Flaven has been a Project Manager in a wide variety of Internet business applications both in Mobile and in Desktop for 20 years now. You can find more information about his professional life on his personal website (www.flaven.fr) or his linkedin profile: https://fr.linkedin.com/in/brunoflaven. He is currently working In France Media Monde (FMM) mostly on mobile applications (iOS and Android). He is currently P.O for a Backoffice project made with Symfony. He also made few trainings to facilitate the handling of the tools that he helps to make.

Related Posts