Wie man geplante Nachrichten mit dem Sendbird UIKit für React erstellt

Geplante Nachrichten, ein leistungsstarkes Tool für In-App- Chats , ermöglichen es Absendern, Empfänger zum geeignetsten Zeitpunkt zu erreichen, und bieten wesentliche Flexibilität. Das Planen einer Nachricht ist sowohl bequem für den Absender als auch respektvoll für den Empfänger, insbesondere wenn sich beide in unterschiedlichen Zeitzonen befinden. Geplante Nachrichten sind nützlich für Gesundheitsorganisationen , um Terminerinnerungen zu senden , Fintech, um wichtige Bankbenachrichtigungen zu senden, Marktplätze , um Werbebotschaften zu senden, und mehr.

In diesem Tutorial erklären wir Ihnen, wie Sie geplante Nachrichten mit dem Sendbird Chat SDK für JS in einer Sendbird UIKit- Anwendung verwenden.

Es ist wichtig zu beachten, dass geplante Nachrichten nur innerhalb von Gruppenkanälen verfügbar sind. Außerdem muss das Senden einer geplanten Nachricht nach 5 Minuten ab der aktuellen Zeit geplant werden.

Es kann hilfreich sein, sich das folgende Video-Tutorial zur Implementierung geplanter Nachrichten anzusehen.

Lass uns anfangen!

Erste Schritte mit geplanten Nachrichten

Erstellen Sie zunächst ein Sendbird -Konto . Erstellen Sie dann im Sendbird Dashboard eine neue Anwendung und einen neuen Benutzer . Über das Dashboard können Sie auf alles in Ihrem Chat-Dienst zugreifen. Speichern Sie nach der Erstellung die generierte Anwendungs-ID, um das Chat-SDK und UIKit in Ihrer Anwendung zu initialisieren.

Erstellen Sie als Nächstes eine React-Anwendung und installieren Sie das Sendbird Chat SDK und das Sendbird UIKit für React mit npm:

Dieses Beispiel wird Material UI verwenden, also installieren Sie Folgendes:

Informationen zu materiellen UI -Symbolen finden Sie in der MUI-Dokumentation .

Installieren Sie dayjs, um das Datum und die Uhrzeit innerhalb der Anwendung abzurufen:

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-Anbieter aus UIKit, der der Wrapper für unsere Anwendung sein wird. Erstellen Sie eine neue Datei namens CustomizedApp.js und importieren Sie sie in App.js. CustomizedApp wird eine untergeordnete Komponente des SendbirdProviders sein und die Komponenten ChannelList, Channel und ChannelSettings enthalten.

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.

Grundlegende UIKit-Komponenten

Importieren Sie in CustomizedApp ChannelList, Channel, ChannelSettings aus UIKit.

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 und renderMesageInput. channelUrl legt die aktuelle ChannelUrl fest und onChatHeaderActionClick rendert die Einstellungsoptionen, die beim Klicken geöffnet werden.

Die letzte Eigenschaft, die die Kanalkomponente verwendet, ist renderMessageInput, die eine benutzerdefinierte Nachrichteneingabekomponente im Konversationsfenster anzeigt. Erstellen Sie eine benutzerdefinierte Komponente namens CustomizedMessageInput.

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 links die Kanalliste und rechts das Konversationsfenster anzeigt, wenden Sie das folgende Styling auf die App.css-Datei an:

Die Anwendung wird wie folgt angezeigt:

Nachdem die Grundlage des Chats nun vollständig ist, werden wir Anpassungen implementieren.

UIKit-Anpassungen

CustomizedMessageInput

Wie bereits erwähnt, verwendet die Channel-Komponente die renderMessageInput-Eigenschaft, um CustomizedMessageInput zurückzugeben. CustomizedMessageInput beginnt mit der Verwendung des voreingestellten Designs von UIKit, das ein Eingabefeld zum Schreiben einer Nachricht sowie ein Symbol zum Anhängen einer Datei enthält.

Geplante Nachrichten auflisten

Wenn das Eingabefeld leer ist, fügen Sie eine Symbolschaltfläche aus der Material-Benutzeroberfläche hinzu, die beim Klicken eine Liste der geplanten Nachrichten des Benutzers im Kanal rendert.

Zuerst setzt die Funktion loadScheduledMessages den Zustand von showScheduleMessageList auf true. Da showScheduleMessageList wahr ist, rendert die Rückgabe von CustomizedMessageInput eine benutzerdefinierte Komponente, ScheduleMessageList. So sieht es innerhalb der Rückgabe aus:

ScheduleMessageList rendert die Liste der geplanten Nachrichten.

Als Nächstes ruft loadScheduledMessages eine Listenabfrage sowie die Gesamtzahl der geplanten Nachrichten ab und übergibt diese Informationen an die ScheduledMessageList, um sie anzuzeigen.

Um alle geplanten Nachrichten aufzulisten , erstellen Sie die Abfrageparameter, die die channelUrl erfordern. In unserem Beispiel enthalten die Parameter „scheduleStatus“, um eine Liste der geplanten Nachrichten mit dem Status „Ausstehend“ zurückzugeben. Sobald die Parameter festgelegt sind, rufen Sie createScheduledMessageListQuery auf und übergeben Sie die Parameter. Folgendes gibt die Liste der geplanten Nachrichten zurück:

Wenn die Liste empfangen wird, verfolgen Sie sie in einer Zustandsvariablen, die wir „scheduleMessgesList“ nennen.

