One question that I get very often form my customers is: "How can I use all this mobile device functions like camera, GPS and all the other stuff in a Web Application?".
As you might know the browser runs the Webpage in a sandbox for safety reasons. Direct access to devices like camera is not possible. Because of that reason we need to run the webpages in a native app.
This is exactly was Apache Cordova does. You can run your Webpages in a native app and access all devices via JavaScript. One other big advantage is, that all pages are on your device, so the performance is higher than in a browser.
For a prove of concept I choose the SAP Fiori like App from this great tutorial:
Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises
The Idea
After finishing this Exercises I have a nice Fiori like app that is running in a browser. What I want to do is to use the camera of my iPad as a Barcode scanner. This are two tasks in one step. First we have to use the camera to scan the barcode an second the barcode must be translated from a picture to a value. That seems to be a good testcase.
I was surprised how easy it was to build this function. I will show the steps and the needed code.
At the end the application will look like this:
After pressing the Camera next to the Search Field, the Camera will be started and you can start to scan the Barcode. The result will be written into the Search Field and filter the list.
The Environment
Some information of my environment. I run Eclipse on a Mac. We bring the App on an iPad and using the camera of the iPad. To do this you need to install Xcode on you Mac and you need a membership of the Apple Developer Program, what costs 80 Euro for one year.
This app won't run in the simulator of Xcode, because you can't use the camera in the simulator.
I expect that the shown solution also runs on android or other devices, but I didn't test it. I would be happy for every feedback.
Create a Cordova Project from our SAP Fiori like App
We start at the point when you finishing the development of the SAP Fiori liked App. The next step is to install Apache Cordova. How to do this and how to create a Cordova Project is described on the following page:
Installing and running the command line interface of Apache Cordova
The next steps are very easy and straight forward. Copy all files of the "WebContent" folder of your Eclipse project into the "WWW" Folder of your Cordova project. Furthermore we need the resource files of SAPUI5. What I have done is to download the OPENUI5 runtime from OPENUI5 on GITHub.This project is able to run with OPENUI5, what is even more cooler.
Copy the recource Folder of OPENUI5 into the "WWW" Folder of the Cordova project. There are probably better solutions than to copy the folder in every project, but for this proof we use this very easy solution.
We are already at the point, where you can run out Fiori like app as a native app on your device. With the following command Cordova will build an iOS Xcode project:
$ cordova platform add ios
Open the new Xcode project that is created in the folder "platforms" of your Cordova project and run it. You can run it direct on your iPad or in the simulator. At this point we can run it in the simulator, because we don't use the Camera so far.
If you want to build a native app on other platforms you can create it in the same way.
If you added the platform once, you should never change the source in the platform folder. After changing the source in the "WWW" folder of your Cordova project, you can update the platform depended code with:
$ cordova build ios
The Barcode scanner
Now we can start to develop the Barcode scanner. Actually we don't develop it by our own, we use a Cordova plugin. First of all you have to add the Plugin into your Cordova project. The following page is a good starting page, if you need a Barcode scanning example that is running on its own:
As described on this page, we add the needed Plugin to our Cordova project with the following command line
$ cordova plugins add https://github.com/wildabeast/BarcodeScanner.git
Now we are at the most interesting part. We want that our SAP Fiori like App and the Barcode Scanner are playing together.
First we have to change the index.html. We have to add the Cordova Script
The next step is to add the Button next to the Search field. We do this in the Master.View.xml
The last but important changes are in Master.Controller.js.
- We build a handle for the Camera button
- We separate the filter in an own function, that it can be called after the scan
- We use sap.m.message.toast to output messages
Here are the changes of Master.Controller.js form the top
First we add the sap.m.MessageToast library
Second we change the handleSearch, that it calls our new function doFilter. The app should run without this change, but I love clean code:
Next we build the new handleCamera, that is called after pressing the Camera button. Here you can see that most of the work is done by the Plugin.
And last we build our new function doFilter that is called by handleSearch and handleCamera
That's it!
Copy all that changes into your Cordova project, build the platform depended code again as describe, start Xcode and run this project on your iPad.
Have fun!
- SAP Managed Tags:
24 Comments
