Get best of the week

Da haben wir den nächsten Designer von Chat Bots gemacht. Teil 1



Hallo Habromir! Im letzten Jahr haben das Team und ich unser Startup Botlify Chatbot Constructor for Business erstellt und möchten dem Publikum eine kurze Geschichte des Projekts und der getroffenen technischen Entscheidungen mitteilen. In diesem Beitrag werde ich versuchen, mich so weit wie möglich auf technische Details zu konzentrieren und mich weniger mit dem Produkt und dem Geschäft zu befassen, obwohl meine Rolle in diesem Projekt viel weniger mit Entwicklung und Technologie verbunden ist. Dieses Material basiert auf meiner persönlichen Erfahrung. Ich bin kein Startup-Coach und gebe nicht vor, ein guter Programmierer, Manager, Architekt oder Unternehmer zu sein. Wir sind ein relativ junges Startup mit wenigen Benutzern, daher wird es nichts über die Arbeitsbelastung und die Probleme großer Projekte geben. Im Rahmen des Schnitts werde ich Ihnen erzählen, wie mein Projekt begann, auf welche Art von Entwicklungsrechen wir getreten sind und welche Schlussfolgerungen wir gezogen haben.

Mein Name ist Andrey, ich habe einige Zeit als Entwickler gearbeitet, hauptsächlich in PHP, dann als Teamleiter und dann als technischer Direktor in mehreren kleinen Startups, wo ich mich in NodeJS verliebt habe. Aber so kam es, dass ich in letzter Zeit eher Unternehmer bin. Dies ist nicht das erste Startup, das ich gegründet habe, und noch weniger das erste Startup, an dem ich teilgenommen habe. Ich habe zufällig an mehreren erfolgreichen Projekten und vielen Fehlern gearbeitet. Ich habe selbst noch mehr gescheiterte Projekte gegründet. Jedes Mal sind die Fehlerursachen völlig unterschiedlich, ebenso wie die Phasen, in denen ich versagt habe, aber irgendwie habe ich diese Erfahrung in diesem Projekt genutzt.

Tore


Bevor ich mit der Geschichte über das Projekt beginne, möchte ich darüber sprechen, welche Ziele wir von Anfang an verfolgt haben, um dieses Abenteuer zu beginnen. Tatsächlich begann unser Designer als Haustierprojekt, um die Grundlagen des Produktmanagements, der Kundenentwicklung, des Erwerbs neuer Managementfähigkeiten und der Erfahrung in Startups zu erlernen. Ich habe viele Male gehört und versucht, die LEAN Startup-Ansätze anzuwenden, und jedes Mal stellte sich heraus, dass dies völlig anders war. Natürlich haben wir davon geträumt, darauf ein Geschäft aufzubauen und gutes Geld zu verdienen, aber wir haben uns nicht mit den Illusionen unterhalten, dass dies ein einfacher und kurzer Weg sei. Und noch mehr, wir haben nicht versucht, eine Art WOW! -Innovation zu machen. Mein Mitbegründer und ich hatten ständige Vollzeitarbeit und wir haben verstanden, dass wir nicht viel Zeit investieren können.Der Hauptmotivator war genau die Gelegenheit, völlig neue Bereiche der IT-Branche zu beherrschen, neues Wissen in die Praxis umzusetzen und gleichzeitig Geld zu verdienen.


Als Programmierer habe ich sehr gerne Klassendiagramme, Sequenzen und Flussdiagramme gezeichnet. Für mich war der Visualisierungsprozess selbst eine Phase des Verstehens von Problemen und Lösungen, und es ermöglichte mir, ein umfassendes Bild davon zu bekommen, was geschah. Während ich am nächsten Projekt arbeitete, sah ich mich erneut mit der Notwendigkeit konfrontiert, ein Widget mit Online-Chat auf der Website einzufügen und zu sehen, welche vorgefertigten Lösungen in diesem Bereich verfügbar sind. Unter anderem suchte ich nach Plattformen, auf denen nicht nur Widgets mit Online-Chat für die Website erstellt, sondern auch Chat-Bots in diese eingebettet werden konnten. Ich habe mit einem dieser Bots gesprochen und er hat mir einen guten Eindruck hinterlassen. Und dann fing ich an, verschiedene Chatbot-Skripte zu entwickeln, die in meinen Projekten nützlich sein könnten. Fantasie ergoss sich gerade auf den Tisch: ein Termin mit dem Nagelstudio,Hilfe bei der Auswahl im Online-Shop, Angabe der richtigen Stelle in der Dokumentation, Annahme der Anfrage an den Support-Service. Woran ich gerade nicht gedacht habe.

Dann stieg ich ein, um mir verschiedene Designer anzusehen, und fast alle boten mir an, Formulare auszufüllen, Formulare auszufüllen und dann erneut Formulare auszufüllen. Erstellen Sie im Allgemeinen Bots, indem Sie Formulare ausfüllen. Infolgedessen war es für mich äußerst unpraktisch, ich verlor ständig den Kontext des Geschehens, ich musste zu den vorherigen Schritten zurückkehren, um den Kontext wiederherzustellen, und es gab keine Frage des bequemen Denkens durch Logik und des Entwerfens von Skripten. Nun, ich denke, ich werde zuerst versuchen, meine Bots in einem externen Tool zu „entwerfen“, und dann werde ich es auf die gewünschte Plattform übertragen.

