개발자를 위한 투표를 만드는 방법: UIKit과 함께 Sendbird 투표 사용

Jan 24, 2023 • 25 min read

Michelle Wong

Developer Advocate

설문 조사 를 통해 사용자는 의견을 공유하고 서로 상호 작용할 수 있습니다. 개인이 함께 모여 다른 사람의 선호도를 빠르고 간결하게 이해할 수 있도록 도와 빠른 의사 결정을 가능하게 합니다. 모임 장소를 선택하든, 이벤트에 가장 적합한 시간을 찾든, 어떤 영화를 볼지 결정하든, 투표는 과도한 대화를 피하고 모든 사람에게 빠르고 명확한 답변을 제공합니다.

그렇다면 어떻게 투표 설문을 만들 수 있습니까? 이 튜토리얼에서는 Sendbird UIKit for React에 통합된 Sendbird Chat SDK의 새로운 투표 기능 을 사용하여 애플리케이션을 빌드하는 방법을 보여줍니다 .

이 비디오 자습서를 시청하는 것이 유용할 수도 있습니다.

시작하기

시작하려면 Sendbird 대시보드 에서 새 애플리케이션과 사용자를 생성합니다 . 대시보드는 채팅 서비스의 모든 항목에 액세스할 수 있는 곳입니다.

생성 후 생성된 애플리케이션 ID를 저장합니다. 애플리케이션에서 Chat Chat SDK 및 UIKit 을 초기화하는 데 필요합니다 .

이제 React 애플리케이션을 만들고 npm을 사용하여 React용 Sendbird SDK 및 Sendbird UIKit을 설치합니다.

이 샘플은 Material UI를 사용하므로 material과 icons-material을 모두 설치합니다.

Material UI 아이콘에 대한 MUI 문서 를 참조하십시오 .

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

App.js 에서 Sendbird 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을 전달합니다.

Sendbird for community demo video mobile content offer background

Your app is where users connect.

Start messaging

UIKit 구성 요소

CustomizedApp에서 UIKit에서 ChannelList, Channel, ChannelSettings, sendbirdSelectors 및 useSendbirdStateContext를 가져옵니다.

useSendbirdStateContext는 sendbirdProvider의 상태에 액세스할 수 있게 해주는 useState 후크입니다. sendbirdSelectors를 사용하는 경우 useSendbirdStateContext의 상태가 필요합니다. 이 샘플은 sendbirdSelector 함수 getUpdateUserMessage를 사용하여 useSendbirdStateContext에서 제공하는 상태를 가져옵니다.

채널 목록

ChannelList 구성 요소는 애플리케이션 내에서 채널 목록을 렌더링합니다. onChannelSelect 속성을 사용하여 채널 목록에서 클릭되는 채널을 설정합니다.

채널

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

renderMesage 속성 은 CustomizedMessageItem 구성 요소를 렌더링하며, 샘플의 경우 대화 창에 있는 메시지 유형을 확인하고 메시지를 기반으로 특정 레이아웃을 반환합니다. UIKit의 메시지 유형은 사용자, 관리자 및 파일 메시지입니다. 이 샘플의 경우 UIKit이 제공하는 3가지 유형의 메시지와 투표 메시지가 있을 수 있습니다. 이 게시물 뒷부분에서 CustomizedMessageItem에 대해 자세히 설명하겠습니다.

맞춤형 메시지 입력

채널 구성 요소가 사용할 마지막 속성은 맞춤 메시지 입력을 반환하는 renderMessageInput입니다. CustomizedMessageInput이라는 사용자 지정 구성 요소를 만듭니다. 이 구성 요소는 대화 창에서 입력 필드의 미리 설정된 UIKit 레이아웃을 사용합니다. 입력란에 입력되는 텍스트가 '/poll'로 시작하는지 확인하는 기능을 추가합니다. 그렇다면 양식이 나타나도록 트리거합니다.

투표 설문을 만드는 방법

이제 앱을 빌드하고 일부 필수 UIKit 구성 요소에 대해 이야기했으므로 실제로 투표를 만드는 방법에 대해 이야기해 보겠습니다.

설문조사 추가

