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

隨選筆記文

Firebase Google

Firebase Performance 使用筆記

Bot LINE

用 LINE Push Messaging API 推播每日氣象預報

Forms Google

Google 表單 用網址改變題目預設值

Front-End

Auth0 Universal Login,做一個自己的會員註冊、登入功能

Vue

用 VuePress 製作說明文件頁面 – 5:改樣式、加元件

Analytics Google

如果頁面有 id=”ga”,用 gtag 埋 Google Analytics 會收不到流量

API Front-End

WebSocket 基本介紹及使用筆記

WordPress

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

Front-End

滿版圖片背景、影音背景

Google Maps

Google Maps API 學習筆記 – 5:抓目前位置、計算到各點距離

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言

Let's Write

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.