GET /favicon.ico 404 9.496 ms - 1222
然後，您需要在專案中新增“ cors”，“ coinbase-pro”和“ technicalindicators”庫。我使用“ yarn”，但是您也可以使用“ npm”，您喜歡哪種都行。
% yarn add cors coinbase-pro technicalindicators
之所以新增“ cors”，是因為預設情況下，來自React應用程式對“ http://127.0.0.1:3000”的請求將被阻止，從而無法向“ http://127.0.0.1:9000”上的API發出請求 。
如果您不熟悉CORS，則這是Mozilla的定義：
Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) from its own.
在您的“ express-generator”專案中，編輯./bin/www.js並將以下埠從TCP 3000更改為9000。
< var port = normalizePort(process.env.PORT || '3000');
> var port = normalizePort(process.env.PORT || '9000');
然後編輯./app.js並進行以下更改…
! under var express = require('express');
> var cors = require('cors');
! under var app = express();
> app.use(cors());
< var usersRouter = require('./routes/users');
> var marketdataRouter = require('./routes/marketdata');
< app.use('/users', usersRouter);
> app.use('/marketdata', marketdataRouter);
將./routes/users.js重新命名為./routes/marketdata.js並將內容替換為以下內容…
var express = require('express');
var router = express.Router();
const CoinbasePro = require('coinbase-pro');
const publicClient = new CoinbasePro.PublicClient();
const EMA = require('technicalindicators').EMA;
/* GET market data */
router.get('/:product', function(req, res, next) {
const product = req.params.product;
const granularity = 60 * 60; // 1 hour
const numSamples = 200; // last 200 hours
const coeff = 1000 * 60 * 60;
const startDate = new Date();
const startTemp = new Date(startDate.setHours(startDate.getHours() - numSamples));
const startTime = new Date(Math.round(startTemp.getTime() / coeff) * coeff).toISOString();
const endDate = new Date();
const endTime = new Date(Math.round(endDate.getTime() / coeff) * coeff).toISOString();
const options = { start: startTime, end: endTime, granularity };
publicClient.getProductHistoricRates(product, options)
.then(response => {
const data = [];
const closes = [];
response.reverse().map(function(value, key) {
closes.push(value[4]);
const ema12Data = EMA.calculate({period : 12, values : closes});
const ema12 = Number.parseFloat(ema12Data[ema12Data.length - 1]).toString(10);
const ema26Data = EMA.calculate({period : 26, values : closes});
const ema26 = Number.parseFloat(ema26Data[ema26Data.length - 1]).toString(10);
const object = {
date: new Date(value[0] * 1000).toISOString(),
low: value[1].toString(10),
high: value[2].toString(10),
open: value[3].toString(10),
close: value[4].toString(10),
volume: value[5].toString(10),
ema12: ema12 !== 'NaN' ? ema12 : '0',
ema26: ema26 !== 'NaN' ? ema26 : '0'
}
data.push(object);
});
res.send(data);
})
.catch(error => {
res.send(error);
});
});
module.exports = router;
這應該足以使您的基本API正常工作。我以EMA12和EMA26技術指標為例，但技術指標庫中還包含許多其他指標。順便說一句，我無法讓該庫與React和React Native一起使用。我改用了@ d3fc / d3fc-technical-indicator，效果很好。它不像節點技術指標庫那樣全面，但是仍然很好。
因此，既然我們的後端API可以正常工作了，我們需要建立React.js應用程式。
% npx create-react-app mediumtutorial
*** INSTALLATION PROCESS ***
我將使用“ axios”從API檢索資料，並使用“ react-bootstrap-table-next”（React-bootstrap表2）顯示包含資料的表。因此，現在就安裝它們...
% cd mediumtutorial
% yarn add axios react-bootstrap-table-next bootstrap
啟動您的React.js應用程式…
% yarn start
如果您在瀏覽器中開啟“ http://127.0.0.1:3000”（如果它不會自動載入），則預設情況下看起來應該像這樣。
以此替換您的./App.js。
import React, { Component } from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
class App extends Component {
state = {
tableData: []
}
componentDidMount() {
axios.get('http://127.0.0.1:9000/marketdata/BTC-USD')
.then((response) => {
this.setState({ tableData: response.data });
});
}
render() {
const columns = [
{ dataField: 'date', text: 'Date'},
{ dataField: 'high', text: 'High'},
{ dataField: 'low', text: 'Low' },
{ dataField: 'open', text: 'Open' },
{ dataField: 'close', text: 'Close' },
{ dataField: 'ema12', text: 'EMA12' },
{ dataField: 'ema26', text: 'EMA26'}
];
return (
<BootstrapTable keyField='date' data={ this.state.tableData } columns={ columns } striped bordered hover />
);
}
}
export default App;
當您在瀏覽器中開啟“ http：// localhost：3000”時，將對後端進行API呼叫，以檢索“ BTC-USD”市場的市場資料，包括EMA12和EMA26技術指標。然後將使用React Bootstrap表2呈現它。
如果這對您不起作用，請確保您的後端API也已啟動：)
