你好！

对SAPUI5和Google Firebase也有热情？

那你就选对博客了！

在大学时，我曾与Google Firebase合作过很多次，以创建Web和本机应用程序。

两年来，我一直在使用SAP服务。尤其是SAP全栈WebIDE中的SAPUI5框架。

我无法将SAPUI5框架或SAP全栈WebIDE切换回另一个框架或编辑器。因为他们摇滚！

但就像我们都知道一切都在不断发展…所以我试着保持关注，我开始想…

为什么不把我最喜欢的两个放在一起？

这正是我所做的！

在这里您可以找到我在SAPUI5应用程序中使用Firebase服务的其他一些博客：

SAPUI5 Firebase博客系列：

但是让我们暂时继续这个博客。

使用Firebase Cloud Firestore数据库作为后端，与SAPUI5框架一起创建实时Web应用程序。

因此没有setInterval轮询数据功能。但实时数据由后端提供。

在本博客中，我将向您展示如何在UI5应用程序中实现Firebase。通过在后端创建、更新和删除数据，大数据服务，将触发应用程序中的自动数据更新。

让我们开始吧！

你想做的第一件事，正在创建Firebase项目。

这可以在Firebase控制台中完成。

有关Firebase的更多信息。

1.1这里是关于如何开始使用web上的Firebase。

1.2这里是关于如何开始使用web上的Cloud Firestore。

1.3 Cloud Firestore安全规则

仅在特定情况下使用以下安全规则测试环境。我们需要这些规则，这样我们就可以将我们的数据从Firebase Cloud Firestore数据库消耗到我们的SAPUI5应用程序中。

开发完成后，我们将关闭数据库读写访问权限，除了经过身份验证的用户。

或者我们将关闭所有人的数据库。

1.4向Cloud Firestore添加一些测试数据数据库

所以接下来我们要用装运集合填充我们的数据库。

一些代表真实装运的文档。

带有装运的一些属性。

添加任意数量的装运（文档）。

OData和Firebase Cloud Firestore之间的1.5比较。

让我们继续摇摆，跳入SAPUI5世界！

当然我们会在我们钟爱的SAP全栈WebIDE中工作。

2.1选择一个模板开始

对于这个演示应用程序，我们将从UI5模板应用程序开始。

2.2添加核心Firebase JS SDK

我们将核心Firebase JS SDK添加到我们的索引.html文件。这与我们的Cloud Firestore JS SDK一起使用。

在第一个脚本标记后添加以下Firebase导入。

您的索引.html文件应该是这样的。

2.2创建一个火基.js文件

接下来我们创建一个火基.js文件在我们的webapp文件夹的根级别。

在这里，大数据中心，我们将存储我们的Firebase配置，我们将初始化Firebase我们的应用程序。最后，我们以JSON模型的形式展示了Firebase逻辑。

正如您所看到的，从Firebase控制台收集的Firebase配置被粘贴在我们的内部火基.js文件。

我们创建了自己的InitializeFreeBase函数来初始化Firebase，以JSON模型的形式与Cloud Firestore一起。

2.3在组件.js文件并将其设置为模型

导入火基.js文件在sap.ui.define方法。调用initialize函数并将其设置为名为"firebase"的模型。从现在起，我们的Firebase模型已经准备就绪，可以使用了。你的组件.js文件应该是这样的

2.4准备你的Main.view.xml文件

在我们看来，我们想显示我们的发货：发货id，产地，目的地和地点状态。这个在一个有列列表项的表格里。

但是让我们帮自己一个忙，提醒自己Firebase的安全规则。我们不想忘记在演示测试阶段结束时关闭公共读写访问。

因此，我们创建了一个小消息条，提醒我们打开和关闭读写访问的安全规则。

因此，现在我们创建了自己的个人提醒消息条，我们可以将表添加到视图中。

我们绑定发货到表的items聚合的根路径。通过这种方式，我们可以将装运属性绑定到相应的列列表项中。

我们将标题和列名绑定到正确的i18n键，最后但并非最不重要的是将值绑定到文本控件中。

通过这种方式，一旦我们从Cloud Firestore接收到数据，我们的表就会被填充。

我们可以向表中添加一些漂亮的UI5特性，通过使用ObjectStatus控件

