我们举办了一场面向客户的活动，主题是每年 3 月举行的某场大型大学篮球锦标赛（由于许可限制，我们未透露比赛名称）。我们能否在 Mendix，在短短几天内，仅使用来自此 Sports Feed API 的数据？？

前提

活动期间将举行四场篮球比赛。所有参与者都可以预测谁将赢得比赛以及胜率是多少。如果您为每场比赛都选择了获胜者和准确的胜率，则满分为 100 分。选错获胜者将不会得分，选错获胜者但胜率错误将根据您预测的接近程度获得 25 分。

该应用程序包含以下功能：

1. 可以使用电子邮件地址注册并上传自拍照。
2. 比赛列表和当前比分。
3. 对每场比赛做出预测的能力。
4. 实时排行榜视图，每当游戏得分发生变化时就会更新。
5. 能够查看每个参与者在游戏中获得的积分明细。

活动在当地一家酒吧举行，没有人会随身携带笔记本电脑。这意味着移动体验才是王道。我们还知道应用程序的使用时间很短。没有人愿意下载只使用几个小时的应用程序。此外，由于我们只有几天的时间来完成应用程序，因此无法考虑需要发布到应用商店的原生应用程序。

这让我们采用了渐进式 Web 应用 (PWA) 方法。您可以阅读有关 形成一种 Mendix 让你在这里构建 PWA.

…并且充满 PWA 文档在这里.

另一个有趣的变化是建议使用动画排行榜，实时动态地将领先者排到顶部。虽然没有现成的小部件，但可扩展性 Mendix基于 React 的框架使我们能够构建一个。

当我开发应用程序 UI 时，我的同事 Tyler 整理了排行榜。

以下是 Tyler 对开发动画排行榜的描述：

利用可插入式小部件生成器，将这个项目的排行榜小部件组合在一起并不是什么大事。因为 Mendix 由于小部件依赖于 React 框架，因此可以整合成千上万个现成的 React 组件。在本例中，我们想要在分数变化时让排行榜动起来，因此我们选择了 React Flip 工具包 为我们承担繁重的工作。

为了生成我们想要的效果，我们所要做的就是将 Flip Toolkit 中的 Flipper 和 Flipped 组件插入 Pluggable Widget Generator 提供的小部件模板中，然后就可以开始了。添加一些 xml 来指定我们想要公开的属性 Mendix Studio Pro，就是这样——一个自定义动画排行榜小部件只需很少的努力就可以部署。

您可以在 在这里构建可插入的小部件.

运用 Mendix Team Server、Tyler 和我将合作开发、提交反馈意见并跟踪所有更改，同时无缝部署到我们的验收和生产环境。您可以 点击此处了解有关 Team Server 的更多信息.

构建

除了 Leaderboard 小部件之外，整个应用程序的构建都无需任何代码。一切都从 Sports Feed API 开始。我们需要一种方法来定期调用它。为此，计划事件 (TriggerSport_REST) 每分钟调用一次微流 EVT_Sport_REST（图 2）。

此微流（图 2）确定应用程序是否处于模拟模式（稍后会详细介绍），如果不是，则体育信息流是否处于活动状态？如果是，则调用另一个微流（图 3）执行体育信息流 REST 调用。响应也用于更新比赛得分，并计算参与者预测得分。

娱乐

早些时候，我们了解到需要一种模拟游戏活动的方法才能正确测试应用。我们使用了一个快速微流程来生成一些随机游戏分数。如果应用处于模拟模式（从管理屏幕设置），则会调用此微流程而不是 Sports Feed API。

该应用程序

这是主屏幕，用户可以在此注册、对游戏进行预测、查看游戏状态以及查看参与者得分的排行榜。

以下是正在进行的游戏、得分和游戏状态的视图：

这是参赛者的排行榜及其累积得分。

我们还可以查看所有对参与者得分有贡献的比赛预测。

总结

这是一个很棒的项目，为客户活动增添了乐趣和参与度。如果您想亲自探索并了解如何将可操作的应用程序置于您拥有的 API 之上， 从这里下载项目文件.