模型驱动开发和原型设计（示例） - 移动应用（第 4 部分）

引言

在上篇文章中，我们讨论了一个基于 STS 的、可用于内部网的应用程序。主要问题是应用程序的安全和登录机制，在此之前，该应用程序并非真正安全。本文将讨论另一个重要功能：如何连接移动用户——这是当今一个重要的问题。在本文中，我将介绍如何利用现代且强大的框架 DevExtreme 开发一个 HTML5 移动应用程序。该移动应用程序通过企业业务框架 XAF（DevExpress Universal 的一部分）之上的 REST 服务层进行连接。两者都是 DevExpress 的商业产品。

本文也是我撰写本文期间工作日志式的记录。我将继续在后续的文章中进行。结尾将展示当仍需要开发建模功能时所需的工作量。将其与仅对可建模部分（如实体和关系）进行模板化所需的工作量进行比较。这将引发关于是否应该这样做的疑问。

背景

如何连接移动用户？

HTML5 应用正成为移动应用的一种趋势。这种趋势已不容忽视。但对于开发者来说，这也是一个需要应对的新平台。我之前的经验主要集中在 C# 和 WinForms 应用程序。因此，我希望有一种方法可以快速在 WinForms 平台和 HTML5 移动平台之间切换。

如何在不放弃先前已开发的技能的情况下实现这种快速切换？

代码生成可以解决这个问题！在数据库驱动的应用程序中，预期会出现 HTML5 表单的重复，因此一个代码生成器将有助于快速开始。

在撰写本文时，一个非常常见的场景正在被开发和模板化，以便将来能更快地创建使用该常见场景的应用程序。该场景将是一个带有用户注册的购物车。副产品将是后端和一个基于 Web 的软件来管理购物车。

目前已开发了基本功能，可以从 UML 模型（包含字符串类型的类和属性）生成 HTML5 移动应用程序。当前版本可在此处下载：下载地址。

注意：此开发是我本人以及其他合同开发者进行的，如果我的 Kickstarter 活动获得资助，则开发进度会加快；否则，我仍可以开发此解决方案，但速度会慢很多。这是我的 Kickstarter。

获取一个基本的应用程序生成器

要启动该项目，通常需要一个通过手动编码创建的原型。这里使用了框架供应商提供的一个示例项目，该项目解释了如何将移动应用程序集成到 XAF 中的选项。您可以从 这里 获取。利用这个示例项目作为原型，我开始对该项目的某些部分进行模板化。

这些部分包括实体类、包含这些实体类的项目、用于扩展实体列表的安全类、HTML5 移动视图及其项目文件。此外，这些视图的路由也需要从我的 UML 模型中生成。

在执行此操作时，我发现我只需要生成部分项目文件。我决定不将所有固定文件都放入生成器中，而是部署一个已完成的项目，然后对其进行部分覆盖。

第一个版本真的只用了一天时间完成！所以您可以非常快速地开始。需要考虑的是花时间熟悉该项目以熟悉这些产品。还需要考虑开发新视图和导航。这将在我撰写本文时需要处理的后续步骤中包含。

当前移动应用的状态如下所示

由于删减了功能，图像始终相同。稍后需要实现图像功能。

可以显示详细信息，也可以导航到编辑器视图并编辑值。

实现欢迎屏幕

应用程序应展示商店的品牌和信息。启动操作应从此欢迎屏幕访问。这里应从数据库中读取一些商店属性来填充屏幕上的品牌信息。这使得应用程序更加灵活。因此，它更像一个单一的配置数据集。

实现要在购物清单中使用的类型

该列表应包含一个带有换行文本的小描述字段、一个用于显示数量的数值以及一个用于显示价格的浮点数值。总计应在列表下方或结账操作的任何旁边显示。为简单起见，货币将固定。

还应显示图片，以直观地展示产品。

实现账户注册机制

将在后续文章中讨论（TBD）。假定用户账户已存在。

开始扩展我已创建的模板

现在德国时间是早上 8:46 :-)

首先，我需要查看现有应用程序，以了解它们可能是什么样子。DevExpress 移动应用程序演示是一个可以重新实现的候选。

