本文同步發表於: Sponge Records

我們的專案分為三個部分，前端呈現、後端儲存與驗證、資料分析端產出預測數據
而我目前實作的是後端的部分，因此我們必須儲存來自分析端的資料並且交給前端呈現

目前規劃的方案是分析端丟 x、y 軸的資料給我們，將資料透過 api 存放到資料庫內，
然後提供前端圖表的列表並且吐 x、y 軸的資料供呈現

分析端給資料的 api

為了達到我們設計的構想，我們必須設計一個 api 給分析端讓他能夠寫入圖表資料，並且輸入的資料要能夠對應到圖表

我們初步設計了一個 api 的端口

{
    "chatName":"TestChat",
    "xName":"Year",
    "xData":1,
    "yName":"height",
    "yData":1    
}
....

透過以上設計可以明確的區分chatName跟不同象限的資料，但在使用上重複性質太高
以此作了點改變

當要創建圖表時，呼叫圖表創立的 api，只輸入圖表的名稱跟x、y軸意義

{
    "chatName":"TestChat",
    "xName":"Year",
    "yName":"height"
}

然後 api 就會回傳一段 jwt

{
    "token":"{透過處理過的TestChat、Year、heigh}"
}

之後透過 jwt 來補充圖表的資料

{
    "token":"{透過處理過的TestChat、Year、heigh}",
    "x":1,
    "y":2
}
...

這樣初步降低了傳遞資料的重複性，降低資料分析端丟資料的難度

前端端取得資料的 api

而前端會需要取得圖表的列表，並且取得資料，由於我們的 api 有權限的設定，因此取得列表時需要傳入使用者的 token

{
    "token":"{使用者的 token}"
}

而 api 將會傳回使用者可以看到的圖表列表

{
    "chatName1":"TestChat1",
    "chatName2":"TestChat2",
    ....
}

之後透過圖表名稱與使用者 token 取得資料

{
    "token":"{使用者的 token}",
    "chatName":"TestChat1"
}

api 回傳圖表資料

{
    "x":1
    "y":1
}
....

總結

傳遞圖表資料的方案很多，分析端直接丟 .csv 檔案連結由 api 去讀取也是一種方案，這裡只是提出一種方案而已
如果後續有時間也會實作各種方法供參考，原先的架構是由 api 端產生圖表的圖片檔後存入圖床，並且紀錄圖片的 url
，當前端需要時傳遞 url，而這方案因難以納入權限控管，只要知道 url 就能觀看，刪除圖片的週期也難設計，也想過以純文字傳遞圖片，
但這樣會導致後端設計與功能過於複雜，因此才採取目前將資料透過 json 呈現給前端呈現的方案，也較為符合前後端分工與落實權限控管
圖表的架構在實作中皆可能有些微改動，可以參考作法並實作更適合讀者環境的架構

下回預告

將會實作開給資料分析端的 api ，將圖表的資料存入資料庫內供調用