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 list-issues-for-a-repository correspondante .

Alors que j'utilisais initialement jQuery et Javascript, j'utilise maintenant PHP pour une preuve de concept car sa gestion de session intégrée me permet d'utiliser la même page pour se connecter, faire authentifier et rappeler GitHub, et continuer. Mais cela ne m'importe pas, n'importe quelle langue va bien.

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}/reposelle apparaît comme un tableau vide.

Étant donné que l' /orgs/{org}/reposAPI renvoie un tableau vide, bien sûr, l' /repos/{org}/{repo}/issuesAPI correspondante renvoie une erreur.

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

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, je ne peux donc 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 un appel d'API REST à l'API github.

Supposons que vous souhaitiez récupérer les problèmes liés au dépôt tapuscrit de Microsoft , vous devez appeler ce point de terminaison API:

https://api.github.com/repos/microsoft/typescript/issues

Avis ici que j'ai remplacer la :owneret :repovaleur de la documentation pour celui que je suis en train de faire.

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 renverra que les problèmes étiquetés comme API.

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

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 tirer les problèmes pour un dépôt donné et afficher les 10 premiers dans une fenêtre d'alerte.

Consultez 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>