如何使用 Sendbird UIKit for React 构建预定消息
预定消息是应用程序内聊天的强大工具，它允许发件人在最合适的时间到达收件人并提供必要的灵活性。安排消息既方便发件人又尊重收件人，尤其是当两者处于不同时区时。预定消息对于医疗保健组织发送约会提醒、金融科技发送基本银行通知、市场发送促销信息等非常有用。
在本教程中，我们将介绍如何在Sendbird UIKit应用程序中使用用于 JS 的 Sendbird 聊天 SDK 的计划消息。
请务必注意，预定消息仅在群组频道内可用。此外，发送预定消息时，必须将其安排在距当前时间 5 分钟之后。
您可能会发现观看以下有关实施计划消息的视频教程很有用。
让我们开始吧！
开始使用预定消息
首先，创建一个 Sendbird 帐户。然后在Sendbird Dashboard中创建一个新的应用程序和用户。仪表板是您可以访问聊天服务中所有内容的地方。创建后，将生成的应用程序ID保存到您的应用程序中以初始化Chat SDK和UIKit。
接下来，创建一个 React 应用程序并使用 npm 安装Sendbird Chat SDK和Sendbird UIKit for React：
此示例将使用 Material UI，因此请安装以下内容：
请参阅有关材料 UI 图标的MUI 文档。
安装 dayjs 以在应用程序中检索日期和时间：
在您的应用程序中，创建一个 .env 文件来存储您在 Sendbird 仪表板中提供的 App ID、用户 ID、昵称和访问令牌。然后，将每个变量导入 App.js 文件以初始化 Chat SDK 和 UIKit。
在 App.js 中，从 UIKit 导入Sendbird Provider，它将成为我们应用程序的包装器。创建一个名为 CustomizedApp.js 的新文件并将其导入 App.js。CustomizedApp 将是 SendbirdProvider 的子组件，包含 ChannelList、Channel 和 ChannelSettings 组件。
SendbirdProvider 是 UIKit 的上下文提供者。确保传入 appId、userId、昵称和 accessToken 以初始化 UIKit。
在 App.js 文件中初始化 Sendbird Chat SDK for JS。使用 SendbirdChat.init 函数并传入将使用的 appID 和模块。为了能够在我们的应用程序中使用 GroupChannelModule，请将 GroupChannelModule 作为模块传入。随着 SendbirdChat.init 的返回，我们用它来调用 .connect 并传入 userID 和 accessToken。
The only UIKit you need.
基本的 UIKit 组件
在 CustomizedApp 中，从 UIKit 导入 ChannelList、Channel、ChannelSettings。
频道列表
ChannelList 组件将在应用程序中呈现频道列表。我们将使用 onChannelSelect 属性来设置在频道列表中被点击的频道。
渠道
Channel 组件将使用 channelUrl、onChatHeaderActionClick 和 renderMesageInput 属性。channelUrl 将设置 currentChannelUrl 和 onChatHeaderActionClick 呈现设置选项以在单击时打开。
Channel 组件将使用的最后一个属性是 renderMessageInput，它在对话窗口中显示自定义消息输入组件。创建一个名为 CustomizedMessageInput 的自定义组件。
频道设置
ChannelSettings 组件传入 channelUrl 更新当前频道，onCloseClick 关闭设置选项菜单。
导入 UIKit 组件后，添加以下元素环绕每个组件：
- ChannelList 周围类名为“channel-list”的 div
- Channel 周围类名为“channel-chat”的 div
- ChannelSettings 周围类名为“channel-settings”的 div
现在，创建一个 div 来包裹所有三个组件及其 div 包装器，类名为“channel-wrap”。这些类名具有来自 UIKit 的预设样式组件，我们希望将其应用于我们的应用程序。
要让聊天在左侧显示频道列表，在右侧显示对话窗口，请将以下样式应用于 App.css 文件：
该应用程序将显示如下：
现在聊天的基础已经完成，我们将实施定制。
UIKit 自定义
自定义消息输入
如前所述，Channel 组件使用 renderMessageInput 属性返回 CustomizedMessageInput。CustomizedMessageInput 将从使用 UIKit 的预设设计开始，其中包含一个用于编写消息的输入字段以及一个用于附加文件的图标。
列出预定消息
当输入框为空时，从 Material UI 添加一个图标按钮，单击该按钮将呈现频道中用户计划消息的列表。
首先，loadScheduledMessages 函数将 showScheduleMessageList 的状态设置为 true。由于 showScheduleMessageList 为真，CustomizedMessageInput 的返回将渲染一个自定义组件 ScheduleMessageList。这是它在返回中的样子：
ScheduleMessageList 将呈现计划消息列表。
接下来，loadScheduledMessages 将检索列表查询以及计划的消息总数并将该信息传递给 ScheduledMessageList 以显示它。
要列出所有计划的消息，请创建需要 channelUrl 的查询参数。在我们的示例中，参数将包括 scheduledStatus 以返回具有待处理状态的计划消息列表。设置参数后，调用 createScheduledMessageListQuery 并传入参数。以下将返回计划消息列表：
收到列表后，在我们称为 scheduledMessgesList 的状态变量中跟踪它。
然后，这个变量将被传递到 ScheduleMessageList 组件，列表将被呈现到屏幕上。
要检索计划消息的数量，请设置将包含 scheduledStatus 的参数。然后，调用 getTotalScheduledMessageCount 并传入参数。一旦待处理的消息数量返回，将该数字保持在状态 setScheduledMessagesCount 并将该变量传递到 ScheduleMessageList 以显示计数。
完成上述步骤后，loadScheduledMessages 将如下所示：
更新预定消息
在 ScheduleMessageList 中，列表中显示的每条消息都会有一个更新和取消按钮。当用户点击更新时，它会调用 updateScheduledMessage。这会将 setShowScheduleMessageList 设置为 false，并将 setShowScheduleMessageForm 设置为 true，以便从屏幕上删除 ScheduleMessageList 并显示 ScheduleMessageForm。
接下来，存储所选消息对象的状态，这是使用 setMessageToUpdate 完成的，并存储输入的文本，即 setInputText 中的消息。
现在 setShowScheduleMessageForm 为真，CustomizedMessageInput 将返回 ScheduleMessageForm：
ScheduleMessageForm 将如下所示：
计划消息表单将允许用户更改日期和时间或更新计划消息本身。当用户提交表单时，它会调用 scheduleMessage。scheduleMessage 将检查消息是从现有计划消息更新还是首次创建。
由于此消息是通过单击预定消息来自预定消息列表的，因此它将被更新并使用该功能来更新预定消息。另一方面，如果尚未创建消息，它将使用 create 函数生成新的计划消息：
发送新的预定消息
在 CustomizedMessageInput 中，当用户在输入栏中键入时，从 Material UI 添加一个图标按钮，该按钮将出现并允许用户安排消息。
单击该图标时，setShowScheduleMessageForm 将等于true，将出现前面提到的ScheduleMessageForm。
提交表单时，它会调用 scheduleMessage。在这种情况下，它正在创建一个新的预定消息，因此它将使用创建方法而不是更新方法。params 对象需要消息和 scheduledAt 属性。参数被传递到 createScheduledUserMessage 函数中。
取消预定消息
在 CustomizedMessageInput 中，ScheduleMessageList 显示带有更新和取消按钮的每条消息。当用户点击取消按钮时，会触发 cancelScheduledMessage 函数。
在此函数中，使用聊天 SDK 中的cancelScheduledMessage函数取消预定消息。它需要传入预定消息的 ID。然后，一旦该消息被取消，调用 loadScheduledMessages 以重新加载挂起的预定消息列表。这将更新 UI 以不再显示刚刚取消的消息。
canceledScheduledMessage 将如下所示：
结论
你做到了！现在你有一个使用 UIKit 的功能聊天应用程序，它利用了 Sendbird Chat SDK 的预定消息功能！您已采取措施帮助用户抢先一步并安排他们希望在未来发送的消息。
我们建议您查看此示例的完整github 存储库。如果您需要有关Sendbird Chat或UIKit的帮助，请参阅我们的 Chat文档和UIKit 文档！您将找到有关如何使用丰富的预构建 UI 组件在您的应用程序中启动和运行聊天的指南。您还可以在Sendbird 社区中找到答案，您可以在该论坛中提出和回答与Sendbird相关的所有问题。如果您需要帮助，请随时联系我们——我们的专家很乐意为您提供帮助。
快乐的预定消息构建！💬
