介绍
在前几章中,您学习了如何使用 XPath 限制数据访问和检索。在本章中,您将通过学习如何为 Summerhill Hospital 应用程序添加移动功能、跟踪居家患者并允许护士在通过手机访问应用程序时导航到他们的家中来增加您对 西门子Mendix 的知识!
更具体地说,您将学习:
- 什么是移动应用程序
- 什么时候最好创建一个移动应用程序(什么时候不是)
- 开发移动应用程序时需要考虑哪些方面
- 如何确保您的用户在使用移动应用程序时获得良好的体验
- 如何创建移动特定页面
- 纳米流的作用以及如何使用它们
移动应用
您需要决定的第一件事是您是否需要专门为移动设备开发的应用程序。是否有用户的特定特征表明他们更喜欢使用移动设备而不是台式机或平板电脑?还是应用程序的某些特定方面在移动设备上使用起来更有价值?如果上述问题的答案是肯定的,那么移动设备很可能就是您想要的解决方案!
一般来说,移动设备使人们能够在任何地方相互交流。移动应用程序为用户提供便利、便携和简单。无论应用程序是完全移动的,还是只有一小部分功能在移动设备上可用,移动应用程序都会以令人兴奋的新方式向您的用户提供您的产品和服务。
使用 西门子Mendix 开发移动应用程序与开发 Web 应用程序不同,但基本目标和原则仍然适用。以下是使用西门子 Mendix 开发移动应用程序时需要考虑的一些方面:
Navigation
每个应用程序都从主页开始。可以单独添加和删除移动配置文件。如果您添加配置文件,您还必须提供其主页。除了主页,可以为不同的用户角色指定不同的主页。
Layout
理论上,您可以在移动设备上显示整个桌面应用程序,但您可能希望优化页面,布局更简单,信息更少。布局可帮助您创建适合设备的页面。
例如,您可能希望在移动设备的可折叠侧边栏中隐藏菜单的布局。
Mobile Widgets
一些小部件比其他小部件更适合移动使用。例如,数据网格不太适合,因为它依赖于多个列和多个搜索字段。列表视图是一个更简单、更紧凑且响应迅速的小部件,用于显示对象列表。
Responsive, Native, or PWA?
您需要决定的第一件事是您是否需要专门为移动设备开发的应用程序。您的用户是否有特定特征表明他们更喜欢使用移动设备而不是台式机或平板电脑?应用程序的某些方面在移动时会更有价值吗?如果上述任何一种情况适用,那么移动功能就是您想要的!在本模块中,您将为护士创建一个移动页面。您是否已经很好奇这意味着什么?让我们深入挖掘!
当您打算实现一个移动应用程序时,首先要问的问题是:您是想在移动应用程序商店中发布该应用程序,还是应该基于浏览器?了解您的应用是需要基于应用商店还是基于浏览器,这将更容易确定您将使用哪种底层技术作为主干。
基于应用商店的方法需要原生移动或混合网络应用。Native mobile 将生成一个在安装它的移动设备硬件上本地运行的应用程序。创建原生移动应用程序可以让您访问更多移动功能,但需要更高级的知识来开发。混合应用程序在 Web 技术上运行,因此比原生应用程序功能更少但更容易构建。从 Mendix Studio Pro 版本 9 开始,混合支持已被弃用,取而代之的是Progressive Web Apps或PWA。这是我们将在本课程中重点关注的内容。
PWA 是一种 Web 应用技术,其周围有一个 Native shell。因此,它比 Hybrid 具有一些优势。PWA 应用程序的行为类似于原生应用程序,因为它们“安装”在移动设备的主屏幕上,可以离线运行,并且不在浏览器窗口中运行,但在底层它们与 Web 应用程序一样灵活且易于维护。与基于应用商店的应用不同,您无需从应用商店下载 PWA,但可以立即通过 Internet 连接访问它。从本质上讲,PWA 结合了两种技术的理想方面!
除了 Native 和 PWA,响应式 Web 应用是另一种基于浏览器的应用。响应式应用程序看起来不错并且可以在所有设备上运行,因为它们可以缩放到设备的大小,但是它们没有针对移动设备进行优化并且需要互联网连接。对于这个应用程序,您将使用 PWA,所以让我们再谈一谈。
Why PWA? 渐进式 Web 应用程序可以通过三个主要属性来表征:它们是可安装的、可靠的和功能强大的。
- Installable
打开 PWA 后,系统会提示您将其添加到主屏幕。如果您接受,它将带有图标安装在您的主屏幕上。以这种方式启动应用程序时,应用程序将在默认安装的浏览器中运行,但浏览器栏和应用程序本身将被隐藏,提供独立的、类似原生的体验。
- Reliable
PWA 可以脱机或部分脱机工作。即使您没有 Internet 连接,也可以在安装后离线运行您的应用程序。
- Capable
PWA 可以利用导航、拨打电话或拍照等设备功能。对于某些浏览器,甚至可以使用蓝牙或 NFC 等功能。根据浏览器支持的功能,您可以逐步使用更高级的功能。
Summerhill 移动端应用
让我们看一下用例。Summerhill 正在提供一项新的“在家住院”计划,护士可以在患者自己的住所中探访患者,以改善护理体验并降低成本。这是一个选择加入计划,因此患者同意允许护士访问他们的家庭住址。护士更愿意直接从应用程序中访问这些患者的地址,而不是需要在物理文件或数据库中查找它们。许多护士很高兴能通过手机访问您的应用程序,这样他们就可以在早上或前一天晚上预览他们的班次,而无需启动计算机并调出电子表格。
让我们立即将以下用户故事添加到 Developer Portal: 作为一名护士,我想在我的手机上查看患者的地址,这样我就可以花尽可能少的时间来设置他们家的导航。
以下是在处理此用户故事时需要考虑的一些方面:
- 导航:需要创建一个新的 PWA 导航配置文件。还需要为此配置文件设置一个新主页。此页面将显示培训事件列表,其位置可以在地图上可视化。
- 布局:您需要优化应用程序以供移动使用。您创建的任何页面都将具有更简单的布局和更少的信息,这将更容易适应移动屏幕。
- 原生功能:该应用程序将利用每个设备上的地图应用程序来显示事件的位置并提供导航说明。
将患者数据添加到应用程序
我们决定允许护士使用手机上的导航功能尽可能快速轻松地导航到患者家中。继续,将我们刚刚讨论的用户故事设置为 Running,让我们开始吧!
第一步是添加数据结构和页面,以跟踪我们在家中的患者。您需要将新实体添加到域模型以及概览和新编辑页面,以便管理员管理它们。
- 在UserManager模块的域模型中,添加一个名为Patient的新实体。
- 给它两个属性:名称和地址。
- 从 Shift 添加关联。
- 右键单击您的新实体并生成概述页面,仅适用于患者。像以前一样使用 Atlas_Default 和 PopupLayout。
- 这会将您的两个新页面放在一个新的OverviewPages_2文件夹中。将它们都拖到您原来的OverviewPages文件夹中并删除空的 OverviewPages_2。
- 将Patient_Overview添加到您的导航菜单,并为管理员授予对这两个页面的访问权限。
- 创建三个新的实体访问规则:授予Administrator 对Patient的 完全 CRUD权限,并授予Employee和KeyUser 只读访问权限。
创建特定于移动设备的Overview页面
第一步是创建一个电话网络离线导航配置文件。此配置文件将允许您制作 PWA 页面。
- 在App Explorer中打开Navigation并选中 Progressive Web App下的三个框。这将允许将应用程序添加到移动设备的主屏幕。将Application 标题更改为描述性内容,例如Summerhill Hospital。
- 单击按钮添加导航配置文件并选择电话 web 离线配置文件类型。单击确定。
- 再次重命名应用程序标题。
- 确保选中允许“添加到主屏幕” 提示。
下一步是设置特定于移动设备的详细信息页面。您将使用以前没有看过的Text小部件的一个功能: 渲染模式。这使您可以更改文本的结构方式。例如,您可以将其呈现为标题,使其美观大方或作为段落呈现,因此两个文本小部件之间有一些空间。您所要做的就是指定接下来应该显示哪个页面,从而腾出时间专注于使该页面符合我们辛勤工作的护士的意愿。他们希望看到患者的基本信息,并快速到达他们家门口。你最好开始吧!
- 让我们从您的移动页面的组织开始。您应该将在此模块中创建的所有其他功能保存在单独的文件夹中。因此,让我们通过右键单击UserManager并选择Add Folder ... 将其命名为Mobile来创建该文件夹。
- 右键单击您的新文件夹并创建一个新页面。将您的页面命名为 Patient_Overview_Mobile。使用 Phone (Web) 布局、Phone_Topbar导航布局和List Double Line模板。单击确定。
- 将此页面设置为电话 web 离线导航配置文件的默认主页。
- 通过使用右侧的“属性”窗格并单击页面上方的灰色标题来查看页面属性。 您在General部分看到Patient Overview Mobile了吗?这是此字段的默认值,当护士查看手机时,它将显示在页面顶部。将其更改为更精美的内容:“患者”。
- 现在是时候配置作为此页面核心的列表视图了。 双击列表视图以输入其属性,并将数据源设置为新的患者实体。然后单击确定。当 Mendix 询问您是否要自动填写内容时,请说Yes。这将为您留下一个很好的简单页面。
如果你跳到这个页面的Design mode,你会看到两个属性字段都被砸在一起了!
不用担心,这很容易解决。
- 单击每个文本小部件的属性并将Render 模式设置为Paragraph。这里有许多不同的选项可以为标题制作更大的文本,但是 Paragraph 强制每个小部件表现得像它自己的......你猜对了:paragraph。
纳流
什么是纳流?纳流类似于微流,因为它是代码的可视化表示。主要区别在于 nanoflow 在客户端而不是在运行时运行。它们是用 JavaScript 而不是 Java 实现的。它们不需要服务器连接,但能够从运行时访问数据。这是一个重要的区别,因为纳米流不像微流那样在事务中运行,因此对数据的任何更改都是即时的。如果遇到错误,将不会回滚。因此建议主要使用纳米流与客户端设备进行交互。就像微流一样,您可以编写自己的纳流活动。因为纳米流是使用 JavaScript 实现的,所以您也必须用 JavaScript 编写新的活动。您可以直接在 Mendix Studio Pro 中执行此操作。
Nanoflows 对移动有一些特定的好处。例如,由于它们直接在浏览器或设备上运行,因此可以在离线应用程序中使用。此外,不需要访问服务器的逻辑也有速度优势。
Nanoflows 在设计时考虑了离线优先应用程序,因为它们不需要数据库连接即可运行。由于所有与数据库相关的操作都将在本地离线数据库上执行,因此离线应用程序中的纳流会很快。
纳流和微流的创建和执行方式存在一些差异。微流和纳流都基于 BPMN。用于构建微流的主要元素类似于纳流中的元素,尽管微流中可用的某些操作在纳流中不可用,反之亦然。一个值得注意的例外是纳米流中不提供分步调试。作为替代方案,可以在纳流内部使用日志消息活动,该活动将显示在 Studio Pro 的控制台中。
纳流公共模块
在 Studio Pro 中创建 nanoflows 时,您可以使用 Nanoflow Commons 模块中可用的活动,该模块默认包含在您的应用程序中。此模块包含以下常用的纳流操作,可在 Web 和本机移动设备上使用:
这里的几项活动将非常有用!您可以使用打开地图活动将患者的位置传递给安装在护士手机上的任何地图应用程序。此外,导航到活动可用于立即导航到地址。
好了,下一章我们就一起来看一下,如何使用纳流构建地图导航功能和发布移动端应用。