Korzystanie z interfejsu API listy problemów GitHub dla repozytorium

Po przejściu do GitHub w obszarze Problemy wyświetla wszystkie otwarte problemy jako stronę HTML. Chcielibyśmy wdrożyć pulpit pokazujący wszystkie problemy w repozytorium, pogrupowane według etykiet, w tym te, które nie są poprawnie oznaczone.

Jest to odpowiedni interfejs API listy-problemów-dla-repozytorium .

Podczas gdy początkowo korzystałem z jQuery i JavaScript, teraz używam PHP do weryfikacji koncepcji, ponieważ jego wbudowana obsługa sesji pozwala mi używać tej samej strony do logowania, uwierzytelniania i oddzwaniania w GitHub i kontynuowania. Ale to nie ma dla mnie znaczenia, każdy język jest w porządku.

Udało mi się uzyskać dostęp do interfejsu GitHub API za pośrednictwem OAUTH2, ale kiedy dostaję listę repozytoriów https://api.github.com/orgs/{org}/repos, pojawia się jako pusta tablica.

Ponieważ /orgs/{org}/reposAPI zwraca pustą tablicę, oczywiście odpowiedni /repos/{org}/{repo}/issuesAPI zwróci błąd.

Edycja : zobacz poniższe rozwiązanie, aby znaleźć rozwiązanie! Cieszę się, że wreszcie to działa!

To jest reszta API. Musisz wywołać niektóre punkty końcowe za pomocą żądania HTTP. Nie wiem, jakiego języka używasz, więc nie mogę dać ci dobrego przykładu, jak to osiągnąć. Jeśli jeszcze nie wiesz, którego języka użyć, użyj listonosza, aby utworzyć wywołanie interfejsu API REST do interfejsu API github.

Załóżmy, że chcesz odzyskać problemy z repozytorium maszynopisu Microsoft , musisz wywołać ten punkt końcowy interfejsu API:

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

Zauważ, że zastąpiłem dokumentację :owneri :repowartość tej, którą próbuję uzyskać.

Następnie możesz przekazać do wywołania niektóre parametry w celu filtrowania danych, na przykład etykietę API.

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

To zwróci tylko problemy oznaczone jako API.

To są podstawy korzystania z interfejsu API.

Możesz użyć jQuery Ajax, aby uzyskać dostęp do interfejsu Github API i dodać podstawowy nagłówek uwierzytelniania w celu uwierzytelnienia (patrz tutaj ), przykład pokazano poniżej, spowoduje to usunięcie problemów dla danego repozytorium i wyświetlenie pierwszych 10 w oknie alertu.

Zobacz dokumentację dotyczącą pobierania problemów tutaj: https://developer.github.com/v3/issues/, aby zobaczyć, jakich parametrów możesz użyć do filtrowania, sortowania itp.

Na przykład możesz uzyskać wszystkie problemy oznaczone jako „błąd”, używając:

/issues?labels=bug

Może to obejmować wiele etykiet, np

/issues?labels=enhancement,nicetohave

Możesz łatwo zmodyfikować listę w tabeli itp.

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

Poniżej znajdują się problemy z listą fragmentów dla (publicznego) repozytorium używającego jQuery i interfejsu API Github:

(Uwaga: nie dodajemy tutaj nagłówka uwierzytelnienia!)

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>