});
);
const product = req.params.product;
当您在欣赏器中打开“ http：// localhost：3000”时，将对后端举办API挪用，以检索“ BTC-USD”市场的市场数据，包罗EMA12和EMA26技能指标。然后将利用React Bootstrap表2泛起它。 high: value[2].toString(10),
const endTime = new Date(Math.round(endDate.getTime() / coeff) * coeff).toISOString();
< app.use(‘/users’, usersRouter);
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.
% yarn start <– OR npm start
<BootstrapTable keyField=’date’ data={ this.state.tableData } columns={ columns } striped bordered hover />
closes.push(value[4]);
axios.get(‘http://127.0.0.1:9000/marketdata/BTC-USD’)
}
export default App;
componentDidMount() {
var router = express.Router();
technicalindicators（生意业务技能指标库）
const ema26Data = EMA.calculate({period : 26, values : closes});
% yarn start
{ dataField: ‘low’, text: ‘Low’ },
$ node ./bin/www
> var cors = require(‘cors’);
{ dataField: ‘open’, text: ‘Open’ },
之所以添加“ cors”，是因为默认环境下，来自React应用措施对“ http://127.0.0.1:3000”的请求将被阻止，从而无法向“ http://127.0.0.1:9000”上的API发出请求 。
}
假如您不熟悉CORS，则这是Mozilla的界说：
return (
! under var express = require(‘express’);
import React, { Component } from ‘react’;
date: new Date(value[0] * 1000).toISOString(),
我们需要库吗？
{ dataField: ’ema26′, text: ‘EMA26’}
< var usersRouter = require(‘./routes/users’);
const publicClient = new CoinbasePro.PublicClient();
open: value[3].toString(10),
}
然后编辑./app.js并举办以下变动…
publicClient.getProductHistoricRates(product, options)
.then((response) => {
const coeff = 1000 * 60 * 60;
yarn run v1.22.5
将./routes/users.js重定名为./routes/marketdata.js并将内容替换为以下内容…
.then(response => {
create-react-app（快速启动React.js前端应用措施）
import ‘react-bootstrap-table-next/dist/react-bootstrap-table2.min.css’;
启动您的React.js应用措施…
volume: value[5].toString(10),
});
class App extends Component {
const numSamples = 200; // last 200 hours
res.send(error);
{ dataField: ‘close’, text: ‘Close’ },
const startTime = new Date(Math.round(startTemp.getTime() / coeff) * coeff).toISOString();
{ dataField: ‘high’, text: ‘High’},
tableData: []
const ema12 = Number.parseFloat(ema12Data[ema12Data.length – 1]).toString(10);
render() {
% npx express-generator api
});
这应该足以使您的根基API正常事情。我以EMA12和EMA26技能指标为例，但技能指标库中还包括很多其他指标。顺便说一句，我无法让该库与React和React Native一起利用。我改用了@ d3fc / d3fc-technical-indicator，结果很好。它不像节点技能指标库那样全面，可是仍然很好。
GET /favicon.ico 404 9.496 ms – 1222
这将在http://127.0.0.1:3000上启动您的后端API，，您可以在欣赏器中打开它。我们稍后将其变动为端口9000，以免与React也要在端口3000上运行的斗嘴。const startDate = new Date();
];
coinbase-pro（与Coinbase Pro API接口的库）
const startTemp = new Date(startDate.setHours(startDate.getHours() – numSamples));
{ dataField: ’ema12′, text: ‘EMA12’ },
var express = require(‘express’);
res.send(data);
% cd mediumtutorial
const options = { start: startTime, end: endTime, granularity };
% yarn add cors coinbase-pro technicalindicators
express-generator（快速启动Node.js后端API）
因此，让我们从在Node.js中建设后端API开始。
/* GET market data */
module.exports = router;
% yarn <– OR npm install
假如您在欣赏器中打开“ http://127.0.0.1:3000”（假如它不会自动加载），则默认环境下看起来应该像这样。 GET /stylesheets/style.css 200 2.337 ms – 111< var port = normalizePort(process.env.PORT || ‘3000’);
import BootstrapTable from ‘react-bootstrap-table-next’;
> app.use(‘/marketdata’, marketdataRouter);
}
const ema26 = Number.parseFloat(ema26Data[ema26Data.length – 1]).toString(10);
> var marketdataRouter = require(‘./routes/marketdata’);
const ema12Data = EMA.calculate({period : 12, values : closes});
然后，您需要在项目中添加“ cors”，“ coinbase-pro”和“ technicalindicators”库。我利用“ yarn”，可是您也可以利用“ npm”，您喜欢哪种都行。
data.push(object);
this.setState({ tableData: response.data });
在您的“ express-generator”项目中，编辑./bin/www.js并将以下端口从TCP 3000变动为9000。
ema12: ema12 !== ‘NaN’ ? ema12 : ‘0’,
% yarn start
本教程将辅佐您在几分钟内开始建设网络或移动生意业务应用措施/呆板人的框架。我将利用来自Coinbase Pro API的免费生意业务数据，但您可以将任何互换数据用于，外汇或任何传统股票。 假如这对您不起浸染，请确保您的后端API也已启动：) 以此替换您的./App.js。 郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
const CoinbasePro = require(‘coinbase-pro’);
.catch(error => {
> var port = normalizePort(process.env.PORT || ‘9000’);
! under var app = express();
low: value[1].toString(10),
import ‘bootstrap/dist/css/bootstrap.min.css’;
react-bootstrap-table-next（用于渲染功效的库）
% yarn add axios react-bootstrap-table-next bootstrap
% npx create-react-app mediumtutorial
const closes = [];
import axios from ‘axios’;
})
response.reverse().map(function(value, key) {
const object = {
我将利用“ axios”从API检索数据，并利用“ react-bootstrap-table-next”（React-bootstrap表2）显示包括数据的表。因此，此刻就安装它们…
{ dataField: ‘date’, text: ‘Date’},
axios（从API检索数据的库）
> app.use(cors());
router.get(‘/:product’, function(req, res, next) {
});
state = {
*** INSTALLATION PROCESS ***
