Menggunakan daftar-masalah-untuk-repositori API GitHub

Ketika Anda pergi ke GitHub, di bawah Masalah, itu menarik semua masalah terbuka sebagai halaman HTML. Kami ingin menerapkan dasbor yang menunjukkan semua masalah dalam repositori, dikelompokkan berdasarkan label, termasuk masalah-masalah yang tidak diberi label dengan benar.

Ini adalah daftar-masalah-untuk-repositori API yang sesuai .

Sementara saya awalnya menggunakan jQuery dan Javascript, saya sekarang menggunakan PHP untuk konsep bukti karena penanganan sesi bawaannya memungkinkan saya menggunakan halaman yang sama untuk login, minta GitHub mengotentikasi & callback, dan melanjutkan. Tetapi bagi saya tidak masalah, bahasa apa pun tidak masalah.

Saya telah berhasil mendapatkan akses ke API GitHub melalui OAUTH2, tetapi ketika saya mendapatkan daftar repositori via https://api.github.com/orgs/{org}/repositu muncul sebagai array kosong.

Karena /orgs/{org}/reposAPI mengembalikan array kosong, tentu saja /repos/{org}/{repo}/issuesAPI yang sesuai akan mengembalikan kesalahan.

Sunting : Lihat tindak lanjut ini untuk solusinya! Senang akhirnya saya berhasil!

Ini adalah API lainnya. Anda perlu memanggil beberapa titik akhir menggunakan permintaan Http. Saya tidak tahu bahasa apa yang Anda coba gunakan, jadi saya tidak bisa memberi Anda contoh yang baik tentang bagaimana mencapai ini. Jika Anda belum tahu bahasa yang akan digunakan, gunakan tukang pos untuk membuat panggilan REST API ke API github.

Katakanlah Anda ingin mengambil kembali isu-isu dari repo skrip microsoft , Anda perlu memanggil titik akhir API ini:

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

Perhatikan di sini bahwa saya telah mengganti :ownerdan :reponilai dokumentasi untuk yang saya coba dapatkan.

Anda kemudian dapat meneruskan beberapa parameter ke panggilan untuk memfilter data Anda, misalnya, label API.

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

Ini hanya akan mengembalikan masalah yang berlabel API.

Ini adalah dasar-dasar cara menggunakan API.

Anda dapat menggunakan jQuery Ajax untuk mengakses API Github dan menambahkan header otentikasi dasar untuk mengotentikasi (lihat di sini ), sebuah contoh ditunjukkan di bawah ini, ini akan menarik masalah untuk repo yang diberikan dan menampilkan 10 pertama di jendela peringatan.

Lihat dokumentasi tentang masalah penarikan di sini: https://developer.github.com/v3/issues/ untuk melihat parameter mana yang dapat Anda gunakan untuk memfilter, menyortir dll.

Misalnya Anda bisa mendapatkan semua masalah yang berlabel 'bug' menggunakan:

/issues?labels=bug

Ini dapat mencakup beberapa label, mis

/issues?labels=enhancement,nicetohave

Anda dapat dengan mudah memodifikasi daftar di tabel dll.

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 bawah ini adalah masalah cantuman cuplikan untuk repo (publik) menggunakan jQuery dan Github API:

(Perhatikan bahwa kami tidak menambahkan header otentikasi di sini!)

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>