Une banque a introduit un nouveau système pour les emplois d'opérateur. C'est une nouvelle interface pour nous - simple. Et pour certaines personnes, même un changement de bouton provoque la panique. Tout était immédiatement nouveau. En conséquence, le travail s'est levé. Comme cela arrive souvent, les gens ne voulaient pas étudier seuls les manuels. Le plus souvent, ils appelaient le support technique et demandaient à leurs collègues de montrer sur quels boutons appuyer. Et la création d'instructions a pris beaucoup de temps.
Il était une fois, les créateurs d'un service dont nous allons parler aujourd'hui ont été confrontés au même problème. Ils ont décidé de transférer les instructions sous forme d'invites interactives directement dans le système. Vous savez comment lorsque vous lancez une application ou un jeu pour la première fois, ils vous montrent: voici le bouton de tir, voici comment exécuter, appuyez sur «accroupi» pour accroupir, etc.
Seulement universellement, pour que vous puissiez configurer sur n'importe quelle interface et que n'importe qui puisse le faire, même loin de la programmation.
C'est comme ça qu'ils l'ont fait.
Le service s'appelait HintEd. Il fonctionne comme une couche distincte sur l'interface de toutes les applications Web: il peut s'agir d'un site Web, d'un portail d'entreprise, d'une sorte de système d'entreprise. Les plans incluent des composants pour les applications Win et des applications natives pour les appareils iOS / Android.
L'éditeur est dans l'extension du navigateur. L'utilisateur s'y connecte une fois lors de l'installation, puis appuie sur le bouton de la page souhaitée et passe en mode d'invite de balisage. Chrome, Firefox, Opera, Edge, Yandex.Browser et Vivaldi sont pris en charge.
L'administrateur, à l'aide de l'éditeur, crée une séquence d'invites, les relie aux éléments de l'interface et décrit ce que l'utilisateur doit faire: cliquez, entrez du texte, lisez quelque chose d'important.
Les conseils sont stockés sur notre serveur cloud et à tout moment, ils peuvent être rapidement modifiés ou modifiés dans la séquence.
Pour le rendre pratique pour l'utilisateur, le développeur détecte les contrôles sur la page et s'y lie. Autrement dit, lors du changement d'affichage (avec la même logique des éléments), les invites n'auront pas à être refaites.
Lorsqu'un utilisateur visite une page, il voit les info-bulles de notre calque élément par élément.
La détection d'un élément est un peu compliquée. Pour le calcul, le projet a utilisé jusqu'à trois bibliothèques. Les pages Web ne sont plus statiques et utilisent activement AJAX pour charger des données: par exemple, des centaines d'éléments identiques peuvent être trouvés dans une table qui se remplacent. Vous pouvez rarement voir des applications de balisage qui utilisent des identificateurs uniques ou même des classes CSS uniques, lorsqu'il existe des bibliothèques qui fonctionnent avec une arborescence DOM virtuelle, et certains cadres génèrent des identificateurs et des attributs basés sur le modèle de données qu'ils utilisent.
Le processus de calcul commence par un clic de l'utilisateur, il est intercepté à l'étape d'immersion document.addEventListener ('click', (e) => {...}, true);. Ensuite, sa cible (e.target) est transmise à la première bibliothèque pour traitement, c'est l'un des modules de l'inspecteur de débogage Chromium.
La sortie est un sélecteur CSS et / ou xPath, qui avec une probabilité de 97% identifiera de manière unique un élément à la fois. Pourquoi pas 100 et pourquoi en ce moment? Cet utilitaire ne se fixe pas pour tâche de trouver une ligne unique dans un tableau ou un élément de menu pour se concentrer dessus, sa tâche est simple: calculer le sélecteur le plus précis pour un élément afin qu'il puisse être obtenu pour le moment. Tout ce qui parle d'unicité sera ajouté au sélecteur CSS (entrée avec type, id, classe): ce comportement fonctionnera pour la plupart des éléments statiques, mais les scripts d'aide fonctionneront principalement avec des éléments dynamiques, donc le processus est transféré vers la deuxième bibliothèque.
La seconde est une bibliothèque qui génère un sélecteur CSS d'un élément, mais en même temps, elle a un grand nombre de paramètres d'entrée qui permettent un contrôle flexible sur le résultat de sortie. En utilisant cette bibliothèque, nous générons plusieurs sélecteurs à la fois: le chemin complet dans l'arborescence DOM vers l'élément et le chemin le plus abstrait qui ignore toutes les spécificités, y compris les attributs 'id', 'class', 'href', 'src', 'data- *' , ainsi qu'une liste d'attributs et de balises entraînés utilisés par les frameworks. Cela vous permet d'obtenir un sélecteur CSS qui est sur des états de bord, contrairement à DOMPresentationUtils, et qui se comporte beaucoup plus stable lors du changement d'attributs ou même du déplacement d'un élément dans l'arborescence DOM.
Et la troisième bibliothèque, qui ajoute des types spéciaux de sélecteurs basés sur:
- La position relative de l'élément par rapport à l'étape précédente, les éléments parents et les bords de l'écran;
- Le contenu de l'élément: son texte, le nombre de descendants et leurs caractéristiques uniques;
- Caractéristiques externes: profondeur dans l'arborescence DOM, élément parent, qui a plus de deux descendants, etc.
Cela met fin à l'étape de calcul, les données sont enregistrées dans le script et le contrôle est retransféré au navigateur et mis en pause immédiatement après la fin de l'événement pour effectuer la validation.
La validation est une étape nécessaire qui est effectuée en deux itérations, la première est immédiatement après l'exécution de l'événement, à ce moment les gestionnaires Javascript peuvent ajouter ou supprimer des attributs, des classes de l'élément cible ou l'élément lui-même. Les sélecteurs sélectionnent alternativement un élément de l'arborescence DOM et comparent le résultat avec un lien précédemment enregistré à l'élément dans le code. Les sélecteurs sont d'abord triés par vitesse d'exécution, puis ceux qui produisent des résultats incorrects tombent tout en bas de la liste, et les sélecteurs sont régénérés pour eux. La deuxième itération répète les actions de la précédente et commence avant le début de l'étape suivante. Cette itération est nécessaire pour s'assurer que le sélecteur fonctionne lorsque les modificateurs externes n'agissent pas dessus (il n'y a pas de survol, de clic, de focus) et qu'il est en paix relative - comme avant la sélection de l'élément.
Les bibliothèques fonctionnent également bien avec les iframes, pour eux, le processus est similaire, sauf pour la génération d'un sélecteur jusqu'à l'iframe lui-même (et même les iframes à l'intérieur d'autres iframes), qui consiste à générer récursivement des sous-chemins à l'intérieur de chaque iframes et à fusionner de l'extérieur.
Comment est-il montré?
Afin d'afficher des invites aux utilisateurs du système, vous pouvez utiliser le même plug-in de navigateur ou intégrer le widget dans la page.
Le second est choisi plus souvent et ne nécessite aucune action de la part de l'utilisateur pour installer quoi que ce soit de plus.
HintEd dispose de plusieurs widgets et lecteurs pour l'intégration dans les systèmes. Cela peut être un joueur léger qui joue simplement des indices pour certains déclencheurs, ou un widget avec un bouton, en cliquant sur lequel l'utilisateur affichera une liste des indices disponibles et pourra les jouer quand il en aura besoin. Tous ces modules peuvent être utilisés dans des applications Web réactives / angulaires, ou en tant qu'objet global sur une page.
Ainsi, vous pouvez faire des astuces pour n'importe quel système: fermé aux développeurs tiers ou au propre développement de l'entreprise. Et les développeurs peuvent utiliser les API pour exécuter des scripts et des info-bulles avec une logique complexe, par exemple, en survolant un élément spécifique.
L'interface d'entrée rapide est le russe et l'anglais, car le développeur est également orienté vers le marché occidental (il est plus difficile d'enseigner aux gens pour leurs systèmes en raison de la barrière de la langue et de la nécessité de tout pointer à distance avec votre doigt).
Parmi les clients HintEd, il existe de nombreuses entreprises de la banque de détail, de HoReCa, de la construction pétrolière et gazière, où les utilisateurs finaux ne distinguent pas toujours un programmeur d'un administrateur système et une unité système d'un processeur. Par conséquent, il sera utile à la fois sur les intégrations et en tant que système pouvant être donné à un client en tant que service.
Pour le pilote de la banque, nous avons réalisé 10 scénarios assez importants qui couvraient la quasi-totalité de l'interface et expliquaient aux utilisateurs comment travailler dans le système. Dans le processus habituel, il faudrait plusieurs mois pour développer une telle aide interactive, et il faudrait autant pour rédiger des instructions. Et ici, vous pouvez dessiner directement au-dessus des interfaces.
Le widget a été mis en œuvre pendant trois semaines au total (et une grande partie du temps a été consacrée à l'accord avec la banque, y compris avec le personnel de sécurité). Les utilisateurs ont injecté, pleuré, mais étudié le système. Il y avait un groupe témoin qui étudiait à l'ancienne: avec quatre mentors en personne ou sur Skype. Ils s'attendaient à une accélération de la formation de 20%, mais la note du client est de 43,9%. Le taux d'erreur dans les processus a également diminué. Le coût de la formation a diminué d'environ 20%.
Alors paix, amitié, chewing-gum! Le produit a récemment dépassé notre accélérateur, pendant trois mois du programme, nous y avons plongé profondément et le distribuons maintenant à nos clients. Si vous avez un logiciel effrayant et que vous devez l'apprendre - voici mon mail: SZinkevich@croc.ru.