Und hier bin ich auf das erste Problem gestoßen: Wie kann man den Dialog mit dem Bot so beschreiben, dass klar ist, was und warum der Bot reagiert und gleichzeitig die gesamte Abfolge der Aktionen vor sich hat?Zuerst habe ich versucht, mit xmind und anderen Tools eine Mind Map zu erstellen. Es stellte sich so etwas heraus.

Mind Map Chatbot Beispiel

Später wurde klar, dass Chat-Bots als Ganzes ziemlich gut in das Konzept der Beschreibung von Zuständen und Übergängen zwischen ihnen passen. Es stellt sich als recht praktisch heraus, in den Konversationszweigen zu navigieren, selbst wenn es viele von ihnen gibt.

Es wurden nur wenige Konkurrenten gefunden, die einen visuellen Bot-Designer zur Verfügung stellten. Für einige war es intuitiver, für jemanden weniger, aber im Allgemeinen schienen mir solche Konstruktoren viel benutzerfreundlicher zu sein. Es wurde für uns interessant, etwas Ähnliches zu versuchen. Wir wollten ein Tool erstellen, mit dem Sie einen Chat-Bot ohne Programmierkenntnisse erstellen können, indem Sie ihn einfach in Form eines Diagramms beschreiben. Natürlich sind noch einige technische Fähigkeiten erforderlich, aber es ist nicht viel schwieriger, eine Mind Map zu erstellen.

Bots sind ein ziemlich kompliziertes und großes Thema, und unsere Ressourcen sind sehr begrenzt. Daher war es für uns von entscheidender Bedeutung, unsere Entscheidung so weit wie möglich zu vereinfachen, damit sie jemals den Markt sehen kann. " Je früher desto besser " - ich werde nicht müde, dieses Mantra im Kontext von Startups zu wiederholen.

AI & ML


Die Frage nach künstlicher Intelligenz in Chat-Bots ist für mich noch offen. Aber jetzt gehen wir von der Tatsache aus, dass wir ein frühes Start-up sind, keine Kompetenzen in KI und ML im Team haben und wir haben uns bereits darauf geeinigt, dass wir nur Diagramme zeichnen und keine Datensätze vorbereiten, neuronale Netze trainieren wollen und das ist alles. Im Moment verwenden wir keine künstliche Intelligenz und kein maschinelles Lernen in unseren Bots . Vielleicht eines Tages in der Zukunft, wenn es Geld dafür gibt.

Es ist wichtig zu verstehen, dass dieselben Bots in ihrem Wesen sehr unterschiedlich gemacht werden können. Grob gesagt gibt es möglicherweise einen Bot, der schreibt: „ Was machst du? “ Und vom Benutzer eine willkürliche Antwort erwartet: „ Erfahren Sie mehr über Borschtsch “, „ Ich möchte Borschtsch bestellen “, „Wie viel Uhr ist es jetzt?". Nachdem der Bot die Antwort erhalten hat, versucht er sie zu erkennen, die Absicht zu bestimmen und den richtigen Zweig für die Entwicklung des Dialogs zu wählen. Angesichts von Tippfehlern, einer Vielzahl von Formen und Ausdrücken kann dies natürlich teuer sein.

Andererseits können wir geschlossene Fragen verwenden, wenn es darum geht Es geht zum Beispiel darum, einen Bot auszuwählen, der schreiben kann: " Was sind Sie bereit zu tun? "und bieten Optionen an:" Erfahren Sie mehr über Borschtsch "," Bestellen Sie Borschtsch "," Finden Sie die Zeit heraus". Einerseits verliert der Benutzer seine Handlungsfreiheit, andererseits vereinfachen wir nicht nur die Berechnungen erheblich, sondern können den Dialogkontext auch einfacher verwalten, indem wir ihn in die richtige Richtung drehen. Wir bevorzugen offene Fragen im Zusammenhang mit der Erfassung von Benutzertextdaten: E-Mail eingeben , rufen Sie an, schreiben Sie Ihre Frage an den Support usw.

Chat Bot gegen Mann


Ein weiteres Argument gegen die freie Kommunikation des Benutzers mit dem Bot war die Überzeugung, dass der Chat-Bot in einer Person nicht "spielen" sollte. Meiner Meinung nach sollte eine Person bei der Kommunikation mit einem Bot klar verstehen, was mit dem Bot kommuniziert, welche Möglichkeiten er hat und wie er sie nutzen kann. Und wenn eine Person versteht, dass sie mit einem Bot kommuniziert - was bringt die Freitextkommunikation? Es ist viel besser, wenn der Chatbot zum Assistenten einer Person wird und kein Ersatz dafür ist und nicht schüchtern ist, und die Person versteht klar, dass sie mit dem Chatbot kommuniziert und welche Funktionen er hat. In diesem Fall erweist sich die Kommunikation als spürbar effektiver.

