Get best of the week

Comme nous l'avons fait le prochain concepteur de chat bots. Partie 1



Salut Habromir! L'année dernière, l'équipe et moi avons passé la création de notre startup Botlify Chatbot Constructor for Business, et je voudrais partager avec le public un bref historique du projet et des décisions techniques prises. Dans cet article, j'essaierai de me concentrer autant que possible sur les détails techniques et d'approfondir moins le produit et les affaires, malgré le fait que dans ce projet mon rôle soit beaucoup moins lié au développement et à la technologie. Ce matériel est basé sur mon expérience personnelle, je ne suis pas un coach de startup et je ne prétends pas être un bon programmeur, manager, architecte ou entrepreneur. Nous sommes une startup relativement jeune avec peu d'utilisateurs, donc il n'y aura rien sur les charges de travail et les problèmes des grands projets. Sous la coupe, je vais vous dire comment mon projet a commencé, sur quel type de rake de développement nous sommes allés et quelles conclusions nous avons tirées.

Je m'appelle Andrey, pendant quelque temps j'ai travaillé en tant que développeur, principalement en PHP, puis chef d'équipe, puis en tant que directeur technique dans plusieurs petites startups, où je suis tombé amoureux de NodeJS. Mais il se trouve que ces derniers temps, je suis plus probablement un entrepreneur. Ce n'est pas la première startup que j'ai fondée, et encore moins la première startup à laquelle j'ai participé. Il m'est arrivé de travailler dans plusieurs projets réussis et de nombreux échecs. J'ai moi-même fondé des projets encore plus ratés. À chaque fois, les causes de l'échec sont complètement différentes, ainsi que les étapes auxquelles j'ai échoué, mais j'ai en quelque sorte utilisé cette expérience dans ce projet.

Buts


Avant de commencer l'histoire du projet, je voudrais parler des objectifs que nous avons poursuivis dès le début, en commençant cette aventure. En fait, notre concepteur a commencé comme un projet favori pour apprendre les bases de la gestion de produits, le développement client, acquérir de nouvelles compétences en gestion et de l'expérience dans les startups. J'ai entendu et essayé à plusieurs reprises d'appliquer les approches de démarrage LEAN et chaque fois, cela s'est avéré complètement différent. Bien sûr, nous rêvions de bâtir une entreprise sur ce point et de gagner beaucoup d'argent, mais nous ne nous amusions pas avec l'illusion que c'était un moyen simple et court. Et plus encore, nous n'avons pas essayé de faire une sorte de WOW! -Innovation. Mon co-fondateur et moi avions un travail à plein temps constant et nous avons compris que nous ne pourrions pas consacrer beaucoup de temps.Le principal facteur de motivation était précisément la possibilité de maîtriser des domaines complètement nouveaux de l'industrie informatique et d'appliquer de nouvelles connaissances dans la pratique, tout en gagnant de l'argent.


En tant que programmeur, j'ai vraiment aimé dessiner des diagrammes de classes, des séquences, des organigrammes. Pour moi, le processus de visualisation lui-même était une étape dans la compréhension des problèmes et des solutions, et il m'a permis d'avoir une vue d'ensemble de ce qui se passait. En travaillant sur le prochain projet, j'ai de nouveau été confronté à la nécessité d'insérer un widget avec chat en ligne sur le site et de voir quelles solutions prêtes à l'emploi sont dans ce domaine. Donc, parmi ce que je cherchais, je suis tombé sur des plates-formes qui permettaient non seulement de créer des widgets avec le chat en ligne pour le site, mais également d'y intégrer des robots de chat. J'ai parlé à l'un de ces robots et il m'a laissé une bonne impression. Et puis j'ai commencé à essayer de trouver différents scripts de chatbot qui pourraient être utiles dans mes projets. La fantaisie vient de couler sur la table: un rendez-vous avec le salon de manucure,aider à faire un choix dans la boutique en ligne, indiquer le bon endroit dans la documentation, accepter la demande au service d'assistance. Ce à quoi je ne pensais tout simplement pas.

