Tutorial: More on the MTurk API and React Native for building mobile apps (Part 2)

In February, we posted a three part series (part 1, part 2, part 3) about the React Javascript Library, an open-source framework maintained by Facebook, Instagram, and a community of businesses and developers. React helps developers build user interfaces (UIs) and make it easy to manage UI interactions.

Last week, we introduced readers to React Native, a framework that lets you build native mobile applications (Android, iOS) using Javascript and React. We built our first mobile application that called the Amazon Mechanical Turk (MTurk) Application Programming Interface (API) to get our account balance.

Today, we’ll build on our React Native mobile app by showing how to use third-party components. We’ll call MTurk methods that retrieve results like ListHITs and display them in our app using these components.

Getting started

We’ll be building from where we left off from last week’s tutorial. If you need to get caught up, you can access that tutorial here.

We’ll use a third-party component library called React Native Elements. To install it, navigate to your mturk-mobile-app directory, and type the following command at the terminal prompt:

npm install react-native-elements --save

Once complete, you should see output that looks similar to the following:

$ npm install react-native-elements --save
...
mturk-mobile-app@0.1.0 /Users/johndoe/mturk-mobile-app
└─┬ react-native-elements@0.19.0
├── lodash.isempty@4.4.0
├── lodash.times@4.3.2
└─┬ opencollective@1.0.3
├─┬ babel-polyfill@6.23.0
│ └── regenerator-runtime@0.10.5
├─┬ chalk@1.1.3
│ ├── ansi-styles@2.2.1
│ ├─┬ strip-ansi@3.0.1
│ │ └── ansi-regex@2.1.1
│ └── supports-color@2.0.0
├─┬ inquirer@3.0.6
│ ├── ansi-escapes@1.4.0
│ └── rx@4.1.0
└── node-fetch@1.6.3

Then, open App.js and add the lines shown in bold below to your code:

import React from 'react';
import { StyleSheet, Text, View, FlatList } from 'react-native';
import AWS from 'aws-sdk/dist/aws-sdk-react-native';
import { ListItem, Header } from 'react-native-elements';

Note the addition of FlatList to the list on the second line above. We’ll need to add that, too, since we’ll be using the recently-introduced FlatList component into our app in a moment.

That’s it for dependencies and configuration. Now to call ListHITs and add the results to our React Native app’s state.

Calling ListHITs in the MTurk API

Next up, we’ll call ListHITs once our mobile app component mounts. This will be familiar for two reasons: first, calling MTurk APIs when our mobile app mounts is exactly what we did in the last tutorial to get our MTurk Account Balance. We’ll be doing the same thing here, except for ListHITs. Second, it should be familiar because this is the same pattern we applied in the same tutorial about React (instead of React Native). In that tutorial, we introduced a method call getMTurkHITs that would call ListHITs in the MTurk API, and store the results in the React state. We’re going to do the same thing here, but for React Native. You should see a lot of familiar concepts here.

Begin by adding the following code in bold to your App.js file:

constructor(props) {
super(props);
this.state = {
balance: "",
mturkHITs: []
};
this.getAccountBalance = this.getAccountBalance.bind(this);
this.componentDidMount = this.componentDidMount.bind(this);
this.getMTurkHITs = this.getMTurkHITs.bind(this);
}
getAccountBalance() {
mturk.getAccountBalance(function (err, data) {
this.setState({ balance: data.AvailableBalance });
}.bind(this));
}

getMTurkHITs() {
mturk.listHITs({ MaxResults: 100 }, (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 });
}
})
}

componentDidMount() {
this.getAccountBalance();
this.getMTurkHITs();
}
render() {
return (
...

As mentioned above, this code should look very familiar if you followed along in the tutorial about React (for web) because the concepts are, for the most part, identical.

By adding the lines above, we’ve made a call to MTurk ListHITs. We’ve stored the results from that call into a variable named mturkHITs in our React Native state.

Next, we’re going to change our render() method to actually display the results of the HITs we just fetched in a scrollable list. That should make our app start to come to life.

Listing the HITs in our app

We’ve made some pretty big changes to our render() method below, so you may want to replace the entire thing if you’re building off of the previous React Native tutorial.

render() {
return (
<View>
<Header
leftComponent={{ icon: 'menu', color: '#fff' }}
centerComponent={{
text: `My MTurk HITs`,
style: { color: '#fff' } }}
rightComponent={<View>
<Text style={styles.balance}>Balance:</Text>
<Text style={styles.balance}>
${this.state.balance}
</Text>
</View>}
/>
<FlatList
data={this.state.mturkHITs}
renderItem={({item}) =>
<ListItem key={item.HITId} title={item.HITId} />
}
/>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
balance: {
color: '#999'
}

});

Note that just before the line const styles = Stylesheet.create({ we have the closing } for our entire component. Be careful not to wind up with duplicate } closing tags when you replace your render() method with the code above.

Now, in our render code, we’ve done a few things. We’ve added a Header that will show a hamburger on the left, a text title in the middle, and will display our balance on the right (this is the same balance we fetch in the previous React Native tutorial).

We also added a FlatList component, and handed it the mturkHITs array from our React Native state. We told FlatList to render a ListItem component (from the react-native-elements third-party component library) for each item in the mturkHITs array. When we refresh our app we should see something that looks like the following:

We can make adjustments to display more detail for each HIT by changing the ListItem line in our render() method from:

<ListItem key={item.HITId} title={item.HITId} />

to this:

<ListItem
key={item.HITId}
title={item.Title}
subtitle={`${item.HITId}\nStatus: ${item.HITStatus}, Assignments: ${item.MaxAssignments}`}
subtitleNumberOfLines={2}
/>

When your app reloads, it should look something like this:

Wrapping up

Today, we went a step further to help readers understand what’s possible with React Native and the MTurk Requester API. In future tutorials, we’ll continue to build on this to do even more advanced things with these powerful tools and frameworks. In the meantime, you can learn more about the MTurk API by accessing the MTurk API documentation here.

We hope you enjoyed today’s tutorial. If you have any questions, please post a question to our MTurk forums. To become a Requester, sign up here. Want to contribute as a Worker customer? Get started here.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.

Responses
The author has chosen not to show responses on this story. You can still respond by clicking the response bubble.