本文翻譯自 Rapid Mock API creation with ChatGPT and json-server，點選底部 可閱讀原文。本文主要介紹如何使用 ChatGPT 和 json-server 快速實作 mock API。
作為一名前端開發者，經常需要 mock 資料來快速建構原型。通常我們會胡編亂造一個資料集存儲到 JSON 檔案，但這個過程會很耗時間，而且這些假資料可能并不好用。此外，從檔案中讀取資料也不是應用程式真正的操作方式，更優雅的方式是使用接口 API。在這篇部落格文章中，我們将讨論如何在 10 分鐘内為 UI 原型建立模拟 API。沒錯，隻需 10 分鐘！
mock 資料的挑戰
生成樣例資料并非易事。為實體定義 schema 并生成占位符資料是一項複雜的任務。以電商網站中的商品名稱為例：商品名稱應該是描述性的還是朗朗上口的？它們應該有多少個字元？它們應該是大寫還是小寫？
對于開發人員來說，變量命名尚且很困難，更不用說要構造出一個資料集。此外，生成資料集也不是一次性的工作。随着應用程式的發展，資料集将不得不更新和調整，構造資料集的過程枯燥且乏味。
前端開發人員建立 API 路由也很有挑戰，而且實作排序、篩選和分頁等進階功能也要付出額外的工作。在伺服器端實作 POST、PATCH 和 DELETE 請求，對于缺少後端開發經驗的前端開發人員來說，這可能會讓他們望而卻步。要建立一個設計良好的 API 路由，需要對 RESTful API 原則有紮實的了解。
解決方案：ChatGPT 和 json-server
幸運的是，有一個方案可以解決這兩個問題：ChatGPT 和 json-server。ChatGPT 是一個功能強大的工具，可以幫助我們輕松生成樣例資料。json-server 是一個功能強大的庫，可以零編碼來建立 REST API。
使用 ChatGPT 生成樣例資料
ChatGPT 可以幫助我們生成樣例資料。接下來以電商網站的商品為例，介紹如何使用 ChatGPT 為實體生成 schema。
我們也可以通過修改 prompt，要求 ChatGPT 來添加或删除一些字段。
如果對這些字段感到滿意，就可以要求 ChatGPT 生成 JSON
{
"products": [
{
"id": "12345",
"category": "Smartphones",
"brand": "Apple",
"model": "iPhone 13 Pro",
"features": {
"display_size": "6.1 inches",
"camera_resolution": "12 MP",
"battery_life": "22 hours",
"storage_capacity": "256 GB",
"connectivity": "5G"
},
"price": 1099
},
{
"id": "67890",
"category": "Laptops",
"brand": "Dell",
"model": "XPS 13",
"features": {
"display_size": "13.4 inches",
"processor": "Intel Core i7",
"memory": "16 GB",
"storage_capacity": "512 GB SSD",
"graphics": "Intel Iris Xe"
},
"price": 1399
},
{
"id": "13579",
"category": "Cameras",
"brand": "Sony",
"model": "Alpha a7 III",
"features": {
"sensor_resolution": "24.2 MP",
"image_stabilization": "5-axis",
"video_resolution": "4K",
"viewfinder": "Electronic",
"connectivity": "Wi-Fi, NFC, Bluetooth"
},
"price": 1999
},
{
"id": "24680",
"category": "Gaming Devices",
"brand": "Nintendo",
"model": "Switch OLED",
"features": {
"display_size": "7 inches OLED",
"resolution": "720p",
"battery_life": "Up to 9 hours",
"storage_capacity": "64 GB",
"connectivity": "Wi-Fi, Bluetooth"
},
"price": 349
},
{
"id": "97531",
"category": "Home Appliances",
"brand": "Samsung",
"model": "WF45K6500AV",
"features": {
"load_capacity": "4.5 cu. ft.",
"wash_cycles": "14",
"energy_star_certified": true,
"steam_wash": true,
"smart_connectivity": "Wi-Fi"
},
"price": 1099
}
]
}
使用 json-server 實作 API 路由
有了樣例資料之後，可以使用 json-server 建立 API 路由。首先在項目的根目錄中建立一個 db.json 檔案，然後從 ChatGPT 複制粘貼樣例資料到檔案中。
接下來，安裝 json-server-npm 作為 dev 依賴項：
npm i json-server -D
最後，添加一個 npm 腳本，使用樣例資料運作 json-server：
"serve-json": "json-server --watch db.json --port 4000"
運作 npm run serve-json 将在 http://localhost:4000 上建立一個服務，并且提供了所有必要的路由。以下将具體介紹如何使用這些路由。
路由
GET /products
GET /products/:id
POST /products
PUT /products/:id
PATCH /products/:id
DELETE /products/:id
篩選
将字段名稱作為查詢參數傳遞，可以通路深層屬性。
GET /products?category=laptops&brand=Dell
GET /products?id=12345
GET /comments?features.resolution=720p
分頁
使用 _page 和可選的 _limit 對傳回的資料進行分頁。（我們的資料隻有一頁）。
GET /products?_page=7
GET /products?_page=7&_limit=20
排序
添加排序 _sort 和順序 _order（預設情況下按升序）。
GET /products?_sort=price&_order=desc
操作符
使用 _gte 或 _lte 擷取某個範圍内的資料
GET /products?price_gte=1000&price_lte=2000
使用 _ne 排除一個值
GET /products?id_ne=12345
使用 _like 過濾
GET /products?model_like=iPhone
檢索
使用 q 進行檢索
GET /products?q=laptop
總結
使用 ChatGPT 和 json-server，可以幫助前端開發人員生成 mock 資料，并通過 RESTful API 輕松提供資料。ChatGPT 讓生成資料集變得輕而易舉，使用 json-server 可以零編碼建立 fake RESTful API。它們為快速模拟 API 建立提供了簡單而有效的解決方案，前端開發人員可以專注于快速高效地建構原型，而無需擔心資料生成和 API 實作。
作者:ikoofe
來源:微信公衆号:KooFE前端團隊
出處:https://mp.weixin.qq.com/s/FuG-KMxRtrFtQEsMnM-Olg
原文位址:https://www.builder.io/blog/mock-api-data-with-chatgpt