Ensuite, j'ai grimpé pour regarder différents designers et presque tous m'ont proposé de remplir des formulaires, puis de remplir des formulaires, puis de remplir à nouveau des formulaires. En général, créez des bots en remplissant des formulaires. En conséquence, cela était extrêmement gênant pour moi, je perdais constamment le contexte de ce qui se passait, je devais revenir aux étapes précédentes pour restaurer le contexte, et il n'était pas question d'une réflexion pratique à travers la logique et la conception de scripts. Eh bien, je pense que je vais d'abord essayer de «concevoir» mes bots dans un outil externe, puis je les transférerai sur la plateforme souhaitée.

Et là, je suis tombé sur le premier problème: comment décrire le dialogue avec le bot de telle manière qu'il soit clair à quoi et pourquoi le bot répond et en même temps avoir toute la séquence d'actions devant lui?Au début, j'ai essayé d'utiliser xmind et d'autres outils pour créer une carte mentale. Il s'est avéré quelque chose comme ça.

Exemple de chatbot de carte mentale

Plus tard, il est devenu clair que les robots de discussion dans leur ensemble s'intégraient assez bien dans le concept de description des états et des transitions entre eux, il s'avère très pratique de naviguer dans les branches de conversation même lorsqu'il y en a beaucoup.

Seuls quelques concurrents ont été trouvés fournissant un concepteur de bot visuel. Pour certains, c'était plus intuitif, pour quelqu'un de moins, mais en général, ces constructeurs me semblaient beaucoup plus conviviaux. Il est devenu intéressant pour nous d'essayer de faire quelque chose de similaire, nous voulions créer un outil avec lequel vous pouvez créer un chat bot sans compétences en programmation, en le décrivant simplement sous la forme d'un diagramme. Bien sûr, certaines compétences techniques sont encore nécessaires, mais il n'est pas beaucoup plus difficile de créer une carte mentale.

Les bots sont un sujet assez compliqué et important, et nos ressources sont très limitées. Par conséquent, il était vital pour nous de simplifier au maximum notre décision afin qu'elle puisse jamais voir le marché. « Le plus tôt sera le mieux » - je ne me lasserai pas de répéter ce mantra dans le contexte des startups.

AI & ML


La question de l'intelligence artificielle dans les robots de discussion est toujours ouverte pour moi. Mais maintenant, nous partons du fait que nous sommes une start-up précoce, nous n'avons pas de compétences en IA et ML au sein de l'équipe et nous avons déjà convenu que nous voulons juste dessiner des diagrammes et non pas préparer des ensembles de données, former des réseaux de neurones et c'est tout. Pour le moment, nous n'utilisons pas l'intelligence artificielle et l'apprentissage automatique dans nos robots . Peut-être un jour, à l'avenir, quand il y aura de l'argent pour cela.

Il est important de comprendre que les mêmes robots dans leur essence peuvent être créés très différemment. En gros, il peut y avoir un bot qui écrit: " Que faites-vous? " Et attend une réponse arbitraire de l'utilisateur dans l'esprit: " En savoir plus sur borsch ", " Je veux commander borsch ", "Quelle heure est-il maintenant?". Après avoir reçu la réponse, le bot essaie de la reconnaître, de déterminer l'intention et de choisir la bonne branche pour le développement du dialogue. Inutile de dire, étant donné les fautes de frappe, une variété de formes et d'expressions, cela peut être coûteux.

D'autre part, nous pouvons utiliser des questions fermées lorsqu'il s'agit de il s'agit de choisir, par exemple, un bot peut écrire: " Que voulez-vous faire? "et proposer des options:" En savoir plus sur borsch "," Commander borsch "," Connaître l'heure". D'une part, l'utilisateur perd sa liberté d'action, mais d'autre part, non seulement nous simplifions considérablement les calculs, mais nous pouvons également gérer plus facilement le contexte du dialogue en le tournant dans la bonne direction. Nous préférons utiliser des questions ouvertes dans le cadre de la collecte de données texte utilisateur: saisir un e-mail , téléphonez, écrivez votre question au support, etc.

Chat bot vs homme


Un autre argument contre le fait de laisser l'utilisateur communiquer avec le bot sous forme libre était la croyance que le bot de chat ne devrait pas "jouer" chez une personne. À mon avis, lors de la communication avec un bot, une personne doit clairement comprendre ce qui communique avec le bot, savoir quelles opportunités il a et comment les utiliser. Et si une personne comprend qu'elle communique avec un bot - quel est l'intérêt de la communication en texte libre? C'est beaucoup mieux lorsque le chatbot devient l'assistant d'une personne, et non un substitut à celui-ci et qu'il n'est pas timide à ce sujet, et que la personne comprend clairement qu'elle communique avec le chatbot et quelles sont ses fonctions. Dans ce cas, la communication s'avère nettement plus efficace.

