Documentation

Powered by Algolia

Alan Ionic Framework

Available on Web, iOS, Android platforms.


In this tutorial we will show you how to add the Alan Button to the Ionic Application.

Quickstart

  1. We will use the Ionic pre-made app template, so first of all we need to install the Ionic CLI:

    $ npm install -g ionic

    For this tutorial we don't need the free Ionic Appflow SDK, so choose 'no' if the Ionic CLI asks you about it during its installation process.

    Install the free Ionic Appflow SDK and connect your app? (y/n)

  2. Create a template of the Ionic App

    $ ionic start myTestIonicAppWithAlanButton tabs
  3. Run the App:

    $ cd myTestIonicAppWithAlanButton
    $ ionic serve

By default, new tab will be opened and Ionic App will contain three tabs. Let's make sure that you see right UI.

  1. Add @alan-ai/cordova-plugin-alan-voice and @alan-ai/alan-button package to the App:

    $ npm install @alan-ai/cordova-plugin-alan-voice --save
    $ npm install @alan-ai/alan-button --save

    You need the @alan-ai/alan-button and @alan-ai/cordova-plugin-alan-voice packages (not the @alan-ai/alan-sdk-web package) because an Ionic app can be runned on mobile device with cordova and it requires special versions of the Alan Button.

  2. Allow to use custom HTML elements in your project by making the following changes:
  3. Include the CUSTOM_ELEMENTS_SCHEMA in the modules where you will use the components (in this example we will add it into the following files: app.module.ts and tabs.module.ts )

    // app.module.ts
    ...
    import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
    ...
    
    @NgModule({
    ...
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    ...
    })
    export class AppModule {}

    see full source

    // tabs.module.ts
    ...
    import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
    
    @NgModule({
    ...
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    ...
    })
    export class TabsPageModule {}

    see full source

  4. Import @alan-button component and call defineCustomElements(window) method from main.ts

    // main.ts file
    ...
    import {defineCustomElements as alanBtnDefineCustomElements} from '@alan-ai/alan-button/dist/loader';
    ...
    alanBtnDefineCustomElements(window);

    see full source

  5. Go to the Alan Studio and create a project there:
  6. Add the following script to the project and save the changes:
intent(`hi`, p => {
    p.play("Hi! I'm Alan. I hope you like this tutorial");
});

intent(`open $(ORDINAL) tab`, p => {
    const tabNumberMapping = {
        'first':'1',
        'second':'2',
        'third':'3',
    };
    const tabNumber = tabNumberMapping[p.ORDINAL.toLowerCase()];
    if (tabNumber){
        p.play({command: 'navigation', tabNumber: tabNumber});
    } else {
        p.play("The tab with this number not found");
    }
});
  1. Copy the Alan Studio project's key from the Embeded Code popup:
  1. Add the Alan Button HTML tag to the app.component.html:
<--  app.component.html -->
<ion-app>
  <ion-router-outlet></ion-router-outlet>
  <alan-button #alanBtnEl alan-key="YOUR_KEY_FROM_ALAN_STUDIO_HERE"></alan-button>
</ion-app>

On this step you should be able to activate the Alan Button on the page and check how it works. If you say "Hi", you will be able to hear the Alan's response "Hi! I'm Alan. I hope you like this tutorial".

  1. Now let's add a navigation through the tabs with voice. We had already added intent for navigation in the step #7. Now let's add a listener for command events in the app.component.ts.
...

import "@alan-ai/alan-button";

...
export class AppComponent {

  @ViewChild('alanBtnEl', {static:false}) alanBtnComponent: ElementRef<HTMLAlanButtonElement>;

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private navCtrl: NavController
  ) {
    this.initializeApp();
  }

  ...

    ngAfterViewInit() {
        this.alanBtnComponent.nativeElement.addEventListener('command', (data) => {
            const commandData = (<CustomEvent>data).detail;

            if (commandData.command === 'navigation') {
                this.navCtrl.navigateForward([`/tabs/tab${commandData.tabNumber}`]);
            }
        });
    }
}

see full source

That's it! Now you can use voice commands for navigation through the tabs in your Ionic Application. Try to use the following commands: "open the first tab", "open the second tab", "open the third tab". The same voice commands will work if you run this application on iOS or Android devices.

Use the instructions below to run the demo application on device or simulator.

  1. Run ionic cordova platform add ios (or ionic cordova platform add android)
  2. Run ionic cordova plugin add @alan-ai/cordova-plugin-alan-voice
  3. Run ionic cordova plugin add cordova-plugin-ios-microphone-permissions
  4. Run ionic cordova build ios (or ionic cordova build android)
  5. Run ionic cordova run ios (or ionic cordova run android)

Please, note that the Alan Button won't work if you run your application via Ionic DevApp. The Ionic DevApp works with the limited list of cordova plugins, and while there is no @alan-ai/cordova-plugin-alan-voice in this list, the button won't appear.