Skip to main content
Chat SDK v4 2x

Swift, Kotlin, and TypeScript SDKs

Wie man eine Umfrage für Entwickler erstellt: Sendbird Polls mit UIKit

How to create a voting poll for devs
Jan 24, 2023 • 25 min read
Michellejpg
Michelle Wong
Developer Advocate
Chat SDK v4 2x

Swift, Kotlin, and TypeScript SDKs

Chat SDK v4 2x

Swift, Kotlin, and TypeScript SDKs

Umfragen ermöglichen es Benutzern, Meinungen auszutauschen und miteinander zu interagieren. Sie ermöglichen eine schnelle Entscheidungsfindung, indem sie Einzelpersonen helfen, zusammenzukommen, um die Vorlieben anderer schnell und präzise zu verstehen. Ob es darum geht, einen Ort für ein Treffen auszuwählen, die beste Zeit für eine Veranstaltung herauszufinden oder zu entscheiden, welche Filme man sich ansehen soll, Umfragen vermeiden übermäßige Gespräche und liefern eine schnelle, klare Antwort für alle.

Wie können Sie also eine Umfrage erstellen? Dieses Tutorial zeigt Ihnen, wie Sie eine Anwendung mit der neuen Umfragefunktion des Sendbird Chat SDK erstellen, die in Sendbird UIKit for React integriert ist .

Vielleicht finden Sie es auch hilfreich, sich dieses Video-Tutorial anzusehen.

Einstieg

Erstellen Sie zunächst eine neue Anwendung und Benutzer im Sendbird- Dashboard . Über das Dashboard können Sie auf alles in Ihrem Chat-Dienst zugreifen.

erstelle-eine-voting-umfrage-blog-bild-1


Speichern Sie nach der Erstellung die generierte Anwendungs-ID. Sie benötigen es, um das Chat Chat SDK und UIKit in Ihrer Anwendung zu initialisieren.

erstelle-eine-voting-umfrage-blog-bild-1


Erstellen Sie nun eine React-Anwendung und installieren Sie das Sendbird SDK und das Sendbird UIKit für React mit npm:

Dieses Beispiel wird Material UI verwenden, also installieren Sie sowohl Material als auch Icons-Material:

Bitte lesen Sie die MUI-Dokumentation zu Material-UI-Symbolen.

Erstellen Sie in Ihrer Anwendung eine .env-Datei, um Ihre App-ID, Benutzer-ID, Spitznamen und Zugriffstoken zu speichern, die im Sendbird-Dashboard bereitgestellt werden. Importieren Sie dann jede Variable in die App.js-Datei, um das Chat-SDK und UIKit zu initialisieren.

Importieren Sie in App.js den Sendbird-Provider aus Sendbird UIKit. Dies wird der Wrapper für unsere Anwendung sein. Erstellen Sie dann eine neue Datei namens CustomizedApp.js und importieren Sie sie in App.js. CustomizedApp ist eine untergeordnete Komponente von SendbirdProvider und enthält die Komponenten ChannelList, Channel und ChannelSettings.

SendbirdProvider ist der Kontextanbieter für UIKit. Stellen Sie sicher, dass Sie appId, userId, Nickname und accessToken übergeben, um UIKit zu initialisieren.

Initialisieren Sie das Sendbird Chat SDK für JS in der Datei App.js. Verwenden Sie die SendbirdChat.init-Funktion und übergeben Sie die appID und Module, die verwendet werden. Um das GroupChannelModule in unserer Anwendung verwenden zu können, übergeben Sie das GroupChannelModule als Modul. Mit der Rückkehr von SendbirdChat.init verwenden wir es, um .connect aufzurufen und die Benutzer-ID und das Zugriffstoken zu übergeben.

Sendbird for community demo video mobile content offer background

Your app is where users connect.

UIKit-Komponenten

Importieren Sie in CustomizedApp ChannelList, Channel, ChannelSettings, sendbirdSelectors und useSendbirdStateContext aus UIKit.

useSendbirdStateContext ist ein useState-Hook, mit dem Sie auf den Status von sendbirdProvider zugreifen können. Wenn Sie sendbirdSelectors verwenden, wird der Status von useSendbirdStateContext benötigt. Dieses Beispiel verwendet die sendbirdSelector-Funktion getUpdateUserMessage, die den von useSendbirdStateContext bereitgestellten Zustand annimmt.

Kanalliste

Die ChannelList-Komponente rendert die Kanalliste innerhalb der Anwendung. Wir werden die Eigenschaft onChannelSelect verwenden, um den Kanal festzulegen, auf den in der Kanalliste geklickt wird.

