GitHub API:取 Issue、Comments

/

本篇要解決的問題

本篇算是使用 GitHub API 的一個練習,為了之後可以拿 GitHub Issues 當作各頁面的留言版,能夠把 Issues 跟裡面有的 Comments 取回來是很重要的,讓大家不想留言時還能看別人留言了什麼。

Get Issues API 很簡單,相較於 Create 來說,沒有很複雜的事前項目需要處理,因此先寫這篇。

本篇主要的參考文件就是 GitHub 的官方說明文件:


事前作業

最基本的就是要先有一個頁面,可以在取回資料後顯示,本篇的 Demo 用的是 Water.css,渲染資料直接用 Vue.js

另外還有三件事要處理,一個是 GitHub Issue 是可以寫 Markdown 的,API 回傳 Issue、Comments 的 body 時也是給 Markdown,因此我們要能把 Markdown 編譯為 HTML,本篇 Demo 用的是 Marked 這套。

第二個是日期部份,要能改寫為我們想要的日期格式,本篇用的是 Day.js 這套。

本篇不會詳細說明這二套的使用方法,會在寫範例時直接使用。

如果想要深入研究的話,就麻煩看各自的說明文件囉~

第三個是要有一個公開的 GitHub Repository,本篇會取的都是公開專案下的 Issue、Comments,私人的還沒有仔細試過,未來如果有機會實作的話在寫成筆記文。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

本篇開好的 Issue 在這,在這留言後,Demo 頁上就可以看到:

https://github.com/letswritetw/letswrite-github-api-issues-get/issues/1

Demo 及原始檔寫附在最後一段。


取得單篇 Issue

API 的 URL 為:

https://api.github.com/repos/{owner}/{repo}/issues/{issue_number}

用 GET 取資料,要附上 header 如下:

Accept: application/vnd.github.v3+json

owner 就是我們的帳號,repo 就是專案的名稱,這通常可以直接進到我們 GitHub 專案後在網址上看到,比方本篇開的專案網址是:

https://github.com/letswritetw/letswrite-github-api-issues-get

{owner}/{repo} 就是:

letswritetw/letswrite-github-api-issues-get

issue_number 就是這個 Issue 的篇號,我們進到 Issue 的頁面時,會看到標題後方帶了一個 # 的數字:

標題上帶有 issue_number
標題上帶有 issue_number

那個數字就是 issue_number

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

這幾個值可以不用一個個找,當我們點進我們要抓的 Issue 頁面後,網址後面的那段就全都是了,比方:

https://github.com/letswritetw/letswrite-github-api-issues-get/issues/1

我們只要把開頭的 github.com/ 換成 https://api.github.com/repos/ 就行,如下:

https://api.github.com/repos/letswritetw/letswrite-github-api-issues-get/issues/1

接下來我們就直接寫 GET 這個 URL,便可以取得這個 Issue 的資料:

console.log(result) 的結果會是一個 Object,裡面就是 Issue 資料:

取回 Issue 的資料
取回 Issue 的資料

可以看到 body 裡的資料是 Markdown 形式的,如果要秀在頁面上就要轉為 HTML 才行:

取回資料後,就是看頁面上要顯示哪些資料,把要的欄位丟上去了。


取得 Issue 下的所有 Comments

API 的 URL 為:

https://api.github.com/repos/{owner}/{repo}/issues/{issue_number}/comments

一樣要帶上 header

Accept: application/vnd.github.v3+json

URL 上很明顯的可以看出,其實就是我們取 Issue 的 URL 後面再多加上 comments 而已。

取得 Comments 的程式碼就跟上面取 Issue 的相同,更新 uri 就可以。

因為 Comments 會有多則,因此回來的資料會是陣列。

每一則 Comment 的 body 一樣是 Markdown,要編譯成 HTML 後才能渲染到頁面上。

Comments 有一個很重要的東西就是發佈時間,我們平常在看 Issues 時也會看一下大家是什麼時候回覆的,如果是幾百年前的就會覺得是不是這個回覆的方式不再適用。

因此列出 Comments 時要處理一下時間,把時間轉成我們習慣看的樣子。

本篇是用 Day.js 處理,在之前也有寫過〈Day.js 計算最近7天、上週、上個月的日期〉,這邊不用到這麼麻煩,只需要 format 功能就好。

const updateTime = "API 回來的 updated_at";
const time = dayjs(updateTime).format('YYYY-MM-DD HH:mm:ss');

format 過後的時間就會像是:2021-04-21 22:34:25。


範例及原始碼

本篇最後完成的 Demo:

https://letswritetw.github.io/letswrite-github-api-issues-get/

在 GitHub Issue 上留言後,便可在 Demo 頁上看到。

原始碼整理在這,取用前請點個 GitHub 的星星:

https://github.com/letswritetw/letswrite-github-api-issues-get

Summary
GitHub API:取 Issue、Comments
Article Name
GitHub API:取 Issue、Comments
Description
本篇大綱:本篇要解決的問題。事前作業。取得單篇 Issue。取得 Issue 下的所有 Comments。範例及原始碼。Get Issues API 很簡單,相較於 Create 來說,沒有很複雜的事前項目需要處理,因此先寫這篇。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Forms Google

完全客製 Google 表單,美化表單樣式

Forms Google

Google 表單,輸入 ID 後自動帶入其它欄位資料

API

如何用 Postman Mock Server 快速建立 API Server

Firebase Google

Firebase Dynamic Links 從後台建立縮網址

Firebase Google

Firebase Cloud Firestore V9 常用功能筆記

PWA

PWA 學習筆記 – 2:Workbox CLI

WordPress

Ubuntu 安裝 WordPress – 2:Webmin、Apache、MySQL、Hosts

API

GitHub API:建立 Issue、Comment – GitHub App

Firebase Google

Firebase Dynamic Links Analytics API 取得短網址分析資料

Front-End

如何使用 Vivus.js 製作輕量快速 SVG 動畫

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 August 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 August 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。