Processus


Je suis fan d'Udalenki. Ne me donnez pas de pain - laissez-moi constituer une équipe à distance et commencer à travailler avec elle. Je suis à l'aise de travailler à distance moi-même, je sais organiser le travail et trouver des personnes capables de travailler de manière autonome et efficace. Je comprends très bien que cela ne convient pas à tout le monde, je suis entièrement d'accord avec cela, mais je pense que dans un avenir radieux, il y aura de plus en plus d'uddalenki. C'est juste que l'économie n'est rien de personnel. Puisque c'est mon projet et que j'ai commandé de la musique pour lui - ici aussi, c'est un projet distant, cela laisse une certaine empreinte.

Au tout début du travail sur un projet, je considère qu'il est très important d'essayer de formaliser mes idées autant que possible. Bien que l'idée n'ait pas trouvé sa forme sur papier, sous forme de texte, de notes, de dessins, aucune idée n'existe du tout. Dans le même temps, tous les processus au sein de l'équipe doivent être aussi simples, naturels et rapides que possible, la communication efficace. Vous ne devez pas utiliser de gros outils lourds pour gérer votre équipe, comme Jira ou Redmine, si toute votre équipe est vous et votre ami. Mais aussi de ne rien utiliser, sinon, tout ira très vite hors de contrôle et le chaos se produira, freinant ce qui est beaucoup plus difficile que de ne pas le permettre. Même dans la tête d'une personne, un tel gâchis peut se former en fonction du projet, ce n'est pas à moi de vous dire quoi dire sur l'équipe, même si seulement 2-3 personnes.

Comme de vrais startupers, nous avons utilisé Trello pour organiser les tâches et stocker les liens importants pour le projet, et des idées y ont également été lancées. Pour la documentation commerciale, Google Docs , bien que technique, est assez bien créé dans le démarquage et placé dans le référentiel correspondant. Communication tout au long de la journée - Télégramme et pour les stand-ups quotidiens Google Hangouts . Les stand-up quotidiens sont l'une des pierres angulaires de l'existence d'équipes distantes . Si ce n'est pas le cas, il n'y a pas d'équipe, quelqu'un commence nécessairement à se sentir seul, fatigué, les malentendus et le mécontentement s'accumulent, non seulement le contrôle de la situation mais aussi les relations au sein de l'équipe sont perdus.

Du point de vue du processus de développement, l'Amérique n'avait pas non plus à être découverte. Nous déterminons la durée du sprint, planifions le sprint en fonction des objectifs de la startup. Nous prenons des puzzles et commençons la saucisse. Un nouveau défi est une nouvelle branche dans votre système de contrôle de version préféré. As tu fini? Nous émettons une demande Pull, attendez que quelqu'un se résume à l'examen. L'avis a-t-il été annulé? CI a bien fonctionné? Eh bien, vous pouvez tout garder dans la branche de développement, attendre le feu vert de l'assemblage de développement et mettre à jour le serveur de test. Le code que nous stockons sur GitHub . Jusqu'au premier client payant, il s'agissait de référentiels ouverts au public. En tant que personne qui a essayé de promouvoir plusieurs solutions open source dans le passé, je suis sincèrement irrité à chaque fois qu'une startup commence à trembler pour la sécurité de son code avant de commencer à gagner de l'argent.Si vous essayez de copier - c'est un succès commercial évident . La fermeture du référentiel ne coûte rien. Et les affaires, vous savez, sont enterrées, en règle générale, loin du code. J'ai accès au code de plusieurs, y compris des produits très réussis, mais vaut-il la peine de dire que les avoir, je ne répéterai même pas leur succès? Pour construire des conteneurs Docker et exécuter des autotests, nous avons décidé d'essayer les actions GitHub , heureusement, ils ont donné un accès préliminaire. En général, les impressions sont restées assez agréables, la vitesse de montage est satisfaisante. La seule chose qui était désagréable était les mises à jour avec perte de compatibilité avec les versions précédentes. À quelques reprises, ils ont changé très sérieusement le schéma de description des actions et ont dû tout reconfigurer. Mais nous savions ce que nous faisions lorsque nous avons accepté d'essayer le produit en étatBeta .

