Post
Ask Question

Barcode Scanner Cross Platform App Using Cordova In Visual Studio 2015

Cordova is an open source framework for quickly building cross-platform mobile apps using HTML5, JavaScript, CSS etc.

Cordova is an application container technology that allows you to create natively-installed applications for mobile devices using HTML, CSS and JavaScript. The core engine for Cordova is also 100% open source, under the Apache Cordova project.

The UI layer of a Cordova application is a web browser view that takes up 100% of the device width and 100% of the device height.

Cordova provides an application programming interface (API) that enables you to access native operating system functionality using JavaScript. You build your application logic using JavaScript and the PhoneGap API handles communication with the native operating system.

Cordova currently supports all major mobile platforms:

  • iOS
  • Android
  • Windows Phone 8

In this article we will see the step by step setup visual studio 2015 setup process for developing Apache/Cordova cross platform mobile application development and then, will develop a barcode scanner app using phonegap barcode scanner plugin.

At the time of installing Visual Studio 2015 you need to select Cross Platform Mobile Development from the features section and then select HTML5 / JavaScript (Apache Cordova) Update 2 /3 from the sub section. Then click install button to complete the installation process.

To see full installation process, please follow this article:

Here, I am using Visual Studio Enterprise 2015 version. You can use any other version too like, Visual Studio Professional 2015.

Visual Studio
                                                      Figure 1

After completing the installation process, please open visual studio 2015.

visual studio 2015 image
                                                                      Figure 2