Kanal

Die Channel-Komponente verwendet die Eigenschaften channelUrl, onChatHeaderActionClick, renderMessage und renderMesageInput. channelUrl legt die aktuelle ChannelUrl fest und onChatHeaderActionClick rendert die Einstellungsoptionen, die beim Klicken geöffnet werden.

Die renderMesage- Eigenschaft rendert eine CustomizedMessageItem-Komponente, die für unser Beispiel den Nachrichtentyp überprüft, der sich im Konversationsfenster befindet, und basierend auf der Nachricht ein bestimmtes Layout zurückgibt. Die Nachrichtentypen in UIKit sind: Benutzer-, Administrator- und Dateinachrichten. Für dieses Beispiel kann es die 3 Arten von Nachrichten geben, die UIKit bereitstellt, sowie eine Umfragenachricht. Wir werden später in diesem Beitrag detailliert auf CustomizedMessageItem eingehen.

CustomizedMessageInput

Die letzte Eigenschaft, die die Channel-Komponente verwendet, ist renderMessageInput, die eine benutzerdefinierte Nachrichteneingabe zurückgibt. Erstellen Sie eine benutzerdefinierte Komponente namens CustomizedMessageInput. Diese Komponente verwendet das voreingestellte UIKit-Layout des Eingabefelds in einem Konversationsfenster. Wir werden die Funktionalität hinzufügen, um zu prüfen, ob der Text, der in das Eingabefeld eingegeben wird, mit „/poll“ beginnt. Wenn dies der Fall ist, wird ein Formular angezeigt.

So erstellen Sie eine Abstimmungsumfrage

Nachdem wir nun die App erstellt und über einige wesentliche UIKit-Komponenten gesprochen haben, wollen wir darüber sprechen, wie man tatsächlich eine Abstimmung erstellt.

Umfrage hinzufügen

Erstellen Sie das Formular namens AddPoll. AddPoll ermöglicht es dem Benutzer, den Titel der Umfrage einzugeben und Optionen hinzuzufügen. AddPoll sieht folgendermaßen aus:

Wenn der Benutzer auf „Senden“ klickt, wird „submitPoll“ in „CustomizedMessageInput“ aufgerufen. Die Funktion submitPoll nimmt die vom Formular empfangenen Parameter (Titel und Optionen) und ruft die create-Methode aus dem Chat-SDK auf, um eine Umfrage zu erstellen.

Sobald die Umfrage erstellt ist, verwenden Sie sendUserMessage und übergeben Sie die Kanal- und Benutzernachrichtenparameter. Die Parameter für die Benutzernachricht, die definiert werden müssen, sind die Nachricht und die Umfrage-ID, um die Benutzernachricht zu senden und die soeben erstellte Umfrage an diese Nachricht anzuhängen.

Hinweis: In den Parametern wird allowUserSuggestion auf true gesetzt, damit die Umfrage anderen Benutzern erlaubt, Optionen zur Umfrage hinzuzufügen.

Lassen Sie uns nun einen Schritt zurückgehen und sehen, wie das Chat-Fenster aussieht.

Kanaleinstellungen

Die ChannelSettings-Komponente übergibt die channelUrl, um den aktuellen Kanal zu aktualisieren, und onCloseClick, um das Einstellungsoptionsmenü zu schließen.

Fügen Sie nach dem Importieren von UIKit-Komponenten die folgenden Elemente hinzu, um jede Komponente zu umschließen:

  • Ein div mit dem Klassennamen „channel-list“ um ChannelList herum
  • Ein div mit dem Klassennamen „channel-chat“ um Channel
  • Ein div mit dem Klassennamen „channel-settings“ um ChannelSettings herum

Erstellen Sie nun ein div, um alle drei Komponenten und ihre div-Wrapper mit dem Klassennamen „channel-wrap“ zu umschließen. Diese Klassennamen haben voreingestellte Stilkomponenten von UIKit, die wir auf unsere Anwendung anwenden möchten.

Damit der Chat die gesamte Ansicht mit der Kanalliste auf der linken Seite und dem Konversationsfenster auf der rechten Seite einnimmt, wenden Sie das folgende Styling auf die App.css-Datei an:

Die Anwendung wird wie folgt angezeigt:

erstelle-eine-voting-umfrage-blog-bild-4

CustomizedMessageItem