Dès les premiers jours, littéralement, de l'élaboration d'une page de destination pour les tests de demande, nous avons essayé de publier des versions au moins une fois par semaine et de tester au moins une hypothèse. Au début, les hypothèses étaient plus globales, nous avons essayé de trouver divers problèmes, de cibler le public et d'élaborer une proposition. Mais plus le produit évoluait, moins il devenait mondial et l'essence elle-même était moins susceptible de changer. Le projet est parti de zéro, avec la page de destination habituelle, puis à genoux, nous avons créé un client de démonstration du chat bot, qui se bloque toujours sur notre page principale. Cette démo pourrait reproduire un dialogue strictement programmé et nous servir de démonstration de ce qui pourrait être fait sur notre constructeur - le résultat de son travail, et non le constructeur lui-même. L'astuce était que nous supposions que l'entreprise ne viendrait pas à nous pour le concepteur de bot,mais pour quelque résultat, l'avantage qu'il donnera. Nous voulions verser à nos clients une tasse de café faite par notre machine à café, au lieu de montrer la machine à café elle-même. Il est facile de deviner quefaire une tasse de café est beaucoup plus rapide et moins cher que de récupérer une machine à café . Guidés par ce principe, nous avons décidé de faire d'abord une démo client, d'autant plus qu'avec un certain nombre d'outils prêts à l'emploi cela ne nous a pris que deux soirées, dont l'élaboration de scénarios de dialogue.

Lorsque nous avons vu l'intérêt des visiteurs pour le palier et les conversions supplémentaires générées par notre démo, nous avons décidé d'aller plus loin. Je me souviens que notre première version du constructeur était un formulaire d'inscription avec un formulaire de connexion, après quoi l'utilisateur était redirigé vers une page présentant des excuses et une promesse d'informer lorsque quelque chose d'autre fonctionnait. J'ai fait les formulaires de connexion et d'inscription une centaine de fois dans ma vie et je ne pouvais même pas penser qu'ici nous trouverions immédiatement beaucoup de problèmes.Environ 60% des premiers utilisateurs n'ont tout simplement pas pu terminer le processus d'inscription . Pour qui le bouton ne fonctionne pas, pour qui le courrier électronique ne vient pas, pour qui est autre chose. Au début, j'ai perçu l'idée de ne publier que quelques formes avec beaucoup de scepticisme, mais un premier regard sur Yandex.Metrica a clairement indiqué que c'était plutôt la bonne décision. La prise de conscience que les utilisateurs se comportent différemment de ce que vous souhaiteriez, et parfois la façon dont vous pensiez que vous ne pourriez pas, a eu un grand impact sur tout ce que nous avons fait ensuite. Comme passe-temps, j'ai passé plusieurs fois par semaine quelques heures dans un navigateur Web à regarder comment les utilisateurs utilisent notre métier.

Donc, petit à petit, nous avons ajouté des fonctionnalités à notre idée et sommes arrivés à un produit qui a encore de la valeur non seulement pour nous, mais aussi pour nos utilisateurs, dont certains nous paient même de l'argent. À long terme, nous n'avons pas compris à quoi nous voulons en venir, à quoi ressemblera notre produit. La seule chose que nous avons alors compris, c'est que nous ne comprenons rien et que nous sommes dans un état d'incertitude.

Résultat


Cette expérience m'a amené, moi et mon équipe, à un investissement angélique de la catégorie amis, famille, imbéciles, construit par MVP, premières ventes, grande expérience, beaucoup de joies et de déceptions. Nous ne sommes pas encore une véritable entreprise, mais nous nous efforçons de le devenir. Et quand je dis cela, je veux dire que nous sommes toujours à la recherche d'un modèle commercial durable et d'une adéquation marché-produit. Encore une fois, nous prévoyons de chercher le bon concept de produit, notre client, notre marché.

