This Blog explains about how to Integrate NFC Plug-in with Kapsel and how to read the NFC tag using SAPUI5 mobile application.for our understanding, entire process will be explained in five sections,
1) Kapsel Setup & Android Project Creation.
2) Add NFC plugin to Kapsel.
3) Import the project into Android Developer Tools.
4) Create the SAPUI5 front end to the application.
5) Read the NFC tag using the UI5 application.
1) Kapsel Setup & Android Project Creation
Hybrid Mobile apps to get the native device functionality we have to use kapsel or Cordova,UI5 applications need to integrate with Apache Cordova API to render screens inside the Cordova Container.Briefly explained the setup of Kapsel.Here we are going to see the check list for the setup.
- Set the JAVA_HOME environment variable
- Install the Android Developer tools : http://developer.android.com/sdk/index.html , Download the zip file and extract the file in the hard drive.
- Install the GIT environment : http://msysgit.github.io
- Install the Ant tool : http://ant.apache.org/manual/install.html
- Install the Node. js : http://nodejs.org/download/
Once the Node js installed on the machine,looks like below screen shot,
once all the above prerequisites software are installed on our machines we need to execute the following commands sequentially.
- open the command prompt or if it is Mac machine go to terminal execute the command,
npm install –g cordova
2. Now we have to create the Cordova Project
2.1) Open the Command Prompt type the command :cordova create NfcTagReader com.example.nfctag "NfcTagReader"
above command cordova create will create Kapsel project with name 'NfcTagReader' and package name 'com.example.nfctag'
Execute the another command to add the different platform for this Cordova project, Cordova NFC Plugin will Supports Windows Phone 8,BlackBerry 10 and Android,but in our example we are creating Android project, because it has largest market using by android users.
2.2) continue the command : cordova -d platform add android
2) Add NFC plugin to Kapsel
2.1) Now Android project is ready to run the application on the mobile device, we have to add the project to the NFC plugin,
2.2) Open the command prompt at NfcTagReader folder type the command : cordova plugin add https://github.com/chariotsolutions/phonegap-nfc
3) Import the project into Android Developer Tools
Import created Kapsel Project into ADT work space to generate the NFCTagReader.apk file, 
4) Once the project imported and need to create UI5 view for this project,we have to create the SAPUI5 reference to the project to get the view inside the page component.Here is the detailed guide to create the project in UI5, In this example i have created the xml view in the bootstrap file,
<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.ui.commons"
data-sap-ui-theme="sap_bluecrystal">
</script>
<script>
sap.ui.localResources("NfcTagReader");
var app = new sap.m.App({initialPage:"idTagReader"});
var page = sap.ui.view({id:"idTagReaderView",viewName:"NfcTagReader.NfcTagReader", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>
5) go to the created xml view and add the button to tigger the nfc event: <Button id="but1" text="Tap to get the NFC Id" tap="onTap"></Button>
6) Add the method to button event
we are reached the end of our application, we have to connect the NFC enabled mobile device and deploy the application,one of the question here is how to identify the NFC tag to test the application, lot of NFC tags are available in the market, as well as we can see the most the bank cards will have the symbol "PayPass".
Once the application is launched on the mobile device, we can see the UI5 screen with Button,
Tap on the button to initiate the NFC event to get the NFC Beam and touch the NFC enabled card with phone,
Here we go the Message box will be displayed the NFC ID.