So erstellen Sie die ultimative wiederverwendbare Web-Chat-Komponente

Sie haben wahrscheinlich bereits viele Anleitungen und Anleitungen für Web-Chats gelesen. Ich meine, wir unterhalten uns ständig über die verbleibenden Tage (natürlich außerhalb der Bürozeiten), daher ist dies ein recht häufiges Thema. Aber hier ist meine Frage: Wie oft können Sie eine Chat-App ohne Kopieren / Einfügen implementieren und wie schnell? Und was wäre, wenn Sie eine ganze Reihe solcher Apps mit der ultimativen Komponente erstellen könnten?

Diese Implementierung dauerte neun Monate. Und viel Glück, um genau das gleiche zu bekommen! Quelle: funtube

Was wäre, wenn Sie eine Web-Chat-Komponente erstellen könnten, die Sie beliebig oft wiederverwenden können, die von bestimmten Szenarien unabhängig ist und die Sie mit nur wenigen unterschiedlichen Konfigurationen in jede Anwendung integrieren können? Ist das ein Traum? Nein überhaupt nicht. Mal sehen, wie es geht.

Viel einfacher, oder? Quelle: tugimnasiacerebral

Forschungsphase: Anforderungen sammeln

Alle guten Projekte beginnen mit dem Sammeln von Anforderungen. Zum Beispiel habe ich meine Mitarbeiter gezwungen, online mit mir zu sprechen, um die „Forschung“ zu entschuldigen. Auf diese Weise konnte ich die häufigsten, besten und schlechtesten Verhaltensweisen vieler Apps erkennen.

Aber das Wichtigste zuerst. Was erwarten wir, wenn wir die Webversion einer Chat-App öffnen?

  • Repliziertes Erscheinungsbild: Die Web- und Mobilversion müssen (fast) gleich aussehen. Sie wollen Konsistenz.
  • Ein Bedürfnis nach Geschwindigkeit: Denken Sie an schnelles Laden, schnelles Senden von Dateien und schnelle Reaktionen auf Ihre Eingaben.
  • Robustheit ist ein Muss: Die Chat-App muss robust sein. Es wird erwartet. Als Webversion ist die Verbindung immer vorhanden und höchstwahrscheinlich auch eine gute Verbindung.

Unter Berücksichtigung dieser Anforderungen können Sie über Erfahrungen nachdenken. Hier ist, was in Bezug auf das Verhalten auffiel.

Neues Gespräch

Dies ist ganz einfach: Wenn Sie mit jemandem chatten möchten, geben Sie etwas ein.

Das häufigste Verhalten in einer neuen Konversation ist das Ausblenden des Anhangs (oder anderer verfügbarer Optionen) und das Anzeigen der Schaltfläche Senden. Da es sich um eine Web-App handelt, ist die Eingabetaste immer verfügbar und sollte immer die Nachricht senden. Der visuelle Hinweis, wann Sie die Nachricht senden können, wird jedoch zur Standardeinstellung.

Eine Konversation starten.

Erhaltene Nachrichten

Richtig, was passiert dann, wenn Sie mehr als eine Nachricht erhalten? Sie benötigen einen Hinweis, um die ungelesenen anzuzeigen. Von den verschiedenen Ansätzen, die ich gesehen habe, ist der am häufigsten verwendete ein Trennzeichen (normalerweise eine farbige Linie) zwischen den Nachrichten, die Sie bereits gelesen haben, und den Nachrichten, die Sie noch nicht gelesen haben. Beim Lesen der Nachrichten werden einige Trennzeichen jedoch einige Sekunden nach dem Öffnen der Konversation ausgeblendet, andere, wenn Sie sich auf die Eingabe konzentrieren, und andere, wenn Sie antworten.

Verschiedene Möglichkeiten, um neue ungelesene Nachrichten anzuzeigen.

Anhänge

Das Senden und Empfangen von Dateien ändert sich von App zu App. Wir alle erwarten jedoch zumindest, dass wir unabhängig vom Dateinamen wissen, was gesendet wird. Wir erkennen einen Dateityp in der Regel an seinem Symbol und nicht an seinem Namen oder seiner Erweiterung. Daher wird beim Übertragen von Dateien eine visuelle Darstellung oder ein Symbol bevorzugt. Die meisten von uns möchten auch eine Vorschau dieser Dateien anzeigen, aber nicht alle Apps unterstützen dies. Die häufigsten Dateien, für die eine Vorschau angezeigt werden kann, sind PDFs, Office-Dokumente, Bilder und Videos. Andere Formate erfordern normalerweise einen Download.

Beim Hochladen einer Datei lassen einige Apps Uploads nur zu, wenn sie von den Nachrichten getrennt sind, während andere Titel und Kommentare zulassen, die an die hochgeladene Datei angehängt sind. Unabhängig davon, ob Sie beim Hochladen einen Titel haben oder nicht, ist die Dateitypdarstellung ein Plus.

Umgang mit Anhängen.