Prozess


Ich bin ein Fan von Udalenki. Füttere mich nicht mit Brot - lass mich ein entferntes Team zusammenstellen und damit arbeiten. Ich arbeite gerne selbst aus der Ferne, ich weiß, wie man Arbeit organisiert und Menschen findet, die auch unabhängig und effizient arbeiten können. Ich verstehe sehr gut, dass dies nicht für jeden geeignet ist, ich stimme dem vollkommen zu, aber ich denke, dass es in der glänzenden Zukunft immer mehr Udalenki geben wird. Es ist nur so, dass Wirtschaft nichts Persönliches ist. Da dies mein Projekt ist und ich Musik dafür bestellt habe - auch hier ist es eine entfernte, hinterlässt dies einen gewissen Eindruck.

Zu Beginn der Arbeit an einem Projekt halte ich es für sehr wichtig, meine Ideen so weit wie möglich zu formalisieren. Während die Idee ihre Form nicht auf Papier gefunden hat, existiert in Form von Text, Notizen, Zeichnungen überhaupt keine Idee. Gleichzeitig sollten alle Prozesse im Team so einfach, natürlich und schnell wie möglich und die Kommunikation effektiv sein. Sie sollten keine großen, schweren Tools verwenden, um Ihr Team wie Jira oder Redmine zu verwalten, wenn Ihr gesamtes Team Sie und Ihr Freund sind. Aber auch nichts zu benutzen, sonst gerät alles sehr schnell außer Kontrolle und es entsteht Chaos, was viel schwieriger ist, als es einfach nicht zuzulassen. Selbst im Kopf einer Person kann sich je nach Projekt ein solches Durcheinander bilden. Es ist nicht meine Aufgabe, Ihnen zu sagen, was Sie über das Team sagen sollen, selbst wenn nur 2-3 Personen anwesend sind.

Wir haben wie echte Startups Trello verwendet , um Aufgaben zu organisieren und wichtige Links für das Projekt zu speichern, und dort wurden auch Ideen geworfen. Für die Geschäftsdokumentation wird Google Text & Tabellen , obwohl es sich um eine technische Dokumentation handelt, in Abschriften recht gut erstellt und in das entsprechende Repository gestellt. Kommunikation den ganzen Tag über - Telegramm und für tägliche Stand-Ups Google Hangouts . Tägliche Stand-Ups sind einer der Eckpfeiler der Existenz entfernter Teams . Wenn dies nicht da ist, gibt es kein Team, jemand fühlt sich notwendigerweise einsam, müde, Missverständnisse und Unzufriedenheit häufen sich, nicht nur die Kontrolle über die Situation, sondern auch die Beziehungen im Team gehen verloren.

Auch aus Sicht des Entwicklungsprozesses musste Amerika nicht entdeckt werden. Wir bestimmen die Länge des Sprints und planen den Sprint basierend auf den Zielen des Starts. Wir nehmen Rätsel und beginnen mit der Wurst. Eine neue Herausforderung ist ein neuer Zweig in Ihrem bevorzugten Versionskontrollsystem. Bist du fertig? Wir stellen eine Pull-Anfrage, warten Sie, bis jemand zur Überprüfung kommt. Ist die Bewertung gegangen? CI hat gut funktioniert? Dann können Sie alles im Entwicklungszweig halten, auf grünes Licht von der Entwicklungsbaugruppe warten und den Testserver aktualisieren. Der Code, den wir auf GitHub speichern . Bis zum ersten zahlenden Kunden waren dies öffentlich geöffnete Repositories. Als eine Person, die in der Vergangenheit versucht hat, für mehrere Open-Source-Lösungen zu werben, bin ich jedes Mal aufrichtig ärgerlich, wenn ein Startup anfängt, um die Sicherheit seines Codes zu zittern, bevor es anfängt, Geld zu verdienen.Wenn Sie versuchen zu kopieren, ist dies ein klarer Geschäftserfolg . Das spätere Schließen des Repositorys kostet nichts. Und das Geschäft ist in der Regel weit entfernt vom Code begraben. Ich habe Zugriff auf den Code vieler, einschließlich sehr erfolgreicher Produkte, aber ist es erwähnenswert, dass ich mit ihnen ihren Erfolg nicht einmal genau wiederholen werde? Um Docker-Container zu erstellen und Autotests auszuführen, haben wir uns entschlossen, GitHub-Aktionen auszuprobieren . Glücklicherweise haben sie vorläufigen Zugriff gewährt. Im Allgemeinen blieben die Eindrücke recht angenehm, die Montagegeschwindigkeit ist zufriedenstellend. Das einzige, was unangenehm war, waren Updates mit Verlust der Kompatibilität mit früheren Versionen. Ein paar Mal haben sie das Schema der Beschreibung von Aktionen ziemlich ernsthaft geändert und mussten alles neu konfigurieren. Aber wir wussten, was wir taten, als wir uns einigten, das Produkt im Status zu testenBeta .