AddPoll이라는 양식을 작성하십시오. AddPoll을 사용하면 사용자가 투표 제목을 입력하고 옵션을 추가할 수 있습니다. AddPoll은 다음과 같이 표시됩니다.

사용자가 제출을 클릭하면 CustomizedMessageInput에서 submitPoll이 호출됩니다. submitPoll 함수는 form에서 받은 제목과 옵션인 params를 받아서 채팅 SDK에서 create 메소드 를 호출하여 투표를 생성합니다.

투표가 생성되면 sendUserMessage를 사용하고 채널 및 사용자 메시지 매개변수를 전달합니다. 정의해야 하는 사용자 메시지 매개변수는 사용자 메시지를 보내고 방금 생성된 설문을 해당 메시지에 첨부하기 위한 메시지 및 설문 ID입니다.

참고: 설문에서 다른 사용자가 설문에 옵션을 추가할 수 있도록 매개변수에서 allowUserSuggestion이 true로 설정됩니다.

이제 한 걸음 물러서서 채팅창이 어떻게 생겼는지 살펴보겠습니다.

채널 설정

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

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

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

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

채팅이 왼쪽의 채널 목록과 오른쪽의 대화 창으로 전체 보기를 차지하도록 하려면 App.css 파일에 다음 스타일을 적용합니다.

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

맞춤형 메시지 항목

앞서 언급한 것처럼 채널 구성 요소는 renderMessage를 사용하여 사용자 정의 구성 요소인 CustomizedMessageItem을 반환합니다. 메시지 전달, userId, currentChannel, updateUserMessage 및 sb.CustomizedMessageItem은 관리자, 파일, 사용자 또는 설문 메시지인 경우 대화의 각 메시지를 확인합니다.

메시지 유형에 따라 특정 레이아웃으로 서식이 지정된 메시지를 반환합니다. 사용자 지정 PollMessage 구성 요소뿐만 아니라 UIKit에서 AdminMessage, FileMessage 또는 UserMessage를 반환할 수 있는 각 유형의 메시지를 가져옵니다.

AdminMessage, FileMessage 및 UserMessage는 UIKit에서 제공하는 기본 레이아웃을 사용합니다.

관리자 메시지 :

파일 메시지 :

사용자 메시지 :

UserMessage는 UIKit의 사전 설정 디자인을 사용하지만 사용자 메시지에서 투표를 생성하는 추가 옵션을 트리거하는 추가 기능을 추가하려고 합니다. 사용자는 메시지에 대한 드롭다운 옵션을 클릭하고 편집 및 삭제 버튼인 기본 옵션을 볼 수 있습니다. 투표를 만들려면 다른 옵션을 추가하세요.

'설문조사 만들기'를 클릭하면 양식이 렌더링되고 설문조사의 질문과 옵션을 묻습니다. 양식을 렌더링하려면 AddPoll 구성 요소를 만듭니다. UserMessage에서 이 구성 요소를 가져옵니다.

AddPoll 양식은 다음과 같이 표시됩니다.

이 양식이 제출되면 UserMessage에서 submitPoll 함수를 호출합니다. submitPoll에서 제목 및 optionTexts와 같은 수신된 매개변수를 설정합니다.

다른 사용자가 다른 사람의 투표에 옵션을 추가할 수 있기를 원하므로 allowUserSuggestion도 true로 설정합니다. 투표에 대해 설정할 수 있는 여러 매개변수가 있습니다. 투표 속성 을 참조하십시오 .

이제 Poll.create()를 사용하고 params 개체를 전달하여 투표를 만듭니다. 설문이 반환되면 userMessageParams를 설정합니다. 전달된 설문의 제목으로 userMessageParams의 메시지를 설정하고 userMessageParams의 설문 ID를 설정합니다. 이는 투표 작성 시 생성된 새 투표 ID입니다. 이렇게 하면 새 투표가 메시지와 연결됩니다.

userMessageParams가 정의된 후 updateUserMessage를 호출하고 채널, 메시지 ID 및 userMessageParams를 전달합니다. 이렇게 하면 새 투표 정보를 보유하도록 메시지가 업데이트됩니다.

submitPoll 함수는 다음과 같아야 합니다.

이제 메시지에 투표 데이터가 포함되어 있으므로 메시지가 투표로 간주되고 대화 창에 투표 메시지로 렌더링됩니다. 다음은 전체 UserMessage 구성 요소입니다.

