Le conte d'Octopus



Lorsque vous recherchez des produits sur Internet, vous souhaitez souvent affiner votre requête afin que les résultats de recherche deviennent plus pertinents. Que ce soit la couleur d'un T-shirt, le type de boîte de vitesses d'une voiture, le nombre de ports USB dans un ordinateur portable ou l'espace d'une cuisine dans un appartement souhaité.

Presque dès le tout début des travaux de Yula, nous avions un système de champs plats, qui permettait d'affiner la demande. Autrement dit, sous la forme de création et de recherche de marchandises, de simples champs de sélection étaient disponibles qui vous permettaient d'enregistrer des produits avec des paramètres supplémentaires, puis de les rechercher.

En tant que développement et conquête de nouveaux pics, Yulia avait besoin d'un nouveau système qui vous permettrait de créer des arbres de champs, avec une saisie manuelle, une sélection de valeurs et même l'obtention de nouveaux champs, en fonction des options précédemment sélectionnées. Et comme apothéose, il était nécessaire de créer un système simple pour gérer tout cela via le panneau d'administration.

Première partie: «Cthulhu, viens»


Nous avons commencé à résoudre ce problème. En analysant les options possibles, nous avons constamment été confrontés au fait que les concepts de «terrain», de «présentation» et ainsi de suite, se croisaient avec la fonctionnalité existante, ce qui trompait l'interlocuteur. Notre collègue, qui a proposé une façon radicale de séparer les grains de l'ivraie, nous a sauvés de cette confusion - appelons-le tout "Octopus".

Pourquoi Octopus? Parce que tout cela ressemble à une pieuvre. Octopus est un système de terrain général qui décrit:

  • quelle plateforme pour afficher les champs;
  • quel type de présentation est responsable du schéma (création de produit, filtre, affichage de la carte, etc.).

La pieuvre a des tentacules, ou tentacules (hussards, tais-toi!) - c'est ce que nous avons appelé des branches d'arbres, qui décrivent comment certains champs doivent être affichés dans le formulaire. Cela peut être:

  • champs de saisie;
  • champs de sélection
  • groupements de champs;
  • champs de texte.

Quelque chose comme le balisage HTML, où il y a des balises, et les balises ont des paramètres et des valeurs que l'utilisateur entre ou sélectionne dans une liste prédéfinie.

Ceux qui étaient «pour» et «contre» le nom d'Octopus étaient divisés à peu près également, mais après un certain temps après le lancement du système, il est devenu évident que, grâce à ce nom, tout le monde a immédiatement compris clairement ce qui était discuté.

Deuxième partie: structure


Nous avons permis à la créature aquatique de devenir le nom de notre nouveau système, mais tout n'a pas été donné aux déchirés par les seigneurs de la mer, il y avait une place pour des désignations plus classiques. Je vais énumérer tous les éléments:

  • Octopus - est responsable de la structure dans son ensemble.
  • Tentacle - décrit l'affichage de chaque branche individuelle. Le champ du widget est transmis au client, ce qui indique comment afficher le champ.
  • Attribut - stocke la valeur entrée.
  • Dictionnaire - contient une liste de valeurs possibles pour la sélection dans une liste.
  • Tag - contient une valeur qui peut être sélectionnée dans la liste.
  • Paramètre - l'attribut ou le tentacule peut être complété par divers paramètres pour la validation et la réponse des clients.
  • Dépendances - une structure qui décrit la réponse d'un champ au choix d'un autre.

Le client ayant reçu Octopus peut dessiner la page de création ou de modification du produit ou effectuer une recherche conformément à la structure décrite ci-dessus. Après le remplissage, les données sont enregistrées par le backend et envoyées à la recherche d'indexation, ce qui permet aux éditeurs de créer rapidement de nouveaux champs et de les utiliser immédiatement dans la recherche.

Troisième partie: présentation


Ici, nous ne parlons pas de la performance dans le cirque, où les poulpes frappent des tentacules et effrayent le public ravi par les subtilités et les procédures de l'eau (intéressant, un tel cirque existe-t-il?). Je vais parler de la façon dont nos poulpes apparaissent dans la vie d'un client.

Comme mentionné ci-dessus, chaque schéma de champ (Octopus) a un ensemble de paramètres qui indiquent à quelle action ce schéma appartient et qui doit le montrer. Par exemple, une application Android demande au serveur principal un schéma de filtre de recherche pour la section Armoire pour femmes. Si la base de données a un schéma adapté aux paramètres spécifiés, le backend le renvoie et l'utilisateur voit les champs "couleur" et "pointure".

Comment est-ce mis en œuvre?

Les éditeurs du panneau d'administration créent un nouveau schéma Octopus, pour lequel ils indiquent qu'il est destiné à un certain type d'application client (iOS, Android, Web ou pour tous les types), que ce schéma contient des champs à afficher sur la page de recherche, et surtout - le schéma attaché à une catégorie spécifique de marchandises.

De plus, lorsque l'utilisateur entre dans la recherche dans l'application mobile, le client demande la disposition du champ au backend, en tenant compte du fait qu'il s'agit d'Android, la catégorie «Garde-robe pour femmes» est indiquée et le schéma doit être pour la vue «Rechercher».

Quatrième partie: Recherche


L'utilisateur de l'application a saisi les valeurs de son annonce, le client les a vérifiées selon les règles du schéma et les a envoyées au backend. Il a tout revérifié et l'a gardé en sécurité. Maintenant, l'annonce sera affichée aux acheteurs avec un ensemble complet de champs. Mais cela ne suffit pas, car il faut que l'annonce soit trouvée par l'acheteur.

Pour ce faire, nous envoyons tous les attributs fournis avec l'annonce à notre recherche, où les données sont indexées, ce qui vous permet de trouver instantanément l'annonce selon les paramètres spécifiés. Les éditeurs peuvent créer de nouveaux champs dans le panneau d'administration Octopus à tout moment, et les utilisateurs peuvent les utiliser immédiatement lors de la création d'une annonce ou d'une recherche.

Cinquième partie: intégration


Les partenaires B2B travaillent avec Yulia pour partager leur base de données d'annonces avec nous afin d'élargir leur portée. Par exemple, si nous prenons la coopération avec un partenaire automobile, il y a un grand nombre de champs pour chaque annonce dans un service externe. Comment se faire des amis dans la base de données d'annonces automobiles avec nos poulpes? La réponse est simple - en utilisant la cartographie; ou, si le partenaire est vérifié, nous pouvons vous permettre de créer directement des champs dans notre système.

Grâce à Kafka, nous organisons un canal de communication avec un partenaire et obtenons:

  • mise à jour de la disposition des champs pour les produits partenaires;
  • les marchandises elles-mêmes et les manipulations avec elles.

Avant de commencer l'intégration, nous découvrirons quel format de données nous sera envoyé et quels types de champs nous recevrons. Après avoir créé les conditions de mappage dans nos champs dans le code, nous obtenons des schémas partenaires et les mappons. Vous pouvez créer de nouveaux champs ou les mapper à ceux existants. Après une cartographie réussie, nous pouvons recevoir des marchandises et tous les champs seront créés dans notre Octopus. À l'avenir, si les partenaires changent soudainement le régime, notre participation ne sera pas requise.

Sixième partie: problèmes


Avec tous les avantages des pieuvres, nous avons également rencontré quelques difficultés. Si des entités individuelles étaient mises en cache dans Redis, qu'en est-il du schéma entier? À chaque fois, la génération est très coûteuse et le stockage d'un circuit aussi volumineux dans le cache est problématique. De plus, nous devons changer de schéma lorsque des champs dépendants entrent en jeu.

Nous avons décidé de diviser l'émission backend des programmes Octopus en deux étapes:

  • Obtenir un arbre immuable, que nous avons mis dans le cache local, mis à jour en arrière-plan toutes les n minutes.
  • Manipulations de branche: complémenter un arbre avec des dépendances et construire une réponse sans cache.

Cette approche a résolu le problème de cache et le temps de retour des champs a été minimisé.

Septième partie: Test A / B


Dans le monde alimentaire moderne, nulle part sans tester les caractéristiques des produits. Les tests A / B n'ont pas contourné Octopus. La tâche était fixée: mesurer l'occupation des champs dans une certaine catégorie, en tenant compte de leur nombre différent et de la variabilité des valeurs. En raison de la flexibilité du circuit, la mise en œuvre d'un tel test n'a pas nécessité beaucoup de temps et la fonctionnalité a été mise en service dès que possible.

Comment avons-nous fait cela?

Au niveau des connexions Octopus avec les catégories de produits, nous avons créé un test pour entrer dans l'expérience. Dans le cas positif, un autre Octopus a été donné et l'utilisateur a vu un ensemble différent de champs.

Nous avons également introduit des tests A / B à d'autres niveaux Octopus: dans les tentacules et les dictionnaires.

Partie huit: où d'autre appliquer?


Dans Julia, les poulpes ne sont pas seulement utilisés pour remplir des fiches produits et les rechercher. Les systèmes Octopus vous permettent de les attacher à toutes les entités du système et, à l'heure actuelle, les poulpes sont utilisés dans le compte personnel de l'utilisateur et dans la livraison des marchandises.

Neuvième partie: un exemple


Les mots sont des mots, mais sans exemple, c'est assez difficile à comprendre. Expliquons sur les doigts. Prenez la structure des champs pour créer le produit dans la section "Immobilier".

Exemple JSON de la catégorie Appartement à vendre - Paramètres de l'appartement
 { "title":" ", "widget":"group", "order":17, "params":{ "required":false }, "subfields":[ { "title":"", "widget":"section", "order":18, "params":{ "required":false }, "subfields":[ { "title":"  ", "widget":"select", "order":19, "slug":"komnat_v_kvartire", "type":"tag_id", "attribute_id":1374, "values":[ { "id":1, "value":"1 ", "order":1 }, { "id":2, "value":"2 ", "order":2 }, { "id":3, "value":" ", "order":3 }, { "id":4, "value":"", "order":4 } ], "params":{ "required":true } }, { "title":"", "widget":"input_int", "order":20, "slug":"realty_etaj", "type":"int", "attribute_id":1543, "params":{ "required":true, "min_value":1, "max_value":500 } } ] }, { "title":"", "widget":"section", "order":21, "params":{ "required":false }, "subfields":[ { "title":" ", "widget":"input_float", "order":22, "slug":"realty_obshaya_ploshad", "type":"float", "attribute_id":1541, "params":{ "required":true, "unit":"²", "min_value":1, "max_value":100000 } } ] }, { "title":"", "widget":"section", "order":25, "params":{ "required":false }, "subfields":[ { "title":" ", "widget":"input_float", "order":25, "slug":"building_flat_ceiling_height", "type":"float", "attribute_id":1518, "params":{ "required":false, "min_value":1, "max_value":10, "unit":"" } } ] } ] } 


L'arbre montre un fragment du diagramme de champ pour soumettre une annonce dans la catégorie «Appartement à vendre». Selon ce schéma, le client peut dessiner l'interface utilisateur pour l'utilisateur, regrouper les champs en différents groupes, valider les valeurs saisies et l'envoyer au backend pour sauvegarde. Examinons plus en détail.

Les tentacules peuvent être imbriquées les unes dans les autres, et pour que le client comprenne quoi et comment afficher, nous avons introduit la propriété widget , qui indique au client ce que nous voulons montrer à cet endroit: regroupement de champs, bloc de texte, indentation ou un champ à part entière.


Dixième partie: Dépendances d'Octopus


Dans certains cas, vous ne pouvez pas afficher toutes les valeurs qui peuvent apparaître dans certains champs de sélection en une seule fois. Par exemple, si nous parlons de voitures, alors placer un formulaire avec toutes les marques et modèles sur un seul écran serait extrêmement gênant pour les utilisateurs, même en tenant compte de l'utilisation de widgets de recherche et d'autres astuces.

Pour résoudre ce problème, nous avons implémenté un système de dépendance qui nous a permis d'indiquer sur le backend quels champs doivent être affichés dans les tentacules en fonction des valeurs préalablement sélectionnées par l'utilisateur dans les autres champs.

Exemple: un utilisateur saisit une vente de voiture, sélectionne une marque BMW et dans le champ Modèle, seuls les modèles appartenant à cette marque apparaissent.

Il est implémenté comme ceci:

  • le client reçoit une carte de champ;
  • pour les champs qui affectent la formation du schéma, un indicateur spécial est spécifié par lequel le client, lors du choix d'une valeur, interroge à nouveau le schéma et envoie cette valeur au backend;
  • l'utilisateur sélectionne le champ, le client envoie une demande pour le backend;
  • le backend recherche dans le système de dépendance s'il existe des champs associés pour les valeurs spécifiées et, dans l'affirmative, il les remplit conformément aux instructions prédéfinies;
  • le client reçoit un schéma mis à jour avec un nouvel ensemble de champs;
  • L'utilisateur peut maintenant sélectionner les valeurs dans les nouveaux champs.


En conclusion


En plus des blagues sur Octopus, nous avons un outil puissant qui vous permet d'implémenter rapidement différents schémas de champ pour les marchandises, les profils utilisateur, la livraison, etc. Les administrateurs via le panneau de configuration peuvent désormais apporter des modifications et compléter des schémas sans toucher au développement et à la recherche. De plus, l'ajout d'un système de test A / B a permis aux gestionnaires de vérifier facilement l'efficacité de différents ensembles de données pour la saisie des utilisateurs.

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


All Articles