Von den ersten Tagen an, buchstäblich von der Entwicklung einer Zielseite für Nachfragetests, haben wir versucht, mindestens einmal pro Woche Releases zu veröffentlichen und mindestens eine Hypothese zu testen. Zuerst waren die Hypothesen globaler, wir haben versucht, verschiedene Probleme zu finden, die Zielgruppe anzusprechen und einen Vorschlag zu entwickeln. Aber je weiter sich das Produkt entwickelte, desto weniger global wurden sie und desto unwahrscheinlicher war es, dass sich die Essenz selbst änderte. Das Projekt begann von vorne, mit der üblichen Zielseite, und dann erstellten wir auf dem Knie einen Demo-Client des Chat-Bots, der immer noch auf unserer Hauptseite hängt. Diese Demo konnte einen streng programmierten Dialog reproduzieren und diente als Demonstration dessen, was mit unserem Konstruktor getan werden konnte - das Ergebnis seiner Arbeit und nicht der Konstruktor selbst. Der Trick war, dass wir davon ausgegangen sind, dass das Geschäft für den Bot-Designer nicht zu uns kommen würde.aber für einige Ergebnisse den Vorteil, den er geben wird. Wir wollten unseren Kunden eine Tasse Kaffee aus unserer Kaffeemaschine einschenken, anstatt die Kaffeemaschine selbst zu zeigen. Das ist leicht zu erratenEine Tasse Kaffee zuzubereiten ist viel schneller und billiger als das Sammeln einer Kaffeemaschine . Ausgehend von diesem Prinzip haben wir uns entschlossen, zuerst eine Kundendemo zu erstellen, zumal wir mit einer Reihe von vorgefertigten Tools nicht mehr als zwei Abende brauchten, einschließlich der Entwicklung von Dialogszenarien.

Als wir das Interesse der Besucher der Landung und die zusätzlichen Conversions sahen, die durch unsere Demo generiert wurden, beschlossen wir, weiter zu gehen. Ich erinnere mich, dass unsere erste Version des Konstruktors ein Registrierungsformular mit einem Anmeldeformular war, nach dem der Benutzer zu einer Seite mit einer Entschuldigung und dem Versprechen weitergeleitet wurde, zu informieren, wenn etwas anderes funktionierte. Ich habe die Anmelde- und Registrierungsformulare gut hundert Mal in meinem Leben gemacht und ich konnte nicht einmal glauben, dass wir hier sofort viele Probleme finden würden.Etwa 60% der ersten Benutzer konnten den Registrierungsprozess einfach nicht abschließen . Für wen die Schaltfläche nicht funktioniert, für wen keine E-Mail kommt, für wen etwas anderes ist. Zuerst nahm ich die Idee, nur ein paar Formulare freizugeben, ziemlich skeptisch wahr, aber ein erster Blick auf Yandex.Metrica machte deutlich, dass es eher die richtige Entscheidung war. Die Erkenntnis, dass sich Benutzer anders verhalten, als Sie möchten, und manchmal die Art und Weise, wie Sie dachten, Sie könnten es nicht, hatte einen großen Einfluss auf alles, was wir als Nächstes taten. Als Hobby habe ich mehrmals pro Woche ein paar Stunden in einem Webbrowser verbracht, um zu beobachten, wie Benutzer unser Handwerk verwenden.

Nach und nach haben wir unsere Idee erweitert und sind zu einem Produkt gekommen, das nicht nur für uns, sondern auch für unsere Benutzer immer noch einen Wert hat, von dem einige uns sogar Geld bezahlen. Auf lange Sicht haben wir nicht verstanden, wozu wir kommen wollen und wie unser Produkt aussehen wird. Das einzige, was wir damals verstanden haben, war, dass wir nichts verstehen und uns in einem Zustand der Unsicherheit befinden.

Ergebnis


Dieses Experiment brachte mich und mein Team zu einer Engelsinvestition aus der Kategorie Freunde, Familie, Narren, gebaut von MVP, Erstverkäufe, großartige Erfahrung, viele Freuden und Enttäuschungen. Wir sind noch kein echtes Geschäft, aber wir streben danach, eines zu werden. Und wenn ich das sage, meine ich, dass wir immer noch auf der Suche nach einem nachhaltigen Geschäftsmodell und einer Anpassung an den Produktmarkt sind. Auch hier planen wir, nach dem richtigen Produktkonzept, unserem Kunden, unserem Markt zu suchen.

Die ursprünglichen Ziele wurden keineswegs alle erreicht, aber das Projekt entwickelte sich aus einem Heimhobby und wurde zu einem Vollzeitjob, und Investoren, Anwendern und Mitarbeitern wurde Verantwortung übertragen. Natürlich hat das Projekt viele konzeptionelle und technische Probleme, aber es gibt nichts Unlösbares und wir planen, weiter zu arbeiten.

