本教程将帮助您在几分钟内开始创建网络或移动交易应用程序/机器人的框架。我将使用来自Coinbase Pro API的免费交易数据，但您可以将任何交换数据用于加密货币，外汇或任何传统股票。
我们需要库吗？
create-react-app（快速启动React.js前端应用程序）
express-generator（快速启动Node.js后端API）
coinbase-pro（与Coinbase Pro API接口的库）
technicalindicators（交易技术指标库）
axios（从API检索数据的库）
react-bootstrap-table-next（用于渲染结果的库）
因此，让我们从在Node.js中创建后端API开始。
% npx express-generator api
% cd api
% yarn <– OR npm install
% yarn start <– OR npm start
这将在http://127.0.0.1:3000上启动您的后端API，您可以在浏览器中打开它。我们稍后将其更改为端口9000，以免与React也要在端口3000上运行的冲突。
% yarn start
yarn run v1.22.5
$ node ./bin/www
GET / 200 251.272 ms – 170
GET /stylesheets/style.css 200 2.337 ms – 111
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也已启动：)