DevCycle 商业实战 —— 实时促销与模拟演练

这是提交给DevCycle 特性标志挑战：特性标志趣屋

我希望能够创建一个真正使用功能标志的应用程序，而不是仅仅作为一个后端替代品。这个应用程序是一个理论上的多种服务结合体。

我是某个中型时尚创业公司的CEO或销售管理员，正在组织一场例如新年夜的单日销售活动。公司目前在大约6-7个国家开展业务，并计划在每个国家的指定日期进行这次销售活动。

该应用程序总共有4个组件，前端和后端分别承担其常规功能，而一个仪表盘则与它们集成在一起，该仪表盘以指标、点击量、使用量等形式收集来自销售数据世界的数据。该仪表盘供公司销售管理员使用，他们可以利用仪表盘的各种功能做出明智的决策，选择正确的标志或指示。仪表盘还包含一个模拟程序，模拟相同的功能。

根据各国的时区，在仪表板上制定了一份时间表，以便在“eve”到来且处于各自时区的时间时激活销售标志。

对于现在正在进行活跃销售的国家，可以从仪表板根据洞察分析和关键指标执行各种操作。

我已经把网站上线了，在不同国家采用了不同的版本组合。我还单独上线了仪表盘。

用例

比如说，公司收到了用户的投诉，说实验性的聊天机器人使用了粗俗的语言。管理员可以关闭 chatbot 变量。

如果在推荐页面上推荐的产品没有被加入购物车，甚至导致中途放弃购物，那么可以关闭 recommend-page。

假设，商品添加到购物车后，如果因为总价过高导致大量顾客放弃购物车，这时管理员可以提高运费豁免额度，这将在前端显示促销横幅并在后端计算相应的运费折扣。

可以根据历史指标为不同国家提供不同的版本。这样做之一的好处是我用来存储和跟踪devcycle状态的数据结构。

功能标志位

该应用程序包含5个功能和7个变量。

这些变量如下，影响UI和后端的特定区域。

1. sale-status（前端和后端）显示当前用户区域中销售是否处于活动状态，是其他标志的前提条件。
2. sort-strategy（后端）变量包含主页上分类排序策略以及其中产品排序策略。例如，“profit”策略会优先显示对公司利润贡献最大的类别和产品。
3. recommend-strategy（后端）变量同样有多种策略值，用于在推荐页面向用户推荐产品。例如，“stock”策略会鼓励用户购买库存积压的商品。
4. chatbot（前端）变量开启或关闭网站上的实验性AI聊天机器人，该聊天机器人是为此次销售专门开发的。
5. cart-page（前端）变量切换新的实验性购物车布局，包括一个专用的购物车页面，而不是当前使用的侧边栏。
6. recommend-page（前端）变量控制在购物车页面之前的实验性推荐页面。只有当cart-page变量设置为true时，它才有效，作为cart-interface功能的一部分。
7. shipping-waiver（前端和后端）变量决定了免除运费的程度。网站上的产品有免费配送、自有配送和第三方配送。在UI和购物车布局（包括侧边栏和页面）中，将显示关于该促销活动的横幅。

所有功能、变量和变体的参考信息都可以在网站和仪表板上查看。
网站会展示该地区当前使用的变量及其对应的变体值。
因为仪表板是为管理员设计的，所以它在一个位置展示了所有国家的当前状态。

仪表盘

在仪表板上，有一个控制面板和模拟面板。控制面板就像是专门为该应用程序定制的类似 devcycle 平台。模拟面板提供了亲自体验此应用程序用例的机会。它模拟了公司的见解和指标，以及只要计时器在运行就可以操作的控制流。

模拟（仿真）

仪表板包含一个类似自定义开发周期仪表板的控制台和一个模拟部分。

在仪表板上增加了一个模拟现场销售场景的模拟，并设置了精细的流程控制，以模拟可能在实际体验中出现的情况。该游戏利用图表和一系列查询或见解，提供实用建议，例如调整功能标志来提升客户体验。

这是一张图片，来看看这张图片吧。

当地

这个网站是用我的账号上线的，各国版本不同。

访问不同的国家会遇到不同的功能标志组合，可以在“标志设置”按钮中查看。

网站和仪表板都可以本地化设置，相关信息可以在仓库的README页面找到。

网址： https://devcycle-commerce.vercel.app

控制面板：https://devcycle-dashboard.vercel.app

代码库：https://github.com/mr-loop-1/devcycle-commerce

API之星：授予一个项目，这个项目通过充分利用DevCycle API而脱颖而出——展现出利用DevCycle API的创意和能力。

我第一次通过这次黑客松了解到特性开关，并在了解了它们之后，我马上意识到，这种动态配置在我过去的许多项目中都是必要的。

这个应用的灵感来自于sale标志，我认为后端实现起来会比较困难，因为它还涉及展示不同的UI，并且它可以为不同的时区安排不同的时间。

这个项目是我第一次在React中自己创建context和reducer。这是我写的状态管理中最复杂的项目。这也是我第一次使用图表来展示数据，并且对此库有了很多了解。

这是我第一次做游戏，而且能玩，挺满意的。

我期待能与DevCycle的软件和社区有更多的互动。

我喜欢 DevCycle 仪表板的一个原因是它的强大 API 和现成的接口，这使得集成起来非常顺畅。

我也意识到需要根据条件来标记的功能，即只有当 recommend-page 为真时，我的 recommend-strategy 变量才相关。我将在完成应用程序后提交这个功能请求。

挑战

我很高兴能够顺利地在各种API之间导航，并找到了一种模仿仪表板的方式，同时跟上了用于设置和更新不同时区功能标志的复杂数据结构。最大的挑战是在存储了variation_ids后更新目标。

最大的时间消耗因素是从头开始构建这两个应用，因为我希望它们能够按我想要的方式运行。

仿真面板

仪表板计划包括一个1分钟的实时销售演示，玩家将扮演网站的销售经理，根据来自各个销售团队和指标的实时洞察来调整功能标志的变体。

我会尽快完成这个面板，即使它不被评估，因为我已经做完了所需组件，只需把游戏流程串起来就好。

我加了一个仿真面板。

图片:

应用程序系统的结构

模拟仪表板上的内容的见解与洞察

实时标志状态（Live Flag state）

独立的购物车页面，带有全单折扣的横条

点击查看原图

带有相同横幅的标准购物车页面

如图所示：

不同折扣的商品

在模拟中理解历史

（图片说明） 如下图所示

所有功能的参考

如图所示