web-dev-qa-db-fra.com

Utilisation de l'API GitHub list-issues-for-a-repository

Lorsque vous accédez à GitHub, sous Problèmes, il affiche tous les problèmes ouverts sous forme de page HTML. Nous aimerions implémenter un tableau de bord montrant tous les problèmes dans un référentiel, regroupés par étiquettes, y compris les problèmes qui ne sont pas correctement étiquetés.

Il s'agit de l'API correspondante list-issues-for-a-repository .

Alors que j'utilisais initialement jQuery et Javascript, j'utilise maintenant PHP pour une preuve de concept parce que sa gestion de session intégrée me permet d'utiliser la même page pour se connecter, faire authentifier et rappeler GitHub , et continuez. Mais peu importe pour moi, n'importe quelle langue est correcte.

J'ai réussi à accéder à l'API GitHub via OAUTH2, mais lorsque j'obtiens la liste des référentiels via https://api.github.com/orgs/{org}/repos il apparaît comme un tableau vide.

Parce que le /orgs/{org}/repos L'API renvoie un tableau vide, bien sûr le /repos/{org}/{repo}/issues L'API renvoie une erreur.

Modifier : Voir ce suivi pour une solution! Heureux de l'avoir enfin fait fonctionner!

githubgithub-apigithub-api-v3
9
Yimin Rong

Il s'agit d'une API de repos. Vous devez appeler certains points de terminaison à l'aide d'une demande Http. Je ne sais pas quelle langue vous essayez d'utiliser, donc je ne peux pas vous donner un bon exemple sur la façon d'y parvenir. Si vous ne savez pas encore quelle langue utiliser, utilisez postman pour créer REST appel API à l'API github.

Supposons que vous souhaitiez récupérer les problèmes du repo TypeScript de Microsoft , vous devez appeler ce point de terminaison API:

https://api.github.com/repos/Microsoft/TypeScript/issues

Notez ici que j'ai remplacé le :owner et :repo valeur de la documentation pour celle que j'essaye d'obtenir.

Vous pouvez ensuite transmettre certains paramètres à l'appel pour filtrer vos données, par exemple, le libellé de l'API.

https://api.github.com/repos/Microsoft/TypeScript/issues?labels=API

Cela ne retournera que les problèmes étiquetés comme API.

Ce sont les bases de l'utilisation d'une API.

7
Nicolas

Vous pouvez utiliser jQuery Ajax pour accéder à l'API Github et ajouter un en-tête d'authentification de base pour vous authentifier (voir ici ), un exemple est illustré ci-dessous, cela va résoudre les problèmes pour un dépôt donné et afficher les 10 premiers dans une fenêtre d'alerte.

Voir la documentation sur les problèmes d'extraction ici: https://developer.github.com/v3/issues/ pour voir quels paramètres vous pouvez utiliser pour filtrer, trier etc.

Par exemple, vous pouvez obtenir tous les problèmes étiquetés "bug" en utilisant:

/issues?labels=bug

Cela peut inclure plusieurs étiquettes, par exemple.

/issues?labels=enhancement,nicetohave

Vous pouvez facilement modifier la liste dans un tableau, etc.

const username = 'github_username'; // Set your username here
const password = 'github_password'; // Set your password here
const repoPath = "organization/repo" // Set your Repo path e.g. Microsoft/TypeScript here

$(document).ready(function() {
    $.ajax({
        url: `https://api.github.com/repos/${repoPath}/issues`,
        type: "GET",
        crossDomain: true,
        // Send basic authentication header.
        beforeSend: function (xhr) {
            xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password));
        },
        success: function (response) {
            console.log("Response:", response);
            alert(`${repoPath} issue list (first 10):\n - ` + response.slice(0,10).map(issue => issue.title).join("\n - "))
        },
        error: function (xhr, status) {
            alert("error: " + JSON.stringify(xhr));
        }
    });
});

Vous trouverez ci-dessous un extrait répertoriant les problèmes pour un dépôt (public) utilisant jQuery et l'API Github:

(Notez que nous n'ajoutons pas d'en-tête d'authentification ici!)

const repoPath = "leachim6/hello-world" // 

$(document).ready(function() {
$.ajax({
    url: `https://api.github.com/repos/${repoPath}/issues`,
    type: "GET",
    crossDomain: true,
    success: function (response) {
        tbody = "";
        response.forEach(issue => {
            tbody += `<tr><td>${issue.number}</td><td>${issue.title}</td><td>${issue.created_at}</td><td>${issue.state}</td></tr>`;
        });
        $('#output-element').html(tbody);
    },
    error: function (xhr, status) {
        alert("error: " + JSON.stringify(xhr));
    }
});
});
<head>
<meta charset="utf-8">
<title>Issue Example</title>
<link rel="stylesheet" href="css/styles.css?v=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
</head>
<body style="margin:50px;padding:25px">
<h3>Issues in Repo</h3>
<table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">Issue #</th>
        <th scope="col">Title</th>
        <th scope="col">Created</th>
        <th scope="col">State</th>
      </tr>
    </thead>
    <tbody id="output-element">
    </tbody>
</table>
</body>
4
Terry Lennox