Verwenden der GitHub-API für Listenprobleme für ein Repository

Wenn Sie zu GitHub gehen, werden unter Probleme alle offenen Probleme als HTML-Seite angezeigt. Wir möchten ein Dashboard implementieren, das alle Probleme in einem Repository anzeigt, gruppiert nach Bezeichnungen, einschließlich der Probleme, die nicht korrekt gekennzeichnet sind.

Dies ist die entsprechende Liste-Probleme-für-ein-Repository-API .

Während ich ursprünglich jQuery und Javascript verwendet habe, verwende ich jetzt PHP als Proof-of-Concept, da ich mich aufgrund der integrierten Sitzungsbehandlung auf derselben Seite anmelden, GitHub authentifizieren und zurückrufen und fortfahren kann. Aber es ist mir egal, jede Sprache ist in Ordnung.

Ich habe es geschafft, über OAUTH2 auf die GitHub-API zuzugreifen, aber wenn ich die Liste der Repositorys über https://api.github.com/orgs/{org}/repossie erhalte, wird sie als leeres Array angezeigt .

Da die /orgs/{org}/reposAPI ein leeres Array zurückgibt, gibt die entsprechende /repos/{org}/{repo}/issuesAPI natürlich einen Fehler zurück.

Bearbeiten : In diesem Follow-up finden Sie eine Lösung! Ich bin froh, dass ich es endlich geschafft habe!

Es ist eine Rest-API. Sie müssen einige Endpunkte mithilfe einer HTTP-Anforderung aufrufen. Ich weiß nicht, welche Sprache Sie verwenden möchten, daher kann ich Ihnen kein gutes Beispiel dafür geben, wie Sie dies erreichen können. Wenn Sie noch nicht wissen, welche Sprache Sie verwenden sollen, erstellen Sie mit postman einen REST-API-Aufruf für die github-API.

Angenommen, Sie möchten die Probleme des Typoskript- Repos von Microsoft beheben. Sie müssen diesen API-Endpunkt aufrufen:

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

Beachten Sie hier, dass ich den :ownerund :repoWert der Dokumentation für die ersetzt habe, die ich zu bekommen versuche.

Sie können dann einige Parameter an den Aufruf übergeben, um Ihre Daten zu filtern, z. B. die API-Bezeichnung.

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

Dies gibt nur Probleme zurück, die als gekennzeichnet sind API.

Dies sind die Grundlagen für die Verwendung einer API.

Sie können jQuery Ajax verwenden, um auf die Github-API zuzugreifen und einen grundlegenden Authentifizierungsheader zur Authentifizierung hinzuzufügen (siehe hier ). Ein Beispiel wird unten gezeigt. Dadurch werden die Probleme für ein bestimmtes Repo behoben und die ersten 10 in einem Warnfenster angezeigt.

In der Dokumentation zum Abrufen von Problemen finden Sie hier: https://developer.github.com/v3/issues/ , welche Parameter Sie zum Filtern, Sortieren usw. verwenden können.

Zum Beispiel können Sie alle Probleme mit der Bezeichnung "Fehler" erhalten, indem Sie:

/issues?labels=bug

Dies kann mehrere Etiketten umfassen, z

/issues?labels=enhancement,nicetohave

Sie können leicht ändern, um in einer Tabelle usw. aufzulisten.

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

Im Folgenden finden Sie einen Ausschnitt mit Problemen für ein (öffentliches) Repo mit jQuery und der Github-API:

(Beachten Sie, dass wir hier keinen Authentifizierungsheader hinzufügen!)

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>