onCommand handler¶
Responsible for handling commands sent from the Alan voice script.
To accompany user’s utterances with activities in the app UI, you can send commands from the voice scripts to the client app. For example, once the user gives a voice command, another view or page can be opened in the app, a UI element can be selected on the screen and so on.
To send a command, use the play()
function in the voice script and pass a JSON object to it. The JSON object contains the command name and, optionally, arbitrary data to be provided to the app. To handle the command on the client side, set up the logic in the onCommand
handler in the app.
For details, see Sending commands to the app.
Examples¶
intent(`Go to the home page`, p => {
p.play({command: 'navigation', route: 'home'});
p.play(`Opening the home page...`);
});
alanBtn({
key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
onCommand: (commandData) => {
if (commandData.command === 'go:back') {
// Call client code that will react to the received command
}
},
});
self.button.onCommand = ^(NSDictionary *command) {
NSString* commandName = [command objectForKey:@"command"];
NSLog(@"%@", commandName);
};
self.button.onCommand = { command in
guard let commandName = command?["command"] as? String else {
return
}
print(commandName)
}
val alanCallback: AlanCallback = object : AlanCallback() {
/// Handle commands from Alan Studio
override fun onCommand(eventCommand: EventCommand) {
try {
val command = eventCommand.data
val commandName = command.getJSONObject("data").getString("command")
Log.d("AlanButton", "onCommand: commandName: $commandName")
} catch (e: JSONException) {
e.message?.let { Log.e("AlanButton", it) }
}
}
};
/// Register callbacks
alanButton?.registerCallback(alanCallback);
AlanCallback alanCallback = new AlanCallback() {
/// Handle commands from Alan Studio
@Override
public void onCommand(final EventCommand eventCommand) {
try {
JSONObject command = eventCommand.getData();
String commandName = command.getJSONObject("data").getString("command");
Log.d("AlanButton", "onCommand: commandName: " + commandName);
} catch (JSONException e) {
Log.e("AlanButton", e.getMessage());
}
}
};
/// Register callbacks
alanButton.registerCallback(alanCallback);
_MyHomePageState() {
/// Handle commands from Alan Studio
AlanVoice.onCommand.add((command) {
debugPrint("got new command ${command.toString()}");
});
}
Ionic Angular
this.alanBtnComponent.nativeElement.addEventListener('command', (data) => {
const commandData = (<CustomEvent>data).detail;
if (commandData.command === 'navigation') {
// call client code that will react to the received command
}
});
Ionic React
alanBtnComponent.current.addEventListener('command', (data: CustomEvent) => {
const commandData = data.detail;
if (commandData.command === 'navigation') {
// call client code that will react to the received command
}
});
Ionic Vue
<ion-content :fullscreen="true">
<alan-button v-on:command="command" alan-key="YOUR_KEY_FROM_ALAN_STUDIO_HERE" />
</ion-content>
export default defineComponent({
methods: {
command: function(data:any) {
console.info('Received command: ', data.detail);
}
},
});
Note
To define the onCommand
handler in Ionic Vue, use lowercase: v-on:command
. Otherwise the handler will not be working.
import { NativeEventEmitter, NativeModules } from 'react-native';
const { AlanManager, AlanEventEmitter } = NativeModules;
const alanEventEmitter = new NativeEventEmitter(AlanEventEmitter);
componentDidMount() {
// Handle commands from Alan Studio
alanEventEmitter.addListener('onCommand', (data) => {
console.log(`onCommand: ${JSON.stringify(data)}`);
});
}
componentWillUnmount() {
alanEventEmitter.removeAllListeners('onCommand');
}