투표 메시지

메시지에 설문 데이터가 포함되어 있으면 PollMessage 구성 요소를 렌더링합니다. PollMessage는 추가 기능과 함께 UserMessage의 기본 스타일을 사용하는 레이아웃을 반환합니다. 투표는 제목, 옵션 추가 버튼을 표시하고 각 옵션을 투표 수 및 해당 투표 버튼과 함께 표시합니다.

설문을 만든 사용자에게는 설문을 변경하거나 옵션을 삭제하거나 설문을 삭제할 수 있는 옵션 메뉴가 있습니다. 아래와 같이 메뉴 옵션을 볼 수 있습니다.

설문 옵션 삭제

설문을 만든 사용자가 설문에서 옵션을 삭제하기 위해 클릭하면 DeleteOptionForm이 렌더링됩니다. 이 양식은 투표의 각 옵션을 표시합니다.

이는 다음과 같이 표시됩니다.

사용자가 삭제할 옵션을 선택하고 양식이 제출되면 deleteOption 기능이 트리거됩니다. 이 함수는 삭제하도록 선택된 옵션을 수신하고 deletePollOption 함수를 호출합니다. 투표 ID와 옵션 ID를 전달해야 하며 투표에서 옵션을 삭제합니다.

설문 조사 업데이트

사용자가 '조사 변경' 옵션을 클릭하면 사용자 정의 UpdatePollForm 구성 요소가 렌더링됩니다.

업데이트 양식은 다음과 같습니다.

사용자가 양식을 제출하면 updatePoll 이 호출 됩니다. updatePoll에서 업데이트된 매개변수를 설정하고 updatePoll을 호출한 다음 투표 ID와 업데이트된 매개변수를 전달합니다.

설문조사 삭제

사용자가 투표 삭제 옵션을 클릭하면 투표 ID를 가져오는 deletePoll 함수를 호출합니다.

설문 옵션 추가

모든 사용자는 투표에 옵션을 추가할 수 있습니다. PollMessage에서 입력 상자가 나타나도록 트리거하는 버튼을 추가합니다.

입력 상자가 나타나면 사용자는 투표에 추가할 옵션을 입력할 수 있습니다. 입력이 제출되면 handleOptionsSubmit 함수를 호출합니다. handleOptionsSubmit은 addPollOption 함수를 사용하여 투표에 옵션을 추가합니다. addPollOption에는 설문 ID와 옵션을 전달할 문자열이 필요합니다.

설문 조사에 투표

사용자가 설문 옵션에 투표할 수 있도록 하려면 각 옵션에 대한 버튼을 만듭니다. 사용자가 옵션의 투표 버튼을 클릭하면 handleVote 함수가 호출됩니다. handleVote는 클릭된 옵션을 찾고 투표 수를 1씩 증가시킵니다.

투표 수와 옵션 ID를 보관할 updatedVoteCounts라는 새 개체를 만듭니다. 다음으로 pollVoteEventPayload 객체를 만들고 업데이트된 투표 수, 타임스탬프, 투표 ID 및 메시지 ID를 전달합니다.

Sendbird Chat SDK에서 PollVoteEvent를 가져와 새 인스턴스를 만듭니다. PollVoteEvent에는 투표 ID, 메시지 ID 및 pollEventPayload 매개변수가 전달되어야 합니다.

투표 이벤트의 인스턴스가 있으므로 votePoll 함수를 사용합니다. votePoll에는 투표 ID, 투표 옵션 ID 및 투표 이벤트가 필요합니다. 그런 다음, votePoll에서 반환되는 이벤트와 함께 투표에서 applyPollVoteEvent 함수를 사용하고 이벤트를 전달합니다.

투표에 투표를 적용한 후 투표의 각 옵션을 반복합니다. 각 옵션에 대해 createPollVoterListQuery 를 사용 하여 유권자를 수신합니다. 그런 다음 목록 쿼리에서 각 유권자를 반복하고 유권자가 현재 사용자와 일치하는지 확인합니다. 그렇다면 투표를 옵션의 ID와 동일하게 설정하십시오. 그러면 해당 투표 내에서 현재 사용자의 투표 상태가 설정됩니다.