Bevor Sie sich mit dem technischeren Teil meines Werks befassen, sollten Sie kurz erläutern, was Sie mit dem Produkt tun können.

  • Verwalten Sie Chatbots in Ihrem Konto
  • Visueller Chatbot-Editor
  • Kontrollieren Sie den Zugriff auf Chat-Bots (Bearbeitungszugriff, öffentlicher Zugriff)
  • Möglichkeit, Chat-Bots im Web zu veröffentlichen (Widget, eingebettet, Vollbild)
  • Chatbot-Einstellungen (Design, Namen, Metriken, Widget-Position usw.)
  • Unterstützung für die Integration von Chatbots in externe Dienste über GET- und POST-Anforderungen
  • Analyse von Bot-Dialogen
  • Kontoverwaltung
  • Abonnementmodell, Abonnementverwaltung


Die Architektur


Wenn ich nun den Hintergrund, die Ziele, die Idee und die Prinzipien kenne, die uns bei der Entwicklung geleitet haben, kann ich beginnen, eine allgemeine Beschreibung zu geben, wie dies alles funktioniert. Da wir uns ursprünglich dafür entschieden hatten, Chatbots für Websites und Vollbild- Chatbots wie app.botlify.io/bot/5de53dbf9b9bae002b319600 zu erstellen, war klar, dass der Großteil der Arbeit auf der Frontend-Seite liegen würde. Infolgedessen wurde die Front der Arbeit am Kunden in eine aussagekräftige Liste von Aufgaben und eine Wunschliste umgewandelt:

  1. Erstellen / Finden einer Client-Bibliothek, einer Art „Engine“ für Chat-Bots in einem Browser, der die empfangenen JSON-Anweisungen versteht und einen Dialog mit dem Benutzer führt.
  2. Erstellen Sie eine Anwendung zum Bearbeiten von Bot-Knoten, die eine Liste von Knoten und Verknüpfungen zwischen ihnen in einem JSON-Objekt speichert (auf deren Grundlage die Client-Bibliothek Dialoge führt).
  3. , , , - . , , , . , , , ..
  4. , , . id , :

    <script defer src="https://app.botlify.io/botlify.min.js"
    onload="Botlify({ bot: '5de53dbf9b9bae002b319600', type: 'widget'})"
</script>
  5. , , ( )

Die gesamte Logik der Dialoge von der Erstellung von Chat-Bots (Knoten und Verbindungen) bis zur direkten Arbeit mit ihnen im Web-Client wird vom Frontend übernommen. Die Rolle des Backends besteht eher darin, den Zugriff, Abonnements, Newsletter, Benachrichtigungen und das Speichern von Daten zu verwalten, die von vielen Webclients übertragen werden.

Vorderes Ende


Für die Front verwenden wir Reactjs . Wir packen alles in Docker (wir erstellen es und schieben es in den Nginx-Container), den Code auf Github in privaten Repositorys. Für CI verwenden wir Github-Aktionen . Wir starten Container auf normalen VPS-Servern mit einfachen Bash-Skripten. Um die Entwicklung der Benutzeroberfläche zu vereinfachen, wurde Blueprint verwendet .

  • Web — javascript , - . json -, . -(, , , , , .).
  • Web — javascript . id , , Web- .
  • — , . json, -. , «» , — -.
  • Benutzerkonto - eine Webanwendung zum Verwalten Ihres Kontos, Abonnements und Bots.
  • Das Administrationsfenster ist eine Webanwendung für Administratoren. Verwaltung von Benutzern, Bots, Abonnements und Dashboards mit Analysen.


Das folgende Diagramm zeigt die Komponenten des Frontends und wie sie miteinander interagieren. Webclient und Bot-Editor werden nur im Kontext anderer Anwendungen verwendet. Wenn der Editor nur in unseren Anwendungen verwendet wird, kann der Webclient auch von unseren Clients als Webmodul verwendet werden. Beim Erstellen des Projekts werden Pakete mit Webclient und Editor zu den Dashboard- und Admin-Anwendungen hinzugefügt. Darüber hinaus wird das Webmodul mithilfe von Webpack für die Bereitstellung an Benutzer erstellt.



MVP 1. Web Client


Als Startup bemühen wir uns immer, maximale Ergebnisse mit einem Minimum an Ressourcen zu erzielen. Es scheint mir, dass ein ziemlich logischer Schritt für das erste MVP die Erstellung eines Web-Clients unter dem Gesichtspunkt war, dass er das „Produktgesicht“ darstellt, das Ergebnis der Arbeit des Designers zeigt und nicht den Prozess der Erstellung des Bots - eine Tasse Kaffee, keine Kaffeemaschine. Um die Entwicklungszeit der Lösung zu minimieren, haben wir uns entschlossen, nach Bibliotheken zu suchen, die unseren Anforderungen entsprechen, und plötzlich gefunden! lucasbassetti.com.br/react-simple-chatbot ist eine Reaktionskomponente, die fast alle unsere Bedürfnisse abdeckt !

Diese Komponente schlug vor, die Chatbot-Logik in Form einer Reihe von Schritten zu beschreiben, die von den Benutzern eingegebenen Werte zu lesen, das Erscheinungsbild anzupassen, die Daten zu validieren und zunächst flexibel genug auszusehen. Die einfachste Schrittbeschreibung sieht ungefähr so ​​aus:

