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:

Visual Studio Enterprise 2015 IDE Installation Process

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

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.

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.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
For details, see http://go.microsoft.com/fwlink/?LinkID=617521
-->
<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 *">
<title>BarcodeReader</title>
<link href="css/index.css" rel="stylesheet" />
</head>
<body>
<p>Hello, your application is ready!</p>
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
</body>
</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.

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.

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.

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.

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.

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.

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.

Figure 12

Now add a button in the body section of the HTML page like below code.

<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.

function scan() {
cordova.plugins.barcodeScanner.scan(
function (result) {
alert("We got a barcode\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled);
},
function (error) {
alert("Scanning failed: " + error);
}
);
}

Listing 3

Here is the full code of index.html page.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
For details, see http://go.microsoft.com/fwlink/?LinkID=617521
-->
<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 *">
<title>BarcodeReader</title>
<link href="css/index.css" rel="stylesheet" />
<script>
function scan() {
cordova.plugins.barcodeScanner.scan(
function (result) {
alert("We got a barcode\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled);
},
function (error) {
alert("Scanning failed: " + error);
}
);
}
</script>
</head>
<body>
<p>Hello, your application is ready!</p>
<button id="scan" onclick="scan()" style="width:100px; height: 30px;">Scan</button>
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>

Listing 4

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

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.

Figure 15

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

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.

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”.

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”.

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!

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.

25 Comments

Join the conversation! Your thoughts help the community grow.

João Rosseto7y ago
Muito obrigado, o seu artigo me ajudou muito, pois ainda n?o tinha feito nada com o Visual Studio. Que DEUS te aben?oe.
Muhammad Fayas7y ago
It did works in my jquery cordova android app. but what I needed is to read barcode with an external usb handheld barcode scanner. How to detect it through jquery? Could you help me out?
- João Rosseto7y ago
  Neste caso o que precisa eh um input type="text" autofocus normal, pois o leitor externo vai ler o codigo e a saida do coletor sera texto via USB.
Mehul Prajapati8y ago
Hi, Rahat. I have issue in cordova app development using visual studio 2015 and framework7. so i need your help.http://www.c-sharpcorner.com/forums/unicode-text-issue-with-html-sub-pages-in-cordova
sivakumar murugesan9y ago
I followed this code scan button event is working fine. But scanner not working pls help ..
Daniel Paiva9y ago
Rahat!! Could you help us out giving a hint of what might have gone wrong to all of us?
- Rahat Yasir9y ago
  Thanks, i'll check it and come back to you asap
James Taylor9y ago
I have it working up to figure 15, my screen has the background in stripes. And when I click the scan button it doesn't do anything?
- Daniel Paiva9y ago
  Me too! ...............
- Yanjuan Duan9y ago
  Hi James, same problems her. Have you figured out how to do it?
Former member11y ago
good one
vitor antunes11y ago
the source code is not available
- Daniel Paiva9y ago
  Yep. Where's the source code?
Santhakumar Munuswamy11y ago
Good one
Rakesh11y ago
Good work sir
Gopi Chand11y ago
Commendable work
Sabyasachi Mishra11y ago
Nice Share.
Jaipal Reddy11y ago
nice one.
Mohammed Ibrahim11y ago
nice
Sujeet Suman11y ago
Nice Article.................
Sourabh Somani11y ago
Nice article. :)
Sibeesh Venu11y ago
Nice Share
Rajeesh Menoth11y ago
Good One Sir
Humayun Kabir Mamun11y ago
Nice...
Nilesh Jadav11y ago
Great work sir