Contents Menu Expand
Logo

Choose your framework or language

Web (React, Angular, etc.) Objective-C Swift Kotlin Java Flutter Ionic React Native
Go to docs
Logo
Logo

Introduction

  • Get started
  • How Alan works
    • Alan basics
    • Alan infrastructure
    • Deployment options
    • Voice processing
  • Alan Studio
    • Alan projects
    • Voice scripts
      • Managing scripts
      • Exporting and importing scripts
      • Sharing and keeping scripts in GitHub
      • Using shortcuts
      • Changing the theme and font size
      • Viewing the script flowchart
    • Versions and environments
    • Testing and debugging
      • Debugging Chat
      • Tools to simulate in-app behavior
      • Test View
      • Alan Studio logs
      • In-app testing
    • Alan Playground
    • Voice analytics
      • Projects dashboard
      • Analytics View
    • Popup editor
    • Billing and subscriptions
  • Alan button
    • Customizing the in-app assistant
    • Setting up cohorts
    • Starting and stopping dialog sessions
  • Supported platforms
  • Recent Alan Platform updates

Server API

  • Script concepts
    • Commands and responses
      • Intent matching
      • Voice settings
    • Patterns
    • Slots
      • User-defined slots (static)
      • Dynamic slots
      • Regex slots
      • Predefined slots
    • Contexts
    • Built-in JavaScript libraries
    • Predefined script objects
    • In-app assistant lifecycle
    • Error handling and re-prompts
    • Alan button popups
  • Sending data from the app
    • authData
    • Visual state
    • Project API
  • User data
    • User events
    • Client object
  • Q&A virtual assistant
  • API reference

Integration

  • Integration overview
  • Web frameworks
    • React
    • Angular
    • Vue
    • Ember
    • JavaScript
    • Electron
    • Cross-platform solutions
    • Server-side rendering
  • iOS
  • Android
  • Cross-platform frameworks
    • Flutter
    • Ionic
      • Ionic React
      • Ionic Angular
      • Ionic Vue
      • iOS and Android deployment
      • Communication between components
      • Troubleshooting
    • React Native
    • Apache Cordova

Alan SDK toolkit

  • Client API methods
  • Alan handlers
    • onCommand handler
    • onButtonState handler
    • onConnectionStatus handler
    • onEvent handler

Samples & Tutorials

  • How-tos
  • Tutorials
    • Web
      • Building a voice assistant for web
      • Creating a voice-enabled food delivery app: complete tutorial
        • Step 1: Create a web app
        • Step 2: Create a voice assistant
        • Step 3: Integrate Alan with the app
        • Step 4: Add a voice command
        • Step 5: Specify options and alternatives
        • Step 6: Pick out important data with slots
        • Step 7: Add several items
        • Step 8: Send a command to display items in the cart
        • Step 9: Use slot labels to display the order
        • Step 10: Remove items with voice
        • Step 11: Highlight named items
        • Step 12: Add the checkout context
        • Step 13: Get the delivery time
        • Step 14: Capture a comment
        • Step 15: Populate fields with the delivery details
        • Step 16: Make an API call to get ingredients
        • Step 17: Get the app visual context
        • Step 18: Get the balance
        • Step 19: Let Alan start the dialog
        • Step 20: Show a popup next to the Alan button
      • Using dynamic slots in patterns
      • Making a Web API call from the voice script
    • Web frameworks
      • Building a voice assistant for a React app
      • Building a voice assistant for an Angular app
      • Building a voice assistant for a Vue app
      • Building a voice assistant for an Ember app
      • Building a voice assistant for an Electron app
    • iOS
      • Building a voice assistant for an iOS app
      • Navigating between views
      • Passing the app state to the voice script
      • Highlighing items with voice
      • Triggering voice script actions without commands
      • Playing a greeting in an app
    • Android
      • Building a voice assistant for an Android Java or Kotlin app
      • Navigating in an Android app with voice (Kotlin)
      • Passing the app state to the voice script (Kotlin)
      • Sending data from the app to the voice script (Kotlin)
    • Flutter
      • Building a voice assistant for a Flutter app
      • Navigating between screens
      • Passing the app state to the voice script
      • Sending data to the voice script
    • Ionic
      • Building a voice assistant for an Ionic Angular app
      • Navigating between tabs (Ionic Angular)
      • Passing the app state to the voice script (Ionic Angular)
      • Building a voice assistant for an Ionic React app
      • Navigating between tabs (Ionic React)
    • React Native
      • Building a voice assistant for a React Native app
      • Sending commands to the app
      • Passing the app state to the voice script
      • Triggering activities without voice commands
      • Navigating between screens with voice
  • App showcase
    • Appointment scheduling app (React)
    • Shrine e-commerce app (Flutter)
    • Food delivery app (Ionic)
    • Order drinks app (Angular)
  • FAQ
  • Alan examples
    • Voice script examples
    • Integration code examples
  • Videos
    • Alan Studio videos
    • Alan Platform videos
    • Integration videos
    • Voice-enabled apps
    • Alan AI Udemy course (web app)
  • Alan cheat sheet
  • Multimodal design guidelines
    • Planning and drafting
    • Building the dialog
    • Testing
    • Preparing for rollout and releasing
    • Analyzing users' behavior

