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.

Once the Node js installed on the machine,looks like below screen shot,CordovaInstall.jpg

once all the above prerequisites software are installed on our machines we need to execute the following commands sequentially.

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

   CordovaCreate.png

     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

/wp-content/uploads/2014/07/nfcpluginstall_498207.jpg

3) Import the project into Android Developer Tools

     Import created Kapsel Project into ADT work space to generate the NFCTagReader.apk file, /wp-content/uploads/2014/07/importandriod_498208.jpg

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

controllerMethod.jpg

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

/wp-content/uploads/2014/07/card1_498224.jpg

Once the application is launched on the mobile device, we can see the UI5 screen with Button,AppRun.jpg

Tap on the button to initiate the NFC event to get the NFC Beam and touch the NFC enabled card with phone,

Screenshot_2014-07-15-12-23-34.png

Here we go the Message box will be displayed the NFC ID.

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. Tugce Aydogdu

    Hey I have a question about the section 4. How do you create the UI5 view and also create the reference? Could you please explain. Thanks in advance.

    (0) 
    1. balaji bodagala Post author

      right click on the view folder and create xml view, more information : https://sapui5.netweaver.ondemand.com/1.34.7/docs/guide/1409791afe4747319a3b23a1e2fc7064.html

       

      (0) 
  2. Tugce Aydogdu

    Hey I have another question about the section 3. Do you import just the android folder or the whole NfcTagReader folder? I imported just the android folder. Is this the reason, why my structure looks like this? I hope you can help me. Thanks in advance.

    (0) 

Leave a Reply