初探 Monday Apps 开发（三）- JSSDK 与 UI 组件库

在上一篇文章中，我们介绍了如何使用 Monday Apps 开发板块的 API 接口。本篇将着重介绍 Monday Apps 开发中的 JSSDK 和 UI 组件库，并举出相应的案例与场景或者实例。

什么是 JSSDK？

JSSDK 是指 Monday Apps 开发中的 JavaScript SDK，它允许开发者通过调用 Monday Apps 的 JS API 来操作和控制 Monday Apps 应用程序。通过 JSSDK，您可以获取、更新和删除项目、通知和更新用户等。

例如，我们可以使用 JSSDK 中的 monday.api 对象来调用以下方法：

monday.api.request(参数)：使用此方法可以发出 HTTP 请求。
monday.api.subscribe(事件名称, 回调函数)：使用此方法可以订阅 Monday Apps 中的事件。
monday.api.unsubscribe(事件名称, 回调函数)：使用此方法可以取消订阅事件。

什么是 UI 组件库？

UI 组件库是 Monday Apps 开发中的界面元素集合，它包含了各种 UI 组件，如按钮、文本框、下拉列表等。使用 UI 组件库，开发者可以更加方便地创建和设计应用程序的界面。

例如，我们可以使用 UI 组件库中的 monday-ui-react-core 包来使用以下组件：

<Button>：使用此组件可以创建一个按钮。
<Input>：使用此组件可以创建一个输入框。
<Select>：使用此组件可以创建一个下拉列表。

案例与场景

假设我们正在开发一个项目管理应用程序，在任务列表中，我们想要为每个任务添加一个标签，以便用户能够更好地识别和管理各个任务之间的关系。为了实现这一功能，我们可以使用 JSSDK 中的 monday.api.request() 方法向 Monday 应用程序发送请求，并使用 UI 组件库中的 <Tag> 组件创建任务标签。

具体而言，我们可以使用以下代码来实现这一功能：

javascriptCopy Code
import React, { useState, useEffect } from 'react';
import { Button, Input, Tag } from '@mondaydotcom/ui-react-core';

const TaskList = () => {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    // 获取任务列表
    monday.api.request('query { items { name } }')
      .then(res => setTasks(res.data.items));
  }, []);

  const handleAddTag = (taskId, tagName) => {
    // 向任务添加标签
    monday.api.request(`mutation { create_tag(item_id: ${taskId}, tag_name: "${tagName}") { id } }`)
      .then(() => {
        // 更新任务列表
        monday.api.request('query { items { name } }')
          .then(res => setTasks(res.data.items));
      });
  }

  return (
    <div>
      {tasks.map((task, index) => (
        <div key={index}>
          <p>{task.name}</p>
          <Input placeholder="输入标签名称" onKeyPress={(e) => {
            if (e.key === 'Enter') {
              handleAddTag(123, e.target.value);
              e.target.value = '';
            }
          }} />
          <Tag label="标签1" />
          <Button onClick={() => handleAddTag(123, '标签2')}>添加标签</Button>
        </div>
      ))}
    </div>
  )
}

export default TaskList;

在上述代码中，我们使用了 JSSDK 来获取任务列表并向任务添加标签，同时使用 UI 组件库中的 <Input> 和 <Tag> 组件来创建输入框和标签。

总结

本篇文章主要介绍了 Monday Apps 开发中的 JSSDK 和 UI 组件库，并举出了一个案例。使用 JSSDK 和 UI 组件库，开发者可以更加方便地开发出强大、美观且有趣的应用程序。