教程:将mturk API与react javascript库一起使用

去年,万博体育网址亚马逊机械土耳其人(MTURK)介绍了使用AWS软件开发工具包(SDK)中的mturk应用程序编程接口(API)的能力命令行界面(CLI).这使得请求者可以使用来自九个已经在AWS社区中广泛使用的AWS SDK中的任何一个的mturk API。其中包括对语言的支持,如蟒蛇,,J.N.,,JavaScript,,爪哇,,.NET(包括C和F),红宝石,,,,PHP,和C++.这使得mturk API比以往更易于使用和访问。

有了对多种语言和平台的支持,Mturk的API可以与许多第三方框架协同工作,工具包,以及抽象层。在今天的教程中,我们将向您展示如何使mturk与构建用户界面的流行框架一起工作:react。

第一,反应简介

React是一个由Facebook维护的开源框架,Instagram,以及一个由企业和开发人员组成的社区。react帮助开发人员构建用户界面(uis),并使其易于管理ui交互。反应建立在组件“它由框架根据数据的变化而高效、自动地呈现和更新。

您可以在以下网址了解更多关于反应的信息:网址:https://reactjs.org/

入门

如果您希望在不安装或配置计算机上的任何内容的情况下立即开始使用react,这里有几个选项供您选择:https://reactjs.org/docs/try-react.html.您可以直接在浏览器中编辑和运行代码,或者下载一个HTML文件,其中包含运行react所需的所有内容,而不包含任何本地依赖项。如果你只是想踢轮胎,那么从这里开始是合理的。

但是对于今天的教程,我们将继续安装React,这是依赖关系,还有一个脚本创建React应用程序”这样就可以很容易地立即开始使用一个有效的React应用程序,从盒子里出来。

安装React及其依赖项

以下是我们需要安装的内容的摘要:

  • (可选的,但强烈建议)我们建议您安装节点版本管理器(或““NVM”简而言之)这将使您的计算机上有多个版本的node.js变得容易,方便地在它们之间切换。有几个很好的在线教程可以指导您如何安装它们。这里有一个在Windows上安装NVM的教程.要在OS X上安装,我们建议使用自酿啤酒,通常可以在自制网站.一旦安装了自制啤酒,简单型
酿造更新
BREW安装NVM
  • 下一步,您需要在您的计算机上安装node.js。对于本教程,我们将使用node.js版本6.10.3。要安装这个,简单类型。
NVM安装6.10.3
  • 现在,我们将安装create react应用程序包,使创建第一个react应用程序变得简单。要做到这一点,简单运行
npm安装-g创建react应用程序

就是这样。我们现在已经安装了在第一个React应用程序上启动所需的一切。向前的!!

创建第一个React应用程序

首先,移动到计划开发新应用程序的文件夹/目录。在那个目录里,我们将创建一个名为mturk app的新应用程序。要做到这一点,运行以下命令:

创建React应用程序mturk应用程序

就这样,你会看到很多输出。完成后,它将分享一些有用的说明。这些包括:

成功!在/users/johndoe/mturk app创建了mturk app
在那个目录里,可以运行多个命令:
纱线起动
启动开发服务器。
纱线结构
将应用程序打包成静态文件进行生产。
纱线试验
启动测试运行程序。
纱线弹出
删除此工具并复制生成依赖项,配置文件和脚本进入应用程序目录。如果你这样做,你不能回去!!
我们建议您先输入:
CD MTUK应用程序
纱线起动
快乐黑客!!

如果你导航到那个目录,你应该能够马上做出反应。以下是命令:

CD MTUK应用程序
NPM启动

几秒钟后,系统应自动打开浏览器窗口http://localhost:3000/显示如下网页:

