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)