<ChatBot
      steps={[
        {
          id: '1',
          message: 'What is your name?',
          trigger: '2',
        },
        {
          id: '2',
          user: true,
          trigger: '3',
        },
        {
          id: '3',
          message: 'Hi {previousValue}, nice to meet you!',
          end: true,
        },
      ]}
    />

Wir haben zunächst versucht, auf diese Weise einen Chatbot zu erstellen, der unser Projekt präsentiert, dessen Mind Map am Anfang des Artikels auf dem Bildschirm angezeigt wurde. Natürlich erwies sich die manuelle Beschreibung eines solchen JSON als ziemlich unpraktisch, und ich musste viele benutzerdefinierte Funktionen schreiben, aber im Allgemeinen gab dieser Prozess ein Verständnis dafür, wie die Komponente funktioniert und wie man damit das gewünschte Ergebnis erzielt.

Außerdem hat mein Kollege das Erscheinungsbild angepasst, verschiedene Ausstellungsoptionen festgelegt und ein Beispiel mit einem Friseursalon und einer Van Gogh- Ausstellung zusammengestellt. Möglicherweise stellen Sie sogar fest, dass wir nicht einmal an die Bildoptimierung gedacht haben. Ja, das war und war nicht nötig. Während der Arbeit haben wir uns eine ungefähre Vorstellung davon gemacht, wie der Kunde arbeiten wird, und wir haben begonnen, nach Lösungen für den Designer selbst zu suchen, um die Vorteile der visuellen Bearbeitung so schnell wie möglich zu nutzen.

MVP 2. Konstruktor


Basierend auf dem, was wir bei der Arbeit mit dem Client gesehen haben, sind wir zu dem allgemeinen Schluss gekommen, dass der Bot verschiedene Arten von Aktionen ausführen kann: etwas senden, auf Benutzeraktionen warten, eine Anfrage an einen externen Dienst senden. Für einen minimal funktionsfähigen Bot-Editor haben wir uns auf Blöcke beschränkt:

  • Start - eine technische Einheit, die eine neue Sitzung startet
  • End - Block zum Beenden der Sitzung
  • Nachricht - Beim Erreichen des Blocks sendet der Bot die im Blockkörper angegebene Nachricht
  • — . ,

Es wurde angenommen, dass die Blöcke durch Pfeile oder Linien miteinander verbunden sind. Alle Blöcke außer dem Block „Start“ haben einen Eingangsport (Socket). Viele Leitungen können an den Eingangsanschluss angeschlossen werden und das Gerät mit anderen verbinden. Alle Blöcke außer dem Endblock haben einen bis mehrere Ausgangsports. Ausgangsports bestimmen, an welche Blocksteuerung übertragen wird, nachdem die Logik des aktuellen Blocks abgeschlossen ist.