사용자의 투표를 상태에 저장하면 투표 메시지가 현재 사용자가 투표한 옵션을 인식하고 UI에 반영할 수 있습니다. 이제 투표를 위해 클릭한 버튼이 굵게 표시되어 귀하가 투표한 옵션임을 나타냅니다.

이는 다음과 같이 표시됩니다.

handleVote 함수는 다음과 같습니다.

이제 사용자가 투표를 클릭하면 사용자의 투표가 UI에 표시되므로 초기 페이지 로드 시에도 투표가 표시되기를 원합니다. 따라서 사용자가 페이지를 로드하면 투표한 옵션의 해당 투표 버튼이 굵게 표시됩니다.

이렇게 하려면 반응 후크 useEffect를 사용하여 유권자를 렌더링합니다. 투표 옵션을 반복하고 각 옵션에 대해 createPollVoterListQuery를 호출하여 유권자를 가져옵니다. 투표 ID와 옵션 ID를 전달합니다. 그런 다음 해당 의견에 대한 각 투표자를 살펴보고 현재 사용자가 투표자 목록에 있는지 확인합니다. 그렇다면 투표에 대한 투표를 사용자가 투표한 옵션 ID와 동일하게 설정하십시오.

useEffect는 다음과 같습니다.

투표 투표 변경 수신

이 시점에서 현재 사용자가 투표를 변경할 수 있습니다. 그러나 다른 활성 사용자도 변경 사항을 수신해야 합니다. UIKit에서 GroupChannelHandler를 가져옵니다. 처리기의 새 인스턴스를 만듭니다. 그런 다음 채팅 SDK의 그룹 채널을 가져와서 addGroupChannelHandler 함수를 사용합니다. addGroupChannelHandler에는 메시지의 ID로 설정될 고유 핸들러 ID와 그룹 채널 핸들러 인스턴스가 필요합니다.

이제 그룹 채널 핸들러가 그룹 채널에 연결되었으므로 onPollVoted 및 onPollUpdated 이벤트를 수신하도록 할 수 있습니다.

투표가 투표되면 onPollVoted 이벤트 리스너가 트리거됩니다. 해당 작업이 발생하면 투표에서 applyPollVoteEvent를 사용하고 onPollVoted에서 반환된 이벤트를 전달합니다. 그런 다음 messageDispatcher를 가져오기 위해 UIKit에서 useChannelContext를 가져오려고 합니다. messgeDispatcher가 있으면 UI에 변경 사항을 반영하도록 유형과 페이로드를 설정합니다. 이제 다른 사용자가 설문에 투표하면 투표를 듣고 투표 이벤트를 적용하고 화면을 업데이트합니다.

onPollUpdated 이벤트는 옵션 추가 또는 삭제 또는 설문 제목 변경과 같이 설문이 변경될 때 수신합니다. 이 이벤트가 발생하면 폴에서 applyPollUpdateEvent 함수를 사용하고 발생한 이벤트를 전달합니다. 그런 다음 messageDispatcher를 사용하여 UI의 변경 사항을 업데이트합니다.

위의 모든 구현에서 PollMessage는 다음과 같이 표시됩니다.

결론

그리고 당신은 그것을 가지고 있습니다! 투표 설문을 만드는 방법을 배웠습니다. 이 자습서에서는 Chat SDK 의 투표를 통합하는 UIKIt 애플리케이션 을 만드는 방법에 대해 설명했습니다 . 이제 사용자는 일상적인 채팅 경험에서 설문 조사를 사용하여 구체적인 답변을 기다리는 시간을 낭비하지 않고 적시에 합의에 도달할 수 있습니다. 여기에서 필요에 맞는 맞춤형 애플리케이션에서 투표를 구현하는 방법을 이해할 수 있습니다.

전체 Github 저장소 를 확인하십시오 . 투표에 대한 자세한 내용은 Sendbird 문서 를 확인하세요 . 모든 Sendbird 제품, 사용 사례 등에 대한 토론은 Sendbird 커뮤니티 를 확인하세요 . 이 튜토리얼에서 다루는 자료에 대해 더 궁금한 점이 있으면 문의하십시오 ! 우리의 전문가들은 항상 기꺼이 도와드립니다.