Hello world Phonegap(Android) & NFC


This  app you create will read just the uniqueID of any tag it sees. (When we move my phone to NFC tags it read id tag and display id to screen ).

Step 1 : Download and install Node.js. http://nodejs.org/download/

If you have any trouble running Node from the command line in Windows after you install it, you may need to log out and log in again for its PATH changes to take effect.

d1

Note : Set proxy for node js

Step 2 : Check variables path:
  1. Dowload ant apache set path : %ANT_HOME%\bin;
  2. set variable path for android : %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;
  3. java jdk : %JAVA_HOME%\bin;

Step 3 : Install Cordova CLI for PhoneGap

Run the following command in a Command Prompt window

  • npm install -g cordova

Check cordova on Command Prompt window

d1

Step 4 :  Create a PhoneGap project

Run the following command in a Command Prompt window

cd => path forder we want create project and run command as

  • cordova create project-location package-name app-name

Example : create project HelloNFC

d1

You’ll then need to cd into the project directory and add the Android platform:

  • Android : cordova platform add android
  • IOS : cordova platforms add ios

d1

To build and run project cordova run command :

  • cordova build android.
  • cordova run.

To ensure that project phonegap run ok. Open emulator android and run project.

d1

Screen run success:

device-2014-04-26-112744

 

 

Step 5 : Installing the NFC Plug-In
There are a number of changes needed to add NFC support to your project. These are
all automated by the command
  • cordova plugin add /path/to/plugin

plugin NFC to project.

Note : If plugin can cause error to ensure we can download source and plugin it to project as

  • cordova plugin add ..\path\source-nfc
  • Message confirm plugin => Installing com.chariotsolutions.nfc.plugin (android)….

We veryfi any forder for plugin as :

  1. YOUR_PATH\HelloNFC\plugins => forder com.chariotsolutions.nfc.plugin esixts
  2. The file config NFC
  • config.xml

<feature name=”NfcPlugin”>
<param name=”android-package” value=”com.chariotsolutions.nfc.plugin.NfcPlugin” />
<param name=”onload” value=”true” />
</feature>

  •  AndroidManifest.xml

<uses-permission android:name=”android.permission.NFC” />
<uses-feature android:name=”android.hardware.nfc” android:required=”false” />

 

Step 6 : Writing the NFC Reader using read UID NFC tags

– Open file index.html in the www directory


<!DOCTYPE html>
<html>
<head>
<title>Phonegap & NFC</title>
</head>
<body>
 <div class="app">
 <div id="messageDiv"></div>
 </div>
 <script type="text/javascript" src="cordova.js"></script>
 <script type="text/javascript" src="js/index.js"></script>
 <script type="text/javascript">
 app.initialize();
 </script>
</body>
</html>

– Open file index.js in the www/js directory


var app = {
 // Application Constructor
 initialize: function() {
 this.bindEvents();
 console.log("Starting NFC Reader app");
 },
 // Bind Event Listeners
 bindEvents: function() {
 document.addEventListener('deviceready', this.onDeviceReady, false);
 },
 // deviceready Event Handler 
 onDeviceReady: function() {
 //app.receivedEvent('deviceready');
 nfc.addTagDiscoveredListener(
 app.onNfc, // tag successfully scanned
 function (status) { // listener successfully initialized
 app.display("Tap a tag to read its id number.");
 },
 function (error) { // listener fails to initialize
 app.display("NFC reader failed to initialize " +
 JSON.stringify(error));
 }
 );
 },
 
 onNfc: function(nfcEvent) {
 var tag = nfcEvent.tag;
 app.display("Read tag: " + nfc.bytesToHexString(tag.id));
 },
 
 display: function(message) {
 var label = document.createTextNode(message),
 lineBreak = document.createElement("br");
 messageDiv.appendChild(lineBreak); // add a line break
 messageDiv.appendChild(label); // add the text
 },
 
 
 clear: function() {
 messageDiv.innerHTML = "";
 },
 
 
};

Function:

bindEvents : bind any events that are required on startup to listeners:

The nfc.addTagDiscovered Listener() tell with NFC plug-in to notify your app when any NFC tag is read.
Succeeds => call the onNfc() function. When the listener is initialized, it’ll let you know, and when it fails, it’ll give you failure messages.

The onNfc() function takes the tag read in an NFC event and prints it to the screen using display().

Step 7 : Build and run project HelloNFC

If run success . When deivce move near tag it will read id tag and display to Screen.

Screen initialize => Screen when divices read id tags

device-2014-04-26-121701                             device-2014-04-26-121904

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: