Construct a Not Hotdog clone with React Native by Aman Mittal

Should you’re a fan of HBO’s Silicon Valley, you may keep in mind once they launched an actual AI-powered cell app that classifies hotdogs from a given picture (or not). Utilizing Google’s Imaginative and prescient API, let’s attempt to recreate a working mannequin of the appliance in React Native.

Google’s Imaginative and prescient API is a machine studying instrument that classifies particulars from a picture supplied as an enter. The method of those classifications relies on hundreds of various classes which might be included in pre-trained API fashions. The Imaginative and prescient API allows entry to those pre-trained fashions through a REST API.

🔗

🔗

• Stipulations
• Setup Firebase Venture
• Combine Firebase SDK with React Native app
• Generate a Google Imaginative and prescient API Key
• Setting Permissions for Digicam & Digicam Roll
• Create a Header part
• Including an Overlay Spinner
• Entry Digicam and Digicam Roll
• Add performance to find out a Sizzling canine
• Show closing outcomes
• Conclusion

🔗

To comply with this tutorial, please ensure you have the next put in in your native improvement setting and have entry to the providers talked about under:

🔗

On this part, allow us to arrange a brand new Firebase venture. In case you are already aware of the method and know methods to get a config keys from a Firebase venture, you possibly can skip this step.

Go to Firebase and sign-in together with your Google ID. As soon as signed in, click on on a brand new venture and enter a reputation. Lastly, hit the Create venture button.

After creating the venture and being redirected to the dashboard display screen, on the left facet menu, click on the settings icon, after which go to Venture settings.

The entire the firebaseConfig object, as proven above, is required to combine Firebase with a React Native or Expo app. Save them someplace or ensure you know methods to navigate to this web page.

The following step is to setup Firebase storage guidelines corresponding to to permit to add picture recordsdata by way of the app. From the left-hand facet menu within the Firebase console, open Storage tab after which select Guidelines. Modify them as follows.

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      enable learn, write
    }
  }
}

Firebase setup is full.

🔗

To get began, create a brand new React Native venture. For this demonstration, allow us to use expo-cli, an superior instrument that helps to create React Native apps at a sooner fee. Open a terminal window, and run the next collection of instructions.

expo init not-hotdog-app
cd not-hotdog-app
yarn add firebase@6.0.1 expo-permissions
expo-image-picker uuid react-native-elements

Now that the venture is generated open the listing in your favourite textual content editor. Then create a brand new folder referred to as config and inside it, a brand new file referred to as Firebase.js. This file shall be answerable for integrating Firebase with the Expo app.

1import * as firebase from 'firebase';
2
3const firebaseConfig = {
4  apiKey: 'XXXX',
5  authDomain: 'XXXX',
6  databaseURL: 'XXXX',
7  projectId: 'XXXX',
8  storageBucket: 'XXXX',
9  messagingSenderId: 'XXXX',
10  appId: 'XXXX'
11};
12
13
14firebase.initializeApp(firebaseConfig);
15
16export default firebase;

All of the Xs are values of every key within the firebaseConfig object from the earlier part. This completes the step to combine a Firebase Internet SDK with an Expo app.

🔗

As soon as you’re signed in to Google Cloud Platform, you possibly can go to the Google Cloud Console, to create a brand new venture.

From the dropdown menu middle, choose a venture. Then click on the button New Venture within the display screen under. Discover you’ve already generated a Firebase venture, choose that from the record obtainable.

Proper now you’re on the display screen referred to as Dashboard contained in the console. From the highest left, click on on the menu button and a sidebar menu will pop up. Choose APIs & Providers > Dashboard.

On the Dashboard, choose the button Allow APIs and Providers.

Then seek for the Imaginative and prescient API and ensure to click on the button Allow.

Now, return to the Dashboard and go to Credentials to generate an API key. Click on the button Create Credentials and you’ll endure a small course of to generate the API key.

As soon as it’s achieved, save the API key in App.js file after all of the import statements.

1const VISION_API_KEY = 'XXXX';

The setup is full. Allow us to transfer to the subsequent part and begin constructing the appliance.

🔗

To set permissions in any Expo app, all you want is to make the most of an asynchronous methodology from the module expo-permissions. For this clone, there are two permissions that must be set. The required permissions are for Digicam and Digicam Roll (or Pictures of your machine).

Digicam roll is utilized in a case the place the consumer desires to add a picture. For iOS simulator devs, you can not entry the digital camera so in case you are not planning to make use of an actual machine till the top of this tutorial, however need to comply with alongside. It’s endorsed so as to add Digicam Roll performance.

