如何快速创建一个交易分析网站或移动应用程序

释放双眼,带上耳机,听听看~!
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 =

本教程将帮助您在几分钟内开始创建网络或移动交易应用程序/机器人的框架。我将使用来自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也已启动:)

郑重声明:本站主要用于区块链行业信息资讯传播,促进行业健康发展,部分信息转载自互联网,文章版权归原作者所有,如作者信息标记有误,请第一时间联系我们修改或删除,谢谢
关键词:
移动应用程序  加密货币  

生成海报

给TA买糖
共{{data.count}}人
人已赞赏
技术

零知识证明 - PLONK电路原理

2020-10-10 9:40:10

技术

使用 Play with Docker 部署 ABT 节点

2020-10-14 5:19:29

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
免责声明:本站所有资讯仅代表作者个人观点,与平台立场无关,且不构成任何投资理财建议。
This is default text for notification bar