Les objectifs initiaux n'ont pas du tout été atteints, mais le projet est passé d'un passe-temps à la maison et s'est transformé en un emploi à temps plein, et la responsabilité est apparue aux investisseurs, aux utilisateurs et aux employés. Bien sûr, le projet a beaucoup de problèmes, à la fois conceptuels et techniques, mais il n'y a rien d'insoluble et nous prévoyons de continuer à travailler.

Avant de vous lancer dans la partie la plus technique de mon opus, il est probablement utile de parler brièvement de ce que le produit vous permet de faire.

  • Gérez les chatbots dans votre compte
  • Éditeur de chatbot visuel
  • Contrôlez l'accès aux robots de discussion (accès d'édition, accès public)
  • Possibilité de publier des robots de discussion sur le Web (widget, intégré, plein écran)
  • Paramètres du chatbot (conception, noms, métriques, position du widget, etc.)
  • Prise en charge de l'intégration des chatbots avec des services externes via les requêtes GET et POST
  • Analyse des dialogues de robots
  • Gestion de compte
  • Modèle d'abonnement, gestion des abonnements


Architecture


Maintenant, connaissant le contexte, les objectifs, l'idée et les principes qui nous ont guidés dans le développement, je peux commencer à donner une description générale de la façon dont tout cela fonctionne. Étant donné que notre choix initial était de créer des chatbots pour les sites et des chatbots en plein écran, comme app.botlify.io/bot/5de53dbf9b9bae002b319600, il était clair que la plupart du travail se ferait du côté frontal. En conséquence, l'avant du travail sur le client a été formé en une liste significative de tâches et une liste de souhaits:

  1. Créez / trouvez une bibliothèque client, une sorte de «moteur» pour les robots de discussion dans un navigateur qui comprend les instructions json reçues et maintient un dialogue avec l'utilisateur.
  2. Créez une application pour éditer des nœuds de bot, qui enregistrera une liste de nœuds et des liens entre eux dans un objet json (sur la base duquel la bibliothèque cliente mènera des dialogues).
  3. , , , - . , , , . , , , ..
  4. , , . id , :

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

Toute la logique des dialogues, de la création de robots de discussion (nœuds et connexions) à leur utilisation directe dans le client Web, est gérée par le frontend. Le rôle du backend consiste davantage à gérer l'accès, les abonnements, les newsletters, les notifications et le stockage des données transmises par de nombreux clients Web.

L'extrémité avant


Pour l'avant, nous utilisons Reactjs . Nous emballons tout dans Docker (nous le construisons et le plaçons dans le conteneur nginx), le code sur Github dans des référentiels privés, pour CI, nous utilisons des actions Github . Nous lançons des conteneurs sur des serveurs VPS ordinaires avec de simples scripts bash. Pour simplifier le développement de l'interface utilisateur a pris Blueprint .

  • Web — javascript , - . json -, . -(, , , , , .).
  • Web — javascript . id , , Web- .
  • — , . json, -. , «» , — -.
  • Compte d'utilisateur - une application Web pour gérer votre compte, votre abonnement et vos robots.
  • Le panneau d'administration est une application Web pour les administrateurs. Gestion des utilisateurs, bots, abonnements, tableaux de bord avec analytique.


Le diagramme ci-dessous montre les composants du frontend et comment ils interagissent les uns avec les autres. Webclient et l'éditeur de bots ne sont utilisés que dans le contexte d'autres applications, alors que si l'éditeur n'est utilisé que dans nos applications, le client Web peut également être utilisé par nos clients comme module Web. Lors de la construction du projet, des packages avec Webclient et Editor sont ajoutés aux applications Dashboard et Admin. De plus, le module Web est construit à l'aide de Webpack pour la livraison aux utilisateurs.



MVP 1. Client Web


En tant que startup, nous nous efforçons toujours d'obtenir des résultats maximaux en utilisant un minimum de ressources. Il me semble qu'une étape assez logique pour le premier MVP a été la création d'un client web du point de vue qu'il représentait le «visage du produit», montrait le résultat du travail du designer, et non le processus de création du bot - une tasse de café, pas une machine à café. Afin de minimiser le temps de développement de la solution, nous avons décidé de rechercher des bibliothèques adaptées à nos demandes et, soudain, trouvé! lucasbassetti.com.br/react-simple-chatbot est un composant React qui a couvert presque tous nos besoins!

