SAP Fiori Mobile

什么是混合移动应用?

混合式移动应用是一种带有自己浏览器的web应用，可以运行在任何移动平台上(Android、iOS、Windows等)。混合应用程序的最大优势是它有一个单一的代码库，而原生应用程序必须针对每个平台重新编写。

Apache科尔多瓦是一个用于开发混合应用程序的开源框架。为了使用本地功能(除了那些已经通过hmtl5提供的功能)，应用程序可以使用插件。这些插件处理特定于平台的代码，可用于单个或多个平台。例如，插件可以访问GPS、加速计或相机。

SAP已经编写了自己的插件，命名为Kapsel，以处理登录和脱机OData之类的事情。这些为混合应用程序带来了企业特色。

Fiori Mobile是什么?

直到最近，SAP推荐的方法是使用混合应用程序工具包(HAT)来构建混合应用程序。应用程序构建是在开发人员的PC或Mac上进行的。HAT以难以设置而闻名，这阻碍了SAP生态系统中混合应用程序的使用。

Fiori Mobile的核心是云构建服务，因此不需要安装HAT。我们可以从Web IDE触发构建。我们指定我们想要打包的(已经部署的)Fiori应用程序，几分钟后，我们可以下载.apk (Android)和.ipa (iOS)文件，准备安装到移动设备上。

这有用吗?

云构建服务运行良好。它通常在8分钟内为两个平台构建，没有任何问题。由于技术问题而导致构建失败的情况只有几次。

这项技术的某些方面还不成熟。一个方面是离线OData特性。当使用Fiori Mobile时，事情与更传统的混合和本地应用程序不同。目的地就是一个例子，因为Fiori Mobile应用程序使用一个引用SAP Cloud Platform (CP)门户服务的生成目的地。

我的观点不是离线OData看起来不成熟，而是离线功能在与Fiori移动应用程序一起使用时可能会很棘手。我们仍在接受SAP的帮助，以优化我们应用程序的离线功能。这是一个遗憾，因为共享数据和处理增量请求，例如，是两个功能，证明了“中间件”的方法脱机SAP已经采取。

身份验证也是一个挑战。在之前的项目中，我使用了菲奥里客户与SAP Cloud Identity(现在正式SAP云平台身份认证)．Fiori Client将用户名和密码存储在设备上，这样用户就不需要在每次会话超时时都输入它们。我们的Fiori手机应用还没有做到这一点。

• 注册一个免费帐户SAP Hana云平台，并从您收到的邮件激活链接激活您的帐户。
• 一旦你激活了你的帐户浏览HCP驾驶舱。
• 选择试用区域并打开您的个人试用帐户。

要创建Fiori移动应用程序，您将需要使用门户网站，SAP Web IDE而且菲奥里移动服务。

进入服务选项卡找到这些服务，如果它们被禁用，则启用它们。

要创建Fiori应用程序，我们需要创建并发布应用程序将部署的站点。

去门户服务单击“转到服务”。

在您的浏览器中，将打开一个新的选项卡。在这个新窗口中转到网站目录选项卡，单击“创建站点”。

将显示一个弹出窗口。输入您的网站的名字,选择SAP Fiori发射台，单击“创建”

在此之后，您将被重定向到SAP Fiori配置驾驶舱。关闭选项卡，回到Portal Service的Admin Space。

现在我们需要发布这个网站，并设置为默认值。

一旦我们创建和发布网站，我们可以创建我们的Fiori项目。

再次转到服务选项卡，打开SAP Web IDE服务，然后单击转到服务

一个新的标签将被打开。从这里，我们将开始创建我们的Fiori项目。

• 从模板中单击新建项目

• 在模板选择中选择SAPUI5应用程序

• 设置项目名称

• 选择“视图类型”并设置“视图名称”。在我们的示例中，我们将使用XML View。单击Finish，您的Fiori项目就创建了。

在SAP Web IDE工作区中，我们可以看到Fiori项目包含的所有文件。

开放Component.js文件。

Component.js是我们应用程序的第一个点，我们可以说它是一个索引，它封装了我们所有应用程序的细节，即视图名称，路由细节，主视图，应用程序类型(全屏或SplitApp)，应用程序服务配置等。

在这里初始化函数，我们将配置我们的插件。设置我们需要的属性，设置回调函数，调用一些方法，等等。