你会注意到在上面的截图中,我们打开了Chrome开发者工具(您可以通过菜单“更多工具”或“开发者工具”或键入+选项+I“并导航到控制台选项卡。这是一个很好的实践,因为react可能会出现警告或错误消息,除非我们正在查看此选项卡,否则这些警告或错误消息将不可见。这也是一个很有帮助的地方,让我们把自己的有用信息,以防,也许,我们想用它来帮助调试代码。

现在,让我们对这个新的React应用程序进行第一次更改。要做到这一点,按照应用程序主页的建议打开src/app.js。我们将把第11行改为:

欢迎回应

欢迎使用我的mturk应用程序

并保存文件。你马上就会发现发生了什么事,即使不必采取任何行动。您的应用程序正在后台重建,网页正在重新加载。一旦切换到浏览器,您应该注意到它已经重新加载,现在显示:

我们现在创造了,并加以修改,我们的第一个React应用程序。干得好!!

第一次调用mturk api

从react调用mturk,我们需要做一些事情:(1)安装AWS SDK并告诉React在哪里找到它,(2)使用我们的AWS凭证配置AWS SDK,然后(3)调用我们想要的mturk API并处理结果。我们将逐步完成下面的每一个步骤。

第一,要安装AWS SDK,我们将在mturk app目录中键入以下命令:

NPM安装AWS SDK

下一步,我们将讲述有关AWS SDK的反应,我们会进口的。添加粗体线下面是您的app.js文件:

进口反应,组件来自'react';;
从“./logo.svg”导入徽标;;
导入“./app.css”;;
从“aws sdk”导入aws;;
类应用程序扩展组件
RelDead(){

就像上次我们编辑代码一样,你会发现网页又重新加载了。这次,它在控制台上打印了一条警告消息,告诉我们导入了一些东西,但还没用过。没关系,因为我们很快就会用到它。

下一步,我们将在app.js中添加一些代码以显示我们的mturk帐户余额。第一,我们需要在应用程序组件上创建一个状态变量来存储我们计划向用户显示的余额。起初,这个状态变量只表明我们还没有加载余额。但一旦我们从Mturk那里拿到余额,它将被用户的帐户余额覆盖。第一,让我们设置状态变量并输出它。添加粗体线条代码如下所示:

类应用程序扩展组件
建造师(道具)
超级(道具);;
这个状态={
mturkaccountbalance:空
}
}
RelDead(){
var accountBalanceTodisplay='装载……”;;
如果(this.state.mturkaccountbalance!{NULL){
accountBalanceTodisplay=this.state.mturkaccountBalance
}


返回(


标志

欢迎使用我的mturk应用程序




您的账户余额是要显示的账户余额



;;
}
}

应重新加载应用程序以显示以下内容:

现在,我们将使用我们的AWS凭证配置AWS SDK,然后调用我们想要的mturk API并处理结果。要做到这一点,添加以下内容粗体线条您的代码:

类应用程序扩展组件
建造师(道具)
超级(道具);;
这个状态={
mturkaccountbalance:空
}
}

componentdidmount()
this.getAccountBalance();;
}


getAccountBalance()
aws.config.update(
“Access密钥:你的钥匙在这里,,
“秘书访问键”:你的“秘密钥匙”,,
“区域:美国东部-1”“
(});;

const mturkclient=new aws.mturk();;
mturkclient.getAccountBalance((错误,数据)={
如果(错误){
控制台警告进行mturk api调用时出错:“,错误;;
}否则{
//呼叫成功
const balance=`$$data.availablebalance `;;
this.setState(mturkaccountBalance:余额);;
}
})
}
RelDead(){
var accountBalanceTodisplay='装载……”;;
如果(this.state.mturkaccountbalance!{NULL){
accountBalanceTodisplay=this.state.mturkaccountBalance
}

返回(


标志

欢迎使用我的mturk应用程序




您的mturk请求者帐户余额是要显示的帐户余额



;;
}
}

现在,重新加载页面时,你应该看到你的余额出现了:

如果你想在沙盒中运行这个,只需添加以下内容粗体代码行到app.js文件:

aws.config.update(
“Access密钥:你的钥匙在这里,,
“秘书访问键”:你的“秘密钥匙”,,
“区域:美国东部-1”,,
“端点:https://mturk-requester-sandbox.us-east-1.amazonaws.com““
(});;

你应该看到10美元,当应用程序在浏览器中重新加载时,会出现000个余额:

就是这样!您已经成功构建了第一个React应用程序,并成功调用了mturk API。很棒的工作!!

包扎

在本教程中,我们已经做了很多设置,但是我们只触及了react和mturk API可能的表面。在以后的教程中,我们将在此基础上展示如何使用更高级的mturk API方法,以及如何从表之类的反应组件中获得更多好处,图,形式,动画库,还有更多。通过访问mturk api文档,您可以了解有关mturk api的更多信息。在这里.

我们希望您喜欢今天的教程。如果你有任何问题,请把问题发到我们的姆图克论坛.成为一个请求者,,在这里注册.想作为员工客户贡献自己的力量吗??从这里开始.

响应
作者选择了不显示对这个故事的回应。您仍然可以通过单击响应气泡来响应。