Adding native utility meter reading capabilities into a Fiori App with Anyline
This is the second blogpost in my Anyline blog-series. In the previous blogpost I’ve shown how to integrate MRZ functionality to a Fiori App. Using Cordova as a container makes it easy to integrate native capabilities to a Fiori App. In this blogpost I am explaining how to add utility meter reading capabilities to your Fiori App. Utility meter reading means gas, electricity, water and heat. Using this features add a lot of room for improving & reinventing existing business process and even implement completely new processes. Before jumping into the details of the implementation I want to explain some basics on SAPUI5 / Fiori / OData.
SAPUI5 vs Fiori
From my experience the difference between SAPUI5 and Fiori causes a lot of confusion on customers. Therefore i want to explain the difference in very simple words. SAPUI5 is a clientside HTML5 framework like Angular.js. Clientside HTML5 framework means that the User Interface is completely generated in the browser. Only the data to be displayed has to be loaded from the server. This happens via so called OData Services. More information on SAPUI5 can be found at the official documentation.
SAP Fiori uses SAPUI5. SAP Fiori is the design language that brings great user experiences to enterprise applications. Based on user roles and business processes. SAP Fiori is not a new technology or programming language you have to learn. There are five points that qualify an (SAPUI5 based application) as Fiori Application:
- Role based: Designed for you, your needs, and how you work
- Adaptive: Adapts to multiple use cases and devices
- Coherent: Provides one fluid, intuitive experience
- Simple: Includes only what is necessary
- Delightful: Makes an emotional connection
An up2date version on Fiori can be found at the SAP Fiori Design Guidelines.
OData
OData is the ODBC of the Web. It is based on a REST architecture and allows to provide a complete datamodel containing multiple entities and relations between the entities in a single service. OData is an OASIS Standard that is widely adopted by enterprise software vendors. Comprehensive information on OData can be found at odata.org
Anyline
Anyline is an Austrian Startup that provides an groundbreaking OCR SDK for Mobile Devices offering Meter Reading for Utilities, License Plate Reading, Passport MRZ reading…
Possible Use cases
There are a lot of use cases that come into my mind when thinking about the Anyline Meter Reading plugin.
- Meter Reading Customer self service
- Gapless Maintenance documentation (e.g. Meter replacement)
- Energy Efficiency Apps
- Private documentation and monitoring of Energy consumption
Getting started
Integrating the native device capabilities into an SAP Fiori App is possible via Apache Cordova / SAP Kapsel. The tools required for covering the whole lifecycle are
- WebIDE
- Kapsel SDK (SAP Mobile Platform SDK, latest version)
- Hybrid Application Toolkit (HAT)
- XCode
- Anyline SDK
The basics on how to configure the WebIDE were covered in my last blogpost.
Create a SAPUI5 Application in the WebIDE
To get started I created a new application in the WebIDE using the SAPUI5 Application Template. Please do not use the Mobile Application Templates as they were previously deprecated.
The project structure is the same like in my previous blogpost but this time I using a separate file for the Anyline license. The file is named anyline.json and it is located in the folder config. Your are free to use a different name for the folder. The following screenshot shows the structure of the project in the WebIDE.
This content of the anyline.json is a JSON Array. The content of the file is partially shown in the following screenshot:
The View
The view is minimalistic with a Button in the Footer Toolbar only.
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml" controllerName="at.uiit.MobileMeterReading.controller.CaptureReading">
<App>
<Page title="Capture Reading" showNavButton="true" navButtonPress="onNavBack" id="page">
<content/>
<footer>
<Toolbar>
<ToolbarSpacer/>
<Button text="{i18n>capture.button}" icon="sap-icon://measure" press="onCaptureReading"/>
</Toolbar>
</footer>
</Page>
</App>
</mvc:View>
The controller
In the onInit() method I subscribe for the showData event and I read the Anyline configuration. The easiest solution is to use the JSONModel class. As the configuration is read asynchronous the content of the file is not available immediately after the loadData method is called. Therefore the assignment of the configuration to the instance variable named config is done in the callback-function of the RequestCompleted event.
config: null,
onInit: function() {
var t = this;
var oLicenseModel = new sap.ui.model.json.JSONModel();
oLicenseModel.attachRequestCompleted(function(){
t.config = oLicenseModel.getData();
});
oLicenseModel.loadData("config/anyline.json");
},
In the implementation onCaptureReading of the press EventHandler of the Button I am calling the Anyline cordova plugin. The plugin requires the following parameters:
- onResult: the callback for a successful scan
- onError: the callback for an error situation or if the scanning was cancelled by the user
- AnylineSDK: ensures that the anyline-sdk is called
- scanMode: “MRZ“, “BARCODE“, “ANYLINE_OCR“, “AUTO_ANALOG_DIGITAL_METER“
- configuration: containing the license key and the plugin configuration
I am using the scanMode AUTO_ANALOG_DIGITAL_METER as I want to support both analog and digital meters.
onCaptureReading: function() {
cordova.exec(this.onResult, this.onError, "AnylineSDK", "AUTO_ANALOG_DIGITAL_METER", this.config);
},
In the error callback I am simply using a MessageBox to show the error message.
onError: function(oError) {
MessageBox.error(oError, {
id: "noChangesInfoMessageBox"
});
}
In the euccess callback I am showing the result from the Anyline plugin in a Message box. Additionally I am showing a message toast with the confidence of the scan result.
onResult: function(oResult) {
var sResult = JSON.stringify(oResult);
MessageBox.information(sResult, {
id: "noChangesInfoMessageBox"
});
var sText = "Scan successfull. Confidence: " + oResult.confidence;
sap.m.MessageToast.show(sText, {
duration: 3000
});
}
Hybrid App Configuration
The final step before the App can be built is the hybrid App Configuration in the project settings. Please verify that the AppID matches with the AppID you used for creating the Anyline License.
We have to provide the following details:
- App Name
- AppID
- Description
- Version
I’ve enabled the project for the iOS Platform only. In order to get Anyline plugin up & running I had to select the AnylineSDK from the Custom plugin section.
Generating the iOS App
The final step is the generation of the Hybrid Application project. This requires a running HAT on the local Mac and an XCode installation. The prerequisites are checked during the HAT installation. The generation is triggered via the context menu of the project. For more details visit my previous blogpost.
Conclusion
I hope you enjoyed reading this blogpost. I know that there is a lot of space for improvement for this application especially on the User Interface part, but I wanted to focus on showing how easy it is to add native Meter Reading capabilities to a Fiori App. From my point of view Anyline is the best option if you add OCR to your Fiori Apps. Anyline even works if you are offline.
I’ve successfully tested the App with the following Meters:
- Electricity Smart Meter (Digital)
- Electricity Meter (Analog)
- Water Meter (Analog)
- KNX Power Measuring Sensor (Digital)
Hi Martin, thanks for the article. In the part SAPUI5 vs Fiori, you nicely explain the SAPUI5 part, but nothing about the Fiori. I still don't really derstand the difference. When I click on the link you provided to Fiori, the description says "The original SAP Fiori user interface for web apps based on the SAPUI5 framework" Does it mean Fiori is just a SAP theme developped on SAPUI5 and that behind the scenes Fiori and my own SAPUI5 app work exactly the same? Thanks
Hi,
thanks for your feedback. I've updated the post with the Fiori part 🙂
BR,
Martin
Hi, first of all, thanks for the tutorial. The resources on mobile development with SAP are scarce. Still, I don't understand some things. For example, you have a part, where you just "execute" the plugin and then magically a scan happens? Where is the camera implementation? Where does the data transfer happens?
Thanks and BR
Daniel
Hi Daniel
Thanks for your feedback. The execute tells cordova to call the plugin. The plugin implements the native scan functionality for iOS and android.
There is a JavaScript bridge that defines the Interface being used in SAPUI5.
Hope this clarifies some things.
Best regards
Martin