本教程将帮助您在几分钟内开始创建网络或移动交易应用程序/机器人的框架。我将使用来自Coinbase Pro API的免费交易数据，但您可以将任何交换数据用于加密货币，外汇或任何传统股票。

我们需要库吗？

create-react-app(快速启动React.js前端应用程序（

快速生成器（快速启动Node.js后端API)

coinbase-pro(与Coinbase Pro API接口的库（

技术指标（交易技术指标库（

axios(从API检索数据的库（

react-bootstrap-table-next(用于渲染结果的库（

因此，让我们从在Node.js中创建后端API开始。

% npx express-生成器api

% cd api

%纱线-或npm安装

%纱线开始-或npm开始

这将在http://.127 .0 .0 .33336 .03030030006上启动您的后端API，您可以在浏览器中打开它。我们稍后将其更改为端口9000，以免与反应也要在端口3000上运行的冲突。

%纱线开始

纱线运行v1.22.5

$ node ./bin/www

GET/200 251.272 ms - 170

GET/样式表/style.css 200 2.337 ms - 111

GET /favicon.ico 404 9.496 ms - 1222

然后，您需要在项目中添加“cors”，“coinbase-pro”和"技术指标"库。我使用"纱线"，但是您也可以使用"国家预防机制"，您喜欢哪种都行。

%纱线添加cors coinbase-pro技术指标

之所以添加“cors”，是因为默认情况下，来自反应应用程序对“http://127。0 .0 .1:3000的请求将被阻止，从而无法向“http://127。0 .0 .1:9000上的API发出请求。

如果您不熟悉CORS，则这是Mozilla的定义：

跨来源资源共享(CORS)是一种机制，它使用额外的HTTP头来告诉浏览器给运行在一个来源的网络应用程序从不同的来源访问选定的资源。当一个网络应用程序请求一个来源（域、协议或端口(不同的资源时，它会执行一个跨来源的HTTP请求。

在您的"快速发电机"项目中，编辑/bin/www.js .并将以下端口从TCP 3000更改为9000 .

var PoRT=NormaLizePort(进程。env。端口| | ' 3000 ')；

var PoRT=NormaLizePort(进程。env。端口| | ' 9000 ')；

然后编辑/app.js并进行以下更改……

！在var express=require('express ')下；

var CORS=require(' CORS ')；

！在var app=express()下；

app。use(CORS())；

var usersRouter=require(' ./routes/users’)；

var marketdataRouter=require(' ./路线/市场数据’)；

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 public client=new CoinBasePro .public client()；

const EMA=require('技术指标).导弹电子搜索系统

/*获取市场数据*/

router.get('/:product '，function(req，res，next) {

const product=req。参数。产品；

常数粒度=60 * 60；//1小时

const numSamples=200//最后200小时

常量系数=1000 * 60 * 60

const startDate=new Date()；

常量开始时间=新日期(开始日期。设置小时(开始日期。gethours()-NumSamples))；

常量开始时间=新日期(数学。圆形(开始温度。GetTime()/coeff)* coeff).toISOString()；

常量结束日期=新日期()；

常量结束时间=新日期(数学。回合(结束日期。GetTime()/coeff)* coeff).toISOString()；

const options={ start : start time，end: endTime，granularity }；

公共客户。GetProductHistorical费率(产品，选项(。然后（响应={

const data=[]；

const closes=[]；

response.reverse().地图(函数（值，键){

关门。push(值[4])；

const EMA 12数据=EMA。计算({ period : 12，values : closes })；

常量12=数字。parsefloat(ema12数据[ema12数据。长度-1]).toString(10)；

const EMA 26 DATa=EMA。计算({ period : 26，values : close })；

常量EMA 26=数字。parsefloat(EMA 26数据[EMA 26数据。长度-1]).toString(10)；

常数对象={

日期：新日期（值[0] * 1000).toISOString()，

low:值[1]20 .toString(10)，

高：值[2]20 .toString(10)，

open:值[3]9 .toString(10)，

close:值[4]20 .toString(10)，

卷：值[5]20 .toString(10)，

ema12: ema12！=='NaN '？ema12 : '0 '，

ema26: ema26！=='NaN '？ema26 : '0 '

{}

数据。push(对象)；

})；

res.send(数据)；

})。catch(错误={

res.send(错误)；

})；

})；

module.exports=router

这应该足以使您的基本API正常工作。我以EMA12和EMA26技术指标为例，但技术指标库中还包含许多其他指标。顺便说一句，我无法让该库与反应和原生反应一起使用。我改用了@ d3fc/d3fc-技术指标，效果很好。它不像节点技术指标库那样全面，但是仍然很好。

因此，既然我们的后端API可以正常工作了，我们需要创建React.js应用程序。

% npx create-react-app中等教程

***安装过程***

我将使用“axios”从API检索数据，并使用"反应-引导-表-下一步“(反应-引导表2)显示包含数据的表。因此，现在就安装它们.

% cd媒体教程

%纱线添加axios react-bootstrap-table-next bootstrap

启动您的React.js应用程序……

%纱线开始

如果您在浏览器中打开“http://127.0.0.1:3000”(如果它不会自动加载)，则默认情况下看起来应该像这样。

以此替换您的. App.js。

从"反应"导入反应{组件}；

从" react-Bootstraptable-table-next "导入BootstrapTable

从“axios”导入axios

导入" bootstrap/dist/CSS/bootstrap。分钟。CSS”；

import ' react-bootstrap-table-next/dist/react-bootstrap-table 2。分钟。CSS '；

类别应用程序扩展组件{

状态={

tableData: []

{}

componentDidMount() {

axios。get(' http://127。0 .0 .1:9000/市场数据/BTC-美元')。然后((响应)={

这个。setstate({ tabledata :响应。数据})；

})；

{}

render() {

const columns=[

{数据字段： '日期，文本： '日期}，

{数据字段： '高，文本： '高}，

{数据字段： '低，文本： '低}，

{数据字段： "打开"，文本： "打开" }，

{数据字段： "关闭"，文本： "关闭" }，

{ dataField: 'ema12 '，text: 'EMA12' }，

{数据栏d: 'ema26 '，文本： 'EMA26'}

】；

返回（

BootstrapTable keyField='date '数据={ this.state.tableData }列={ columns }条纹边框悬停/

)；

{}

{}

导出默认应用程序；

当您在浏览器中打开" http://localhost:3000 "时，将对后端进行API调用，以检索“BTC——美元"市场的市场数据，包括EMA12和EMA26技术指标。然后将使用反应自举表2呈现它。

如果这对您不起作用，请确保您的后端API也已启动：)