Sendbird UIKit for React로 예약 메시지를 작성하는 방법

Jan 30, 2023 • 11 min read

Michelle Wong

Developer Advocate

인앱 채팅 을 위한 강력한 도구인 예약 메시지 를 사용하면 보낸 사람이 가장 적절한 시간에 받는 사람에게 연락하고 필수적인 유연성을 제공할 수 있습니다. 메시지를 예약하는 것은 발신자에게 편리하고 수신자에게 예의를 갖추는 것입니다. 특히 두 사람이 서로 다른 시간대에 있을 때 더욱 그렇습니다. 예약 메시지는 의료 기관에서 약속 알림을 보내고, 핀테크 에서 필수 은행 알림을 보내고, 마켓플레이스 에서 판촉 메시지를 보내는 데 유용합니다.

이 튜토리얼에서는 Sendbird UIKit 애플리케이션 내에서 Sendbird Chat SDK for JS 로 예약 메시지를 사용하는 방법을 안내합니다.

예약 메시지는 그룹 채널 내에서만 사용할 수 있다는 점에 유의해야 합니다. 또한 예약 메시지를 보낼 때는 현재 시간을 기준으로 5분 이후로 예약해야 합니다.

예약된 메시지 구현에 대한 아래 비디오 자습서를 시청하는 것이 유용할 수 있습니다.

시작하자!

예약 메시지 시작하기

시작하려면 Sendbird 계정을 만드세요 . 그런 다음 Sendbird 대시보드 에서 새 애플리케이션과 사용자를 생성합니다 . 대시보드는 채팅 서비스의 모든 항목에 액세스할 수 있는 곳입니다. 생성 후 애플리케이션에서 Chat SDK 및 UIKit을 초기화하기 위해 생성된 애플리케이션 ID를 저장합니다.

다음으로, React 애플리케이션을 생성하고 npm 을 사용하여 Sendbird Chat SDK 및 Sendbird UIKit for React 를 설치합니다.

이 샘플은 Material UI를 사용하므로 다음을 설치합니다.

머티리얼 UI 아이콘에 대해서는 MUI 문서 를 참조하세요 .

애플리케이션 내에서 날짜와 시간을 검색하려면 dayjs를 설치하십시오.

애플리케이션에서 .env 파일을 생성하여 Sendbird 대시보드에서 제공하는 앱 ID, 사용자 ID, 닉네임 및 액세스 토큰을 저장합니다. 그런 다음 각 변수를 App.js 파일로 가져와 Chat SDK 및 UIKit을 초기화합니다.

App.js 에서 애플리케이션의 래퍼가 될 UIKit에서 Sendbird 공급자 를 가져옵니다 . CustomizedApp.js라는 새 파일을 만들고 App.js로 가져옵니다. CustomizedApp은 SendbirdProvider의 하위 구성요소이며 ChannelList, Channel 및 ChannelSettings 구성요소를 포함합니다.

SendbirdProvider는 UIKit의 컨텍스트 공급자입니다. UIKit을 초기화하려면 appId, userId, 닉네임 및 accessToken을 전달해야 합니다.

App.js 파일에서 Sendbird Chat SDK for JS를 초기화합니다. SendbirdChat.init 함수를 사용하고 사용할 appID 및 모듈을 전달합니다. 애플리케이션에서 GroupChannelModule을 사용하려면 GroupChannelModule을 모듈로 전달합니다. SendbirdChat.init가 반환되면 이를 사용하여 .connect를 호출하고 userID 및 accessToken을 전달합니다.

The only UIKit you need.

Start building

기본 UIKit 구성 요소

CustomizedApp에서 UIKit의 ChannelList, Channel, ChannelSettings를 가져옵니다.

채널 목록

ChannelList 구성 요소는 응용 프로그램 내에서 채널 목록을 렌더링합니다. onChannelSelect 속성을 사용하여 채널 목록에서 클릭되는 채널을 설정합니다.

채널

채널 구성 요소는 channelUrl, onChatHeaderActionClick 및 renderMesageInput 속성을 사용합니다. channelUrl은 currentChannelUrl을 설정하고 onChatHeaderActionClick은 클릭 시 열리는 설정 옵션을 렌더링합니다.

