iT邦幫忙

2021 iThome 鐵人賽

DAY 22
0
Modern Web

用React刻自己的投資Dashboard系列 第 22

用React刻自己的投資Dashboard Day22 - API與前端資料需求比對

tags: 2021鐵人賽 React

一般來說在開發階段,前端與後端會討論資料需求,讓API產出的內容能夠滿足前端畫面的需求,不過這次因為是串接外部的API,因此API的內容已經是固定的,所以前端就需要配合API的內容去思考能做到哪些部份,以及資料要如何整理成符合畫面需求的格式。因此,本篇就來來比對一下wireframe上的資料,與API提供的資料是否能夠對得上。

首頁畫面

首先來看首頁的畫面,包含:台灣股市、美國股市、國際股市三個部份的資料。接下來就一個一個來對一下資料吧!

台灣股市資料集

  • 加權指數收盤
    對應到api的資料集是TaiwanStockPrice,用Postman測試API如下圖,有最新交易日的開高低收價、漲跌點數、交易量、交易額,是可以滿足前端的資料需求的,只是漲跌百分比需要用漲跌點數除以前一天的收盤價去計算,還算簡單。

  • 三大法人買賣超
    對應到的資料集是TaiwanStockTotalInstitutionalInvestors,用Postman打出來資料如下。看起來資料也是沒問題的。

{
    "msg": "success",
    "status": 200,
    "data": [
        {
            "buy": 2493597654,
            "date": "2021-09-29",
            "name": "Dealer_self",
            "sell": 10303678904
        },
        {
            "buy": 5945369029,
            "date": "2021-09-29",
            "name": "Dealer_Hedging",
            "sell": 8827375875
        },
        {
            "buy": 5385739262,
            "date": "2021-09-29",
            "name": "Investment_Trust",
            "sell": 2835013865
        },
        {
            "buy": 76878521979,
            "date": "2021-09-29",
            "name": "Foreign_Investor",
            "sell": 112334980438
        },
        {
            "buy": 14002490,
            "date": "2021-09-29",
            "name": "Foreign_Dealer_Self",
            "sell": 19938780
        },
        {
            "buy": 90703227924,
            "date": "2021-09-29",
            "name": "total",
            "sell": 134301049082
        }
    ]
}

以上三大法人買賣超的資料其實就是對應到下面證交所的這張表:

美國股市資料集

美股指數的部份就比較簡單了,因為就只有各大指數的收盤資料,來打打看API。
可以觀察一下Params,資料集是USStockPrice,start_date是2021-09-26,指數是用^DJI,發現結果會得到2021-09-26起始日後每個交易日的資料,包含:開高低收、調整收盤價、成交量,跟台股不一樣的地方是沒有給spread(漲跌點數),因此至少要有最近兩個交易日的收盤價,才能去計算漲跌百分比,因此之後call api的時候就要注意要至少拿到兩個交易日的資料。

國際股市資料集

本來設計畫面的時候是有把國際股市的收盤資訊也放在首頁,不過後來發現API的部份已經不提供國際股市的資料了,需要再找到其他資料源來補,但因為時間有限,決定暫時先不做這一塊。

小結

在開發之前確認資料來源都已經好了是很重要的,比較不會發生開發到一半,然後沒有API可以串接的情況,就像是本篇國際股市資料集的部份,甚至是在一開始設計網站功能的時候,就可以將這個部份納入思考,可以節省較多時間。


上一篇
用React刻自己的投資Dashboard Day21 - 介紹Finmind API
下一篇
用React刻自己的投資Dashboard Day23 - 非同步呼叫API,完成首頁資料串接
系列文
用React刻自己的投資Dashboard30

尚未有邦友留言

立即登入留言