Sign in

Design Operational Data API sorted by Categories

優化方向

計算 operational data 的 Code 產生 Async issue,應該要以 Promise.all() 改寫,才能結構性地解決未來用戶擴充問題。

MDN-Promise.all()

Promise.all() 方法回傳一個 Promise 物件,當引數 iterable 中所有的 promises 都被實現(resolved),或引數 iterable 不含任何 promise 時,被實現。或以第一個被拒絕的 promise 的原因被拒絕。

前言

  1. 透過 Side Project-Ecommerce 練習設計 Operational Data API (JSON)。
  2. 產出的 Operational Data API,期望可供前端 Views 透過第三方圖表套件如 Highcharts 等,render 圖表數據。

DOCUMENTATION-Get Operational Data Sorted by Categories

1. Feature
To get operational data sorted by categories.

2. URL
http://localhost:3000/api/admin/data/v1

3. Response Fields

4. Response Example

5. 驗證方式:
MySQL Workbench (輸出 Excel 計算 Data) vs. Response Fields 的 Data

(1) 透過 MySQL Workbench 輸出 csv 檔

(2) 將該 csv 檔匯入 Excel,整理並計算各 Response Fields 的 Data

(3) 最後將 MySQL Workbench 的 Excel Data,對照驗證 API Data
確認 Controller 的 Function 計算邏輯和數據正確性。

MySQL Workbench 匯出 csv 檔至 Excel

6. Controller-Design Operational Data API (SOP)

(1) Category.findAll({…}):找出 categories 陣列

(2) categories 陣列用 map( ) 整理出 CategoryId 陣列

(3) 建立新的空陣列[ ],包含:
I. subTotalArray 空陣列
II. itemQuantityArray 空陣列
III. priceAveArray 空陣列
IV. productQTYArray 空陣列

(4) Product.findAll({…}) where 篩選條件,用 for loop (CategoryId 陣列),以此跑出各 CategoryId 的 Product 資料。

(5) 步驟(4)跑出的 Product 資料,經過各個數學 Function 計算後,依序push() 推入步驟(3)的各個空陣列內。

※ 注意:不能另外建立 Product.findAll({…}) 處理其他 Data,因為同一階層內,不同 for loop 會有 asynchronous issues,i 跑的速度會不一樣,造成Data 完成的順序錯亂。

(6) 建立 setTimeout(function () {…},200)

因為非同步特性(asynchronous),上方步驟(3)~(5)的 Product.findAll({…} 計算過程較耗時,尚未計算完,就會先跑到下方步驟,所以先建立setTimeout(function () {…},200),設定延遲 200 毫秒 (1秒=1,000毫秒)。

換言之,將實際流程改為,等上方步驟(3)~(5)的 Product.findAll({…}計算完後,再進入 setTimeout(function () {…},200) 內的 function。

(7) 在 setTimeout(function () {…},200) 內,

I. 用 for loop 將上方步驟(3)已整理完的 4 個 Data 陣列 (subTotalArrayitemQuantityArraypriceAveArrayproductQTYArray),分別和 categories陣列,兩兩對稱合併(for loop 共用相同 i,因 2 個陣列長度相同),分別將該 4 個 Data 陣列內的 Data,合併入 categories 陣列內。

II. 建立 Constructor (物件導向 建構式函式),以建立資料格式&資料Title

III. 透過 categories 陣列+map( )+new Constructor,產出 Instance 實例。

(8) 在 setTimeout(function () {…},200) 內,

return res.json({ Data: data }),回傳 JSON 格式的 API。

POSTMAN (API 測試工具軟體):
JWT 登入測試成功

  1. Method:POST
  2. URL:http://localhost:3000/api/signin
  3. Body 填寫測試帳號:KEY-VALUE
    (1) email-root@example.com
    (2) password-12345678
  4. 注意:紀錄 token,之後放入 Header 的 Authorization。

POSTMAN (API 測試工具軟體):
Heroku-Operational data API sorted by categories 測試成功

  1. Method:GET
  2. URL:
    https://side-project-ecommerce.herokuapp.com/api/admin/data/v1
  3. Header 填寫測試帳號:KEY-VALUE
    (1) Authorization-Bearer+空格+"Token"

※ 注意:因為 Server 產生的 Token,會放入 Header 內的 Authorization。

Equipped with web development, communication, and business analytical skills.

Equipped with web development, communication, and business analytical skills.