前端開發者不能不會的 Mock API 技巧,就用 Mockoon 來達成吧!

Mockoon

前言

對於一個前端開發者來講,不論是你資深會資淺,其實我個人都非常建議要了解如何使用 Mock API,而這一篇文章我會主要介紹我開發上常用的 Mock API 工具,也就是 Mockoon,所以接下來就讓我們一起來看看吧!

為什麼要學 Mock API

Mock API 的其實是在指「模擬 API」的意思,為什麼去模擬 API 呢?這邊我們來稍微舉例一下實際的開發狀況好了。

假設今天有一個功能開發需求是需要前端與後端一同開發的,而這個需求只有七天可以實作,但是後端卻告知你他需要 5~6 天時間才有辦法生出 API 給你串接,接著你評估了畫面切版以及要串接的 API 數量可能也要 5~6 天,那麼問題來了,身為前端的你,真的有可能等後端都把 API 開出來才去做串接嗎?

當然不可能,因為串接 API 的過程必定會有一些問題存在,所以串接 API 過程你還要與後端持續溝通,例如:API 打不到、屬性缺少等等,這種狀況下絕對會趕不上專案的死線,更不用說我們開發完畢後都必須盡可能預留 1~2 天作為測試的時間

需求死線

需求死線

需求死線

所以如果你知道如何使用 Mock API 的話,你就可以請後端優先先開出 API 規格給你,例如:API Url、API Method、API Request 參數、API Response 等等,然後再依照 API 規格轉換成 Mock API,這樣你就可以在切完畫面後,馬上接著開始串接 API,而後端則可以專注於開發 API,這樣其實是達到一起開發的效果,也不會發生前端一直在等後端開出 API,所以 Mock API 的觀念其實是一個很好的開發模式唷。

Mockoon 是什麼

Mock API 是一個概念,而要做到這個觀念的工具非常多,例如:Postman、Mocky、MockServer、Mockoon 等等,而這一篇我將會主要介紹我在開發上常用的 Mockoon 這套工具。

首先我們進入到「Mockoon 官方網站」下載並安裝 Mockoon,你只需要依照自己的作業系統及喜好方式下載安裝檔案,並且安裝即可。

Mockoon