Now click on the File menu and then click on the New menu and select Project from there. Then you will see the project template menu like below figure. Then select JavaScript and click on the Apache Cordova Apps section. Then select Blank App (Apache Cordova from the app template section. Now write a name of the project and then click OK button.

Blank App
                                                                        Figure 3

Now a new Cordova project will be created and then you will see newly created Cordova files in the solution explorer. Here in the merges folder, you will see different platform related JavaScript libraries. In the dependencies section you will see Cordova client side package manager related files like npm and bower files. If you install any Phonegap plugin, then a new plugin folder will appear and plugin codes will be on that folder. On the res folder you will see resource files like icons for different platforms, android ant property files and platform based screen images. On the www folder we will see our HTML5, CSS and JavaScript files. We will mostly write our codes here. On the config.xml file you can change configuration of your project, add or remove plugins and set names and versions for different platforms.

Scripts
                                 Figure 4

Now click on the index.html page. Then you will see below codes for index.html.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.   
  6.     <!--  
  7.         Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.  
  8.         For details, see http://go.microsoft.com/fwlink/?LinkID=617521  
  9.     -->  
  10.     <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">  
  11.     <title>BarcodeReader</title>  
  12.   
  13.     <!-- BarcodeReader references -->  
  14.     <link href="css/index.css" rel="stylesheet" />  
  15. </head>  
  16. <body>  
  17.     <p>Hello, your application is ready!</p>  
  18.   
  19.     <!-- Cordova reference, this is added to your app when it's built. -->  
  20.     <script src="cordova.js"></script>  
  21.     <script src="scripts/platformOverrides.js"></script>  
  22.   
  23.     <script src="scripts/index.js"></script>  
  24. </body>  
  25. </html>  
Listing 1

In the above code, src=”cordova.js” is referencing updated installed Cordova library and src=”scripts/platformOverrides.js” file is referencing the library platform independence of this application.

As we are already created a Cordova cross platform app. Now we will create a barcode scanner app. Click on the confix.xml file. You will see below screen.

created a Cordova cross platform app
                                                                                                Figure 5

Now, if you click on the Platforms section, then you will see current installed cordova version of this project. Now click on the Plugins section and then you will see a list of core plugins like below screen. You can add any plugin by clicking on the “Add” button.

Platforms section
                                                                                 Figure 6

There is a cross platform Barcode Scanner library for Cordova and Phonegap platform in Git.
Please follow this link to see the Git repository of that Barcode Scanner plugin.

Link: cross-platform BarcodeScanner for Cordova / PhoneGap.

cross platform Barcode Scanner library
                                                                        Figure 7

Now we will add that plugin in our application. Select Custom section from the Plugins like below. Select Git radio button and paste the Git repository link. Then click on the arrow button on the left.

plugin
                                                                                 Figure 8

Then you will see the Barcode Scanner plugin on the right side of the config.xml page. Click “Add” button to add this plugin in your Cordova app.

see the Barcode Scanner plugin
                                                                        Figure 9

After few seconds you will see this message “This plugin was successfully installed”. If you want to remove the plugin then you just need to click on the remove button. But, don’t remove it now. We will use this plugin to develop our Barcode Scanner app.

Barcode Scanner
                                                    Figure 10

Now click on the Installed tab on the Plugins section and you will see that BarcodeScanner plugin is already installed in your project.

Installed tab on the Plugins
                                          Figure 11

As we will use our mobile phone camera to capture the barcode and scan it add two more plugins from the Core plugins tab. Install Camera plugin and Capture plugin from the Core plugins section.

capture the barcode
                                                                                    Figure 12

Now add a button in the body section of the HTML page like below code.
  1. <button id="scan" onclick="scan()" style="width:100px; height: 30px;">Scan</button>  
Listing 2

Now add below JavaScript function code with in the head tag in the script section. Here, we are calling the barcode scanner plugin through cordova.plugins.barcodeScanner.scan API and when we call this scan section, a default camera capture task will appear on the screen and then, the user will scan the barcode. If our app successfully find a barcode within the frame of camera capture then the result will be true and then, we will get barcode value and other information through a popup window.
  1. function scan() {  
  2.     cordova.plugins.barcodeScanner.scan(  
  3.         function (result) {  
  4.             alert("We got a barcode\n" +  
  5.                 "Result: " + result.text + "\n" +  
  6.                 "Format: " + result.format + "\n" +  
  7.                 "Cancelled: " + result.cancelled);  
  8.         },  
  9.         function (error) {  
  10.             alert("Scanning failed: " + error);  
  11.         }  
  12.     );  
  13. }  
Listing 3

Here is the full code of index.html page.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.   
  6.     <!--  
  7.         Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.  
  8.         For details, see http://go.microsoft.com/fwlink/?LinkID=617521  
  9.     -->  
  10.     <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">  
  11.     <title>BarcodeReader</title>  
  12.   
  13.     <!-- BarcodeReader references -->  
  14.     <link href="css/index.css" rel="stylesheet" />  
  15.     <script>  
  16.         function scan() {  
  17.             cordova.plugins.barcodeScanner.scan(  
  18.                 function (result) {  
  19.                     alert("We got a barcode\n" +  
  20.                         "Result: " + result.text + "\n" +  
  21.                         "Format: " + result.format + "\n" +  
  22.                         "Cancelled: " + result.cancelled);  
  23.                 },  
  24.                 function (error) {  
  25.                     alert("Scanning failed: " + error);  
  26.                 }  
  27.             );  
  28.         }  
  29.   
  30.     </script>  
  31. </head>  
  32. <body>  
  33.     <p>Hello, your application is ready!</p>  
  34.     <button id="scan" onclick="scan()" style="width:100px; height: 30px;">Scan</button>  
  35.     <!-- Cordova reference, this is added to your app when it's built. -->  
  36.     <script src="cordova.js"></script>  
  37.     <script src="scripts/platformOverrides.js"></script>  
  38.   
  39.     <script src="scripts/index.js"></script>  
  40. </body>  
  41. </html>  
Listing 4

Now build this solution and you will see that build is successful and no error found.

build this solution
                                                                           Figure 13

If you are not using updated npm and node Js version they, you may see few error and build failed message. Then, update node Js and npm and then, you will see that the build is succeeded.
You can select any platform from the combo box beside debug. You can select Android, iOS, Windows Phone etc. You can build Windows phone and Android cross platform apps through this process. But, to build your app for iOS platform, you need to connect your visual studio with a mac machine. Here, I have selected Android platform and connected my android device through USB cable with my pc.

selected Android platform
                                             Figure 14

Now select the Device type from the device section just beside platform section. You can deploy your cross platform app in your real android device if you select Device from the combo box. You can also select Nexus 7, Nexus S or, Nexus Galaxy Ripple emulators to run your developed apps.

select the Device type
                                                   Figure 15

After deploying this Barcode Scanner app on my android device, I will see below screen on my mobile device.

scan button
                        Figure 16

Now click on the scan button, then you will see below camera capture task screen Now, take your mobile device and scan any barcode you want.

scan any barcode
                       Figure 17

I will scan below barcode to get the barcode value of this barcode by scanning it using my newly developed barcode scanner app.

barcode
                                      Figure 18

On the below screen you can see that I am capturing the above barcode image through my mobile device app. On the below screen you can see this message, “Place a barcode inside the viewfinder rectangle to scan it”.

barcode inside the viewfinder
                           Figure 19

In the below screen, you can see that our barcode scanner apps has successfully found a barcode in the camera capture frame. Whenever our app will found a barcode, the texts at the bottom of the screen will change from “Place a barcode inside the viewfinder rectangle to scan it” to “Found Product”.

Found Product
                           Figure 20

Then you will see a popup message with a message like “We got a barcode”, barcode value and Format of the barcode. Yah, that’s it. We have easily developed a Barcode Scanner app in just few minutes. Congrats!

We got a barcode
                          Figure 21

Hopefully, this helps you to understand developing powerful Cross Platform Application with Visual Studio 2015. Visual Studio 2015 support different kinds of OS targeted application with great performance. So, make beautiful Cross Platform Application and cut down your work stretch unlike before. Happy coding!

Download the full source code.

 


Similar Articles