Post
Ask Question

How to Generate a QR Code Using Cordova

This article explains something very interesting about how to create a QR code image in your smartphone that is a must for any business running a show in showcasing the latest and the greatest to the community and the outside world. 
 
QR Code: QR Code stands for Quick Response Code and is a type of two-dimensional barcode that can be read using smartphones and dedicated QR reading devices, that link directly to text, emails, websites, phone numbers and more. You may have even gotten to this site by scanning a QR code. In common, each and every transaction to be tracked electronically can be accessed with a QR code. 
 
QR Code
 
Now with smartphones, how to generate a QR Code automatically based on some action or to assign a transaction? Let's not over-complicate it, let's use a simple scenario of how to first generate a QR code that does the process of electronic responsiveness. Use the following example to generate a QR Code.
 
Procedure to Generate QR Code using Cordova
 
First of all open a Node.JS Command Prompt and then use the following command to create a Cordova project first:

"cordova create QRCodeGenerator com.sourabh.QRCodeGenerator QRCodeGenerator"
 
The first argument QRCodeGenerator specifies a directory to be generated for our project.
 
The second argument com.sourabh.QRCodeGenerator provides your project with a reverse domain-style identifier. This argument is optional, but only if you also omit the third argument.

Why do we provide the second identifier like this? Because packages are typically named using the following convention:

[org/com].[company].[product].[component]
The third argument QRCodeGenerator provides the application's display title.
 
Now go to the project directory using the command "cd QRCodeGenerator".


 
Before you can build the project, you need to specify a set of target platforms. Your ability to run these commands depend on whether your machine supports each SDK and whether you have already installed each SDK.

To add a different platform use the following command:

For Windows Phone 8:
  1. cordova platform add wp8    
For Windows:
  1. cordova platform add windows  
For Amazon-FireOS:
  1. cordova platform add amazon-fireos  
For BB10:
  1. cordova platform add blackberry10  
For Android:
  1. cordova platform add android  
For FireFoxOS:
  1. cordova platform add firefoxos   
Now open the project directory and go to the www folder and open index.html and also open index.css that is exists in the css folder.

Now modify the index.css as in the following:
  1. body {    
  2.     -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */    
  3.     -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */    
  4.     -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */    
  5. }    
Now in the index.html add the following jQuery Mobile Plugins:
  1. jquery.mobile-1.4.0.min.css
  2. jquery-1.11.0.min.js
  3. jquery.mobile-1.4.0.min.js
Note: Download jQuery Mobile from jQuery Mobile Plugin
  1. Now to generate a QR Code download the "qrcode.min.js" file. This is an open source JavaScript file to generate a QRCode. You can download qrcode.min.js using the following link.

    Download link for qrcode.min.js

  2. Now write the following code in index.html:
  1. <!DOCTYPE html>    
  2.     
  3. <html>    
  4.     
  5.     <head>    
  6.     
  7.         <meta charset="utf-8" />    
  8.     
  9.         <meta name="format-detection" content="telephone=no" />    
  10.     
  11.         <meta name="msapplication-tap-highlight" content="no" />    
  12.     
  13.         <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes.    
  14.  See https://issues.apache.org/jira/browse/CB-4323 -->    
  15.     
  16.         <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />    
  17.     
  18.         <link rel="stylesheet" type="text/css" href="css/index.css" />    
  19.     
  20.         <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css" />    
  21.     
  22.         <style type="text/css" rel="stylesheet">    
  23.            #qrcode {    
  24.             width:300px;    
  25.             height:300px;    
  26.             margin-top:15px;    
  27.            }    
  28.         </style>    
  29.         <title>Hello World</title>    
  30.     
  31.     </head>    
  32.     
  33.     <body>    
  34.     
  35.         <div class="app">    
  36.            <div data-role="page" id="QrCode">      
  37.               <div data-role="header" data-position="fixed">      
  38.                 <h1>QR Code Generator</h1>      
  39.               </div>      
  40.               <div role="main" class="ui-content" id="home-content">      
  41.                   <input id="text" type="text" style="width:80%" /><br />    
  42.                   <input type="button" value="Generate QR Code" style="width:80%" onclick="Generate();" /><br />    
  43.               <div id="qrcode"></div>    
  44.              </div>      
  45.            </div>      
  46.         </div>    
  47. <script type="text/javascript">    
  48.    function Generate(){    
  49.      var qrcode = new QRCode("qrcode");    
  50.      var TBCode = document.getElementById("text");    
  51.         
  52.     if (!TBCode.value) {    
  53.         alert("Input a text");    
  54.         TBCode.focus();    
  55.         return;    
  56.     }    
  57.     qrcode.makeCode(TBCode.value);    
  58.    }    
  59. </script>    
  60.         <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>    
  61.     
  62.         <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>    
  63.                 <script type="text/javascript" src="js/index.js"></script>    
  64.     
  65.         <script type="text/javascript" src="js/qrcode.min.js"></script>    
  66.     </body>    
  67.     
  68. </html>   
  • Now build the application. You can build the Cordova application for all the preceding platforms that you have added. I am building this for Windows 8 phone as well as an Android phone by running the following command in Node.JS.
For Windows Phone 8:

"C:\QRCodeGenerator>cordova build wp8"



For Android Phone:

"C:\QRCodeGenerator>cordova build android"
  • Now go to the platform folder. There will be 2 folders wp8 (for Windows Phone 8) and for Android (for Android phone). Inside both folders you will find an .xap file (in the wp8 folder) and .apk file (in the Android folder). You can install these files in your mobile and you can see the following output.
Output

Before entering any input into the TextBox.
 
 
After filling in the TextBox with some data the output will be as in the following:


Similar Articles