Nach einer kurzen Überprüfung der verfügbaren Lösungen haben wir uns für Rete.js (https://rete.js.org) entschieden. Ich habe die Dokumentation und Beispiele kennengelernt und darin alles gefunden, was wir zum Starten brauchten. Sie hatten sogar ein Beispiel nur mit einem Chat-Bot, der der letzte Auslöser war

Rete . . , — , JSON


Knoten in Rete.js

Alle Knoten können einen Namen, Eingaben, Ausgaben und Steuerelemente enthalten. Ein- und Ausgänge sollten sich links bzw. rechts vom Knoten befinden (für benutzerdefinierte Knoten kann es Ausnahmen geben). Sie werden durch einen Socket dargestellt und können Namen haben. Für die Eingänge haben wir eine unbegrenzte Anzahl von Verbindungen zugelassen (Sie können auf viele Arten zum Knoten gelangen). Für die Ausgabe haben wir uns auf nur eine Verbindung beschränkt. Im Gegensatz zu den Eingangsbuchsen haben einige Blöcke jedoch viele Ausgangsbuchsen.

Rete.js ist so aufgebaut, dass seine Funktionalität durch das Erstellen von benutzerdefinierten Knoten, Steuerelementen und Komponenten erweitert wird, sodass wir schnell genau das Bild erhalten, das wir sehen wollten, wofür ich den Entwicklern von Rete danke! Einer der wichtigsten ist natürlich ein fertiger Editor!

Wie geschrieben inDokumentation :
Ein Editor ist ein Bereich mit Knoten und Verbindungen zwischen ihren Sockets. Folgende Optionen stehen zur Verfügung:

  • Interaktion mit dem Arbeitsbereich (Verschieben, Skalieren) und der Knotenverwaltung (Verschieben, Hinzufügen, Löschen)
  • Anzeige von Verbindungen, Knoten, deren Ein- / Ausgängen und Steuerelementen
  • Editor-Ereignisse behandeln
  • Import / Export-Schema im JSON-Format
  • Erweiterung der Funktionalität mit Plugins
  • Anpassung des Arbeitsbereichs, der Knoten und Verbindungen


Nachdem wir ein wenig mit Rete gezaubert und detailliertere Beispiele studiert hatten, gelang es uns, etwas zu erstellen, mit dem wir die Blöcke "Start", "Ende", "Nachricht", "Tastatureingabe" erstellen und löschen konnten. Am Ausgang erhielten wir json mit einer Beschreibung der Knoten, Sockets und Leitungen, die sie verbinden.

Eine der ersten Versionen des Editors

Schon etwas, aber das reicht nicht, weil unser Webclient diesen JSON nicht versteht. Er braucht eine eigene, mit der Beschreibung der Schritte. Es wurde beschlossen, einen Konverter von einem JSON-Format in ein anderes in den Client einzubetten.

Json Transformator


Das Dienstprogramm empfängt NodesMap, das vom Editor kompiliert wurde, als Eingabe und gibt eine StepsMap zurück, die der Client versteht. Der Code des gesamten Transformators benötigt etwas mehr als 100 Zeilen. Abhängig vom Knotentyp und den darin enthaltenen Daten werden ein geeigneter Schritt, Triggerfunktionen und eine Reihe von Anweisungen (Aktionen) erstellt, die in diesem Schritt ausgeführt werden sollen. Es gibt Anweisungen, die die Variable im Chatbot-Status speichern, es gibt Anweisungen, die die Variable im Text ersetzen oder eine Anfrage an unseren Server senden.

Nachdem wir die Komponenten zusammengebunden hatten, begannen wir, die resultierenden Werkzeuge zu testen. Auch ohne Backend war es sehr spannend. Wir haben im Editor Dialoge erstellt und json über Entwicklungstools in den Client eingefügt. Als Ergebnis haben wir einen Bot erhalten, der sagt, wie wir ihn brauchen! Er weiß auch, wie man Variablen speichert und verwendet, verdammt! Große Empfindungen der ersten Siege ... Das Mosaik des Geräts unserer Anwendung hat sich bereits praktisch in meinem Kopf gebildet, wir haben etwas an den Prinzipien gearbeitet, die wir in Zukunft verwenden wollen. Wir haben ein bestimmtes Skelett, um das es blieb, um „Fleisch“ aufzubauen. Und vor allem - es wurde klar, wie das geht:

  1. Ändern Sie den Editor und fügen Sie den gewünschten Knotentyp hinzu
  2. Wir bringen json transformator bei, einen neuen Knoten in einen neuen Schritt umzuwandeln
  3. Wir bringen dem Kunden bei, mit einem neuen Schritt zu arbeiten

Auf der anderen Seite war es notwendig, mit dem persönlichen Konto des Benutzers zu beginnen, damit Bots erstellt, gespeichert und verwaltet werden konnten. Wir haben uns darauf konzentriert, um den Benutzern schnell nicht die Konzepte, sondern das Produkt zu zeigen.

Benutzerkonto


Die oben genannten Bibliotheken haben bestimmte Funktionen im Zusammenhang mit der Erstellung der Chatbot-Logik (Editor), ihrer Interpretation oder ihrer Reproduktion (Client) ausgeführt. Die Probleme der Datenspeicherung, der Möglichkeit, erstellte Bots zu laden, zu verwalten und Eigenschaften festzulegen, die nicht mit der Logik zusammenhängen, blieben offen, und die Anwendung hätte sie für Benutzer lösen müssen. Mit blueprintJS haben wir einen Prototyp eines persönlichen Kontos entworfen, in dem es möglich war, mehrere Bots zu registrieren und zu erstellen. Wenn Sie auf den Bot klicken, um eine Person zu erstellen, musste mit einem neuen Bot in den Editor fallen, und wenn Sie mit diesem Bot auf die Bot-Karte im Editor klicken. Wir haben uns entschlossen, die Funktionen zum Laden und Speichern des Bots über die API unseres Backends dieser Ebene anzuvertrauen, um den Bot-Editor unabhängig vom Backend zu lassen.



Die Anwendung des Benutzerkontos kann das Editorpaket herunterladen und fertige Daten zur Anzeige an das Benutzerpaket übertragen. Diese Anwendung verwaltet auch Formulare zum Festlegen von Bot-Eigenschaften (Name, API-Schlüssel, Avatar, Veröffentlichungseinstellungen) und ermöglicht das Anzeigen von Statistiken. Damit Benutzer das Ergebnis des Editors sofort sehen können, haben wir dem Büro des Benutzers einen Webclient hinzugefügt, dem wir das JSON-Bot-Schema geben. Er interpretiert es schrittweise und spielt es auf der Registerkarte "Vorschau" ab. Im Großen und Ganzen ist dies ein sehr klassisches Admin-Panel mit einigen interessanten Komponenten (Bot-Editor und Web-Client), von denen ich denke, dass viele es getan haben. In diesem Stadium wurde es jedoch merklich unpraktisch, unsere Anwendung zu entwickeln.

Anfangs schien es uns eine gute Idee zu sein, die Produktkomponenten in verschiedenen Repositories zu speichern, und wir sahen darin kein besonderes Problem. Es wurde jedoch schnell klar, dass es problematisch ist, viele Repositories auf dem neuesten Stand zu halten, ganz zu schweigen von der Notwendigkeit, bei der Entwicklung mit einem Tamburin zu tanzen, da sie in gewissem Maße voneinander abhängig sind. Und da wir nur einen Vollzeitentwickler hatten, war dieser Ansatz eine riesige Ahle im Arsch. Und jede Bereitstellung wurde aufgrund der unterschiedlichen Zusammenstellung und Veröffentlichung von Bibliotheken, Anwendungen und Abwärtskompatibilitätsproblemen zu einem Zweig der Hölle auf Erden. Daher die banale, aber nicht die nutzloseste Schlussfolgerung: Eine vorzeitige Zuweisung von Modulen kann mehr schaden als helfenDavon war ich im Backend schon oft überzeugt, und hier bin ich wieder gekommen, aber vorne. Ja, und ich habe keine Chance im Backend verpasst: =)

