用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可以串接的情况，就像是本篇国际股市资料集的部份，甚至是在一开始设计网站功能的时候，就可以将这个部份纳入思考，可以节省较多时间。