现在是早上 9:30，我创建了一个空的欢迎视图，将其链接到主应用程序的 HTML 文件中，并尝试编译。失败。对于新手来说，这很复杂，出了点问题 :-) 啊，原来需要完全重建。

现在是早上 9:35，应用程序不再运行了。发现使用的应用程序名称与演示中的其他代码不匹配。重命名解决了这个错误。现在我遇到了下一个错误。如何解决？抱怨的是一个名为 Welcome 的重复条目。是我创建了两个视图吗？不。

现在是早上 9:40，我怀疑这将是一项有趣的入门级练习。今天别指望有任何工作结果 :-)

现在是早上 9:50，在弄清楚问题所在后，在登录后我看到了新的空白虚拟欢迎视图。

这个练习是什么？我漏了一个名为 Welcome 的视图，它在初始登录视图的代码下面。

<script>
        $(function () {
            DXTremeClient.app.navigate("LogOn/null");
        });
</script>

我现在创建的视图在此代码下方，但我觉得这没什么关系。原始的 Welcome 视图也在那里，并且我已将其注释掉。无论如何，我实现了第一个场景：通过明确指定成功登录后要打开的视图来设置自定义导航。

现在我认为困难的部分将是填充视图中的个人资料数据。我需要查看我的用户账户对象以及一个包含先前购物操作的新对象列表。这些应列在个人资料中。

现在有了显示用户账户相关数据的嵌入式列表视图的要求。我现在拥有用户激活导航，使用了 masterdetail_action 构造型。因此，可能需要使用类似的构造型来建模嵌入式详细视图。

现在是早上 10:00，在这里休息一下。

现在是早上 10:10，我想弄清楚如何建模嵌入式详细视图。首先，我需要建模一个 User account 类，它实际上是一个已存在的类，我不需要用代码生成器创建它。DevExpress 为我提供了一个。

现在是早上 10:30，我找到了以下候选的现有实体类供使用：BasicUser、SimpleUser、User、Person，以及像 Party 这样的东西。Party 代表业务伙伴，因此这是要在欢迎视图中显示的数据。缺失的是 Party 和 User account 之间的链接，以实现登录。

现在是早上 10:40，在阅读了 Len Silversten 关于数据模型的几页书后，我不仅应该将 Party 链接到 User account，还应该将 User account 链接到一个名为 WebPreference 的新实体。给定一个登录账户，可以设置一个标准的偏好设置，以显示最近 5 个购物车，以及关于用户自开始以来已购买总额的偏好摘要。

现在是早上 10:50，我发现 User 实体继承自 Person，而 Person 是一个 Party，因此我只需要将 Party 链接到 WebPreference 实体，我认为。我还需要一个链接到 Party 的 ShoppingCards 列表才能得到我想要的。

暂停。11:00 清楚的是，这个 User 实体包含登录信息，并且一个用户可能拥有多个登录，例如用于两个独立的网站。但为了简单起见，我忽略了这一点，并使用 User 开始建模我该如何做。

 

这里的图片展示了我第一次尝试

我在这里看到的是，我的初始模型还不支持类上的构造型和派生。

现在是早上 11:15，我需要决定是否使用它并调整导入机制。我认为这会花费很多时间，而且一天之内做不完。但是之前有一个想法是支持预先存在的类和派生。

结论

这小小的日志样本表明，实现一个模板来启用所呈现用例的建模需要花费多少时间。很清楚，至少需要两周时间才能完成并可用，但我认为会更长。另一方面，这是实现真实业务场景的重要功能。

回想起这些天创建模板初始版本的努力——只用了一天时间就完成了对现成项目的模板化。它显示了一些关于创建模板速度的希望。但当涉及到缺失的建模能力时，所需的努力将大大增加，比人们想象的要多。

关注点

未来的工作将是实现一个增强的 UML 模型导入机制，因为我现有的还不能实现。但是，在这样的增强之后，每个可建模的功能只需要几分钟就能画出一些类，然后按下生成按钮。

因此，我选择如此高额的资金来支付一些开发人员的部分开发费用，因为我认为这是现实的。所以，我对你的看法很感兴趣。我说得对吗？值得为你实现这个功能，还是找一个更简单的建模变体，比如只为首选项类使用 WebPreference 构造型？

值得你支持这次开发工作吗？

历史

这是一个初始版本。（11:30）