(下載網址:https://mockoon.com/download/)

下載完之後,你可以先打開 Mockoon,因此如果你是初次使用的話,你的畫面應該會像這樣

Welcome new Mockoon user

接著只需要按下「Start using Mockoon」,你就可以開始使用 Mockoon 囉~

開始使用

Mockoon 的使用

雖然 Mockoon 官方本身有提供預設的 Demo API 參考,但是我們要來實際練習一輪,所以就讓我們來假設情景吧!舉例來講,我是一位後端,然後我給了你 TodoList 的 API 規格文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
# 名稱:取得 Todo 列表
## API Url: /api/v1/todos
## API Methods:GET
## API Request:無
## API Response:

[
{
"id": 1,
"title": "Todo 1",
"completed": false
},
{
"id": 2,
"title": "Todo 2",
"completed": true
}
]

---

# 名稱:新增一個 Todo
## API Url: /api/v1/todos
## API Methods:POST
## API Request:

{
"title": "Todo 3",
"completed": false
}

## API Response:

{
"message": "新增成功"
}

---

# 名稱:編輯一個 Todo
## API Url: /api/v1/todos/:id
## API Methods:PUT
## API Request:

{
"title": "Todo 3",
"completed": true
}

## API Response:

{
"message": "編輯成功"
}

---

# 名稱:刪除一個 Todo
## API Url: /api/v1/todos/:id
## API Methods:DELETE
## API Request:無
## API Response:

{
"message": "刪除成功"
}

接下來我們就準備來操作 Mockoon 吧!

建立 Mockoon 環境

接著我們打開 Mockoon,並且點擊「Create a new environment」

Create a new environment

並且輸入環境名稱,例如:Todolist-example,選擇要放置的路徑,並且按下「Create」

Todolist-example

Mockoon 側邊欄應該就會看到剛剛新增的環境

Todolist-example

這邊稍微提醒一下,底下應該有看到一段「localhost:3001」,這個就是我們 Mock 出來的 API Url 位置,如果不喜歡也沒關係,這是可以自己修改的,這邊就先暫定這樣。

匯出環境

後續如果你想把你自己建立好的 Mock 環境給別人,你是可以透過右鍵「Show in folder」來找到檔案的,因為建立環境時,其實它是建立一個 JSON 檔案,只需要將 JSON 提供給他人即可

匯出

匯入環境

拿到這一份 JSON 的人,只需要點一下上方資料夾按鈕「Open an environment」,然後把 JSON 丟進去就可以匯入囉!

匯入

建立 Mock API

接下來點一下側邊欄的「TodoList-example」,這時候你應該會看到下圖的畫面

TodoList-example

接下來點一下上方箭頭,你可以建立三種東西

  • CRUD Route
  • HTTP Route
  • Folder

第一個是 CRUD Route,這個是可以快速建立 CRUD 的 API,第二個是 HTTP Route,這個是可以自己自訂 API 的,第三個是 Folder,這個是可以幫你分類的,例如:我們可以把 TodoList 的 API 都放在一個資料夾裡面,這樣比較好管理。

而這邊我們主要是挑選 HTTP Route,所以就選擇 HTTP Route,接著右側就要讓你來填寫 API 的資訊了

API 資訊

這邊我也提供欄位翻譯,並順便填寫相關欄位

翻譯

依照 API 文件填寫的話,你應該會看到下圖的畫面

API 資訊

這樣子你就建立完一個 API 了,其他的 API 就讓你自己試著去建立看看,如果都建立完畢的話,你應該會在 Route 列表看到這幾隻 API

Route List

多個 Response

Mockoon 也可以讓你建立多個 Response,這樣子你就可以測試不同的狀況了,例如:你可以建立一個 200 的 Response,然後再建立一個 500 的 Response,這樣子你就可以測試不同的狀況,只需要點一下這邊就可以建立了

多個 Response

啟動 Mock API

接下來就是準備啟動 Mock API 了,啟動按鈕位置在這邊

啟動按鈕

但啟動之前我們要來做一些修改,因為 Mockoon 本身是模擬後端的概念,所以我們要去改一些設定,否則你的前端在串接時會發生一些問題

調整 Port

首先先找到「TodoList-example」,然後點一下右側的「Setting」按鈕

Setting

因為考慮到你可能不喜歡目前的 3001 Port,所以我們要先把 Port 改成 3000,基本上改完啟動就可以立刻吃到這個 Port 了

Port

設置 CORS

接下來點一下上方 Headers 欄位,然後點一下旁邊的「Add CORS header」按鈕

CORS

你點下去後 Mockoon 就會自動幫你帶入 CORS 相關的設定

CORS

接下來你就可以安心啟動 Mockoon,並可以在本地嘗試串接 API 了

串接 API 與查看 Log

底下我也提供 Fetch 的範例程式碼,你可以直接複製貼上到你的本地專案或是打開瀏覽器,貼在 Console 裡面,看看是否有正確的回傳資料

1
2
3
4
5
6
7
8
9
10
11
const getTodoList = async () => {
const response = await fetch('http://localhost:3000/api/v1/todos', {
method: 'GET',
});
const data = await response.json();
return data;
};

getTodoList().then((data) => {
console.log(data);
});

只要你有啟動並且內容正常的話,你就可以在 Console 看到回傳的資料

回傳

並且你也可以在 Log 裡面看到你的 API 串接紀錄

Log

其他的 API 操作也是雷同,透過這種方式,你可以快速 Mock API 而不用等後端開 API,等到後端開好 API 之後你再將 Mockoon 的 API 換成後端的 API 這樣就可以無痛快速轉換,可以說是加速開發效率的一種方式。

Mockoon 假資料生成

除了可以模擬 API 之外,Mockoon 還可以幫你生成假資料,而這個功能是透過「[Faker.js]」來實現的,所以你是可以直接參考 Faker.js 的官方文件來使用。

舉例來講,如果我們期望給的 /api/v1/todos 回傳資料不要這麼死板

1
2
3
4
5
6
7
8
9
10
11
12
[
{
"id": 1,
"title": "Todo 1",
"completed": false
},
{
"id": 2,
"title": "Todo 2",
"completed": true
}
]

那麼我們就可以改成以下

1
2
3
4
5
6
7
8
9
[
{{#repeat 5}}
{
"id": {{guid}},
"title": "{{lorem 5}}",
"completed": {{boolean}}
},
{{/repeat}}
]

接著你再去打 API 就可以取得 5 個假資料

fake

上面的語法我簡單說明一下

  • {{#repeat 5}} 代表重複 5 次
  • {{guid}} 代表隨機生成一個 GUID
  • {{lorem 5}} 代表隨機生成 5 個字
  • {{boolean}} 代表隨機生成 true 或 false
  • {{/repeat}} 代表重複結束

而這些就是由 Mockoon 封裝好的語法,如果你想知道還有哪些語法可以使用的話,你可以參考這一篇 Mockoon templating helpers 唷。

Mockoon CRUD

接下來可能會有些人好奇了,如果我要測試 Post 或 Put 的 API 會怎麼樣呢?有辦法連 CRUD 都模擬出來嗎?答案是可以的,Mockoon 也提供了這樣的功能,但這部分我就沒有特別去玩了,所以建議你可以直接參考官方文件唷~

CRUD routes

結語

Mockoon 是我開發上很常用的工具,有時候後端來不及開 API 出來的時候,我都會請後端優先出 API 規格文件,然後我就會依照 API 規格文件來建立 Mockoon 的 API,然後等到後端開發結束後,我再將 Mockoon 的 API 換成後端的 API,這樣就可以無痛快速轉換,而且 Mockoon 的啟用與關閉速度非常快,GUI 介面也相當簡單好操作,所以我覺得是一個相當不錯用的工具唷。

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee Buy Me A Coffee

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