这样我们可以用颜色（状态）和符号（图标）来显示装运状态

但是如何实现呢？请不要通过格式化程序，格式化程序在这里将是（在我看来）一个不必要的实现。

所以让我们使用表达式绑定。

更多关于SAPUI5演示工具包中的表达式绑定的信息。

如何读取Objectstatus的state（color）属性的状态表达式绑定？

如果收到值：${status}

如果status等于Shipped那么Success

如果status等于Missing那么Warning

如果status等于Preparing那么Information

Else Error

Objectstatus的图标上应用相同的逻辑，当然有图标值。

我们现在完成了Main.view.xml文件。

2.5用键值填充i18n文件

您可以复制粘贴i18n型号的以下键值。我们在我们的文本绑定中使用了这个Main.view.xml.

2.6主控制器.js档案。

现在接下来会发生什么主控制器.js文件？

这一切都将在我们的onInit功能中完成主控制器.js. 您的onInit函数应该是这样的。

添加这一点，我们仍然需要创建getShippings函数。

此函数将（在onInit创建的）Shippings引用作为参数。

在此集合中，我们将执行get调用，该调用将返回我们的所有装运（文档）。

调用完成后，我们将收到我们的请求collection参数中的shippings.

此时，我们希望获取我们的shippingmodel并从中检索数据。

接下来，我们映射我们的collection（result），以便可以从shippings（文档）中检索数据。

使用Firebase中的data（）函数进行此操作。

完成此操作后，我们将结果（shippings）添加到shippmentdata并刷新数据绑定我们表中的项目。

2.7让我们运行应用程序并检查结果。

当我们启动应用程序时，我们得到以下结果。看起来不错吧？

我们的表中填充了我们的数据，正是它应该的样子。这个用的是UI5框架。

到目前为止没什么特别的吧？让我们加入魔法吧！

2.7在出运托收中增加一个实时监听器，进行新增、修改、删除操作

我们看到数据从我们的出运托收中提取一次，并显示在我们的表中

如果是如此重要，建站系统哪个比较好，出运需要立即更新怎么办？

然后我们添加实时监听器。

我们要做的第一件事是注释getShippings函数，并在控制器的onInit函数中添加getRealTimeShippings函数。

再次传递我们的发货收集引用。

接下来我们要实现getRealTimeShippings函数。

这个函数看起来像这样，有点忙吧？

让我们把它分成几部分。

1。我们希望在我们的托收货物中监听所有文档的更改。

我们立即将"this"绑定到我们的函数，以便我们稍后使用此引用。

2。在我们的onSnapshot功能中，大数据云计算，物联网门锁，我们可以得到我们的发货模型和发货量。当发生更改时，我们不希望再次收到完整的发货集。

因此我们添加了一个文档侦听器，它将在onSnapshot函数中返回特定的文档。

4。当我们第一次加载我们的应用程序时，发货（文档）id被设置。

通过这样做，我们以后在更改发货（文档）时可以很容易地引用它。

我们可以在这里设置它，因为应用程序在加载数据时会通过添加的部分。

5。当在Cloud Firestore中添加一个发货时，会添加文档的类型。

因此我们将此文档推送到我们的发货数组中。

6。如果修改了装运（文档），我们将在装运数组中查找它。

这是较早放置的文档id很有用的地方。我们根据此id进行搜索。

返回的索引用于将旧装运替换为新装运。

7。同样的逻辑也适用于在后端删除装运。

我们查找已删除装运的索引并将其从我们的数组中删除。

使用splice而不是从数组中删除对象。

使用delete对象将清除对象（表中的列表项）中的值，

但在我们的表格中仍然可以看到一个空列表项。

8。最后，我们硬刷新视图的模型，并刷新表的项目绑定。

这超出了我们的docChanges函数。

好的！我们完成了控制器的完全实时实现。

让我们看看它的实际效果！

这个演示视频有4个步骤。

太棒了，不是吗？这与SAPUI5框架有关！爱死它了！

在这个博客里，我浏览了UI5和Firebase的很多功能。

所以这里有一些重要的收获：

谈论安全规则…。你用正确的安全规则再次关闭了数据库？

我的两个最爱以一种令人敬畏的综合方式一起工作！

你怎么看？值得一试吗？