在这个博客中，我将向我的CAP服务添加一个UI，它使用机器学习服务：https://blogs.sap.com/2019/08/19/combine-cap-m-with-machine-learning-sdk-api-part/

我知道许多其他博客展示了如何将UI模块添加到MTA项目。我也注意到，即使有其他的博客，也不是那么简单。根据您使用的向导或工具集的不同，这可能会生成不同的代码，其行为也会有所不同。因此，我认为值得分享我是如何做到的，尤其是我努力解决的部分。

首先在现有项目中添加HTML5模块

对于这个应用程序，我将使用"SAPUI5应用程序模板"，但你也可以使用任何其他模板。注意，向导将根据模板在配置文件中生成不同的代码。我将在本博客末尾添加您需要添加的所有配置选项，以确保您拥有所有配置。

填写UI模块的名称。在本例中，我称之为"FaceConvertor"。

为生成的视图命名：

UI模块的向导将生成UI5应用程序，软件企业有哪些，并将所需的配置添加到项目中。我注意到它生成了文件"xs-安全.json"其中包含你的应用程序的作用域：

但它没有在yml文件中使用。您需要在"uaa"服务的yml配置中定义此配置的路径。这是将应用程序部署到CF并提供授权所必需的。

如果您不将此参数添加到甲基丙烯酸甲酯，您将收到来自批准者的内部服务器错误。在审批者的日志中，您会发现以下错误：

下一步是在UI5应用程序中添加到服务的连接。这可以在清单.json通过使用"数据源"

中的向导，此向导允许您立即创建服务的目标。这使得直接从sapwebide测试NEO中的UI5模块成为可能。尽管由于SAP Web IDE也可以直接在CF上运行UI模块，因此不再需要此向导。

此向导需要在UI模块中生成服务的所有配置设置的目标，但运行应用程序时不需要此向导。您会注意到并非所有向导都需要此目标。

我创建此目标是因为OData连接的向导需要此目标，并且它允许我在NEO上进行测试。我使用生成的服务url作为目的地

https://tgof47lihmjegk7ucapmwithmlapp-srv.cfapps.eu10.hana.ondemand.com

在"服务URL"部分，您现在可以选择您的目的地并将路径添加到"CatalogService"。向导将为您的服务加载实体，您可以单击"下一步"。

设置为"默认模型"

例如，UI模块的主详细信息模板将为您提供从当前项目中选择服务的选项。那你根本就不需要去尼欧了！

我添加这个是为了告诉你一个不同的向导可以做完全不同的事情。

在视图中，我添加了以下代码来显示转换后的面：

运行此操作将从您的SAP Web IDE中部署Approver到CF并运行它。

您可以通过更改配置设置来选择在NEO中运行它：

如果一切正常，你应该能够运行应用程序，并看到已经从以前的博客创建的记录：

如果没有数据显示，检查是否所有的配置生成正确。我已经在博客末尾添加了你需要检查的所有内容，这样你就可以验证这一点了。

我们还想使用这个应用程序将新面孔上传到我们的数据库中。因此，在视图中添加一个上传按钮：

在该按钮旁边，我包括文件"CoreService"。这是一个将每个OData请求包装成承诺的文件。完整代码可在此处找到：https://github.com/lemaiwo/MyCAPMAppWithML/blob/master/FaceConvertor/webapp/service/CoreService.js

为了上传图片，我添加了"ImageHandler"文件。这是我在web上找到的代码，用于调整对ML来说太大的图像的大小，并将其转换为base64字符串。您可以在这里找到完整的代码：https://github.com/lemaiwo/MyCAPMAppWithML/blob/master/FaceConvertor/webapp/util/ImageHandler.js

我要再添加一个文件，FaceService。此服务将从CoreService扩展。它将是构建真实odata请求的地方，人工智能软件下载，用于向Java服务发送图像。

getMaxFaceId：这将为我提供数据库中已经存在的面中的最高IDcreateFace：将为该面创建一个新实体，并将base64图像传递给服务

完整代码：https://github.com/lemaiwo/MyCAPMAppWithML/blob/master/FaceConvertor/webapp/service/FaceService.js

控制器将在FaceService中设置模型，以便对所有请求使用清单中定义的OData模型控制器还包含upload按钮的eventhandler。这将在最终用户选择图像后调用。它将打开一个对话框，其中有两个字段，一个用于firstname，一个用于lastname。

该对话框包含两个带有"保存"和"关闭"按钮的字段：

关闭按钮除了关闭对话框外不会执行任何操作：

保存按钮将首先调整图像大小以加快上载速度，但这也是因为ML服务的上载大小受到限制。（这也可以在Java服务上完成，但这仍然会减慢上传到Java服务的速度）

调整图像大小后，它会将带有名字和姓氏的图像发送到Java服务。

如果一切顺利，它会显示一条成功消息并更新列表。否则，它将显示一个错误。

最后但并非最不重要的是，它将关闭对话框。

选择一个图像后，它将显示一个对话框，大数据服务，输入名字和姓氏：

单击"保存"后，它将更新列表，您应该有两行。每一行包含面和向量的名称：

您现在应该能够将图像上载到使用ML将图像转换为向量的Java服务。