Comment créer des problèmes GitHub 5 fois plus rapidement

Les problèmes GitHub sont fantastiques pour suivre les nouvelles fonctionnalités ou les bogues, qui sont affectés, les catégoriser, les ajouter aux projets, etc. En même temps, ils sont également assez lents à créer et en créer un tas prend trop de temps.

L’un des problèmes que je vois avec les problèmes GitHub au travail est qu’ils sont lourds à créer, en particulier pour ceux qui ne sont pas des développeurs ou des concepteurs, comme les gestionnaires ou les testeurs, qui souhaitent signaler un bogue sans passer par le processus de les créer sur GitHub.

Il y a quelque temps, j’ai écrit sur une application que j’écrivais pour accélérer la création de problèmes GitHub. En fait, j’ai construit l’application, mais j’ai oublié d’écrire à ce sujet ici, alors voici le bon article de blog. Dans ce billet, nous verrons :

2. Écrire un lot de problèmes GitHub avec du texte brut
3. La pile technologique derrière l’application
4. Plus d’idées pour améliorer la création de tickets

Pourquoi une application pour créer des problèmes GitHub plus rapidement ?

L’interface utilisateur GitHub est généralement correcte pour créer un problème. Ou deux. Et c’est acceptable pour les personnes férues de technologie, comme les développeurs ou les concepteurs. Cependant, dans notre entreprise Reconnect, parfois après avoir développé une nouvelle fonctionnalité, nous demandons à notre personnel non technique de la tester. Et cela fonctionne très bien, car ils trouvent généralement des problèmes. Mais c’est très fastidieux pour eux de parcourir l’interface utilisateur des problèmes de GitHub. C’est encore plus fastidieux lorsqu’ils doivent créer plus d’un numéro et probablement dans différents référentiels.

Si nous quantifions le nombre de fois où nous déplaçons notre attention pour créer des problèmes GitHub une fois que nous avons atteint la page pour créer un problème dans le référentiel où nous voulons les créer, cela ressemblerait plus ou moins à ceci :

• entrer le titre
• passer à la zone de texte du problème pour entrer la description
• allez dans la barre latérale pour attribuer le problème à quelqu’un
• passez au bloc Étiquettes dans la barre latérale pour ajouter une étiquette
• allez et cliquez sur le bouton pour créer réellement le problème

C’est 5 fois quand nous déplaçons notre attention d’une zone à l’autre! Trop de décalage d’attention pour une tâche qui consiste essentiellement à écrire et trop de temps passé à se recentrer. Et que se passe-t-il si vous devez écrire un problème dans un référentiel différent ? Vous devez naviguer vers ce référentiel dans un nouvel onglet ou dans l’actuel et c’est plus de temps perdu.

Alors, comment pouvez-vous créer des problèmes GitHub plus facilement et plus rapidement ? Ne serait-ce pas plus facile si nous pouvions le faire en nous concentrant sur un seul endroit sans avoir à déplacer notre attention plusieurs fois ?

Écrire un lot de problèmes GitHub avec du texte brut

L’écriture est l’une des compétences les plus élémentaires dans les appareils, c’est plus basique que même les gestes tactiles. Parce que si ceux-ci sont spécifiques aux appareils tactiles, vous devez utiliser une souris ou un trackpad sur les autres. Mais l’écriture est généralement toujours la même. Et les problèmes GitHub sont du texte, alors pourquoi ne pas utiliser du texte pour les créer sans jamais quitter notre clavier ?

Cette application fait exactement cela : https://fast-issues.herokuapp.com/

Vous autorisez cette application GitHub et vous pouvez commencer à écrire des problèmes dans tous vos référentiels. Il vous suffit de sélectionner un référentiel dans lequel vous souhaitez créer un problème et de commencer à écrire plusieurs problèmes, un sur chaque ligne.

Et il prend en charge l’écriture du titre et de la description, l’attribue et l’étiquette. Il ne nécessite que le titre du numéro. Le reste est tout facultatif. Il suffit de suivre une certaine convention :

• le titre vient en premier
• puis, un caractère pipe sépare les destinataires. J’ai choisi qu’il en soit ainsi parce qu’au minimum, vous avez besoin d’un problème et de quelqu’un pour y travailler
• un deuxième caractère pipe sépare la description du problème. Il peut avoir n’importe quelle longueur, mais il ne peut pas avoir de saut de ligne car cela déclencherait un nouveau problème
• un troisième caractère pipe sépare les étiquettes

Il prend en charge plusieurs destinataires et étiquettes en les séparant par une virgule. Donc en gros:

This is the title | username1, username2 | This is the issue description, as long as you want it but without line breaks. | Label 1, Label 2<br>This is another issue | username3 | And another issue description | Bug

Une fois que c’est fait, il suffit de cliquer sur le Go! bouton et cela créera tous les problèmes. Chacun vous aura comme auteur. Vous pouvez ensuite aller les éditer pour ajouter des images ou des vidéos, des mèmes, n’importe quoi.

Si vous avez besoin de créer plus de problèmes dans un référentiel différent, resélectionnez-le simplement dans la liste déroulante et commencez à écrire ces problèmes. Ne sautez plus de pages !

La pile technologique derrière l’application

Le référentiel de cette application se trouve sur https://github.com/eliorivero/fast-issues

La tech stack est particulièrement simple et entièrement basée sur JavaScript :

• frontend construit avec React
• backend construit avec Node.js
• utilise Express comme serveur
• et Octokit REST une bibliothèque pour travailler avec l’API GitHub

Une chose à garder à l’esprit est que nous ne voulons pas dépasser la limite de requêtes autorisées par l’ API GitHub Issues. Ils recommandent de laisser passer au moins une seconde entre les requêtes, j’ai donc interrompu l’exécution de 1,5 seconde entre la création de chaque problème.

Du prototype initial que j’ai créé à la version finale, je l’ai changé d’une application GitHub à une application OAuth. C’est parce que ce dernier vous permet de créer des problèmes et d’apparaître comme l’auteur.

Plus d’idées pour améliorer la création de tickets

J’ai montré cela à un ami et il m’a dit qu’il avait cette idée de créer une extension Chrome pour prendre une capture d’écran d’un bogue, l’annoter et la soumettre en tant que problème GitHub. J’ai pensé que c’était une bonne idée, alors j’ai cherché un moyen de prendre une capture d’écran, mais dans une application React, et j’ai rapidement trouvé html2canvas qui permet de prendre des captures d’écran et de les enregistrer sous forme de fichiers PNG.

Combiner quelque chose comme ça avec mon outil pour créer les problèmes serait une bonne solution qui pourrait être disponible dans une application React pendant son cycle de développement ou de mise en scène. Toute personne testant l’application peut déclencher le panneau de signalement des problèmes et soumettre un problème GitHub.

Le seul problème avec cela pour l’instant est que l’API GitHub ne permet pas de télécharger des images, donc elles devraient être hébergées ailleurs et avoir le lien vers cet emplacement inséré dans cet outil, mais c’est certainement une bonne amélioration.

Encore une fois, l’application est sur https://fast-issues.herokuapp.com/ et si vous finissez par l’utiliser, faites-le moi savoir dans les commentaires.