Sending commands to the app

In addition to giving simple voice commands, while interacting with the voice assistant built with Alan AI, users can perform actions in the app with voice. For example, they can give commands to navigate to another screen, select an item in the list, enable or disable options. To achieve this, we need to send commands from the voice script to the app and handle them on the app side.

In this tutorial, we will use a simple counter example to see how command handling works. The app users will be able to increment the counter with voice.

What you will learn

  • How to perform actions in the app with voice

  • How to send commands from the voice script to the app

What you will need

Step 1. Add the counter to the app

  1. First, we need to add the counter to the app. Update the App.js file to the following:

    import React, { useState } from 'react';
    import { View, Text, Button, StyleSheet } from 'react-native';
    
    const App = () => {
      const [count, setCount] = useState(0);
    
      incrementCount = () => {
        setCount(count + 1);
      }
    
      return (
        <View style={styles.container}>
          <Text>You clicked {count} times</Text>
          <Button
            onPress={() => {this.incrementCount()}}
            title="Click me!"
          />
        </View>
      );
    };
    
    // React Native Styles
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
      }
    });
    
    export default App;
    
  2. Add the Alan button as described in the previous tutorial:

    • Import AlanView

    • Add the Alan button to the view

You can test it: run the app, tap the Alan button and give one of the commands available in the voice script.

../../../_images/react-native-counter.png

Step 2. Add a voice command to the script

To send a command to increment the counter to the app, add the following intent to the voice script:

intent('Increment the counter', p => {
    p.play('Incrementing the counter');
    p.play({command:'setCounter'});
});

Here, we have two p.play() functions:

  • One to play a response to the user

  • The other one to send the setCounter command to the client app. In this function, we have specified a JSON object with the name of the command to be sent.

You can try the command in the Debugging Chat. Notice that together with the answer, Alan now sends the command we have defined.

Step 3. Handle commands in the app

We need to handle this command on the app side. To do this, we will add the Alan’s onCommand handler to the app.

  1. In the App.js file, add the import statement for the Alan events listener:

    ...
    import { NativeEventEmitter, NativeModules } from 'react-native';
    ...
    
  2. Create a new NativeEventEmitter object:

    const App = () => {
      ..
      const { AlanEventEmitter } = NativeModules;
      const alanEventEmitter = new NativeEventEmitter(AlanEventEmitter);
      ...
    }
    
  3. Update the following import statement to add the useEffect hook:

    ...
    import { useState, useEffect } from 'react';
    ...
    
  4. And add the useEffect hook to subscribe to the voice script events:

    const App = () => {
      ..
      useEffect(() => {
        alanEventEmitter.addListener('onCommand', (data) => {
          if (data.command == 'setCounter') {
            incrementCount();
          }
        })
      }, []);
      ...
    }
    

Now, when the app receives the setCounter command, the incrementCount() function will be invoked, and the counter will be incremented.

You can try it: in the app, tap the Alan button and say: Increment the counter.

What’s next?

Have a look at the next tutorial: Passing the app state to the voice script.