Wie Sie sehen, gibt es in Bezug auf die Benutzererfahrung eine Menge zu beachten. Letztendlich geht es um die Erfahrung, die Sie Ihren Nutzern bieten möchten. Es gibt einige standardmäßige Interaktionen. Daher ist es immer eine sichere Wahl, Ihre Benutzer bei Laune zu halten, indem Sie ihre Erwartungen erfüllen. Wenn Sie sich jedoch als Innovator, Trendsetter oder Pionier fühlen, müssen Sie nur die Lösung implementieren, die Sie für die beste halten. Bedenken Sie, dass einige Optionen möglicherweise einfacher zu implementieren sind als andere. Berücksichtigen Sie dies auch.

Forschung liefert Ergebnisse

Ich habe dann meine Notizen gesammelt (meine Kollegen hatten keine Angst mehr vor unseren gefälschten Chats) und einige fundierte Entscheidungen über die Benutzeroberfläche meines Chats getroffen:

  • Gespräche werden vertikal aufgelistet.
  • Das Benutzerfoto ist rund und leicht von der Nachricht selbst getrennt.
  • Nachrichten werden in einer Sprechblase angezeigt.
  • Die Nachrichten des Benutzers werden rechts ausgerichtet, während die empfangenen Nachrichten links angezeigt werden.
  • Für neue Nachrichten ging ich mit der Trennlinie.
  • Bilder, Gifs und Videos haben eine Inline-Vorschau.
  • Andere Dateitypen haben eine gemeinsame Darstellung (ohne Dateityperkennung).

Hier ist ohne weiteres das Ergebnis:

Anpassbare Begrüßung an der Spitze. Nach Tag gruppiert und ein attraktives Trennzeichen, um ungelesene Nachrichten zu identifizieren.

Dies entspricht dem, was Sie in anderen Apps gewohnt sind. Mit einer wiederverwendbaren Komponente können Sie die gängigsten Szenarien problemlos erfüllen und zukünftige Implementierungen sicherstellen.

Wiederverwendbarkeit implementieren

Sie müssen eine wiederverwendbare Komponente nur einmal erstellen, können sie jedoch beliebig oft verwenden. Sie erstellen also ein Objekt, auf das später von einer beliebigen Anzahl von Anwendungen mit jeweils eigenen Anwendungsfällen, Spezifikationen und Einstellungen verwiesen wird. Um dies zu ermöglichen, benötigen Sie API-Funktionen, mit denen Sie die richtigen Konfigurationen festlegen und dieses Baby zum Laufen bringen können. Aber davor gibt es noch einige andere Arbeiten zu erledigen.

Datenmodell erstellen

Die Implementierung des Datenmodells ermöglicht es uns, eine eindeutige Kennung für eine Erweiterungsentität zu verwenden, die eine bestimmte Chat-Nutzung pro Datensatz ermöglicht.

Ich weiß es schon gut? Quelle: memegenerator

Stellen Sie sich zum Beispiel einen Online-Shop vor. In diesem Fall kann eine eindeutige Kennung einem bestimmten Produkt oder dem derzeit angemeldeten Benutzer zugeordnet werden, damit der Chat auf der gesamten Website aktiviert bleibt. Auf der Anwendungsseite müssen Sie also nur einmal pro zugeordnetem "Element" eine Kennung erstellen.

Nennen wir diese Entität "Betreff". Wir müssen in unserer Komponente eine Funktion bereitstellen, mit der ein neues Betreffelement erstellt und dessen Kennung zurückgegeben werden kann, die wir als Betreff-ID bezeichnen. (Mehr dazu später.)

Jetzt haben wir ein einzigartiges Gespräch. Cool, richtig?

Produkt (ID, Beschreibung, EAN,…) + Betreff (ID, Name,…) = Product_Subject (Product.Id, Subject.Id)

Gespräche speichern

Um Konversationen zu speichern, erstellen wir ein Post-Objekt. Diese Einheit umfasst:

  • Die Nachricht selbst: "Nachricht" (Text)
  • Die Absenderinformationen: ‘PostedBy’ (UserId)
  • Wann die Nachricht gesendet wurde: ‘PostedOn’ (DateTime)
  • Das Thema, zu dem es gehört: "SubjectId" (SubjectId)

Damit dieser saubere Separator funktioniert, müssen wir die zuletzt gelesene Nachricht nachverfolgen. Folgendes machen wir: LastSeenPost (SubjectId, PostId, UserId).

Schauen wir uns das genauer an. Um dem Benutzer zu zeigen, welche Nachricht zuletzt gelesen wurde, müssen wir wissen, zu welchem ​​Betreff sie gehört. Und ja, Sie haben es erraten, das ist die SubjectId. Wir müssen wissen, um welche Nachricht es sich handelt, dh um die Post-ID. Und zu welchem ​​Benutzer es gehört, das ist die Benutzer-ID. Mit all diesen Informationen besteht der Trick dann darin, diesen Eintrag zu aktualisieren, wenn wir eine Nachricht senden.

Umgang mit Anhängen

Zum Speichern der Dateien erstellen wir die Entität "Attachment". Da die Konversation nun so reibungslos wie möglich aussehen soll, werden die Binärdaten der Dateien nicht in dieser Attachment-Entität, sondern in einer separaten Datei mit dem Namen "File" gespeichert.

