Comment créer un prototype de service de comparaison de documents en 28 heures et gagner un hackathon

Salut Après une longue pause, nous avons décidé de retourner à Habr et voulons partager l'expérience de participer au hackathon. En septembre, Moscou a accueilli Diversity.Hack , dont les partenaires étaient Dostavista, Waves et nous, New Cloud Technologies. La participation à un hackathon organisé par Phystech.Genesis, un projet du MIPT Business Incubator, a été la première et en même temps une expérience réussie pour notre entreprise. Mais n'allons pas de l'avant - voyons comment tout s'est passé et quelles choses intéressantes les participants ont réussi à trouver.



Comment était la diversité.


208 personnes de 44 équipes se sont rassemblées pour le hackathon dans le cadre du coworking GrowUp, un record pour les organisateurs. Sur la façon dont les équipes ont été formées, des détails peuvent être trouvés dans l' article de Phystech.Genesis. Les participants ont résolu l'une des trois tâches proposées par chaque entreprise un peu plus d'une journée, ayant la possibilité de passer la nuit sur place et avec la nourriture des organisateurs. Le fonds de 300 000 roubles était réparti également entre les pistes. En plus de générer des idées et de coder, les participants pouvaient assister à des cours intensifs sur la façon de gagner aux hackathons .



Au début de l'événement, toutes les entreprises partenaires ont décrit les conditions de leurs tâches - avant cela, seules une formulation générale et un ensemble de technologies que les participants devaient utiliser étaient connus. Les équipes ont réparti le temps de développement du prototype à leur discrétion, en tenant compte des points principaux : analyse de marché des idées existantes, brain storm, identification des principales caractéristiques du prototype, rôles au sein de l'équipe et codage.

Parmi les participants se trouvaient à la fois des étudiants et des spécialistes expérimentés, des gars très prometteurs se sont rencontrés. En conséquence, nous et d'autres sociétés partenaires avons réussi à tirer de nouvelles idées. Par exemple, Waves a proposé de développer une application mobile utilisant le langage Ride et la plateforme Waves. Pour le service de livraison Dostavista, les équipes ont développé un système d'optimisation des itinéraires de messagerie.

Sous la direction de nos collègues des New Cloud Technologies, il a été nécessaire de trouver un outil pratique (algorithme, interface utilisateur) pour analyser les changements dans les documents lors de la comparaison de deux versions ou plus.

Pourquoi exactement cette tâche?


Depuis 2013, notre société développe MyOffice , un ensemble d'applications bureautiques qui s'exécute sur tous les principaux systèmes d'exploitation, y compris les mobiles. Au départ, nous avions 7 à 8 options de travail, et pour en choisir une pour le hackathon, nous avons même organisé un scrutin privé au sein de l'entreprise. Parmi les options figuraient, par exemple, la comparaison de deux ou plusieurs documents (développement de la technologie elle-même et UX), la comparaison automatisée de la qualité du rendu des documents (en utilisant l'exemple de l'exportation au format PDF à partir de deux éditeurs différents), il y avait aussi une idée liée à l'analyse des polices dans un document. Nous voulions également donner une tâche pour collecter des informations sur les chats sur les dates de réunion pour leur ajout automatisé au calendrier du smartphone (intéressant par exemple pour écrire des bots dans Telegram) et plusieurs autres.

En conséquence, nous avons décidé de comparer deux ou plusieurs documents. Globalement, l'idée est qu'en utilisant une suite bureautique sur leur ordinateur, différents employés peuvent apporter leurs propres modifications au même fichier source. Vous devez créer une technologie qui vous permet de comparer facilement plusieurs versions du même document, puis d'accepter l'une des modifications proposées. Les modifications doivent encore être vérifiées afin de détecter toute contradiction entre elles, après quoi un seul document final sera obtenu.



Il semblerait que cette tâche puisse être pertinente du tout? Divers nuages ​​sont maintenant disponibles dans lesquels l'historique complet des modifications est affiché - qui a modifié quoi, quand. Cependant, de nombreuses entreprises n'autorisent pas le stockage de documents dans le cloud pour des raisons de sécurité. Pour telle ou telle autre raison, les modifications du fichier peuvent être effectuées hors ligne, sans utiliser de cloud, puis telle ou telle version du document est généralement envoyée aux collègues par courrier. Les modifications peuvent être apportées par plus d'une personne et, à la suite des versions de documents, elles deviennent si nombreuses qu'une confusion se produit inévitablement.

Nous sommes donc confrontés à la nécessité d'utiliser un outil pour comparer simultanément plus de deux documents. Mais pas de chance! Il n'y avait tout simplement pas de solution à ce problème sur le marché, il n'y a que des services pour comparer deux documents, et le choix existant ne brille pas avec variété. Il y a donc ABBYY Comparator, qui peut comparer des documents non seulement au format texte, mais aussi au format PDF, des numérisations et des photos. L'inconvénient d'utiliser ce service peut être son coût. Un autre service est Text Compare! - et similaires vous permettent d'insérer simplement du texte dans deux fenêtres spéciales. Et cela limite considérablement les possibilités - même les fichiers ne peuvent pas être téléchargés, mais seulement Ctrl + C et Ctrl + V !