Dann wird diese Variable an die ScheduleMessageList-Komponente übergeben und die Liste wird auf dem Bildschirm gerendert.

Um die Anzahl der geplanten Nachrichten abzurufen, legen Sie die Parameter fest, die den ScheduledStatus enthalten. Rufen Sie dann getTotalScheduledMessageCount auf und übergeben Sie die Parameter. Sobald die Anzahl der ausstehenden Nachrichten zurückgegeben wird, halten Sie diese Zahl in einem Zustand, der setScheduledMessagesCount ist, und übergeben Sie diese Variable an ScheduleMessageList, um die Anzahl anzuzeigen.

Wenn die obigen Schritte abgeschlossen sind, sieht loadScheduledMessages folgendermaßen aus:

Geplante Nachrichten aktualisieren

In der ScheduleMessageList hat jede in der Liste angezeigte Nachricht eine Schaltfläche zum Aktualisieren und Abbrechen. Wenn ein Benutzer auf „Aktualisieren“ klickt, wird „updateScheduledMessage“ aufgerufen. Dadurch wird setShowScheduleMessageList auf false und setShowScheduleMessageForm auf true gesetzt, um die ScheduleMessageList vom Bildschirm zu entfernen und das ScheduleMessageForm anzuzeigen.

Speichern Sie als Nächstes den Status des ausgewählten Nachrichtenobjekts, was mit setMessageToUpdate erfolgt, und speichern Sie den eingegebenen Text, der die Nachricht ist, in setInputText.

Jetzt, da setShowScheduleMessageForm wahr ist, gibt CustomizedMessageInput ScheduleMessageForm zurück:

ScheduleMessageForm sieht folgendermaßen aus:

Das Planmeldungsformular ermöglicht es Benutzern, das Datum und die Uhrzeit zu ändern oder die geplante Meldung selbst zu aktualisieren. Wenn der Benutzer das Formular absendet, ruft es scheduleMessage auf. scheduleMessage prüft, ob die Nachricht von einer bestehenden geplanten Nachricht aktualisiert oder zum ersten Mal erstellt wird.

Da diese Nachricht durch Klicken auf eine geplante Nachricht aus der Liste der geplanten Nachrichten stammt, wird sie aktualisiert und die Funktion zum Aktualisieren einer geplanten Nachricht verwendet . Wenn die Nachricht hingegen noch nicht erstellt wurde, wird die Erstellungsfunktion verwendet, um eine neue geplante Nachricht zu generieren:

Senden einer neuen geplanten Nachricht

Wenn ein Benutzer in CustomizedMessageInput etwas in die Eingabeleiste eingibt, fügen Sie eine Symbolschaltfläche aus der Material-UI hinzu, die angezeigt wird und es dem Benutzer ermöglicht, die Nachricht zu planen.

Wenn auf das Symbol geklickt wird, ist setShowScheduleMessageForm gleich true und das zuvor erwähnte ScheduleMessageForm wird angezeigt.

Wenn das Formular gesendet wird, ruft es scheduleMessage auf. In diesem Fall wird eine neue geplante Nachricht erstellt , sodass die create-Methode anstelle der update-Methode verwendet wird. Das params-Objekt erfordert eine Nachricht und eine scheduleAt-Eigenschaft. Die Parameter werden an die Funktion createScheduledUserMessage übergeben.

Stornieren Sie geplante Nachrichten

In CustomizedMessageInput zeigt die ScheduleMessageList jede Nachricht mit der Schaltfläche zum Aktualisieren und Abbrechen an. Wenn ein Benutzer auf die Schaltfläche „Abbrechen“ klickt, wird die Funktion „cancelScheduledMessage“ ausgelöst.

Verwenden Sie innerhalb dieser Funktion die Funktion cancelScheduledMessage aus dem Chat-SDK, um eine geplante Nachricht abzubrechen. Es erfordert, dass die ID der geplanten Nachricht übergeben wird. Sobald diese Nachricht abgebrochen ist, rufen Sie loadScheduledMessages auf, um die Liste der anstehenden geplanten Nachrichten neu zu laden. Dadurch wird die Benutzeroberfläche aktualisiert, sodass die gerade abgebrochene Nachricht nicht mehr angezeigt wird.

Die cancelledScheduledMessage sieht folgendermaßen aus:

Abschluss

Du hast es geschafft! Jetzt haben Sie eine funktionierende Chat-Anwendung mit UIKit, die die Funktion für geplante Nachrichten des Sendbird Chat SDK nutzt! Sie haben die Schritte unternommen, um Benutzern dabei zu helfen, dem Spiel einen Schritt voraus zu sein und Nachrichten zu planen, die sie in Zukunft senden möchten.

Wir empfehlen, dass Sie sich das vollständige Github-Repository dieses Beispiels ansehen. Wenn Sie Hilfe mit Sendbird Chat oder dem UIKit benötigen, lesen Sie bitte unsere Dokumentation für Chat und Dokumentation für UIKit ! Sie finden Anleitungen zum Einrichten und Ausführen von Chats in Ihrer App mit umfangreichen vorgefertigten UI-Komponenten. Antworten finden Sie auch in der Sendbird Community , einem Forum, in dem Sie Fragen rund um Sendbird stellen und beantworten können . Bitte zögern Sie nicht, uns zu kontaktieren, wenn Sie Hilfe benötigen – unsere Experten helfen Ihnen gerne weiter.

Viel Spaß beim Erstellen geplanter Nachrichten! 💬