Während des Ladens der Nachrichten werden die Betreffinformationen bis zur Anlageebene abgerufen, die Datei selbst wird jedoch zu einem anderen Zeitpunkt abgerufen. Andernfalls würde die Antwort auf unsere Anfrage den gesamten Binärdateninhalt jeder Datei zurückgeben, und das Laden und Frustrieren der Chatbenutzer könnte zu lange dauern.

Die Attachment-Entität lautet also:

PostId (PostId), Dateiname (Text), Dateityp (Text), UploadedOn (DateTime).

Und die Datei-Entität ist:

AttachmentId (AttachmentId), File (BinaryData).

Das Ergebnis ist dieses Datenmodell:

Unser Datenmodell.

Codierungszeit

Jetzt, da wir unser Datenmodell haben, ist es Zeit für die Codierung! Verbinden wir einige Punkte.

Das Senden einer Nachricht ist ziemlich einfach. Wenn der Benutzer auf die Schaltfläche Senden oder die Eingabetaste klickt, müssen wir die Entität Post nur in der Datenbank speichern. Das Senden von Dateien ist identisch, aber die Entität Attachment benötigt eine PostId. Daher müssen wir zuerst einen leeren Post-Eintrag erstellen.

Hier, lassen Sie mich Ihnen zeigen, wie das aussieht.

(Haftungsausschluss: Der Code, den Sie genießen möchten, ist ausschließlich Pseudocode. Lesern wird empfohlen, diesen Code nicht zu verwenden.)

Diese Aktion wird aufgerufen, wenn wir auf die Schaltfläche Senden klicken, über die wir zuvor gesprochen haben.

Ebenso geht das Senden einer Datei folgendermaßen vor:

Erinnerst du dich, als ich sagte, wir würden diese LastSeenPost-Entität aktualisieren? Nun, wir haben gerade eine Nachricht oder eine Datei gesendet, also ist die Zeit jetzt gekommen.

Hier ist der Code:

Wir können jetzt Nachrichten und Dateien senden, während die zuletzt gelesene Nachricht aktualisiert wird.

Unser Send Button funktioniert !! Genial!

Das ist alles sehr hübsch, aber in Echtzeit? Es wird bald soweit sein!

Aktivieren der Echtzeitkommunikation

Während wir eine Chat-Komponente erstellt haben, hat eine andere Person eine Komponente erstellt, die Echtzeitkommunikation ermöglicht (danke, zufällige Person). Ich habe mich also für Firebase entschieden, da die Einrichtung schnell und die Integration einfach ist. Firebase verfügt über einen "Notifier" und einen "Listener". Beim Senden neuer Nachrichten wird der Notifier ausgelöst, und der Listener teilt der Komponente mit, was zu tun ist. Aktualisieren Sie beispielsweise die Liste der Nachrichten.

Stellen Sie eine Verbindung zu einer beliebigen Anwendung her

Fassen wir also noch einmal zusammen. Wir sprachen über das Datenmodell, die Aktionen und Echtzeit. Es fehlt nur noch eines: Wie erhält man diese eindeutige Kennung, die wir auf der Anwendungsseite speichern sollen? Sie wissen, dass SubjectId.

Erinnern Sie sich, als ich sagte, dass Sie eine Entität erweitern sollten, um diese SubjectId mit Ihrem „Element“ zu verknüpfen? Und erinnern Sie sich, dass ein Beitrag wissen muss, zu welcher SubjectId er gehört?

Diese Subject-Entität ist der Schlüssel. Einerseits wird es von der Komponente verwendet, um zu identifizieren, zu welcher Konversation eine Nachricht gehört. Andererseits ist seine Kennung das, was Sie verwenden, um zu wissen, welches Element diese bestimmte Konversation hat.

Um diese ID verfügbar zu machen, müssen wir Folgendes tun:

Und so funktioniert es: Wenn Sie einen Chat pro Benutzer in Ihrer App wünschen, prüfen Sie, wenn sich ein Benutzer anmeldet, ob dem Benutzer eine SubjectId zugeordnet ist. Wenn nicht, wen wirst du anrufen? Nein, nicht die Ghostbusters, sondern die CreateSubjectId-Funktion, und speichern Sie die angegebene SubjectId zusammen mit der UserId. Wenn Sie dann die Komponente verwenden, müssen Sie nur diese SubjectId für die neu erstellte, erstaunliche wiederverwendbare Komponente bereitstellen, damit sie genau weiß, welche Posts (Nachrichten) für diesen Benutzer angezeigt oder gespeichert werden sollen.

Das Beste mischen, das Beste liefern

Nun haben wir also die grundlegende Logik, um eine Chat-Komponente zu erstellen.

In Bezug auf die Benutzeroberfläche haben Sie die Wahl. Et voilà! Sie haben eine funktionierende Chat-App!

Möchten Sie das Ergebnis sehen und ausprobieren? Besuchen Sie die Silk UI-Website für eine Probefahrt. Es besteht auch die Möglichkeit, etwas mehr über die Struktur und die Funktionsweise zu lernen. Natürlich können Sie auch die Plattform ausprobieren, mit der ich sie erstellt habe.