Notre entreprise a décidé de chercher un remède à la «douleur» des développeurs talentueux de toute la Russie, en supprimant la restriction sur le format du document. Nous avons proposé d'utiliser du HTML familier - la structure arborescente du document y est représentée de manière pratique. Tous les participants ont répondu à cette offre. Nous voulions obtenir la technologie de comparaison elle-même, ainsi qu'une interface pratique et interactive.

Décisions de l'équipe gagnante


Sur Habré, il existe de nombreux articles d'interview sur la façon dont les participants ont construit un flux de travail pendant un hackathon, comment ils ont réussi à gagner. Huit équipes ont résolu notre problème, dont trois ont remporté des prix: le premier a pris ZenDocs , le second a été partagé par SerotoninMix et SegFault . Nous avons sélectionné les gagnants selon les critères suivants: convivialité de l'interface utilisateur (son interactivité et son minimalisme), la qualité des différents cas dans cette interface (à quoi ressemblera la comparaison des tableaux - changements structurels et texte à l'intérieur, diagrammes, images), l'algorithme de comparaison lui-même (complexité temporelle, capacité à reconnaître différents types de modifications). Un bon prototype fonctionnel était considéré comme un gros plus :)

Les solutions d'interface pour la plupart des équipes se sont avérées largement similaires. Cela suggère peut-être que les interfaces se sont avérées conviviales si tous les développeurs en étaient arrivés à la même chose. Les détails des étuis personnalisés et la qualité du prototype différaient - quelqu'un a réussi à en faire plus, quelqu'un moins.



Néanmoins, après la présentation des solutions, le favori a été clairement défini - il s'est avéré que c'était l'équipe ZenDocs , qui mettait l'accent sur la partie algorithmique. Ils ont mené une étude efficace des approches disponibles et ont trouvé un article scientifique avec un algorithme pour comparer les arbres xml. Cet algorithme s'adapte bien à N documents: si vous comparez des documents par paires, comme le font de nombreux autres algorithmes, la complexité augmentera de façon polynomiale dans le nombre de documents, et avec cette approche, elle augmentera linéairement. L'algorithme renvoie l'id des éléments d'arbre qui ont changé et le type de changement est insérer, supprimer, remplacer.

Il est pratique de donner un tel format de réponse au frontend - vous n'avez pas besoin de le traiter davantage. Les images, les lignes et les colonnes du tableau sont des blocs structurels ordinaires du document, les mêmes que les paragraphes, donc cet algorithme vous permet de détecter les changements dans l'image, la structure du tableau ou son contenu, c'est-à-dire qu'il fait face à de nombreux cas d'utilisation, et c'est un critère d'évaluation important. L'équipe a proposé une optimisation supplémentaire de l'algorithme à l'aide de l'arbre de Merkle. Une telle optimisation permettra de vérifier uniquement les sous-arbres pour lesquels le hachage a changé, ce qui accélère l'algorithme. Le prototype est disponible sur: https://zendocs.ru





Le choix des deuxième et troisième places a été plus difficile, car trois dignes décisions les ont réclamées. Au final, nous nous sommes installés sur SerotoninMix et SegFault. Certains d'entre eux étaient meilleurs pour l'interactivité, d'autres pour la navigation, et c'est une situation normale: en deux jours, il est difficile de développer une solution idéale. Certaines équipes ont presque entièrement implémenté l'algorithme sur un modèle simple, parmi lesquelles ZenDocs et SerotoninMix.

Nous avons distingué ces derniers, y compris pour leur approche créative - apprécié leur humour (ils ont appelé leur projet «bureau NeMoy», et il y a eu beaucoup de moments amusants dans leur présentation) et avons été impressionnés par le fait qu'ils ont réussi à créer un prototype à part entière.




Les gars de SegFault ont trouvé une approche très originale. Lors du développement du prototype, ils ont utilisé Vue.js ; le serveur a été écrit en Python en utilisant des algorithmes Flask et Docker , Word2Vec et Crochemore ont été utilisés . Après avoir examiné un peu les algorithmes, les participants ont comparé le document principal avec tous les autres, ont mis en évidence les parties communes et différentes. Dans l'environnement créé, il existe un bloc d'édition dans lequel des fragments de différents documents sont affichés. Vous pouvez en sélectionner un et le modifier si nécessaire. Dans le panneau de configuration, vous pouvez accepter la modification ou afficher celles précédemment acceptées. L'équipe a également comparé des images, en les comparant au format base64 et en convertissant l'image au format base64 , et a élaboré une méthode de comparaison des tableaux et d'affichage des modifications.

Il y avait peu de concepteurs au hackathon, et notre tâche pour un grand pourcentage consistait à prototyper l'interface et à créer des mises en page, ce qui impliquait l'utilisation d'outils tels que Sketch et Figma. L'équipe Talestorm s'est enfoncée dans nos cœurs, dont l'un des participants a appris à travailler à partir de zéro toute la nuit.

Interaction post-hackathon


Fin septembre, une réunion des gagnants, des représentants de New Cloud Technologies, dont le PDG Dmitry Komissarov , et Phystech.Genesis a eu lieu. Lors de la réunion, ils ont discuté des tâches de l'entreprise, auxquelles les gagnants du hackathon peuvent participer. Nous avons hâte de travailler avec les équipes!

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


All Articles