区块链研究实验室|如何快速创建一个交易分析网站或移动应用程序

本教程将帮助您在几分钟内开始创建网络或移动交易应用程序/机器人的框架。我将使用来自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 : 12values : closes});
const ema12 = Number.parseFloat(ema12Data[ema12Data.length – 1]).toString(10);
const ema26Data = EMA.calculate({period : 26values : closes});
const ema26 = Number.parseFloat(ema26Data[ema26Data.length – 1]).toString(10);
const object = {
datenew 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也已启动:)
 
———————————————
原文作者:Michael Whittle
译者:链三丰
译文出处:http://bitoken.world

该内容来自于互联网公开内容,非区块链原创内容,如若转载,请注明出处:https://htzkw.com/archives/26949

联系我们

aliyinhang@gmail.com