{"id":11244,"date":"2019-01-10T07:10:40","date_gmt":"2019-01-10T06:10:40","guid":{"rendered":"http:\/\/flaven.fr\/?p=11244"},"modified":"2021-03-24T05:54:19","modified_gmt":"2021-03-24T04:54:19","slug":"deeplinks-ios-android-qr-code-operational-testing-on-universal-links-deeplinks-in-android-or-ios-applications-with-qr-code","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2019\/01\/deeplinks-ios-android-qr-code-operational-testing-on-universal-links-deeplinks-in-android-or-ios-applications-with-qr-code\/","title":{"rendered":"Deeplinks, iOS, Android, QR code &#8211; Operational testing on Universal Links Deeplinks in Android or iOS applications with QR code"},"content":{"rendered":"<p>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.<\/p>\n<p><b><a href=\"https:\/\/github.com\/bflaven\/BlogArticlesExamples\/tree\/master\/generating-qr-code-testing-universal-links-deeplinks\" target=\"_blank\" rel=\"noopener\">You can find all the results and code of this article on my github account<\/a><\/b><\/p>\n<p>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.<\/p>\n<p><b>The previous article presenting the method to implement deep link is the following: <a href=\"https:\/\/flaven.fr\/2018\/12\/deeplinks-ios-android-implement-the-universal-links-deeplinks-in-android-or-ios-applications\/\" target=\"_blank\" rel=\"noopener\">Deeplinks, iOS, Android \u2013 Implement the Universal Links Deeplinks in Android or iOS applications<\/a><\/b><\/p>\n<h2>Generating and testing the QR codes<\/h2>\n<p>Let&#8217;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.<\/p>\n<p><b>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.<\/b><\/p>\n<p><b>Install the libraries via homebrew<\/b><\/p>\n<pre lang=\"bash\">\r\n#install the library qrencode to generate the QR code \r\n$ brew install qrencode\r\n\r\n\r\n#install the library zbar to analyse the QR code\r\n$ brew install zbar\r\n<\/pre>\n<p><b>Creating the QR code with qrencode for instance for the main navigation of this site<\/b><\/p>\n<pre lang=\"bash\">\r\n#generate the QR codes for the main navigation of the website\r\n$ qrencode -o flaven_home.png \"http:\/\/www.flaven.fr\"\r\n$ qrencode -o flaven_blog.png \"http:\/\/www.flaven.fr\/blog\/\"\r\n$ qrencode -o flaven_resume.png \"https:\/\/flaven.fr\/bruno-flaven-resume-cv\/\"\r\n$ qrencode -o flaven_clients.png \"https:\/\/flaven.fr\/clients-et-realisations\/\"\r\n$ qrencode -o flaven_about_3wdoc.png \"https:\/\/flaven.fr\/a-propos-de-3wdoc\/\"\r\n$ qrencode -o flaven_books.png \"https:\/\/flaven.fr\/livres\/\"\r\n$ qrencode -o flaven_quotes.png \"https:\/\/flaven.fr\/les-citations\/\"\r\n<\/pre>\n<p><b>If needed analysing<\/b><\/p>\n<pre lang=\"bash\">\r\n#analyse the newly generated QR codes\r\n$ zbarimg flaven_home.png\r\n$ zbarimg flaven_blog.png\r\n$ zbarimg flaven_resume.png\r\n$ zbarimg flaven_clients.png\r\n$ zbarimg flaven_about_3wdoc.png\r\n$ zbarimg flaven_books.png\r\n$ zbarimg flaven_quotes.png\r\n<\/pre>\n<p><b>Example of QR code for a page like http:\/\/www.flaven.fr<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2019\/01\/flaven_home.png\" alt=\"\" width=\"99\" height=\"99\" \/><\/p>\n<h2>Using the QR  scan built-in tool on iOS 12&#8217;s iPhone directly<\/h2>\n<p>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.<\/p>\n<ol>\n<li>Open Settings<\/li>\n<li>Swipe down and tap Control Center, then Customize Controls<\/li>\n<li>Swipe down and tap Scan QR Code to add the shortcut<\/li>\n<li>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<\/li>\n<li>Look for the QR code icon<\/li>\n<\/ol>\n<p><b>View on an iPhone on iOS 12 with scan QR code shortcut in the Control<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2019\/01\/qr_code_generator_2_iphone.jpg\" alt=\"\" width=\"350\" height=\"701\" \/><\/p>\n<p><i>Source: <a href=\"https:\/\/9to5mac.com\/2018\/06\/26\/ios-12-how-to-use-the-control-center-scan-qr-code-shortcut-on-iphone\/\" target=\"_blank\" rel=\"noopener\">https:\/\/9to5mac.com\/2018\/06\/26\/ios-12-how-to-use-the-control-center-scan-qr-code-shortcut-on-iphone\/<\/a><\/i><\/p>\n<p><b>For those who are looking for application to test QR code, here is some links to scan easily both on iOS or Android.<\/b><\/p>\n<ul>\n<li><a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.teacapps.barcodescanner\" target=\"_blank\" rel=\"noopener\">A  good QR &#038; Barcode Scanner for android<\/a><\/li>\n<li><a href=\"https:\/\/itunes.apple.com\/fr\/app\/flashcode-scan-qrcode-et-prix\/id329168540?mt=8\" target=\"_blank\" rel=\"noopener\">A good Scan QRCode for iOS<\/a><\/li>\n<\/ul>\n<h2>Create a QRCode for a vCard file<\/h2>\n<p>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.<\/p>\n<p><i>Source: <a href=\"https:\/\/en.wikipedia.org\/wiki\/VCard\" target=\"_blank\" rel=\"noopener\">https:\/\/en.wikipedia.org\/wiki\/VCard<\/a><\/i><\/p>\n<p><b>Forrest Gump&#8217;s vCard saved in forrest_gump_vcf.vcf<\/b><\/p>\n<pre lang=\"bash\">\r\nBEGIN:VCARD\r\nVERSION:4.0\r\nN:Gump;Forrest;;Mr.;\r\nFN:Forrest Gump\r\nORG:Bubba Gump Shrimp Co.\r\nTITLE:Shrimp Man\r\nTEL;TYPE=work,voice;VALUE=uri:tel:+1-111-555-1212\r\nTEL;TYPE=home,voice;VALUE=uri:tel:+1-404-555-1212\r\nADR;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\r\nADR;TYPE=HOME;LABEL=\"42 Plantation St.\\nBaytown\\, LA 30314\\nUnited States of America\":;;42 Plantation St.;Baytown;LA;30314;United States of America\r\nEMAIL:forrestgump@example.com\r\nREV:20080424T195243Z\r\nx-qq:21588891\r\nEND:VCARD\r\n<\/pre>\n<p>In the Terminal, you can execute the following commands to create the QR code from the .vcf file.<\/p>\n<pre lang=\"bash\">\r\n#create a QR code from a .vcf\r\n$ cat forrest_gump_vcf.vcf | qrencode -o \"forrest_gump_qr_code.png\"\r\n$ zbarimg forrest_gump_qr_code.png\r\n<\/pre>\n<p><b>QR for Forrest Gump&#8217;s vCard<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2019\/01\/forrest_gump_qr_code.png\" alt=\"\" width=\"267\" height=\"267\" \/><\/p>\n<p>Here is some possible changes, if you want to co,control the margin of the size of the dots inside the generated QR code.<\/p>\n<p>If you want to change or get rid of the margin, use the -m option with the size in pixels:<\/p>\n<pre lang=\"bash\">#get rid of the margin -m option\r\ncat forrest_gump_vcf.vcf | qrencode -o \"forrest_gump_qr_code_nomargin.png\" -m 0<\/pre>\n<p>If you want to change the dots size, use the -s option with the size in pixels:<\/p>\n<pre lang=\"bash\">#change the dots size with -s option\r\ncat forrest_gump_vcf.vcf | qrencode -o \"forrest_gump_qr_code_dots.png\"  -s 4<\/pre>\n<p><b>Scanning the the QR code of the VCF will add Forrest Gump to my Contacts on my iPhone<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2019\/01\/forrest_gump_contact.jpg\" alt=\"\" width=\"350\" height=\"623\" \/><\/p>\n<p><b>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&#8230;etc. I did not dig to deep on that question anyway.<\/b><\/p>\n<h2>To read more<\/h2>\n<ul>\n<li>iOS 12: How to use the Control Center scan QR code shortcut on iPhone<br \/><a href=\"https:\/\/9to5mac.com\/2018\/06\/26\/ios-12-how-to-use-the-control-center-scan-qr-code-shortcut-on-iphone\/\" target=\"_blank\" rel=\"noopener\">https:\/\/9to5mac.com\/2018\/06\/26\/ios-12-how-to-use-the-control-center-scan-qr-code-shortcut-on-iphone\/<\/a><\/li>\n<li>Generating QR Codes in Linux<br \/><a href=\"http:\/\/www.linux-magazine.com\/Online\/Features\/Generating-QR-Codes-in-Linux\" target=\"_blank\" rel=\"noopener\">http:\/\/www.linux-magazine.com\/Online\/Features\/Generating-QR-Codes-in-Linux<\/a><\/li>\n<li>The libray qrencode from Fukuchi Kentaro<br \/><a href=\"https:\/\/fukuchi.org\/works\/qrencode\/\" target=\"_blank\" rel=\"noopener\">https:\/\/fukuchi.org\/works\/qrencode\/<\/a><\/li>\n<li>zbar: Suite of barcodes-reading tools on Homebrew<br \/><a href=\"https:\/\/formulae.brew.sh\/formula\/zbar\" target=\"_blank\" rel=\"noopener\">https:\/\/formulae.brew.sh\/formula\/zbar<\/a><\/li>\n<li>qrencode also known as: libqrencode on Homebrew<br \/><a href=\"https:\/\/formulae.brew.sh\/formula\/qrencode\" target=\"_blank\" rel=\"noopener\">https:\/\/formulae.brew.sh\/formula\/qrencode<\/a><\/li>\n<\/li>\n<li>The libray ZBar bar code reader to read the QR code<br \/><a href=\"http:\/\/zbar.sourceforge.net\/\" target=\"_blank\" rel=\"noopener\">http:\/\/zbar.sourceforge.net\/<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2019\/01\/deeplinks-ios-android-qr-code-operational-testing-on-universal-links-deeplinks-in-android-or-ios-applications-with-qr-code\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">Deeplinks, iOS, Android, QR code &#8211; Operational testing on Universal Links Deeplinks in Android or iOS applications with QR code<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":11249,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Test Universal Links Deeplinks in Android or iOS apps using QR codes. Practical guide with tools and outcomes from Sergii Zhuk's smart solution.","bf_ai_og_title":"Universal Links Testing","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3442,3444,3445,3448,3435],"tags":[2238,2447,2446,569,518,2210,496,2459,2460,2182,2461],"class_list":["post-11244","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-devices","category-programming-databases","category-seo-web-marketing","category-tools-productivity","category-web-development","tag-android","tag-applications","tag-deeplinks","tag-homebrew","tag-ios","tag-mac","tag-qr-code","tag-qrencode","tag-vcard","tag-web","tag-zbar"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-2Vm","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2019\/01\/qr_code_generator_b_2.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/11244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=11244"}],"version-history":[{"count":9,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/11244\/revisions"}],"predecessor-version":[{"id":11831,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/11244\/revisions\/11831"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/11249"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=11244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=11244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=11244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}