Einer meiner Kollegen hat seinen Willen zu einer Faust zusammengefasst und alles zu einem mit lerna verwalteten Mono-Repository zusammengefasst . Jetzt ist unser einziges Front-End-Repository in Pakete unterteilt: Admin, Client, Common, Dashboard, Editor, Webmodul. Sie haben möglicherweise eine andere Assembly im Inneren, aber mit lerna können sie Verknüpfungen zwischen Paketen verknüpfen und aktualisieren. Danach wurde die Entwicklung und Bereitstellung des Frontends viel schneller und einfacher, alles ist sofort verfügbar, aber immer noch geteilt.

Nach dem Erstellen des Kabinetts haben wir einige Zeit mit neuen Blöcken im Editor und deren Verarbeitung durch den Client verbracht:

  • — . ( ),
  • — -
  • Email — email

Ich habe nicht viel über das Admin-Panel und das Webmodul zu erzählen, da ist dort alles sehr normal. Lassen Sie mich nur beachten, dass das Admin-Panel auch nicht im Voraus erstellt werden sollte . Wir haben es, aber niemand benutzt es, weil es mir persönlich nicht schwer fällt, alles, was mich interessiert, sofort in der Datenbank zu sehen. Es gibt keine Geisteswissenschaften, die unser Admin-Panel im Team benötigen würden, und es ist im Wesentlichen etwas günstiger, es auf dem neuesten Stand zu halten, als ein Benutzerkonto zu führen. Im Laufe der Zeit wurde dort ein einfaches Dashboard hinzugefügt, in dem Zahlungen, neue Registrierungen und Besuche der Anwendung angezeigt werden. Diese Informationen sind jedoch die Entwicklung eines gesamten Administrators kaum wert. Panels mit Tabellen, Formularen und separater Authentifizierung

Ergebnisse?


Wir konnten sehr schnell Prototypen und Landing Pages erstellen. Ja, es war überhaupt nicht das, was sich viele unter dem Deckmantel von MVP vorstellen. Aber nur ein paar Abende nach der Entstehung der Idee konnten wir beginnen, sie den Menschen zu zeigen und zu testen. Verschiedene Landing Pages, Anzeigen, Texte im Bot - wir konnten testen und suchen. Ich kann jedem, der an der Startup-Entwicklung beteiligt ist, nur empfehlen, darüber nachzudenken, wie die Dinge so schnell wie möglich erledigt werden können. Wir haben das erste Produkt hergestellt, das innerhalb von drei Monaten Wert gewonnen hat, und dann begann ein schrittweiser Prozess der regelmäßigen Verbesserung. Natürlich haben wir jetzt mehr Blöcke im Konstruktor, wir haben Validierung, Datentypen, GET- und POST-Anforderungen hinzugefügt, viele Design- und Anzeigeeinstellungen, aber Sie könnten ohne all dies beginnen, was wir getan haben.

Im Laufe der Zeit wurde das System immer komplexer und entwickelte sich weiter, und ich konnte nicht einmal genau beschreiben, was tatsächlich passiert. Fangen Sie klein an, die Dinge werden mit der Zeit kompliziert, wenn nötig. Jede zusätzliche Komponente kann sehr hohe Kosten verursachen, da nicht nur erstellt und integriert werden muss, sondern auch andere Teammitglieder unterstützt, getestet, dokumentiert, bereitgestellt, überwacht und vorgestellt werden müssen. Wahrscheinlich sollten Sie sich nicht mit Warteschlangen in RabbitMQ beschäftigen, wenn Ihre Anwendung zuvor keine Warteschlangen enthielt. Am wahrscheinlichsten sind zunächst Lösungen, die auf bereits vorhandenen Technologien basieren. Jede neue Komponente verursacht zusätzliche Kosten für Integration, Betrieb, Test, Support, Dokumentation, Bereitstellung usw. usw.

Ich hoffe, meine Erfahrung wird zumindest jemandem nützlich sein. Lange habe ich versucht herauszufinden, welcher Hub dies bestimmen soll, aber ich habe es nicht verstanden. Lassen Sie mich wissen, ob es sich lohnt, den zweiten Teil zu schreiben, in dem ich ein wenig über das Backend, externe Services und Entwicklungspläne sprechen wollte

Source: https://habr.com/ru/post/undefined/

More articles:


All Articles