在一天之内用Supabase、Figma和DhiWise增强你的ClickUp技能。简介在这篇文章中，我们将学习我如何

在这篇文章中，我们将学习我如何建立一个网络应用程序来管理我的组织的目标映射与指标。

ClickUp在其任务管理系统中推出了目标跟踪，根据关键结果来衡量成功与否，以实现目标。

对于这个应用程序，需要管理个人目标的指标，每月衡量其进展。令人惊讶的是，ClickUp提供了强大而有组织的REST API，可以根据ClickUp中的可用数据建立应用程序。

由于我们的年度目标已经在ClickUp中定义，使用Supabase的REST APIs，指标被存储并分配给ClickUp中的个人目标，以及不同类别的每月目标。因此，跟踪月度目标和年度目标以及ClickUp中的任务是非常方便的。

我使用了ClickUp的目标API，以退休目标和他们的所有信息。所有运行这个API所需要的东西，都在ClickUp API文档中提到了，并说明了从哪里得到它们的步骤。

步骤：1根据我的要求设计Figma，并遵循DhiWise设计的指南，以获得最大的准确性。

为了在你的代码中获得80%以上的设计准确度，在设计Figma时要遵循这些设计指南。

第2步: 2将此设计导入DhiWise，创建一个React应用程序。以下是相关的教程视频。

步骤：3设置应用程序的主页。

第4步：在菜单项上设置导航功能。

第5步：在我的网页上集成6个API。您可以在 "页面加载时 "和动作上设置API。

下面是ClickUp在加载页面时整合API的一个例子。

首先，你需要向DhiWise添加API。你可以使用postman集合或使用他们内置的API运行器。

你需要添加必要的信息来运行API。我没有记录它，因为它有私人令牌。

现在你可以使用这个API集成到你的网页上。

正如你所看到的，DhiWise提供了API集成的请求参数和主体映射，从视图或手动输入的验证，响应映射到视图或本地存储，以及成功和错误响应处理。

步骤：6按照步骤5，让我们在页面上整合所有的API。另外，DhiWise已经确定了模态页面，所以我不需要单独编码。我甚至还为模态集成了一个API。

**第7步:**下载源代码后，有必要在 "创建指标页 "上添加一个可编辑的下拉菜单。由于DhiWise生成的代码是组件驱动的，我快速添加了一个新的组件，并将其添加到页面上，我的工作就完成了。下面是它的代码。

**第8步：**在添加了一些业务逻辑后，该应用程序就可以上线了。你可以从DhiWise直接将应用程序部署到Vercel。

步骤：9你也可以从DhiWise为你的网络应用程序设置一个图标。是的，DhiWise也会照顾到一些小功能。

总结

使用三个强大的工具--ClickUp、Supabase和DhiWise，在不牺牲安全和性能以及成本和时间的情况下，使用ClickUp的API、Supabase的数据库效率和DhiWise的代码质量，建立这样一个应用程序是轻而易举的事。