В сообщении в блоге на прошлой неделе мы продемонстрировали, как начать работу с React, фреймворком с открытым исходным кодом, поддерживаемым Facebook, Instagram и сообществом компаний и разработчиков. React помогает разработчикам создавать пользовательские интерфейсы (UI) и упрощает управление взаимодействиями UI.
В учебном пособии на прошлой неделе рассказывалось, как все настроить, и он завершился успешным вызовом метода GetAccountBalance Amazon Mechanical Turk (MTurk) в интерфейсе прикладного программирования (API) MTurk.
На этой неделе мы будем опираться на это руководство, чтобы продемонстрировать, как выполнять более сложные вызовы API и как использовать другие компоненты реакции, чтобы помочь нам обработать эту информацию. На прошлой неделе мы упоминали, что:
React основан на идее «компонентов», которые рендеринг и обновляются эффективно и автоматически фреймворком в ответ на изменения в данных.
Сегодняшнее руководство должно начать демонстрировать мощь этих компонентов и способность фреймворка React реагировать на изменения в состоянии вашего приложения.
Звонок в ListHITs
В учебнике прошлой недели мы создали новое приложение React в папке:
/Users/johndoe/mturk-app
Вернемся в эту папку и отредактируем файл src / App.js. Мы собираемся добавить переменную для хранения нашего списка HIT из MTurk, а затем заполнить его, вызвав метод MTurk's ListHITs API.
Для начала добавим полужирную строку ниже в конструктор в нашем файле src / App.js:
constructor(props) {
super(props);
this.state = {
mturkAccountBalance: null,
mturkHITs: []
}
}
Затем давайте создадим совершенно новый метод, который будет получать доступ к вашим HIT из MTurk. Просто вырежьте и вставьте приведенный ниже код жирным шрифтом после конца метода getAccountBalance () или в любое другое место в определении класса App.
...
getMTurkHITs() {
AWS.config.update({
"accessKeyId": "YOUR_ACCESS_KEY_HERE",
"secretAccessKey": "YOUR_SECRET_KEY_HERE",
"region": "us-east-1"
});
const mTurkClient = new AWS.MTurk();
mTurkClient.listHITs((err, data) => {
if (err) {
console.warn("Error making the mTurk API call:", err);
} else {
// The call was a success
const hits = data.HITs;
this.setState({ mturkHITs: hits });
}
})
}
render() {
var accountBalanceToDisplay = "loading...";
...
Затем, чтобы вызвать этот метод, добавьте строку, выделенную жирным шрифтом, в свой метод componentDidMount:
componentDidMount() {
this.getAccountBalance();
this.getMTurkHITs();
}
Это вызовет ваше приложение React для получения баланса учетной записи MTurk (с помощью метода, который мы определили в последнем руководстве) и для получения ваших HIT (из метода, который вы только что добавили выше).
Наконец, чтобы увидеть этот метод в действии, добавьте полужирные строки ниже к вашему методу render ():
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}
<br/>
You have {this.state.mturkHITs.length} HIT(s).
</p>
</div>
);
}
Теперь, когда вы загрузите свое приложение, вы должны увидеть что-то вроде этого:
Хорошо сделано! Вы успешно позвонили в ListHITs.
Сделать еще один шаг
Вам удалось загрузить 10 HIT в массив, который хранится как переменная состояния в классе вашего приложения под названием mturkHITs. До сих пор мы отображали количество элементов в этом массиве. Это хорошо, но не особенно полезно. Что мы действительно хотели бы сделать, так это отображать HIT, включая их название, описание, сумму вознаграждения и, возможно, другие детали.
На этом этапе мы могли бы включить цикл for () в наш метод render () и отформатировать каждую строку с помощью таблицы HTML, div или другого элемента управления. Это было бы вполне приемлемо, и вы можете сделать это в React, если хотите.
Но где React действительно сияет, так это в вашей способности использовать уже существующие компоненты, в том числе те, которые вы создаете (чтобы вы могли «писать один раз, использовать часто») или те, которые вы используете у сторонних производителей.
Чтобы проиллюстрировать, как компонент может помочь, мы собираемся использовать сторонний компонент с открытым исходным кодом под названием react-table. Вы можете узнать об этом подробнее здесь: https://react-table.js.org/.
Начнем с установки этой библиотеки. Вы можете сделать это, набрав команду ниже из каталога / Users / johndoe / mturk-app, в который вы установили свое приложение React:
npm install react-table
Вы должны увидеть сообщение, которое выглядит примерно так:
$ npm install react-table [email protected] /Users/johndoe/mturk-app └─┬ [email protected] └── [email protected]
Затем мы сообщим нашему классу приложения, что мы хотим начать использовать библиотеку react-table. Мы сделаем это, добавив две строки, выделенные полужирным шрифтом ниже, в верхнюю часть нашего файла App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import AWS from 'aws-sdk';
import ReactTable from 'react-table';
import 'react-table/react-table.css';
class App extends Component {
...
Теперь мы готовы начать использовать react-table в нашем приложении.
Мы добавим следующий код (выделенный полужирным шрифтом) в начало метода render (), который будет определять столбцы, которые мы хотим отображать в нашей таблице:
render() {
var accountBalanceToDisplay = "loading...";
if (this.state.mturkAccountBalance != null) {
accountBalanceToDisplay = this.state.mturkAccountBalance
}
const reactTableColumns = [
{
Header: 'HIT Id',
accessor: 'HITId'
}, {
Header: 'Title',
accessor: 'Title'
}, {
Header: 'Reward Amount',
accessor: 'Reward',
Cell: props => <span>${props.value}</span>
}];
return (
<div className="App">
...
Затем, позже в нашем методе render (), мы добавим компонент для ReactTable. Именно здесь вы увидите, как мощь компонентов действительно вступает в игру:
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}
<br/>
You have {this.state.mturkHITs.length} HIT(s).
</p>
<ReactTable
data={this.state.mturkHITs}
columns={reactTableColumns}
defaultPageSize={10}
/>
</div>
);
Теперь, когда мы посмотрим на наше приложение, мы должны увидеть следующее:
Поздравляю! Вы использовали возможности компонентов React, чтобы ввести сторонний элемент управления таблицей в свое приложение React. Лучше всего то, что вы сделали это с помощью всего нескольких строк кода. Вы заметите, что в вашем элементе управления таблицей есть возможность сортировки прямо из коробки. И, сделав еще несколько изменений, вы можете добавить всевозможные возможности, такие как поиск, фильтр и другие столбцы из результатов API.
Стоит отметить, что вы можете применить те же подходы, которые мы использовали сегодня, для вызова и просмотра данных из множества операций MTurk API. Может быть, попробуйте сами с методом ListQualificationTypes или ListAssignmentsForHIT. Вы можете узнать больше о MTurk API, обратившись к документации по MTurk API здесь.
Подведение итогов
Надеемся, вам понравился сегодняшний урок. Если у вас есть вопросы, задайте их на нашем форуме MTurk. Чтобы стать инициатором запроса, зарегистрируйтесь здесь. Хотите внести свой вклад в качестве клиента Worker? Начни здесь.
