Utilizzo dell'API GitHub dell'elenco dei problemi per un repository

Quando vai su GitHub, in Problemi, vengono visualizzate tutte le questioni aperte come una pagina HTML. Vorremmo implementare una dashboard che mostra tutti i problemi in un repository, raggruppati per etichette, inclusi quelli che non sono correttamente etichettati.

Questa è l' API corrispondente per i problemi di elenco per un repository .

Mentre inizialmente stavo usando jQuery e Javascript, ora sto usando PHP per una bozza di concetto perché la sua gestione della sessione integrata mi consente di utilizzare la stessa pagina per accedere, avere GitHub autenticare e richiamare e continuare. Ma per me non importa, qualsiasi lingua va bene.

Sono riuscito ad accedere all'API GitHub tramite OAUTH2, ma quando ottengo l'elenco dei repository tramite https://api.github.com/orgs/{org}/reposesso viene visualizzato come un array vuoto.

Poiché l' /orgs/{org}/reposAPI restituisce un array vuoto, ovviamente l' /repos/{org}/{repo}/issuesAPI corrispondente restituirà un errore.

Modifica : vedi questo seguito per una soluzione! Sono contento di averlo finalmente fatto funzionare!

È un'API di riposo. È necessario chiamare alcuni endpoint utilizzando una richiesta Http. Non so quale lingua stai cercando di usare, quindi non posso darti un buon esempio su come ottenerlo. Se non sai ancora quale lingua usare, usa postman per creare la chiamata API REST all'API github.

Diciamo che vuoi recuperare i problemi del repository dattiloscritto di Microsoft, dovresti chiamare questo endpoint API:

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

Nota qui che ho sostituito il valore :ownere la :repodocumentazione per quello che sto cercando di ottenere.

È quindi possibile passare alcuni parametri alla chiamata per filtrare i dati, ad esempio l'etichetta API.

https://api.github.com/repos/microsoft/typescript/issues?labels=API

Ciò restituirà solo i problemi etichettati come API.

Queste sono le basi di come usare un'API.

Puoi usare jQuery Ajax per accedere all'API Github e aggiungere un'intestazione di autenticazione di base per l'autenticazione (vedi qui ), un esempio è mostrato di seguito, questo risolverà i problemi per un determinato repository e mostrerà i primi 10 in una finestra di avviso.

Consulta la documentazione sulla risoluzione dei problemi qui: https://developer.github.com/v3/issues/ per vedere quali parametri puoi utilizzare per filtrare, ordinare ecc.

Ad esempio puoi ottenere tutti i problemi etichettati 'bug' usando:

/issues?labels=bug

Ciò può includere più etichette, ad es

/issues?labels=enhancement,nicetohave

Si può facilmente modificare per elencare in una tabella ecc.

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));
        }
    });
});

Di seguito è riportato un elenco dei problemi relativi a un repository (pubblico) che utilizza jQuery e l'API Github:

(Nota che non aggiungiamo un'intestazione di autenticazione qui!)

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>