Ce composant a suggéré de décrire la logique du chatbot sous la forme d'un tableau d'étapes, de lire les valeurs entrées par les utilisateurs, de personnaliser l'apparence, de valider les données et semblait suffisamment flexible pour commencer. La description des étapes les plus simples ressemble à ceci:

<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,
        },
      ]}
    />

Nous avons commencé par essayer de cette façon de composer un chatbot présentant notre projet, dont la carte mentale était à l'écran au début de l'article. Bien sûr, décrire manuellement un tel json s'est avéré plutôt gênant, et j'ai dû écrire de nombreuses fonctions personnalisées, mais en général, ce processus a permis de comprendre comment le composant fonctionne, comment obtenir le résultat souhaité avec.

De plus, mon collègue a personnalisé l'apparence, fait plusieurs options d'affichage, et nous avons concocté un exemple avec un salon de coiffure et une exposition Van Gogh. Vous pourriez même remarquer que nous n'avons même pas pensé à l'optimisation d'image. Oui, c'était et n'était pas nécessaire. Dans le processus de travail, nous avons formé une vision approximative de la façon dont le client va travailler et nous avons commencé à chercher des solutions pour le concepteur lui-même, afin de profiter des avantages de l'édition visuelle dès que possible.

MVP 2. Constructeur


Sur la base de ce que nous avons vu en travaillant avec le client, nous avons conclu que le bot peut avoir plusieurs types d'actions: envoyer quelque chose, attendre les actions de l'utilisateur, envoyer une demande à un service externe. Pour un éditeur de bots minimalement viable, nous avons décidé de nous limiter aux blocs:

  • Démarrer - une unité technique qui démarre une nouvelle session
  • Fin - bloquer la fin de la session
  • Message - en atteignant le bloc, le bot envoie le message spécifié dans le corps du bloc
  • — . ,

On a supposé que les blocs seraient interconnectés par des flèches ou des lignes. Tous les blocs, à l'exception du bloc «Start», ont un port d'entrée (socket). De nombreuses lignes peuvent se connecter au port d'entrée, connectant l'unité à d'autres. Tous les blocs, à l'exception du bloc de fin, ont un à plusieurs ports de sortie. Les ports de sortie déterminent à quel contrôle de bloc est transféré une fois la logique du bloc actuel terminée.

Après une brève inspection des solutions disponibles, nous nous sommes installés sur Rete.js (https://rete.js.org). J'ai pris connaissance de la documentation, des exemples et y ai trouvé tout ce dont nous avions besoin pour commencer. Ils ont même eu un exemple avec un chat bot, qui était le dernier déclencheur

Rete . . , — , JSON


Noeud dans Rete.js

Tous les nœuds peuvent contenir un nom, des entrées, des sorties et des commandes. Les entrées et sorties doivent être situées respectivement à gauche et à droite du nœud (pour les nœuds personnalisés, il peut y avoir des exceptions). Ils sont représentés par une socket et peuvent avoir des noms. Pour les entrées, nous avons autorisé un nombre illimité de connexions (vous pouvez accéder au nœud de plusieurs manières), pour la sortie, nous nous sommes limités à une seule connexion, cependant, contrairement aux prises d'entrée, certains blocs ont de nombreuses prises de sortie.

Rete.js est conçu pour que ses fonctionnalités soient étendues en créant des nœuds, des contrôles et des composants personnalisés, ce qui nous a permis d'obtenir rapidement exactement l'image que nous voulions voir, pour laquelle je remercie les créateurs de Rete ! Bien sûr, l'un des plus importants est un éditeur prêt à l'emploi!

Comme écrit endocumentation :
Un éditeur est une zone avec des nœuds et des connexions entre leurs sockets. Les options suivantes sont disponibles:

  • Interaction avec l'espace de travail (déplacement, mise à l'échelle) et gestion des nœuds (déplacement, ajout, suppression)
  • Affichage des connexions, des nœuds, de leurs entrées / sorties et des commandes
  • Gestion des événements de l'éditeur
  • Schéma d'importation / exportation au format JSON
  • Extension des fonctionnalités avec des plugins
  • Personnalisation de l'espace de travail, des nœuds et des connexions


Après avoir un peu conjuré avec Rete et avoir étudié plus en détail des exemples, nous avons réussi à construire quelque chose qui nous a permis de créer et de supprimer des blocs «début», «fin», «message», «saisie au clavier». En sortie, nous avons reçu json avec une description des nœuds, des sockets et des lignes les reliant.