Navigating between tabs (Ionic Angular)¶

If your Ionic Angular app has several tabs, you can add voice commands to navigate through the app. In this tutorial, we will use a simple Ionic app with three tabs to demonstrate how to use voice commands to switch between them.

What you will learn¶

  • How to send commands from the voice script to an Ionic Angular app

  • How to set up the Alan event listener and handle commands on the app side

  • How to navigate between tabs in an Ionic Angular app with voice

What you will need¶

To go through this tutorial, make sure the following prerequisites are met:

  • You have completed the following tutorial: Building a voice assistant for an Ionic Angular app.

  • The environment for using the Ionic framework is properly set up. For details, see Ionic documentation.

We will use an example Ionic Angular app provided by Alan. You can also use your own app with several tabs. Make sure you have added the Alan button to the app as described in the previous tutorial.

Step 1: Add voice commands for navigation¶

We need to add a new command to the Alan script to navigate between tabs with voice. In Alan Studio, open the project and in the code editor, add the following intent:

Voice script¶
intent('Go to the $(ORDINAL) tab', p => {
    const availableTabs = new Set([1,2,3]);
    if (availableTabs.has(p.ORDINAL.number)) {
        p.play({command: 'navigation', tabNumber: p.ORDINAL.number});
        p.play(`Opening the ${p.ORDINAL.value} tab`);
    } else {
        p.play('The tab with this number is not found');
    }
});

The user can now give a voice command to go to a specific tab in the app. In the intent, we use the ORDINAL predefined slot. This slot allows us to catch the ordinal number in the user utterance. If the caught number is first, second or third, the navigation command and the tab number will be sent from the voice script to the app. If the voice command contains some other number, Alan will report that such tab is not found.

Step 2: Inject NavController¶

For this tutorial, we will use NavController to switch between the app tabs. We need to update the Ionic app to inject NavController.

  1. In the Ionic app, go to src/app and open the app.component.ts file.

  2. At the top of the file, add the following import statement:

    app.component.ts¶
    import { Platform, NavController } from '@ionic/angular';
    
  3. To constructor of the AppComponent class, add private navCtrl: NavController:

    app.component.ts¶
    export class AppComponent {
      constructor(
        private navCtrl: NavController
      ) {}
    }
    

    see full source

Step 3: Handle commands on the app side¶

Now, when we say, for example, Go to the second tab, Alan sends the navigation command and the 2 tab number to the app. We need to handle this command on the app side and make sure the app opens the necessary tab when the command is received. To do this, we will add a handler to the app.

  1. In the Ionic app, go to src/app and open the app.component.ts file.

  2. In the ngAfterViewInit() method, update the code for the Alan button event listener:

    app.component.ts¶
    ngAfterViewInit() {
      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 */
          this.navCtrl.navigateForward([`/tabs/tab${commandData.tabNumber}`]);
        }
      });
    }
    

Here is how it works: when our app receives the navigation command from the voice script, the navigateForward method is invoked to go to the tab having the number obtained from the user utterance.

You can test it: run the app, click the Alan button and say: Go to the second tab. The app will open the second tab. Then say: Go to the fifth tab. Alan will reply: The tab with this number is not found.

What’s next?¶

Have a look at the next tutorial: Passing the app state to the voice script (Ionic Angular).

Next
Passing the app state to the voice script (Ionic Angular)
Previous
Building a voice assistant for an Ionic Angular app
Alan® is a trademark of Alan AI, Inc. Handcrafted in Sunnyvale, California
Download Alan Playground to see how Conversational Voice Experiences can add value to your application or test your Alan Studio Projects.
On this page
  • Navigating between tabs (Ionic Angular)
    • What you will learn
    • What you will need
    • Step 1: Add voice commands for navigation
    • Step 2: Inject NavController
    • Step 3: Handle commands on the app side
    • What’s next?