教程:使用mturk API和react native构建移动应用程序

最后三篇博客文章(第1部分,,第2部分,,第3部分)我们分享了一些教程,展示了如何使用一个名为React的JavaScript框架来快速轻松地构建利用可重用组件的Web应用程序。在这些教程中,我们教读者如何开始使用React和Amazon Mechanical Turk(MTURK)。万博体育网址然后如何使用第三方组件,然后,如何从mturk API解析一些更复杂的响应对象(如XML应答值)。这三个教程涵盖了为mturk生成有用的请求者应用程序所需的许多构建块。

今天,我们将向您介绍反应本土化,一个允许您构建本地移动应用程序的框架(Android,iOS)使用JavaScript和React。我们将向您介绍React Native,有许多相似的反应,并帮助您启动第一个本地移动应用程序,调用mturk API。我们开始吧。

设置react本地

Facebook发布了一个优秀的入门指南在这里.你可以按照他们的指导,或通过下面的指南:

上次,我们使用NPM安装了“create react app”包。这为我们提供了一种简单的方法,使一个可工作的示例应用程序能够使用react快速启动和运行。对于react native,有一个名为“create react native app”的包的行为类似。如果你跟着开始使用React的教程,然后,您已经安装了所有其他需要的依赖项。因此,让我们继续安装Create React Native应用程序:

npm安装-g创建react本机应用程序

完成后,您应该看到这样的消息:

$npm安装-g创建react本机应用程序
/用户/johndoe/.nvm/versions/node/v6.10.3/bin/create-react-native-app->/users/johndoe/.nvm/versions/node/v6.10.3/lib/node_modules/create-react-native-app/build/index.js
/用户/johndoe/.nvm/versions/node/v6.10.3/lib
创建react native app@1.0.0
粉笔@2.3.2
│——ANSI样式@3.2.1
│——支持颜色@5.3.0
交叉产卵@5.1.0
破译——lru cache@4.1.2
$

您还需要抓取您的移动设备(我们在本教程中使用的是iPad Pro)来测试您的移动应用程序。为此,你需要安装一个开发工具,比如expo,你可以在iTunes应用商店找到在这里.

一旦安装了Create React Native应用程序和Expo Developer工具,你可以开始构建你的React原生应用程序。

Hello World:第一个React本机应用程序即将用完

在这一点上,你已经安装了所有必要的设备。所以,让我们开始创建我们的第一个反应本地应用程序。要做到这一点,我们将要从以前的教程中选择一个目录(我们将在/users/johndoe目录中工作)。我们将运行以下命令来创建我们的第一个应用程序:

创建React Native应用程序mturk移动应用程序

当这个命令完成时,您应该看到与以下类似的输出:

成功!在/users/johndoe/mturk移动应用程序上创建了mturk移动应用程序
在那个目录里,可以运行多个命令:
NPM启动
启动开发服务器,以便在世博会上打开应用程序
手机上的应用程序。
NPM运行IOS
(只有MAC)需要XCODER)
启动开发服务器并在iOS模拟器中加载应用程序。
NPM运行Android
(需要Android构建工具)
启动开发服务器并将应用程序加载到已连接的Android设备或模拟器上。
NPM试验
启动测试运行程序。
NPM运行弹出
删除此工具并复制生成依赖项,配置文件和脚本进入应用程序目录。如果你这样做,你不能回去!!
我们建议您先输入:
CD mturk移动应用程序
NPM启动
快乐黑客!!

如果您按照上面最后一组说明操作(为了方便起见,我们用粗体显示了这些说明)。然后继续输入:

CD mturk移动应用程序
NPM启动

一旦你做到了,您应该看到与以下类似的输出:

现在,抓起你的iOS设备(iPhone或iPad),打开你之前安装的expo应用程序(如果你没有安装它,只需在应用商店中搜索expo或单击在这里)确保iOS设备与使用React Native开发的计算机在同一网络上,这一点很重要。

一旦你载入世博会,您的移动设备屏幕应如下所示:

现在,点击“扫描QR码并将设备摄像头保持在电脑屏幕上显示的二维码(请参见上面终端屏幕截图中的示例)。你的桌面屏幕应该显示构建javascript包”你的世博会应用程序应该显示类似的东西。这可能需要一两分钟。

在Expo中加载应用程序时,您将在移动设备和桌面上看到一个进度条,指示正在构建JavaScript捆绑包。这可能需要一两分钟的时间。

一旦装完货,世博会应用程序应显示以下内容:

好极了!我们已经创建并成功执行了我们的第一个移动应用程序。在上面的屏幕中,您会注意到它建议我们打开app.js并开始使用该应用程序。让我们在下一个教程部分继续进行。

开始使用我们的应用程序

到目前为止,我们已经设置了react native,我们用它来创建和运行我们的第一个”你好世界应用程序。令人印象深刻的,我们没有写任何代码。有趣的是,在那里我们开始构建我们的应用程序。

让我们从打开app.js开始。你会发现这很简单:

从“react”导入react;;
导入样式表,文本,视图来自'react native';;
导出默认类app扩展react.component{
RelDead(){
返回(

打开app.js开始使用您的应用程序!!
您所做的更改将自动重新加载。
摇动手机打开开发者菜单。

;;
}
}
const styles=样式表。创建({
容器:{
Flex:1,,
背景色:“fff”,,
Alignitems:'居中',,
justifycontent:'中心',,
},
(});;

让我们改变一下,通过添加粗体行,如下所示:

从“react”导入react;;
导入样式表,文本,视图来自'react native';;
导出默认类app扩展react.component{
RelDead(){
返回(

打开app.js开始使用您的应用程序!!
您所做的更改将自动重新加载。
摇动手机打开开发者菜单。
这是一个显示代码重新加载的占位符。

;;
}
}
const styles=样式表。创建({
容器:{
Flex:1,,
背景色:“fff”,,
Alignitems:'居中',,
justifycontent:'中心',,
},
(});;

继续保存该文件。如果你仔细观察,一旦你点击“保存”,你就会看到一个旋转器出现在你的iPad上。在几秒钟内,屏幕上的文本将更新以显示最新的代码。相当强大,正确的?您刚刚更改了应用程序。

使用MTURK API

就像我们以前的教程一样,我们需要安装用于javascript的mturk sdk。我们在以前的教程中把它安装在react web app目录中,在这里为react native安装它需要我们从react native app目录(/users/johndoe/mturk mobile app)运行相同的命令:

NPM安装AWS SDK

一旦安装,您应该看到如下输出:

$NPM安装AWS SDK
mturk移动应用程序@0.1.0/用户/johndoe/mturk移动应用程序
aws sdk@2.207.0
缓冲器@4.9.1
珍——IEEE754@1.1.8
│——Isarray@1.0.0
——事件@1.1.1
——jmespath@0.15.0
——SAX@1.2.1
url@0.10.3
│——Punycode@1.3.2
——uuid@3.1.0
xml2js@0.4.17
│——xmlbuilder@4.2.1
破译——xmlbuilder@4.2.1

下一步,您将要添加显示的行用粗体下面是要导入AWS SDK的app.js文件:

从“react”导入react;;
导入样式表,文本,视图来自'react native';;
从“aws sdk/dist/aws sdk react native”导入aws;;
导出默认类app扩展react.component{

更改此代码行后,Expo上可能会出现错误。没关系。只需在显示二维码的屏幕中单击ctrl-c,键入“npm start”重新开始该过程。一旦它加载备份,您应该能够扫描二维码(或者点击Expo应用程序中的Reload)来加载应用程序备份。

一旦应用程序重新加载,什么都不应该改变(自从,我们只是简单地导入了AWS SDK,但实际上我们没有改变任何输出)。

下一步,我们将要设置我们的凭据来调用AWS SDK。我们通过添加粗体行来实现这一点,如下所示:

从“react”导入react;;
导入样式表,文本,视图来自'react native';;
从“aws sdk/dist/aws sdk react native”导入aws;;
const mturk=新的aws.mturk({
地区:'US-EAST-1',,
端点:
https://mturk-requester-sandbox.us-east-1.amazonaws.com',,
凭证:新的AWS。凭证({
accesskeyid:'您的\u access \u key \u here',,
secret access key:'您的\秘密\访问\密钥\这里'
})
(});;
导出默认类app扩展react.component{

下一步,我们要添加一个构造函数,调用mturk getaccountBalance应用程序接口,以及一种只在加载应用程序后执行一次的方法(或在react和react本机术语中“mounted”)。添加线条用粗体下面是您的app.js文件:

从“react”导入react;;
导入样式表,文本,视图来自'react native';;
从“aws sdk/dist/aws sdk react native”导入aws;;
const mturk=新的aws.mturk({
地区:'US-EAST-1',,
端点:https://mturk-requester-sandbox.us-east-1.amazonaws.com',,
凭证:新的AWS。凭证({
accesskeyid:'您的\u access \u key \u here',,
secret access key:'您的\秘密\访问\密钥\这里'
})
(});;
导出默认类app扩展react.component{
建造师(道具){
超级(道具);;
这个状态={
平衡:“,,
};;
this.getAccountBalance=this.getAccountBalance.bind(this);;
this.componentdidmount=this.componentdidmount.bind(this);;
}


getAccountBalance()。{
mturk.getAccountBalance(函数(err,数据){
this.setState(余额:data.availablebalance);;
}结合(这个);;
}
组件didmount()。{
this.getAccountBalance();;
}


RelDead(){
返回(

打开app.js开始使用您的应用程序!!
您所做的更改将自动重新加载。
摇动手机打开开发者菜单。
这是一个显示代码重新加载的占位符。
您的mturk余额是$this.state.balance_

;;
}
}
const styles=样式表。创建({
容器:{
Flex:1,,
背景色:“fff”,,
Alignitems:'居中',,
justifycontent:'中心',,
},
(});;

现在,重新加载应用程序时,您应该看到以下内容:

恭喜!几分钟后,您已经成功安装了react native,创建了自己的移动应用程序,并使用您的应用程序成功调用mturk请求程序API。

包扎

今天,我们刚刚触及了react native和mturk请求程序api可能存在的问题。在以后的教程中,我们将在此基础上向读者展示如何使用这些强大的工具和框架做更高级的事情。与此同时,通过访问mturk api文档,您可以了解有关mturk api的更多信息。在这里.

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