채널 구성 요소가 사용할 마지막 속성은 대화 창 내에 사용자 지정 메시지 입력 구성 요소를 표시하는 renderMessageInput입니다. CustomizedMessageInput이라는 사용자 지정 구성 요소를 만듭니다.

채널 설정

ChannelSettings 구성 요소는 channelUrl을 전달하여 현재 채널을 업데이트하고 onCloseClick을 전달하여 설정 옵션 메뉴를 닫습니다.

UIKit 구성 요소를 가져온 후 다음 요소를 추가하여 각 구성 요소를 래핑합니다.

ChannelList 주위에 클래스 이름이 "channel-list"인 div
채널 주변에 클래스 이름이 "channel-chat"인 div
ChannelSettings 주위에 클래스 이름이 "channel-settings"인 div

이제 클래스 이름이 "channel-wrap"인 div 래퍼와 세 구성 요소를 모두 감싸는 div를 만듭니다. 이러한 클래스 이름에는 응용 프로그램에 적용하려는 UIKit의 미리 설정된 스타일 구성 요소가 있습니다.

채팅에서 왼쪽에 채널 목록을 표시하고 오른쪽에 대화 창을 표시하려면 App.css 파일에 다음 스타일을 적용합니다.

응용 프로그램은 다음과 같이 표시됩니다.

이제 채팅의 기초가 완성되었으므로 사용자 지정을 구현합니다.

UIKit 사용자 정의

맞춤형 메시지 입력

언급한 바와 같이 Channel 구성 요소는 renderMessageInput 속성을 사용하여 CustomizedMessageInput을 반환합니다. CustomizedMessageInput은 메시지를 작성하기 위한 입력 필드와 파일을 첨부하기 위한 아이콘이 포함된 UIKit의 사전 설정 디자인을 사용하는 것으로 시작합니다.

예약된 메시지 나열

입력 상자가 비어 있는 경우 클릭하면 채널에서 사용자의 예약된 메시지 목록을 렌더링하는 Material UI의 아이콘 버튼을 추가합니다.

우측 입력바에 새로운 아이콘이 추가됩니다.

먼저 loadScheduledMessages 함수는 showScheduleMessageList의 상태를 true로 설정합니다. showScheduleMessageList가 true이므로 CustomizedMessageInput이 반환되면 사용자 지정 구성 요소인 ScheduleMessageList가 렌더링됩니다. 반환 내에서 다음과 같이 표시됩니다.

ScheduleMessageList는 예약된 메시지 목록을 렌더링합니다.

다음으로 loadScheduledMessages는 목록 쿼리와 총 예약 메시지 수를 검색하고 해당 정보를 ScheduledMessageList에 전달하여 표시합니다.

예약된 모든 메시지를 나열 하려면 channelUrl이 필요한 쿼리 매개변수를 만듭니다. 샘플에서 매개변수에는 보류 상태인 예약된 메시지 목록을 반환하는 scheduledStatus가 포함됩니다. 매개변수가 설정되면 createScheduledMessageListQuery를 호출하고 매개변수를 전달합니다. 다음은 예약된 메시지 목록을 반환합니다.

목록이 수신되면 scheduledMessgesList라고 부르는 상태 변수 내에서 목록을 추적합니다.

그런 다음 이 변수가 ScheduleMessageList 구성 요소로 전달되고 목록이 화면에 렌더링됩니다.

예약된 메시지 수를 검색 하려면 scheduledStatus 를 포함할 매개변수를 설정합니다. 그런 다음 getTotalScheduledMessageCount를 호출하고 매개변수를 전달합니다. 보류 중인 메시지 수가 반환되면 해당 숫자를 상태(setScheduledMessagesCount)로 유지하고 해당 변수를 ScheduleMessageList에 전달하여 개수를 표시합니다.

위의 단계가 완료되면 loadScheduledMessages는 다음과 같이 표시됩니다.

ScheduledMessageList 블로그 이미지 — 예정된 메시지 목록

예약 메시지 업데이트