Une des premières versions de l'éditeur

Déjà quelque chose, mais cela ne suffit pas, car notre client web ne comprend pas ce json. Il a besoin d'une sorte de son propre, avec la description des étapes. Il a été décidé d'incorporer un convertisseur d'un format json à un autre dans le client.

Transformateur Json


L'utilitaire reçoit NodesMap, compilé par l'éditeur, en entrée et renvoie un StepsMap que le client comprend. Le code de l'ensemble du transformateur prend un peu plus de 100 lignes, selon le type de nœud et les données, une étape appropriée, des fonctions de déclenchement et un ensemble d'instructions (actions) à effectuer dans cette étape y sont créées. Il existe des instructions qui enregistrent la variable dans l'état chatbot, il y a celles qui remplacent la variable dans le texte ou envoient une demande à notre serveur.

Après avoir lié les composants ensemble, nous avons commencé à tester les outils résultants. Même sans backend, c'était très excitant. Nous avons créé des boîtes de dialogue dans l'éditeur et inséré json dans le client via des outils de développement, et en conséquence, nous avons obtenu un bot qui dit comment nous en avons besoin! Il sait aussi sauvegarder des variables et les utiliser, bon sang! De grandes sensations des premières victoires ... La mosaïque du dispositif de notre application s'est déjà pratiquement formée dans ma tête, nous avons obtenu quelque chose de travailler sur les principes que nous voulons utiliser à l'avenir. Nous avons obtenu un certain squelette autour duquel il restait à construire de la "viande". Et surtout - il est devenu clair comment procéder:

  1. Modifiez l'éditeur, ajoutez le type de nœud souhaité
  2. Nous apprenons à Json Transformer à transformer un nouveau nœud en une nouvelle étape
  3. Nous apprenons au client à travailler avec une nouvelle étape

D'autre part, il était nécessaire de commencer à engager le compte personnel de l'utilisateur afin qu'il soit possible de créer des bots, de les enregistrer, de gérer et nous avons décidé de nous concentrer sur cela afin de montrer rapidement aux utilisateurs non pas un concept, mais un produit.

Compte d'utilisateur


Les bibliothèques ci-dessus remplissaient certaines fonctions liées à la création de la logique du chatbot (éditeur), son interprétation ou sa reproduction (client). Les problèmes de stockage de données, la possibilité de charger des bots créés, de les gérer et de définir des propriétés non liées à la logique sont restés ouverts et l'application aurait dû les résoudre pour les utilisateurs. Armés de blueprintJS, nous avons esquissé un prototype de compte personnel dans lequel il était possible de s'inscrire et de créer plusieurs bots. Lorsque vous cliquez sur le bot pour créer une personne, vous devez tomber dans l'éditeur avec un nouveau bot, et lorsque vous cliquez sur la carte du bot dans l'éditeur avec ce bot. Nous avons décidé de confier les fonctions de chargement et de sauvegarde du bot via l'API de notre backend à cette couche afin de laisser l'éditeur de bot indépendant du backend.



L'application du compte de l'utilisateur peut télécharger le package de l'éditeur et y transférer les données prêtes à être affichées. Cette application gère également les formulaires pour définir les propriétés du bot (nom, clés API, avatar, paramètres de publication) et vous permet d'afficher des statistiques. Afin de permettre aux utilisateurs de voir immédiatement le résultat de l'éditeur, nous avons ajouté un client Web au bureau de l'utilisateur, auquel nous donnons le schéma json bot, il l'interprète par étapes et le lit sur l'onglet "Aperçu". En gros, c'est un panneau d'administration très classique avec quelques composants intéressants (éditeur de bot et client Web), je pense que beaucoup l'ont fait. Mais c'est à ce stade qu'il est devenu très gênant de développer notre application.