sap.ui.define(["sap/ui/core/UIComponent"， "sap/ui/Device"， "MyFristFioriApp/model/models"]， function(UIComponent, Device, models) {"use strict";var oEventBus = sap.ui.getCore().getEventBus();var scannerIsInitialized = false;返回UIComponent.extend(“MyFristFioriApp。Component"， {metadata: {manifest: "json"}， /** *该组件在应用启动时由UI5自动初始化，并调用init方法一次。* @public * @override */ init: function(){//调用基组件的init函数UIComponent.prototype.init。应用(这个参数);//设置设备模型this.setModel(models.createDeviceModel()， "device");if (!scannerIsInitialized) {scannerIsInitialized = true;window.readerConnected= 0; window.scannerActive = false; cmbScanner.addOnResume(function(result) { cmbScanner.setAvailabilityCallback((readerAvailability) => { if (readerAvailability === cmbScanner.CONSTANTS.AVAILABILITY_AVAILABLE) { oEventBus.publish("ScanView", "SetConnectionStatus", { statusText: "AVAILABLE" }); cmbScanner.connect((result) => { }); } else { oEventBus.publish("ScanView", "SetConnectionStatus", { statusText: "NOT AVAILABLE" }); } }); if (Device.os.android) { cmbScanner.connect((result) => { }); } }); cmbScanner.addOnPause(function(result) { if (Device.os.android) { cmbScanner.disconnect(); } cmbScanner.setAvailabilityCallback(); }); cmbScanner.setPreviewContainerPositionAndSize(0, 0, 100, 50); cmbScanner.setConnectionStateDidChangeOfReaderCallback((connectionState) => { if (connectionState === cmbScanner.CONSTANTS.CONNECTION_STATE_CONNECTED) { oEventBus.publish("ScanView", "SetConnectionStatus", { statusText: "CONNECTED" }); if (window.readerConnected != connectionState) { cmbScanner.setSymbologyEnabled("SYMBOL.DATAMATRIX", true); cmbScanner.setSymbologyEnabled("SYMBOL.C128", true); cmbScanner.sendCommand("SET TRIGGER.TYPE 2"); } var sdkKEY = ""; if (Device.os.android) sdkKEY = this.getModel("i18n").getProperty("MX_MOBILE_LICENSE_ANDROID"); else sdkKEY = this.getModel("i18n").getProperty("MX_MOBILE_LICENSE_iOS"); cmbScanner.registerSDK(sdkKEY, (res) => { switch (res) { case cmbScanner.CONSTANTS.REGISTER_RESULTS.REGISTRATION_OK: break; case cmbScanner.CONSTANTS.REGISTER_RESULTS.REGISTRATION_INVALID_KEY: break; case cmbScanner.CONSTANTS.REGISTER_RESULTS.REGISTRATION_INVALID_CHECKSUM: break; case cmbScanner.CONSTANTS.REGISTER_RESULTS.REGISTRATION_INVALID_APPLICATION: break; case cmbScanner.CONSTANTS.REGISTER_RESULTS.REGISTRATION_INVALID_SDK_VERSION: break; case cmbScanner.CONSTANTS.REGISTER_RESULTS.REGISTRATION_INVALID_KEY_VERSION: break; case cmbScanner.CONSTANTS.REGISTER_RESULTS.REGISTRATION_INVALID_PLATFORM: break; case cmbScanner.CONSTANTS.REGISTER_RESULTS.REGISTRATION_KEY_EXPIRED: break; default: break; } }); } else if (connectionState == cmbScanner.CONSTANTS.CONNECTION_STATE_DISCONNECTED) { oEventBus.publish("ScanView", "SetConnectionStatus", { statusText: "DISCONNECTED" }); } else if (connectionState == cmbScanner.CONSTANTS.CONNECTION_STATE_CONNECTING) { oEventBus.publish("ScanView", "SetConnectionStatus", { statusText: "CONNECTING" }); } else if (connectionState == cmbScanner.CONSTANTS.CONNECTION_STATE_DISCONNECTING) { oEventBus.publish("ScanView", "SetConnectionStatus", { statusText: "DISCONNECTING" }); } window.readerConnected = connectionState; }); cmbScanner.setAvailabilityCallback((readerAvailability) => { if (readerAvailability === cmbScanner.CONSTANTS.AVAILABILITY_AVAILABLE) { oEventBus.publish("ScanView", "SetConnectionStatus", { statusText: "AVAILABLE" }); cmbScanner.connect((result) => { }); } else { oEventBus.publish("ScanView", "SetConnectionStatus", { statusText: "NOT AVAILABLE" }); } }); cmbScanner.setActiveStartScanningCallback((result) => { window.scannerActive = result; }); cmbScanner.setPreviewOptions(cmbScanner.CONSTANTS.PREVIEW_OPTIONS.DEFAULTS | cmbScanner.CONSTANTS.PREVIEW_OPTIONS.HARDWARE_TRIGGER); cmbScanner.setCameraMode(cmbScanner.CONSTANTS.CAMERA_MODES.NO_AIMER); cmbScanner.loadScanner(0, (result) => { cmbScanner.connect((result) => { }); }); oEventBus.subscribe("Component", "LoadScanner", this.loadScanner, this); } }, loadScanner: function(sChanel, sEvent, oData) { cmbScanner.disconnect((result) => { cmbScanner.loadScanner(oData.selectedDevice, (result) => { cmbScanner.connect((result) => { }); }); }); }, onExit: function() { oEventBus.unsubscribe("Component", "LoadScanner", this.loadScanner, this); cmbScanner.disconnect(); cmbScanner.setAvailabilityCallback(); } }); });

cmbScanner是一个表示插件的对象。有了这个对象，我们可以访问所有API方法和常量来自我们的插件。

• scannerIsInitialized-变量，以确保我们设置一些函数的初始化只进行一次
• window.readerConnected-每次读取器连接状态改变时都会改变的全局变量
• window.scannerActive-全局变量，显示扫描是否处于活动状态
• cmbScanner.addOnPause在这个方法中，我们在Android上断开与阅读器设备的连接(在iOS上这是自动处理的)，并且停止监听可用性变化
• cmbScanner.addOnResume-在这种方法中，我们尝试再次连接阅读器设备，并设置回调为可用性改变
• cmbScanner.setPreviewContainerPositionAndSize-设置预览容器的大小和位置。了解更多在这里。
• cmbScanner.setConnectionStateDidChangeOfReaderCallback——所有连接/断开连接事件应该在回调函数集中用这个API方法处理。如果连接状态为连接我们设置了一些阅读器设备设置API方法或者直接与sendCommand ()方法。在本例中，我们启用符号并设置触发器类型。这里我们还应该授权SDK。我们将在本节稍后讨论这个问题
• cmbScanner.setAvailabilityCallback-监控MX设备的可用性。如果MX设备可用，我们尝试连接。了解更多在这里。
• cmbScanner.setActiveStartScanningCallback-监控扫描器的状态。了解更多在这里。
• cmbScanner.loadScanner-让扫描仪启动并运行。了解更多在这里。

这里我们只配置阅读器设备、处理连接、可用性等。我们将在其他视图中进行扫描并获得结果。如果我们想通知用户每一个连接状态的改变或其他信息的阅读器设备，我们将使用EventBussap对象。有了这个对象，我们可以发布函数，并从应用程序中的任何视图调用它们。在这个例子中，我们调用的EventBus改变了连接状态SetConnectionStatus执行扫描并设置标签文本以显示用户当前连接状态的视图中实现的函数。

现在打开ScanView.view.xml并添加以下代码:

< mvc视图xmlns: mvc = " sap.ui.core。Mvc " xmlns:html="http://www.w3.org/1999/xhtml" xmlns:core="sap.ui。核心”controllerName = " MyFristFioriApp.controller。ScanView" displayBlock="true">     <工具栏id="__toolbar2" width="100%">                

你可以用CodeEditor或LayoutEditor设计视图。

在那之后ScanView.controller.js然后添加这段代码

sap.ui.define(["sap/ui/core/mvc/Controller"]， function(Controller) {"use strict";var oEventBus = sap.ui.getCore().getEventBus();var oModel = new sap.ui.model.json.JSONModel();oModel。setData({Devices: [{key: "0"， text: "MX Device"}， {key: "1"， text: "Mobile Camera"}]});返回Controller.extend(“MyFristFioriApp.controller。ScanView"， {onInit: function() {this.getView().setModel(oModel);}， onAfterRendering: function(){窗口。scannerActive = false;switch (window.readerConnected) {case cmbScanner.CONSTANTS. {case cmbScanner.CONSTANTS.}CONNECTION_STATE_CONNECTED: this.getView () .byId(“lblStatus”). settext(“连接”); break; case cmbScanner.CONSTANTS.CONNECTION_STATE_DISCONNECTED: this.getView().byId("lblStatus").setText("DISCONNECTED"); break; case cmbScanner.CONSTANTS.CONNECTION_STATE_CONNECTING: this.getView().byId("lblStatus").setText("CONNECTING"); break; case cmbScanner.CONSTANTS.CONNECTION_STATE_DISCONNECTING: this.getView().byId("lblStatus").setText("DISCONNECTING"); break default: this.getView().byId("lblStatus").setText("UNKNOWN"); break; } oEventBus.subscribe("ScanView", "SetConnectionStatus", this.setConnectionStatus, this); cmbScanner.setResultCallback((result) => { if (result && result.readString) { var verticalLayoutContainer = new sap.ui.layout.VerticalLayout(null, { width: "100%" }).addStyleClass("sapUiSmallMarginTop"); verticalLayoutContainer.addContent(new sap.m.Label({ text: result.symbologyString + ":", textAlign: "Begin", design: "Bold" }).addStyleClass("sapUiSmallMarginBegin")); verticalLayoutContainer.addContent(new sap.m.Text({ text: result.readString, textAlign: "Begin" }).addStyleClass("sapUiSmallMarginBegin")); this.getView().byId("flexBoxContainer").addItem(verticalLayoutContainer); } }); }, btnScanPress: function() { if (window.readerConnected === cmbScanner.CONSTANTS.CONNECTION_STATE_CONNECTED) { if (window.scannerActive === true) { cmbScanner.stopScanning(); } else { cmbScanner.startScanning(); } } }, setConnectionStatus: function(sChanel, sEvent, oData) { this.getView().byId("lblStatus").setText(oData.statusText); }, activeDeviceChanged: function() { cmbScanner.disconnect((result) => { oEventBus.publish("Component", "LoadScanner", { selectedDevice: parseInt(this.getView().byId("selectActiveDevice").getSelectedKey()) }); }); }, onExit: function() { oEventBus.unsubscribe("ScanView", "SetConnectionStatus", this.setConnectionStatus, this); if (window.readerConnected === cmbScanner.CONSTANTS.CONNECTION_STATE_CONNECTED) { if (window.scannerActive === true) { cmbScanner.stopScanning(); } } cmbScanner.setResultCallback((result) => { return false; }); } }); });

在这个视图中，我们有一个Scan按钮startScanning () / stopScanning ()而且cmbScanner.setResultCallback处理成功的扫描结果。

在我们完成了Fiori项目的创建和开发之后，我们需要为移动部署做准备。

首先，我们需要将项目部署到SAP HANA云平台。

• 右键单击项目文件夹，然后选择Deploy，然后选择Deploy to SAP HANA Cloud Platform

• 设置应用详细信息后，单击“部署”

• 成功部署之后，下一步是注册到我们在前一节中创建的SAP Fiori launchpad。

• 选择“帐户”，设置“应用程序名称”。

• 设置“类型”(默认为“静态”)、“标题”和“Subtitle”。

• 选择我们之前创建的Site、目录和组(默认情况下创建示例目录和组)。

• 点击完成确认选项卡，如果一切正常，弹出如下所示。单击“确定”关闭该弹出框。

一个

如果您计划使用cmbSDK使用智能手机或平板电脑(没有MX移动终端)进行移动扫描，SDK需要安装许可密钥。没有许可密钥，SDK仍将运行，尽管扫描结果将被模糊化(SDK将随机地将扫描结果中的字符替换为星号字符)。

请与您的康耐视销售代表联系，了解如何获取许可证密钥，包括可用于30天评估SDK的试用许可证。

获得许可密钥后，打开i18n。属性文件在您的项目上的SAP WEB IDE服务，并设置您获得的密钥。

然后回到Component.js文件和检查这段代码:

cmbScanner.setConnectionStateDidChangeOfReaderCallback((connectionState) => {if (connectionState === cmbScanner.CONSTANTS.CONNECTION_STATE_CONNECTED) {oEventBus. connectionState . connection_state_connected) {publish("ScanView"， "SetConnectionStatus"， {statusText: "CONNECTED"});如果窗口。readerConnected != connectionState) {cmb scanner . setsymbolologyenabled ("SYMBOL. setsymbol . enabled ")DATAMATRIX”,真正的);cmbScanner.setSymbologyEnabled(“符号。C128”,真正的);cmbScanner。sendCommand("SET TRIGGER.TYPE 2"); } var sdkKEY = ""; if (Device.os.android) sdkKEY = this.getModel("i18n").getProperty("MX_MOBILE_LICENSE_ANDROID"); else sdkKEY = this.getModel("i18n").getProperty("MX_MOBILE_LICENSE_iOS"); cmbScanner.registerSDK(sdkKEY, (res) => { switch (res) { case cmbScanner.CONSTANTS.REGISTER_RESULTS.REGISTRATION_OK: break; case cmbScanner.CONSTANTS.REGISTER_RESULTS.REGISTRATION_INVALID_KEY: break; case cmbScanner.CONSTANTS.REGISTER_RESULTS.REGISTRATION_INVALID_CHECKSUM: break; case cmbScanner.CONSTANTS.REGISTER_RESULTS.REGISTRATION_INVALID_APPLICATION: break; case cmbScanner.CONSTANTS.REGISTER_RESULTS.REGISTRATION_INVALID_SDK_VERSION: break; case cmbScanner.CONSTANTS.REGISTER_RESULTS.REGISTRATION_INVALID_KEY_VERSION: break; case cmbScanner.CONSTANTS.REGISTER_RESULTS.REGISTRATION_INVALID_PLATFORM: break; case cmbScanner.CONSTANTS.REGISTER_RESULTS.REGISTRATION_KEY_EXPIRED: break; default: break; } }); ...........

您可以看到，在成功连接之后，您从i18n读取了这个键。属性和调用cmbScanner.registerSDK方法注册SDK与您的许可密钥。

检查回调函数中返回的结果对象，可以告诉我们注册是否成功或存在什么问题。