Wie bereits erwähnt, verwendet die Channel-Komponente renderMessage, um die benutzerdefinierte Komponente CustomizedMessageItem zurückzugeben. Pass in message, userId, currentChannel, updateUserMessage und sb.CustomizedMessageItem überprüft jede Nachricht in der Konversation, ob es sich um eine Administrator-, Datei-, Benutzer- oder Umfragenachricht handelt.

Basierend auf dem Nachrichtentyp, um den es sich handelt, wird die Nachricht zurückgegeben, die mit einem bestimmten Layout formatiert werden soll. Importieren Sie jeden Nachrichtentyp, der zurückgegeben werden kann, entweder eine AdminMessage, FileMessage oder UserMessage von UIKit sowie eine benutzerdefinierte PollMessage-Komponente.


Die AdminMessage, FileMessage und UserMessage verwenden die von UIKit bereitgestellten Standardlayouts.

AdminNachricht :

DateiNachricht :

Benutzernachricht :

Während UserMessage das voreingestellte Design von UIKit verwendet, möchten wir zusätzliche Funktionen hinzufügen, um zusätzliche Optionen zum Erstellen einer Umfrage aus einer Benutzernachricht auszulösen. Ein Benutzer kann auf die Dropdown-Optionen für seine Nachricht klicken und die Standardoptionen anzeigen, bei denen es sich um eine Schaltfläche zum Bearbeiten und Löschen handelt. Fügen Sie eine weitere Option hinzu, um eine Umfrage zu erstellen. 

erstelle-eine-voting-umfrage-blog-bild-1

Wenn Sie auf „Umfrage erstellen“ klicken, wird ein Formular gerendert und Sie werden nach der Frage und den Optionen der Umfrage gefragt. Erstellen Sie zum Rendern des Formulars eine AddPoll-Komponente. Importieren Sie diese Komponente in UserMessage.

Das AddPoll-Formular wird wie folgt angezeigt:

erstelle-eine-voting-umfrage-blog-bild-6

Wenn dieses Formular gesendet wird, ruft es die SubmitPoll-Funktion in UserMessage auf. Legen Sie in submitPoll die empfangenen Parameter fest, z. B. den Titel und die OptionTexts.

Da wir möchten, dass andere Benutzer eine Option zur Umfrage eines anderen hinzufügen können, werden wir auch allowUserSuggestion auf true setzen. Es gibt mehrere Parameter, die für eine Umfrage festgelegt werden können. Bitte beachten Sie die Eigenschaften der Umfragen .

Verwenden Sie jetzt Poll.create() und übergeben Sie das params-Objekt, um eine Umfrage zu erstellen. Sobald die Abfrage zurückgegeben wird, legen Sie die userMessageParams fest. Legen Sie die Nachricht von userMessageParams als Titel der übergebenen Umfrage fest, und legen Sie die Umfrage-ID von userMessageParams fest. Dies ist die neue Umfrage-ID, die beim Erstellen der Umfrage generiert wurde. Dadurch wird die neue Umfrage mit der Nachricht verbunden.

Nachdem die userMessageParams definiert sind, rufen Sie updateUserMessage auf und übergeben Sie den Kanal, die Nachrichten-ID und die userMessageParams. Dadurch wird die Nachricht aktualisiert, um die neuen Umfrageinformationen zu enthalten.

Die SubmitPoll-Funktion sollte wie folgt aussehen:

Da die Nachricht nun Umfragedaten enthält, wird die Nachricht als Umfrage betrachtet und im Konversationsfenster als Umfragenachricht wiedergegeben. Hier ist die vollständige UserMessage-Komponente:

PollMessage

Wenn eine Nachricht Umfragedaten enthält, wird die PollMessage-Komponente gerendert. PollMessage gibt ein Layout zurück, das den Standardstil von UserMessage mit zusätzlichen Funktionen verwendet. Die Umfrage zeigt den Titel, eine Schaltfläche zum Hinzufügen von Optionen und zeigt jede Option mit ihrer Stimmenanzahl und einer entsprechenden Schaltfläche für die Abstimmung an.

erstelle-eine-voting-umfrage-blog-bild-3

Der Benutzer, der die Umfrage erstellt hat, hat ein Optionsmenü, um die Umfrage zu ändern, Optionen zu löschen oder die Umfrage zu löschen. Sie können die Menüoptionen wie unten dargestellt anzeigen:

erstelle-eine-voting-umfrage-blog-bild-8

Löschen Sie eine Umfrageoption

Wenn der Benutzer, der die Umfrage erstellt hat, klickt, um eine Option aus der Umfrage zu löschen, wird DeleteOptionForm gerendert. Dieses Formular zeigt jede Option in der Umfrage.

Dies wird angezeigt als:

erstelle-eine-voting-umfrage-blog-bild-9

Sobald der Benutzer die zu löschende(n) Option(en) auswählt und das Formular übermittelt wird, wird die Funktion „deleteOption“ ausgelöst. Diese Funktion empfängt die zum Löschen ausgewählten Optionen und ruft die Funktion deletePollOption auf . Es erfordert die Übergabe der Umfrage-ID und der Options-ID und löscht die Option aus der Umfrage.

Aktualisieren Sie eine Umfrage

Wenn der Benutzer auf die Option „Umfrage ändern“ klickt, wird eine benutzerdefinierte UpdatePollForm-Komponente gerendert.

Das Aktualisierungsformular sieht wie folgt aus:

Wenn der Benutzer das Formular absendet, ruft es updatePoll auf . Legen Sie in updatePoll die aktualisierten Parameter fest, rufen Sie updatePoll auf und übergeben Sie die ID der Umfrage und die aktualisierten Parameter.

Umfrage löschen

Wenn der Benutzer auf die Option „Umfrage löschen“ klickt, wird die Funktion „deletePoll “ aufgerufen , die die Umfrage-ID übernimmt.

Umfrageoptionen hinzufügen

Jeder Benutzer hat die Möglichkeit, der Umfrage Optionen hinzuzufügen. Fügen Sie in PollMessage eine Schaltfläche hinzu, die die Anzeige eines Eingabefelds auslöst.

erstelle-eine-voting-umfrage-blog-bild-11

Wenn das Eingabefeld angezeigt wird, kann ein Benutzer eine Option eingeben, die der Umfrage hinzugefügt werden soll. Sobald die Eingabe übermittelt wurde, wird eine handleOptionsSubmit-Funktion aufgerufen. handleOptionsSubmit verwendet die Funktion addPollOption , um die Option zur Umfrage hinzuzufügen. addPollOption erfordert, dass die Abfrage-ID und die Option als Zeichenfolge übergeben werden.

Abstimmung über eine Umfrage

Damit Benutzer über eine Umfrageoption abstimmen können, erstellen Sie eine Schaltfläche für jede Option. Wenn ein Benutzer auf die Abstimmungsschaltfläche der Option klickt, wird die handleVote-Funktion aufgerufen. handleVote findet die Option, auf die geklickt wurde, und erhöht die Stimmenzahl um 1.

Erstellen Sie ein neues Objekt namens updatedVoteCounts, um die Stimmenanzahl und die Options-ID zu speichern. Erstellen Sie als Nächstes ein pollVoteEventPayload-Objekt und übergeben Sie die aktualisierten Stimmenzahlen, den Zeitstempel, die Umfrage-ID und die Nachrichten-ID.

Importieren Sie PollVoteEvent aus dem Sendbird Chat SDK und erstellen Sie eine neue Instanz davon. Das PollVoteEvent erfordert die Übergabe der folgenden Parameter: Abfrage-ID, Nachrichten-ID und pollEventPayload.

Da wir die Instanz des Umfrageereignisses haben, verwenden Sie die Funktion votePoll. Die votePoll benötigt die Umfrage-ID, die Options-IDs der Umfrage und das Umfrageereignis. Verwenden Sie dann mit dem von votePoll zurückgegebenen Ereignis die Funktion applyPollVoteEvent für die Umfrage und übergeben Sie das Ereignis.

Nachdem Sie die Abstimmung auf die Umfrage angewendet haben, durchlaufen Sie jede der Optionen in der Umfrage. Verwenden Sie für jede Option die createPollVoterListQuery , um die Wähler zu erhalten. Durchlaufen Sie dann jeden der Wähler aus der Listenabfrage und prüfen Sie, ob der Wähler mit dem aktuellen Benutzer übereinstimmt. Wenn dies der Fall ist, setzen Sie die Abstimmung auf die ID der Option. Dadurch wird der Status der Stimme des aktuellen Benutzers innerhalb dieser Umfrage festgelegt.

Wenn die Stimme des Benutzers in einem Zustand gespeichert wird, kann die Umfragenachricht die Option erkennen, für die der aktuelle Benutzer gestimmt hat, und sie in der UI widerspiegeln. Jetzt wird die Schaltfläche, auf die zum Abstimmen geklickt wurde, fett dargestellt, um anzuzeigen, dass dies die Option ist, für die Sie abgestimmt haben.

Dies wird angezeigt als:

erstelle-eine-voting-umfrage-blog-bild-12

Die handleVote-Funktion sieht folgendermaßen aus:

Da die Stimme des Benutzers jetzt in der Benutzeroberfläche angezeigt wird, wenn er zum Abstimmen klickt, möchten Sie auch, dass seine Stimmen beim ersten Laden der Seite angezeigt werden. Wenn also ein Benutzer die Seite lädt, wird die entsprechende Abstimmungsschaltfläche der Option, über die er abgestimmt hat, fett dargestellt.

Verwenden Sie dazu den React-Hook useEffect, um die Voter zum Rendern zu bringen. Durchlaufen Sie die Optionen der Umfrage und rufen Sie für jede Option die Wähler ab, indem Sie createPollVoterListQuery aufrufen. Übergeben Sie die Umfrage-ID und die Options-ID. Gehen Sie dann jeden der Wähler für diese Meinung durch und prüfen Sie, ob der aktuelle Benutzer in der Wählerliste steht. Wenn dies der Fall ist, setzen Sie die Abstimmung für die Umfrage auf die Options-ID, für die der Benutzer abgestimmt hat.

useEffect sieht so aus:

Abstimmungsänderungen erhalten

An diesem Punkt haben wir den aktuellen Benutzer in der Lage, Änderungen an der Umfrage vorzunehmen. Sie benötigen jedoch auch andere aktive Benutzer, um die Änderungen auf ihrer Seite zu erhalten. Importieren Sie GroupChannelHandler aus UIKit. Erstellen Sie eine neue Instanz des Handlers. Rufen Sie dann den Gruppenkanal des Chat-SDK ab und verwenden Sie die Funktion addGroupChannelHandler. addGroupChannelHandler erfordert eine eindeutige Handler-ID, die als ID der Nachricht festgelegt wird, und die Gruppenkanal-Handler-Instanz.

Nachdem der Gruppenkanal-Handler nun mit dem Gruppenkanal verbunden ist, möchten Sie, dass er auf ein onPollVoted- und ein onPollUpdated-Ereignis wartet.

Der Ereignis-Listener onPollVoted wird ausgelöst, wenn über eine Umfrage abgestimmt wird. Wenn diese Aktion auftritt, verwenden Sie applyPollVoteEvent für die Umfrage und übergeben Sie das Ereignis, das von onPollVoted zurückgegeben wird. Dann möchten Sie useChannelContext aus UIKit importieren, um den messageDispatcher zu erhalten. Sobald Sie den messgeDispatcher haben, legen Sie den Typ und die Nutzlast fest, um die Änderung auf der Benutzeroberfläche widerzuspiegeln. Wenn jetzt andere Benutzer bei einer Umfrage abstimmen, wird auf eine Abstimmung geachtet, das Abstimmungsereignis angewendet und der Bildschirm aktualisiert.

Das onPollUpdated-Ereignis wartet darauf, wenn eine Umfrage geändert wird, z. B. das Hinzufügen oder Löschen einer Option oder das Ändern des Umfragetitels. Wenn dieses Ereignis eintritt, verwendet es die Funktion applyPollUpdateEvent für die Abfrage und übergibt das aufgetretene Ereignis. Anschließend wird messageDispatcher verwendet, um die Änderung in der Benutzeroberfläche zu aktualisieren.

Mit allen oben genannten Implementierungen sieht PollMessage folgendermaßen aus:

Fazit

Und da haben Sie es! Sie haben gelernt, wie Sie eine Umfrage erstellen. In diesem Tutorial haben wir darüber gesprochen, wie Sie eine UIKit- Anwendung erstellen, die Umfragen aus dem Chat-SDK enthält . Jetzt können Benutzer Umfragen in ihrer täglichen Chat-Erfahrung verwenden, um keine Zeit mit dem Warten auf eine konkrete Antwort zu verschwenden und rechtzeitig zu einem Konsens zu kommen. Von hier aus werden Sie verstehen, wie Sie Umfragen in Ihrer eigenen benutzerdefinierten Anwendung implementieren, die Ihren Anforderungen entspricht.

Bitte sehen Sie sich das vollständige Github-Repository an . Weitere Informationen zu Umfragen finden Sie in der Sendbird- Dokumentation . Für Diskussionen über alle Sendbird-Produkte, Anwendungsfälle und mehr besuchen Sie die Sendbird-Community . Wenn Sie weitere Fragen zu dem in diesem Tutorial behandelten Material haben, kontaktieren Sie uns bitte ! Unsere Experten helfen Ihnen gerne weiter.

Fröhliches Umfragen-Gebäude! 📊

Ebook Grow Mobile content offer background

Take customer relationships to the next level.

Ready for
the next level?