Au départ, il nous a semblé une bonne idée de contenir les composants du produit dans différents référentiels et nous n'avons pas vu de problème particulier dans ce domaine. Cependant, il est rapidement devenu clair que la mise à jour de nombreux référentiels est problématique, sans parler de la nécessité de danser avec un tambourin lors du développement, car ils sont dans une certaine mesure interdépendants. Et étant donné que nous n'avions qu'un seul développeur à temps plein, cette approche était un énorme poil dans le cul. Et tout déploiement s'est transformé en une branche de l'enfer sur terre en raison de la différence dans l'assemblage et la publication des bibliothèques, des applications, des problèmes de compatibilité descendante. D'où la conclusion banale, mais pas la plus inutile: une allocation prématurée des modules peut faire plus de mal que d'aiderJ'en ai déjà été convaincu à plusieurs reprises sur le backend, et je suis revenu ici, mais à l'avant. Oui, et je n'ai manqué aucune chance sur le backend: =)

Un de mes collègues a rassemblé sa volonté en un coup de poing et a tout combiné dans un mono-référentiel géré avec lerna . Maintenant, notre seul référentiel frontal est divisé en packages: administrateur, client, commun, tableau de bord, éditeur, module Web. Ils peuvent avoir un assemblage différent à l'intérieur, mais lerna leur permet de se lier et de mettre à jour les dépendances entre les packages. Après cela, le développement et le déploiement du frontend sont devenus beaucoup plus rapides et plus faciles, tout est immédiatement à portée de main, mais toujours divisé.

Après avoir créé l'armoire, nous avons passé un peu de temps sur de nouveaux blocs dans l'éditeur et leur traitement par le client:

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

Je n'ai pas grand-chose à dire sur le panneau d'administration et le module Web, tout y est très standard. Permettez-moi simplement de noter que le panneau d'administration ne doit pas être fait à l'avance non plus . Nous l'avons, mais personne ne l'utilise, car personnellement il n'est pas difficile pour moi de voir tout ce qui m'intéresse immédiatement dans la base de données. Il n'y a pas de sciences humaines qui auraient besoin de notre panneau d'administration dans l'équipe, et le maintenir à jour est essentiellement un peu moins cher que de maintenir le compte d'un utilisateur. Au fil du temps, un simple tableau de bord y a été ajouté, affichant les paiements, les nouvelles inscriptions et les visites de l'application, mais ces informations ne valent guère le développement de tout un administrateur. panneaux avec tableaux, formulaires et authentification séparée

Résultats?


Nous avons pu construire des prototypes et des landing pages très rapidement. Oui, ce n'était pas du tout ce que beaucoup imaginent sous le couvert de MVP. Mais quelques soirs seulement après la naissance de l'idée, nous pouvions commencer à la montrer aux gens et à la tester. Différentes pages de destination, publicités, textes dans le bot - nous pourrions tester et rechercher. Je recommande fortement à toute personne impliquée dans le développement de startup de réfléchir à la manière de faire avancer les choses le plus rapidement possible. Nous avons fabriqué le premier produit à extraire de la valeur en trois mois environ, puis un processus d'amélioration plus progressif a commencé. Bien sûr, nous avons maintenant plus de blocs à l'intérieur du constructeur, nous avons ajouté la validation, les types de données, les demandes GET et POST, beaucoup de toutes sortes de paramètres de conception et d'affichage, mais vous pouvez commencer sans tout cela, ce que nous avons fait.

Au fil du temps, le système a commencé à devenir plus complexe et à évoluer, et je n'ai même pas été en mesure de décrire de près tout ce qui se passe réellement. Commencez petit, les choses se compliquent avec le temps, si nécessaire. Tout composant supplémentaire peut entraîner un coût très élevé car il est non seulement nécessaire de créer et d'intégrer, mais également de prendre en charge, tester, documenter, déployer, surveiller, lui présenter d'autres membres de l'équipe. Vous ne devriez probablement pas vous soucier des files d'attente sur RabbitMQ, si auparavant il n'y avait pas de files d'attente dans votre application. Très probablement, des solutions basées sur des technologies déjà existantes seront suffisantes pour commencer. Tout nouveau composant représente un coût supplémentaire pour l'intégration, le fonctionnement, les tests, le support, la documentation, le déploiement, etc., etc.

J'espère que mon expérience sera utile à au moins quelqu'un. Pendant longtemps, j'ai essayé de déterminer le hub pour le déterminer, mais je n'ai pas compris. Faites-moi savoir s'il vaut la peine d'écrire la deuxième partie dans laquelle je voulais parler un peu du backend, des services externes et des plans de développement

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

More articles:


All Articles