ScheduleMessageList에서 목록에 표시된 각 메시지에는 업데이트 및 취소 버튼이 있습니다. 사용자가 업데이트를 클릭하면 updateScheduledMessage가 호출됩니다. 이는 화면에서 ScheduleMessageList를 제거하고 ScheduleMessageForm을 표시하기 위해 setShowScheduleMessageList를 false로 설정하고 setShowScheduleMessageForm을 true로 설정합니다.

다음으로 setMessageToUpdate를 사용하여 선택한 메시지 개체의 상태를 저장하고 setInputText의 메시지인 입력된 텍스트를 저장합니다.

이제 setShowScheduleMessageForm이 true이므로 CustomizedMessageInput은 ScheduleMessageForm을 반환합니다.

ScheduleMessageForm은 다음과 같습니다.

예약 메시지 양식을 통해 사용자는 날짜와 시간을 변경하거나 예약된 메시지 자체를 업데이트할 수 있습니다. 사용자가 양식을 제출하면 scheduleMessage를 호출합니다. scheduleMessage는 메시지가 기존 예약 메시지에서 업데이트되고 있는지 또는 처음으로 생성되었는지 확인합니다.

이 메시지는 예약된 메시지를 클릭하여 예약된 메시지 목록에서 왔기 때문에 업데이트되며 예약된 메시지를 업데이트하는 기능을 사용합니다 . 반면에 메시지가 아직 생성되지 않은 경우 생성 기능을 사용하여 새 예약 메시지를 생성합니다.

새 예약 메시지 보내기

CustomizedMessageInput에서 사용자가 입력창에 입력할 때 표시되는 Material UI의 아이콘 버튼을 추가하고 사용자가 메시지를 예약할 수 있도록 합니다.

추가된 아이콘 버튼은 입력 필드의 맨 오른쪽에서 볼 수 있습니다.

아이콘을 클릭하면 setShowScheduleMessageForm이 true가 되고 앞서 언급한 ScheduleMessageForm이 나타납니다.

양식이 제출되면 scheduleMessage를 호출합니다. 이 경우 업데이트 방법 대신 생성 방법을 사용하도록 예약된 새 메시지를 생성합니다. params 개체에는 message 및 scheduledAt 속성이 필요합니다. 매개변수는 createScheduledUserMessage 함수로 전달됩니다.

예약된 메시지 취소

CustomizedMessageInput에서 ScheduleMessageList는 업데이트 및 취소 버튼이 있는 각 메시지를 표시합니다. 사용자가 취소 버튼을 클릭하면 cancelScheduledMessage 기능이 트리거됩니다.

이 함수 내 에서 채팅 SDK 의 cancelScheduledMessage 함수를 사용하여 예약된 메시지를 취소합니다. 예약된 메시지의 ID를 전달해야 합니다. 그런 다음 해당 메시지가 취소되면 loadScheduledMessages를 호출하여 보류 중인 예약된 메시지 목록을 다시 로드합니다. 이렇게 하면 방금 취소된 메시지가 더 이상 표시되지 않도록 UI가 업데이트됩니다.

cancelledScheduledMessage는 다음과 같습니다.

결론

훌륭해! 이제 Sendbird Chat SDK의 예약 메시지 기능을 활용하는 UIKit을 사용하여 작동하는 채팅 애플리케이션이 생겼습니다! 사용자가 게임에서 앞서 나가고 나중에 보낼 메시지를 예약하는 데 도움이 되는 조치를 취했습니다.

이 샘플 의 전체 github 리포지토리 를 확인하는 것이 좋습니다 . Sendbird Chat 또는 UIKit 에 대한 도움이 필요한 경우 채팅용 문서 및 UIKit용 문서 를 참조하세요 ! 풍부한 사전 구축 UI 구성 요소를 사용하여 앱에서 채팅을 시작하고 실행하는 방법에 대한 지침을 찾을 수 있습니다. 또한 Sendbird 와 관련된 모든 것에 대해 질문하고 답변할 수 있는 포럼인 Sendbird 커뮤니티 에서 답변을 찾을 수 있습니다 . 도움이 필요하시면 주저하지 마시고 저희에게 연락해 주십시오 . 저희 전문가가 기꺼이 도와드리겠습니다.