В последних трех сообщениях в блоге (часть 1, часть 2, часть 3) мы поделились учебными пособиями, показывающими, как использовать инфраструктуру Javascript под названием React для быстрого и простого создания веб-приложений, использующих повторно используемые компоненты. В этих руководствах мы рассказали читателям о том, как начать работу с React и Amazon Mechanical Turk (MTurk), затем о том, как использовать сторонние компоненты, а затем о том, как анализировать некоторые из более сложных объектов ответа (например, значения ответов XML) из API MTurk. Эти три руководства охватывают множество строительных блоков, необходимых для создания полезных приложений Requester для MTurk.
Сегодня мы познакомим вас с React Native, фреймворком, который позволяет создавать собственные мобильные приложения (Android, iOS) с использованием Javascript и React. Мы познакомим вас с React Native, который во многом похож на React, и поможем запустить ваше первое собственное мобильное приложение, которое выполняет вызовы API MTurk. Давайте начнем.
Настройка React Native
Здесь на Facebook опубликовано отличное руководство по началу работы. Вы можете следовать их руководству или пройтись по нашему руководству ниже:
В прошлый раз мы установили пакет create-response-app с помощью npm. Это дало нам простой способ настроить и быстро запустить рабочий пример приложения с React. Для React Native есть пакет под названием create-react-native-app, который ведет себя аналогичным образом. И если вы следовали руководству по началу работы с React, значит, вы уже установили все остальные необходимые зависимости. Итак, давайте установим приложение create-react-native-app:
npm install -g create-react-native-appКогда все будет готово, вы должны увидеть такое сообщение:
$ npm install -g create-react-native-app /Users/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 /Users/johndoe/.nvm/versions/node/v6.10.3/lib └─┬ [email protected] ├─┬ [email protected] │ ├── [email protected] │ └── [email protected] └─┬ [email protected] └── [email protected] $
Вы также захотите взять свое мобильное устройство (в этом руководстве мы используем iPad Pro), чтобы протестировать свое мобильное приложение. Для этого вам нужно установить инструмент разработчика, например Expo, который вы можете найти в iTunes App Store здесь.
После того, как вы установили приложение create-react-native-app и инструмент разработчика Expo, можно приступать к созданию приложения React Native.
Привет, мир: заканчивается первое приложение React Native
На этом этапе вы установили все необходимое. Итак, приступим к созданию нашего первого приложения React Native. Для этого нам нужно выбрать каталог (мы будем работать в каталоге / Users / johndoe) из наших предыдущих руководств, и мы запустим следующую команду, чтобы создать наше первое приложение:
create-react-native-app mturk-mobile-app
Когда эта команда завершится, вы должны увидеть результат, похожий на следующий:
Success! Created mturk-mobile-app at /Users/johndoe/mturk-mobile-app Inside that directory, you can run several commands: npm start Starts the development server so you can open your app in the Expo app on your phone. npm run ios (Mac only, requires Xcode) Starts the development server and loads your app in an iOS simulator. npm run android (Requires Android build tools) Starts the development server and loads your app on a connected Android device or emulator. npm test Starts the test runner. npm run 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-mobile-app npm start Happy hacking!
Если вы выполните последний набор инструкций, приведенных выше (которые для вашего удобства выделены жирным шрифтом), то вам нужно будет ввести:
cd mturk-mobile-app npm start
Как только вы это сделаете, вы должны увидеть результат, похожий на следующий:
Теперь возьмите свое устройство iOS (iPhone или iPad) и откройте приложение Expo, которое вы установили ранее (если вы не устанавливали его, просто найдите Expo в App Store или нажмите здесь). Важно убедиться, что ваше устройство iOS находится в той же сети, что и компьютер, который вы используете для разработки с React Native.
После загрузки Expo экран вашего мобильного устройства должен выглядеть так:
Теперь нажмите «Сканировать QR-код» и поднесите камеру устройства к QR-коду, который появляется на экране вашего компьютера (см. Его пример на снимке экрана терминала выше). Экран вашего рабочего стола должен показать, что это «Сборка пакета Javascript», а ваше приложение Expo должно указать нечто подобное. Это может занять минуту или две.
После завершения загрузки приложение Expo должно показать следующее:
Хороший! Мы создали и успешно выполнили наше первое мобильное приложение. На экране выше вы заметите, что предлагается открыть App.js и начать работу над приложением. Давайте продолжим и сделаем это в следующем разделе руководства.
Начинаем работать над нашим приложением
Пока что мы настроили React Native и использовали его для создания и запуска нашего первого приложения «hello world». Впечатляет то, что мы сделали это без написания кода. А теперь самое интересное, когда мы приступаем к созданию нашего приложения.
Начнем с открытия App.js. Вы заметите, что это довольно просто:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<Text>Changes you make will automatically reload.</Text>
<Text>Shake your phone to open the developer menu.</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Давайте внесем изменения, добавив выделенную жирным шрифтом строку, показанную ниже:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<Text>Changes you make will automatically reload.</Text>
<Text>Shake your phone to open the developer menu.</Text>
<Text>This is a placeholder to show code reloading.</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Продолжайте и сохраните этот файл. Если вы внимательно посмотрите, то увидите, что на вашем iPad появляется счетчик, как только вы нажмете «Сохранить», а через несколько секунд текст на экране обновится, чтобы отобразить последний код. Довольно мощно, правда? Вы только что внесли изменения в свое приложение.
Работа с MTurk API
Как и в предыдущих руководствах, нам потребуется установить MTurk SDK для Javascript. Мы установили его в каталоге нашего веб-приложения React в предыдущем руководстве, и для его установки здесь для React Native требуется, чтобы мы запускали ту же команду из каталога приложения React Native (/ Users / johndoe / mturk-mobile-app):
npm install aws-sdk
После установки вы должны увидеть следующий результат:
$ npm install aws-sdk [email protected] /Users/johndoe/mturk-mobile-app └─┬ [email protected] ├─┬ [email protected] │ ├── [email protected] │ └── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├─┬ [email protected] │ └── [email protected] ├── [email protected] ├─┬ [email protected] │ └── [email protected] └── [email protected]
Затем вам нужно добавить строку, показанную полужирным шрифтом ниже, в файл App.js, чтобы импортировать aws-sdk:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import AWS from 'aws-sdk/dist/aws-sdk-react-native';
export default class App extends React.Component {
...
После изменения этой строки кода вы можете получить сообщение об ошибке на Expo. Это нормально. Просто нажмите Ctrl-C на экране, на котором отображается ваш QR-код, и введите «npm start», чтобы начать этот процесс снова. После загрузки резервной копии вы сможете отсканировать QR-код (или нажать «Перезагрузить» в приложении Expo), чтобы загрузить резервную копию приложения.
После перезагрузки приложения ничего не должно измениться (поскольку мы просто импортировали AWS SDK, но фактически не изменили никаких выходных данных).
Затем мы хотим настроить наши учетные данные для вызова AWS SDK. Мы делаем это, добавляя выделенные жирным шрифтом строки, показанные ниже:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import AWS from 'aws-sdk/dist/aws-sdk-react-native ';
const mturk = new AWS.MTurk({
region: 'us-east-1',
endpoint: 'https://mturk-requester-sandbox.us-east-1.amazonaws.com',
credentials: new AWS.Credentials({
accessKeyId: 'YOUR_ACCESS_KEY_HERE',
secretAccessKey: 'YOUR_SECRET_ACCESS_KEY_HERE'
})
});
export default class App extends React.Component {
...
Затем мы собираемся добавить конструктор, метод для вызова MTurk GetAccountBalance API и метод, который будет выполняться только один раз после загрузки приложения (или монтирования в терминологии React и React Native). Добавьте строки, выделенные жирным шрифтом ниже, в файл App.js:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import AWS from 'aws-sdk/dist/aws-sdk-react-native';
const mturk = new AWS.MTurk({
region: 'us-east-1',
endpoint: 'https://mturk-requester-sandbox.us-east-1.amazonaws.com',
credentials: new AWS.Credentials({
accessKeyId: 'YOUR_ACCESS_KEY_HERE',
secretAccessKey: 'YOUR_SECRET_ACCESS_KEY_HERE'
})
});
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
balance: "",
};
this.getAccountBalance = this.getAccountBalance.bind(this);
this.componentDidMount = this.componentDidMount.bind(this);
}
getAccountBalance() {
mturk.getAccountBalance(function (err, data) {
this.setState({ balance: data.AvailableBalance });
}.bind(this));
}
componentDidMount() {
this.getAccountBalance();
}
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<Text>Changes you make will automatically reload.</Text>
<Text>Shake your phone to open the developer menu.</Text>
<Text>This is a placeholder to show code reloading.</Text>
<Text>Your MTurk balance is ${this.state.balance}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Теперь, когда вы перезагрузите приложение, вы должны увидеть следующее:
Поздравляю! Всего за несколько минут вы успешно установили React Native, создали собственное мобильное приложение и использовали свое приложение для успешного вызова API MTurk Requester.
Подведение итогов
Сегодня мы лишь поверхностно рассмотрели возможности React Native и MTurk Requester API. В будущих уроках мы будем опираться на это, чтобы показать читателям, как делать еще более сложные вещи с помощью этих мощных инструментов и фреймворков. А пока вы можете узнать больше о MTurk API, обратившись к документации по MTurk API здесь.
Надеемся, вам понравился сегодняшний урок. Если у вас есть вопросы, задайте их на нашем форуме MTurk. Чтобы стать инициатором запроса, зарегистрируйтесь здесь. Хотите внести свой вклад в качестве клиента Worker? Начни здесь.