Import the permissions module in App.js file.

1import * as Permissions from 'expo-permissions';

Subsequent step is to set an preliminary state that can management the View within the render methodology by figuring out whether or not the consumer has granted the permission to your app to make use of Digicam and Digicam roll or not.

1class App extends Part {
2  state = {
3    hasGrantedCameraPermission: false,
4    hasGrantedCameraRollPermission: false,
5  }

Subsequent, utilizing a lifecycle methodology componentDidMount(), outline a promise for every permission. Within the under snippet, you can find two capabilities cameraRollAccess() and cameraAccess() performing this operation. Respectively, every of those permission part has a permission sort:

• for Digicam Roll: Permissions.CAMERA_ROLL
• for Digicam: Permissions.CAMERA

1async componentDidMount() {
2    this.cameraRollAccess()
3    this.cameraAccess()
4  }
5
6  cameraRollAccess = async () => {
7    const { standing } = await Permissions.askAsync(Permissions.CAMERA_ROLL)
8
9    if (standing === 'granted') {
10      this.setState({ hasGrantedCameraRollPermission: true })
11    }
12  }
13
14  cameraAccess = async () => {
15    const { standing } = await Permissions.askAsync(Permissions.CAMERA)
16
17    if (standing === 'granted') {
18      this.setState({ hasGrantedCameraPermission: true })
19    }
20  }

Every of the permission elements returns a standing worth of granted or denied. In case of the permissions are granted, the worth of state variables hasGrantedCameraRollPermission and hasGrantedCameraPermission are each set to true. The strategy Permissions.askAsync() to immediate the consumer for the kind of permission.

Subsequent, go to the render methodology of the App part and add situation utilizing the two-state variables. If each are set to true, it should show the primary display screen of the appliance.

1 render() {
2    const {
3      hasGrantedCameraPermission,
4      hasGrantedCameraRollPermission,
5    } = this.state
6
7    if (
8      hasGrantedCameraPermission === false &&
9      hasGrantedCameraRollPermission === false
10    ) {
11      return (
12        <View type={{ flex: 1, marginTop: 100 }}>
13          <Textual content>No entry to Digicam or Gallery!</Textual content>
14        </View>
15      )
16    } else {
17      return (
18        <View type={kinds.container}>
19          {*/ Remainder of the content material within the subsequent part*/ }
20        </View>
21      )
22    }
23  }
24
25
26
27const kinds = StyleSheet.create({
28  container: {
29    flex: 1,
30    backgroundColor: '#fff'
31  }
32})

If both or each are usually not granted, the app will show the message No entry to Digicam or Gallery!, additionally as proven under.

When examined on an actual android machine, it did ask for permissions.

Equally, to make use of digital camera:

🔗

Utilizing react-native-elements UI library for React Native, allow us to rapidly create a helpful header that can maintain two buttons and the app’s title in textual content. The left button shall be to open the cellphone’s gallery or digital camera roll consisting of consumer pictures. The fitting button shall be to open entry the Digicam on an actual machine.

Import the Header part from the react-native-elements library.

1import { View, Textual content, StyleSheet, TouchableOpacity } from 'react-native';
2import { Header, Icon } from 'react-native-elements';

The UI library has a pre-defined part referred to as Header that you need to use instantly. This part accepts the icons on the left and proper facet. For the reason that app wants these icons to be clickable, use TouchableOpacity such that its prop could be later used to open the digital camera or the digital camera roll.

1<View type={kinds.container}>
2  <Header
3    statusBarProps={{ barStyle: 'light-content' }}
4    backgroundColor="black"
5    leftComponent={
6      <TouchableOpacity onPress={() => alert('quickly')}>
7        <Icon title="photo-album" shade="#fff" />
8      </TouchableOpacity>
9    }
10    centerComponent={{
11      textual content: 'Not Hotdog?',
12      type: { shade: '#fff', fontSize: 20, fontWeight: 'daring' }
13    }}
14    rightComponent={
15      <TouchableOpacity onPress={() => alert('quickly')}>
16        <Icon title="camera-alt" shade="#fff" />
17      </TouchableOpacity>
18    }
19  />
20</View>

The Header part additionally has a statusBarProps prop to vary the colour of the Standing bar and works cross-platform. It’s going to give the next output.

Each the icons are touchable, however proper now they don’t have an related handler methodology besides {that a} dummy alert message.

The react-native-elements library by default makes use of Materials Icons and has a peer dependency of react-native-vector-icons.

🔗

The following ingredient so as to add within the preliminary state object is importing with a price of false. This variable shall be used within the app to show an animated spinner every time a picture is being uploaded from the Digicam Roll or analyzed by the Imaginative and prescient API for the outcome.

1state = {
2  
3  importing: false
4};
5
6
7const {
8  hasGrantedCameraPermission,
9  hasGrantedCameraRollPermission,
10  importing
11} = this.state;

Create a brand new file inside elements/UploadingOverlay.js. This file goes to comprise a presentational part with the identical title because the filename. Utilizing ActivityIndicator from react-native you possibly can animate this part through the use of its prop referred to as animating.

1import React from 'react';
2import { ActivityIndicator, StyleSheet, View } from 'react-native';
3
4const UploadingOverlay = () => (
5  <View type={[StyleSheet.absoluteFill, styles.overlay]}>
6    <ActivityIndicator shade="#000" animating dimension="giant" />
7  </View>
8);
9
10const kinds = StyleSheet.create({
11  overlay: {
12    backgroundColor: 'rgba(255,255,255,0.9)',
13    alignItems: 'middle',
14    justifyContent: 'middle'
15  }
16});
17
18export default UploadingOverlay;

Including StyleSheet.absoluteFill to the type prop of the View part which holds the spinner, you possibly can create an overlay display screen. An overlay is only a display screen or a View by way of React Native that enables the present display screen to seem on prime of different screens. Utilizing the backgroundColor property, you possibly can add the opacity within the final after defining RBG values.

For instance, when asking permission to entry the Digicam, a dialog field appeared on the app display screen (as proven within the earlier part). Discover how the field was place on prime of the display screen within the background.

Now, return to App.js and add this part on the backside of the render() part, simply earlier than the foundation View part is ending. Don’t forget to import the part.

1import UploadingOverlay from './elements/UploadingOverlay';
2
3
4{
5  importing ? <UploadingOverlay /> : null;
6}

The above situation states that, if the worth of this.state.importing is true, it should present the overlay display screen. To try it out, briefly set the worth of importing within the state object to true.

An limitless spinner will proceed to seem. Set the worth of importing again to false earlier than continuing.

🔗

On this part, you will add the performance of accessing Digicam and Digicam Roll by defining three completely different handler capabilities in App part. Ensure you are contained in the file App.js. First, import the next assertion since this part goes to utilize Firebase’s storage and uuid module to create a novel referent to every picture.

1import firebase from './config/Firebase';
2import uuid from 'uuid';

Subsequent, modify the preliminary state of the thing so as to add the next for the ultimate time.

1state = {
2  hasGrantedCameraPermission: false,
3  hasGrantedCameraRollPermission: false,
4  importing: false,
5  picture: null,
6  googleResponse: false
7};

To allow each of those functionalities within the present app, allow us to leverage one other Expo module referred to as expo-image-picker. First, import the module after the remainder of the import statements.

1import * as ImagePicker from 'expo-image-picker';

Expo documentation has one of the best definition of what this module is used for. Have a look.

That is all you want proper now. Outline the primary operate, takePhoto that’s going to entry the cellphone’s digital camera to click on a photograph.

1takePhoto = async () => {
2  let pickerResult = await ImagePicker.launchCameraAsync({
3    allowsEditing: true,
4    facet: [4, 3]
5  });
6
7  this.handleImagePicked(pickerResult);
8};

The asynchronous methodology ImagePicker.launchCameraAsync() accepts two arguments:

• allowsEditing exhibits the UI to edit the picture after it’s clicked. Principally used to crop pictures.
• facet is an array to keep up a constant facet ratio if the allowsEditing is ready to true.

Equally, ImagePicker.launchImageLibraryAsync() is used with the identical set of arguments to entry Digicam roll.

1pickImage = async () => {
2  let pickerResult = await ImagePicker.launchImageLibraryAsync({
3    allowsEditing: true,
4    facet: [16, 9]
5  });
6
7  this.handleImagePicked(pickerResult);
8};

Each of those asynchronous capabilities, return the uri of the picture chosen (amongst different arguments which you could view within the official docs right here). Lastly, each of those strategies are calling one other callback handleImagePicked after their job is finished. This methodology accommodates the enterprise of logic of methods to deal with the picture after it’s picked from the digital camera roll or clicked.

1handleImagePicked = async pickerResult => {
2  strive {
3    this.setState({ importing: true });
4
5    if (!pickerResult.cancelled) {
6      uploadUrl = await uploadImageAsync(pickerResult.uri);
7      this.setState({ picture: uploadUrl });
8    }
9  } catch (e) {
10    console.log(e);
11    alert('Picture Add failed');
12  } lastly {
13    this.setState({ importing: false });
14  }
15};

Initially, set the state of importing to true. Then, if a picture is chosen, name the customized methodology uploadImageAsync (which shall be outlined on the finish of this part) and cross the URI of the picture chosen. This may even set the worth of the picture from the state object to the URL of the uploaded picture. Lastly, set the state of the importing within the lastly block again to false if the outcomes are constructive and the picture has uploaded with none errors.

The customized methodology uploadImageAsync needs to be outlined outdoors the App part. It’s going to add the picture by creating a novel picture ID or blob with the assistance of uuid. It makes use of xhr to make an Ajax name to ship a request to the Firebase storage to add the picture.

1async operate uploadImageAsync(uri) {
2  const blob = await new Promise((resolve, reject) => {
3    const xhr = new XMLHttpRequest();
4    xhr.onload = operate () {
5      resolve(xhr.response);
6    };
7    xhr.onerror = operate (e) {
8      console.log(e);
9      reject(new TypeError('Community request failed'));
10    };
11    xhr.responseType = 'blob';
12    xhr.open('GET', uri, true);
13    xhr.ship(null);
14  });
15
16  const ref = firebase.storage().ref().little one(uuid.v4());
17  const snapshot = await ref.put(blob);
18
19  blob.shut();
20
21  return await snapshot.ref.getDownloadURL();
22}

Now you possibly can add each the capabilities, pickImage and takePhoto as the worth of onPress props for the corresponding icons.

1<Header
2  statusBarProps={{ barStyle: 'light-content' }}
3  backgroundColor="#000"
4  leftComponent={
5    <TouchableOpacity onPress={this.pickImage}>
6      <Icon title="photo-album" shade="#fff" />
7    </TouchableOpacity>
8  }
9  centerComponent={{
10    textual content: 'Not Hotdog?',
11    type: kinds.headerCenter
12  }}
13  rightComponent={
14    <TouchableOpacity onPress={this.takePhoto}>
15      <Icon title="camera-alt" shade="#fff" />
16    </TouchableOpacity>
17  }
18/>

Right here is an instance of accessing Digicam roll.

🔗

As many of the app is now arrange, this part goes to be an attention-grabbing one. You’ll leverage using Google’s Imaginative and prescient API to research whether or not the picture supplied by the consumer is a scorching canine or not.

Contained in the App part, add a brand new methodology referred to as submitToGoogle. It will ship requests and talk with the API to fetch the outcome when a button is pressed by the consumer after the picture has been uploaded. Once more, whereas analyzing and fetching outcomes, this methodology goes to set the state variable importing to true. Then, it should ship the URI of the picture from the state object’s picture because the physique of the request.

Together with the URI, the kind of class you need to use can be outlined together with plenty of outcomes it may possibly fetch as a response. You’ll be able to change the worth of maxResults for the LABEL class. At present, the worth of the is ready to 7. There are different detection classes supplied by the Imaginative and prescient API different the one getting used under, LABEL_DETECTION, corresponding to a human face, emblem, landmark, textual content, and so forth.

1submitToGoogle = async () => {
2  strive {
3    this.setState({ importing: true });
4    let { picture } = this.state;
5    let physique = JSON.stringify({
6      requests: [
7        {
8          features: [{ type: 'LABEL_DETECTION', maxResults: 7 }],
9          picture: {
10            supply: {
11              imageUri: picture
12            }
13          }
14        }
15      ]
16    });
17    let response = await fetch(
18      `https://imaginative and prescient.googleapis.com/v1/pictures:annotate?key=${VISION_API_KEY}`,
19      {
20        headers: {
21          Settle for: 'software/json',
22          'Content material-Kind': 'software/json'
23        },
24        methodology: 'POST',
25        physique: physique
26      }
27    );
28    let responseJson = await response.json();
29    const getLabel = responseJson.responses[0].labelAnnotations.map(
30      obj => obj.description
31    );
32
33    let outcome =
34      getLabel.contains('Sizzling canine') ||
35      getLabel.contains('scorching canine') ||
36      getLabel.contains('Sizzling canine bun');
37
38    this.setState({
39      googleResponse: outcome,
40      importing: false
41    });
42  } catch (error) {
43    console.log(error);
44  }
45};

Within the above snippet, the result’s fetched in an array. Every array, within the present state of affairs, can have seven completely different objects. Utilizing JavaScript’s map allow us to extract the worth of description from every object. All you want is to detect whether or not the outline accommodates the phrase hotdog or not. That is achieved within the variable outcome. Lastly, the state of importing overlay is ready again to false, and the results of whether or not the uploaded picture accommodates a scorching canine or not goes to replace googleResponse as boolean.

On a facet notice, the Imaginative and prescient API makes use of HTTP Submit request as a REST API endpoint to carry out information evaluation on pictures you ship within the request. That is achieved through the URL https://imaginative and prescient.googleapis.com/v1/pictures:annotate. To authenticate every request, you want the API key. The physique of this POST request is in JSON format. For instance:

1{
2  "requests": [
3    {
4      "image": {
5        "content": "/9j/7QBEUGhvdG9...image contents...eYxxxzj/Coa6Bax//Z"
6      },
7      "features": [
8        {
9          "type": "LABEL_DETECTION",
10          "maxResults": 1
11        }
12      ]
13    }
14  ]
15}

🔗

Utilizing the boolean worth from googleResponse, the top result’s going to be output. The output shall be displayed utilizing renderImage.

1renderImage = () => {
2  let { picture, googleResponse } = this.state;
3  if (!picture) {
4    return (
5      <View type={kinds.renderImageContainer}>
6        <Button
7          buttonStyle={kinds.button}
8          onPress={() => this.submitToGoogle()}
9          title="Test"
10          titleStyle={kinds.buttonTitle}
11          disabled
12        />
13        <View type={kinds.imageContainer}>
14          <Textual content type={kinds.title}>Add a picture to confirm a hotdog!</Textual content>
15          <Textual content type={kinds.hotdogEmoji}>🌭</Textual content>
16        </View>
17      </View>
18    );
19  }
20  return (
21    <View type={kinds.renderImageContainer}>
22      <Button
23        buttonStyle={kinds.button}
24        onPress={() => this.submitToGoogle()}
25        title="Test"
26        titleStyle={kinds.buttonTitle}
27      />
28
29      <View type={kinds.imageContainer}>
30        <Picture supply={{ uri: picture }} type={kinds.imageDisplay} />
31      </View>
32
33      {googleResponse ? (
34        <Textual content type={kinds.hotdogEmoji}>🌭</Textual content>
35      ) : (
36        <Textual content type={kinds.hotdogEmoji}>❌</Textual content>
37      )}
38    </View>
39  );
40};

The Button part used above is from react-native-elements library. It will be disabled till no picture is chosen. On its prop onPress the deal with operate submitToGoogle is named. The second view shows the picture, and beneath it, an emoji is showcased whether or not the picture has the specified outcome or not. Do notice that by default the cross emoji shall be showcased because the default worth of googleResponse is ready to false when defining the preliminary state. Solely after clicking the button, the emoji displayed is the ultimate outcome.

Lastly, don’t forget so as to add renderImage inside App part’s render methodology, simply earlier than the UploadingOverlay part.

1
2{
3  this.renderImage();
4}
5{
6  importing ? <UploadingOverlay /> : null;
7}

Here’s a quick demo of how the app seems to be and works on an actual android machine utilizing Expo consumer to run the app.

Right here is full supply code for StyleSheet object.

1const kinds = StyleSheet.create({
2  container: {
3    flex: 1,
4    backgroundColor: '#cafafe'
5  },
6  headerCenter: {
7    shade: '#fff',
8    fontSize: 20,
9    fontWeight: 'daring'
10  },
11  renderImageContainer: {
12    marginTop: 20,
13    alignItems: 'middle'
14  },
15  button: {
16    backgroundColor: '#97caef',
17    borderRadius: 10,
18    width: 150,
19    peak: 50
20  },
21  buttonTitle: {
22    fontWeight: '600'
23  },
24  imageContainer: {
25    margin: 25,
26    alignItems: 'middle'
27  },
28  imageDisplay: {
29    width: 300,
30    peak: 300
31  },
32  title: {
33    fontSize: 36
34  },
35  hotdogEmoji: {
36    marginTop: 20,
37    fontSize: 90
38  }
39});
40
41export default App;

Should you go to the storage part in Firebase, you possibly can discover that every picture is saved with a reputation of base64 binary string.

🔗

By integrating Firebase storage and utilizing Google’s Imaginative and prescient API with React Native, you’ve accomplished this tutorial. The API is wonderful with limitless use circumstances. I hope you discovered a factor or two by studying this publish. The entire supply code for this app is out there at this Github repo. A few of the sources used on this publish:

Initially revealed at Heartbeat