社区绘画🎨

我建造了什么

对于 DevCycle 功能标志挑战，我制作了一个独特的每日绘图应用程序。该应用程序挑战用户绘制每日提示。然而有一个转折！钢笔工具设置由功能标志控制，并且对于所有活跃用户都是相同的！当您更新笔触粗细和颜色等功能时，它们将更改为所有活跃用户必须共同努力才能创造出伟大的东西。

构建此应用程序的第一个挑战是配置 Web 套接字 API。我使用 AWS API Gateway WebSocket API 向所有连接的用户广播笔触。这涉及设置几个 lambda 函数来管理连接并向所有连接的用户发送消息。

设置好 API 后，我创建了一个带有 Canvas 元素的 Next.js 应用。我将一些事件侦听器附加到画布上，以实现基本的绘图功能。构建此应用最困难的部分之一是弄清楚如何向包含笔划数据的 WebSocket 发送消息，并在所有连接的设备上复制绘图。我最终将笔划存储为 xy 坐标元组的数组。当用户完成绘制笔划（鼠标向上事件）时，我会将消息广播给所有用户。

然后是时候添加一些笔触选项，包括笔触粗细和颜色。这是我实现 DevCycle 变量的地方。我在我的 DevCycle 帐户中为笔触选项设置了一个功能。我为此功能添加了一个“笔触粗细”数字变量，以管理所有用户的笔触粗细状态。我还添加了一个“笔触颜色”字符串变量来管理颜色选择器使用的十六进制代码。DevCycle React SDK 可以轻松使用“useVariableValue”钩子检索这些值。每当用户更改笔触粗细或颜色时，我都会调用一个服务器操作，该操作向 DevCycle API 发出请求，以更新这些变量的主要变体，并提供给所有用户。我还对颜色选择器进行了去抖动处理，以免向 API 发送过多请求。

为了完成该应用程序，我设置了一个 DynamoDB 表，用于在画布上添加新笔触时保存绘图内容。我还设置了一个 cronjob，每天创建一个新提示。此 cronjob 利用 OpenAI API 生成新提示。

演示

该应用程序在此处上线：https：//community-drawing-app.vercel.app/

我的代码

https://github.com/wilstaley/community-drawing-app

我的 DevCycle 经历

我利用 DevCycle 的 React 客户端 SDK 检索我的笔划变量的值。我还利用 DevCycle API 在用户更新设置时修补变体的值。总体而言，我对 DevCycle 的体验非常好。我非常喜欢功能、变量和变体的结构。这使我能够干净地建模我的数据。我有一个“stroke-options”功能，其中包含两个变量“stroke-weight”和“stroke-color”。我遇到的唯一问题是 API 的一个方面。我想更新功能中单个变量的变体值。但是，当我向“更新变体”端点发送修补请求时，如果我没有指定两个变量的值，我遗漏的那个变量将被覆盖。即使我只想更新“stroke-weight”的值，我也必须在请求中发送“stroke-weight”和“stroke-value”的值，以确保没有覆盖任何内容。这可能是预期的行为，但通常我认为 PATCH 请求只会更新提供的值而不会覆盖现有数据。

额外奖项

DEV 挑战现已开始！

查看所有参与方式、证明您的技能并赢取奖品。

访问挑战中心