В прошлом году Amazon Mechanical Turk (MTurk) представила возможность использовать интерфейс прикладного программирования (API) MTurk из комплекта разработки программного обеспечения AWS (SDK) и Интерфейс командной строки (CLI). Это позволяет запрашивающим использовать MTurk API из любого из девяти SDK AWS, которые уже широко используются в сообществе AWS. Сюда входит поддержка таких языков, как Python, Node.js, Javascript, Java, .NET (включая C # и F #), Ruby, Go, PHP и C ++ . Это делает MTurk API более простым в использовании и более доступным, чем когда-либо.
Благодаря поддержке такого количества языков и платформ API MTurk может работать рука об руку со многими сторонними фреймворками, инструментами и уровнями абстракции. В сегодняшнем руководстве мы покажем вам, как заставить MTurk работать с популярным фреймворком для создания пользовательских интерфейсов: React.
Во-первых, введение в React
React - это фреймворк с открытым исходным кодом, поддерживаемый Facebook, Instagram и сообществом компаний и разработчиков. React помогает разработчикам создавать пользовательские интерфейсы (UI) и упрощает управление взаимодействиями UI. React основан на идее «компонентов», которые рендеринг и обновляются эффективно и автоматически фреймворком в ответ на изменения в данных.
Вы можете узнать больше о React по адресу: https://reactjs.org/
Начиная
Если вы предпочитаете сразу же начать играть с React, не устанавливая и не настраивая ничего на своем компьютере, вам доступны несколько вариантов: https://reactjs.org/docs/try-react.html. Вы можете редактировать и запускать код прямо в браузере или загрузить один HTML-файл, который включает все необходимое для запуска React без каких-либо локальных зависимостей. Если вы просто хотите надуть шины, то разумно начать здесь.
Но в сегодняшнем руководстве мы продолжим и установим React, его зависимости и скрипт под названием «create-react-app», который позволяет сразу же начать работу с работающим приложением React прямо из коробки.
Установка React и его зависимостей
Вот краткое изложение того, что нам нужно установить:
- (Необязательно, но настоятельно рекомендуется). Мы предлагаем вам установить Node Version Manager (или сокращенно nvm), который упростит использование нескольких версий Node.js на вашем компьютере и позволит удобно переключаться между ними. В Интернете есть несколько хороших руководств, которые расскажут, как их установить. Вот учебник по установке nvm в Windows. Для установки на OS X мы рекомендуем использовать Homebrew, что обычно можно сделать с помощью одной команды, показанной на веб-сайте Homebrew. После установки Homebrew просто введите
brew update brew install nvm
- Затем вам нужно установить Node.js на свой компьютер. В этом руководстве мы будем использовать Node.js версии 6.10.3. Чтобы установить это, просто введите.
nvm install 6.10.3
- Теперь мы собираемся установить пакет create-react-app, чтобы упростить создание нашего первого приложения React. Для этого просто запустите
npm install -g create-react-app
Вот и все. Мы установили все необходимое, чтобы начать работу с нашим первым приложением React. Вперед!
Создание вашего первого приложения React
Начните с перехода в папку / каталог, в котором вы планируете разработать новое приложение. В этом каталоге мы создадим новое приложение под названием mturk-app. Для этого выполните следующую команду:
create-react-app mturk-app
По мере выполнения вы увидите много результатов. Когда он закончится, он поделится некоторыми полезными инструкциями. К ним относятся:
Success! Created mturk-app at /Users/johndoe/mturk-app Inside that directory, you can run several commands: yarn start Starts the development server. yarn build Bundles the app into static files for production. yarn test Starts the test runner. yarn eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd mturk-app yarn start Happy hacking!
Теперь, если вы перейдете в этот каталог, вы сможете сразу же запустить React. Вот команды:
cd mturk-app/ npm start
Через несколько секунд ваша система должна автоматически открыть окно браузера с адресом http: // localhost: 3000 / и отобразить веб-страницу, которая выглядит следующим образом:
Вы заметите, что на приведенном выше снимке экрана мы открыли Инструменты разработчика Chrome (вы можете получить доступ к ним в Меню | Дополнительные инструменты | Инструменты разработчика или набрав «⌘ + option + I» в Mac OS) и перешли на вкладку «Консоль». . Это хорошая практика, поскольку в React могут быть предупреждения или сообщения об ошибках, которые не будут видны, если мы не просматриваем эту вкладку. Это также полезное место, где мы можем разместить свои собственные полезные сообщения на случай, если, возможно, мы захотим использовать его для отладки нашего кода.
Теперь давайте внесем наши первые изменения в это новое приложение React. Для этого откройте src / App.js, как это предлагается на домашней странице вашего приложения. Мы изменим строку 11 с:
<h1 className="App-title">Welcome to React</h1>
to
<h1 className="App-title">Welcome to my MTurk application</h1>
и сохраните файл. Вы сразу заметите, что что-то происходит, даже не предпринимая никаких действий. Ваше приложение перестраивается в фоновом режиме, а веб-страница перезагружается. Как только вы перейдете в свой браузер, вы должны заметить, что он уже перезагрузился и теперь показывает следующее:
Мы создали и модифицировали наше первое приложение React. Хорошо сделано!
Совершаем ваш первый вызов MTurk API
Чтобы вызвать MTurk из React, нам нужно сделать несколько вещей: (1) установить AWS SDK и указать React, где его найти, (2) настроить AWS SDK с нашими учетными данными AWS, а затем (3) сделать Мы хотим вызвать MTurk API и обработать результаты. Мы рассмотрим каждый из них ниже.
Сначала, чтобы установить AWS SDK, мы введем следующую команду в нашем каталоге mturk-app:
npm install aws-sdk
Далее расскажем React об AWS SDK, мы его импортируем. Добавьте строку, выделенную жирным шрифтом ниже, в файл App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import AWS from 'aws-sdk';
class App extends Component {
render() {
Как и в прошлый раз, когда мы редактировали код, вы заметите, что веб-страница снова перезагрузилась. На этот раз он напечатал предупреждающее сообщение в консоли, сообщая нам, что мы что-то импортировали, но не использовали. Ничего страшного, так как мы скоро им воспользуемся.
Затем мы добавим код в App.js для отображения баланса нашей учетной записи MTurk. Во-первых, нам нужно создать переменную состояния в компоненте приложения, чтобы хранить баланс, который мы планируем показать пользователю. Сначала эта переменная состояния будет просто указывать на то, что мы еще не загрузили баланс. Но как только мы получим баланс из MTurk, он будет перезаписан балансом учетной записи пользователя. Во-первых, давайте настроим переменную состояния и выведем ее. Добавьте в свой код строки, выделенные жирным шрифтом, показанные ниже:
class App extends Component {
constructor(props) {
super(props);
this.state = {
mturkAccountBalance: null
}
}
render() {
var accountBalanceToDisplay = "loading...";
if (this.state.mturkAccountBalance != null) {
accountBalanceToDisplay = this.state.mturkAccountBalance
}
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to my MTurk application</h1>
</header>
<p className="App-intro">
Your account balance is {accountBalanceToDisplay}
</p>
</div>
);
}
}
Ваше приложение должно быть перезагружено, чтобы отобразить следующее:
Теперь мы настроим AWS SDK с нашими учетными данными AWS, а затем вызовем API MTurk, который нам нужен, и обработаем результаты. Для этого добавьте в код следующие строки, выделенные жирным шрифтом:
class App extends Component {
constructor(props) {
super(props);
this.state = {
mturkAccountBalance: null
}
}
componentDidMount() {
this.getAccountBalance();
}
getAccountBalance() {
AWS.config.update({
"accessKeyId": "YOUR_ACCESS_KEY_HERE",
"secretAccessKey": "YOUR_SECRET_KEY_HERE",
"region": "us-east-1"
});
const mTurkClient = new AWS.MTurk();
mTurkClient.getAccountBalance((err, data) => {
if (err) {
console.warn("Error making the mTurk API call:", err);
} else {
// The call was a success
const balance = `$${data.AvailableBalance}`;
this.setState({ mturkAccountBalance: balance });
}
})
}
render() {
var accountBalanceToDisplay = "loading...";
if (this.state.mturkAccountBalance != null) {
accountBalanceToDisplay = this.state.mturkAccountBalance
}
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to my MTurk application</h1>
</header>
<p className="App-intro">
Your MTurk Requester account balance is {accountBalanceToDisplay}
</p>
</div>
);
}
}
Теперь, когда вы перезагрузите страницу, вы должны увидеть свой баланс:
Если вы предпочитаете запускать это в песочнице, просто добавьте следующую строку кода, выделенную жирным шрифтом в файл App.js:
AWS.config.update({
"accessKeyId": "YOUR_ACCESS_KEY_HERE",
"secretAccessKey": "YOUR_SECRET_KEY_HERE",
"region": "us-east-1",
"endpoint": "https://mturk-requester-sandbox.us-east-1.amazonaws.com"
});
И вы должны увидеть, что баланс в размере 10 000 долларов появится, когда приложение перезагрузится в браузере:
Вот и все! Вы успешно создали свое первое приложение React и успешно обратились к MTurk API. Прекрасная работа!
Подведение итогов
В этом руководстве мы проделали большую настройку, но мы коснулись лишь поверхности того, что возможно с React и MTurk API. В будущих уроках мы будем опираться на это, чтобы показать, как мы можем использовать более продвинутые методы MTurk API и как мы можем получить больше преимуществ от таких компонентов React, как таблицы, графики, формы, библиотеки анимации и многое другое. Вы можете узнать больше о MTurk API, обратившись к документации по MTurk API здесь.
Надеемся, вам понравился сегодняшний урок. Если у вас есть вопросы, задайте их на нашем форуме MTurk. Чтобы стать инициатором запроса, зарегистрируйтесь здесь. Хотите внести свой вклад в качестве клиента Worker? Начни здесь.
