Ionic Vue

Available on: Web platform Android iOS

Integrating with Alan

To integrate an Ionic Vue app with Alan, you need to do the following:

  1. Create an Ionic Vue app

  2. Install Alan packages

  3. Add the Alan button

Step 1. Create an Ionic Vue app

If you want to create a voice-enabled app from scratch, in the Terminal, run the following commands. Otherwise move on to step 2.

Terminal
npm install -g ionic
cd <appFolder>
ionic start <appName> <template> --type vue

For details, see Ionic documentation.

Step 2. Install Alan packages

You need to install the Alan SDK Cordova component and Alan Web Component package.

  1. Navigate to the folder where your app resides:

    Terminal
    cd appName
    
  2. Install the Alan SDK Cordova component:

    Terminal
    npm install @alan-ai/cordova-plugin-alan-voice --save
    
  3. Install the Alan Web Component package:

    Terminal
    npm install @alan-ai/alan-button --save
    

Note

To be able to run Ionic apps on mobile devices, you must install the Alan button as the Web Component using the following packages: @alan-ai/alan-button and @alan-ai/cordova-plugin-alan-voice. Do not use the @alan-ai/alan-sdk-web package: it is intended for non cross-platform web apps and pages.

Step 3. Add the Alan button

You need to update your app to embed the Alan button to it.

  1. In the main.ts file, import the Alan button component and bind it to the window object:

    main.ts
    // Importing the Alan button component
    import {
      applyPolyfills,
      defineCustomElements,
    } from '@alan-ai/alan-button/dist/loader';
    
    // Binding custom components to the window object
    applyPolyfills().then(() => {
      defineCustomElements();
    });
    
  2. In your Vue component, add the Alan button:

    HomePage.vue
    <ion-content :fullscreen="true">
      <alan-button  alan-key="YOUR_KEY_FROM_ALAN_STUDIO_HERE" />
    </ion-content>
    
  3. In alan-key, replace YOUR_KEY_FROM_ALAN_STUDIO_HERE with the Alan SDK key for your Alan Studio project. To get the key, in Alan Studio, at the top of the code editor, click Integrations and copy the value from the Alan SDK Key field.

    HomePage.vue
    <ion-content :fullscreen="true">
      <alan-button  alan-key="1c885a6adb85e9d57d43485dbc3cb44a2e956eca572e1d8b807a3e2338fdd0dc/stage" />
    </ion-content>
    

That’s it. You can now add voice commands to the script in Alan Studio, run the app, click the Alan button and interact with the app with voice.

Note

Regularly update the Alan AI packages your project depends on. To check if a newer version is available, run npm outdated. To update the package, run npm update <alan-package-name>. For more details, see npm documentation.

Specifying the Alan button parameters

You can specify the following parameters for the Alan button added to your app:

Name

Type

Description

alan-key

string

The Alan SDK key for a project in Alan Studio.

authData

JSON object

The authentication or configuration data to be sent to the voice script. For details, see authData.

Using client API methods

You can use the following client API methods in your app:

setVisualState()

Use the setVisualState() method to inform the voice assistant about the app’s visual context. For details, see setVisualState().

Client app
<ion-content :fullscreen="true">
  <alan-button ref="alanBtn" alan-key="YOUR_KEY_FROM_ALAN_STUDIO_HERE" />
</ion-content>

<script lang="ts">
  import {Components} from '@alan-ai/alan-button';

  export default defineComponent({
    mounted : function() {
      const alanBtnInst = this.$refs["alanBtn"] as Components.AlanButton;
      alanBtnInst.setVisualState({data: 'your data'});
    }
  });
</script>

callProjectApi()

Use the callProjectApi() method to send data from the client app to the voice script and trigger activities without voice commands. For details, see callProjectApi().

Voice script
projectAPI.myFunc = function(p, param, callback) {
  console.log(param);
};
Client app
<ion-content :fullscreen="true">
  <alan-button ref="alanBtn" alan-key="YOUR_KEY_FROM_ALAN_STUDIO_HERE" />
</ion-content>

<script lang="ts">
  import {Components} from '@alan-ai/alan-button';

  export default defineComponent({
    methods: {
      callProjectApi() {
        const alanBtnInst = this.$refs["alanBtn"] as Components.AlanButton;
        alanBtnInst.callProjectApi("setClientData", {data: "myData"}, function (error:any, result:any) {
          console.log("cb from myFunc was received", error, result);
        });
      },
    }
  });
</script>

playText()

Use the playText() method to play specific text in the client app. For details, see playText().

Client app
<ion-content :fullscreen="true">
  <alan-button ref="alanBtn" alan-key="YOUR_KEY_FROM_ALAN_STUDIO_HERE" />
</ion-content>

<script lang="ts">
  import {Components} from '@alan-ai/alan-button';

  export default defineComponent({
    methods: {
      playText() {
        const alanBtnInst = this.$refs["alanBtn"] as Components.AlanButton;
        alanBtnInst.playText("Hi there!");
      },
    }
  });
</script>

playCommand()

Use the playCommand() method to execute a specific command in the client app. For details, see playCommand().

Client app
<ion-content :fullscreen="true">
  <alan-button ref="alanBtn" alan-key="YOUR_KEY_FROM_ALAN_STUDIO_HERE" />
</ion-content>

<script lang="ts">
  import {Components} from '@alan-ai/alan-button';

  export default defineComponent({
    methods: {
      navigate() {
        const alanBtnInst = this.$refs["alanBtn"] as Components.AlanButton;
        alanBtnInst.playCommand({command:"navigate", screen: "settings"});
      },
    }
  });
</script>

activate()

Use the activate() method to activate the Alan button programmatically. For details, see activate().

Client app
<ion-content :fullscreen="true">
  <alan-button ref="alanBtn" alan-key="YOUR_KEY_FROM_ALAN_STUDIO_HERE" />
</ion-content>

<script lang="ts">
  import {Components} from '@alan-ai/alan-button';

  export default defineComponent({
    mounted : function() {
      const alanBtnInst = this.$refs["alanBtn"] as Components.AlanButton;
      alanBtnInst.activate();
    }
  });
</script>

deactivate()

Use the deactivate() method to deactivate the Alan button programmatically. For details, see deactivate().

Client app
<ion-content :fullscreen="true">
  <alan-button ref="alanBtn" alan-key="YOUR_KEY_FROM_ALAN_STUDIO_HERE" />
</ion-content>

<script lang="ts">
  import {Components} from '@alan-ai/alan-button';

  export default defineComponent({
    methods: {
      deactivate() {
        const alanBtnInst = this.$refs["alanBtn"] as Components.AlanButton;
        alanBtnInst.deactivate();
      },
    }
  });
</script>

isActive()

Use the isActive() method to check the Alan button state: active or not. For details, see isActive().

Client app
<ion-content :fullscreen="true">
  <alan-button ref="alanBtn" alan-key="YOUR_KEY_FROM_ALAN_STUDIO_HERE" />
</ion-content>

<script lang="ts">
  import {Components} from '@alan-ai/alan-button';

  export default defineComponent({
    const alanBtnInst = this.$refs["alanBtn"] as Components.AlanButton;
    alanBtnInst.isActive();
  });
</script>

remove()

Use the remove() method to remove the Alan button from the parent element. For details, see remove().

Client app
<ion-content :fullscreen="true">
  <alan-button ref="alanBtn" alan-key="YOUR_KEY_FROM_ALAN_STUDIO_HERE" />
</ion-content>

<script lang="ts">
  import {Components} from '@alan-ai/alan-button';

  export default defineComponent({
    const alanBtnInst = this.$refs["alanBtn"] as Components.AlanButton;
    alanBtnInst.removeButton();
  });
</script>

getWakewordEnabled()

Use the getWakewordEnabled() method to check the state of the wake word for the Alan button. For details, see getWakewordEnabled().

Client app
<ion-content :fullscreen="true">
  <alan-button ref="alanBtn" alan-key="YOUR_KEY_FROM_ALAN_STUDIO_HERE" />
</ion-content>

<script lang="ts">
  import {Components} from '@alan-ai/alan-button';

  export default defineComponent({
    const alanBtnInst = this.$refs["alanBtn"] as Components.AlanButton;
    const isWakewordEnabled = await alanBtnInst.getWakewordEnabled();
  });
</script>

setWakewordEnabled()

Use the setWakewordEnabled() method to enable or disable the wake word for the Alan button. For details, see setWakewordEnabled().

Client app
<ion-content :fullscreen="true">
  <alan-button ref="alanBtn" alan-key="YOUR_KEY_FROM_ALAN_STUDIO_HERE" />
</ion-content>

<script lang="ts">
  import {Components} from '@alan-ai/alan-button';

  export default defineComponent({
    const alanBtnInst = this.$refs["alanBtn"] as Components.AlanButton;
    alanBtnInst.setWakewordEnabled(true);
  });
</script>

Using handlers

You can use the following Alan handlers in your app:

onCommand handler

Use the onCommand handler to handle commands sent from the voice script. For details, see onCommand handler.

Client app
<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.

onButtonState handler

Use the onButtonState handler to capture and handle the Alan button state changes. For details, see onButtonState handler.

Client app
<ion-content :fullscreen="true">
  <alan-button v-on:buttonstate="onButtonState" alan-key="YOUR_KEY_FROM_ALAN_STUDIO_HERE" />
 </ion-content>

 export default defineComponent({
   methods: {
     onButtonState: function(data:any) {
       console.info('Button state is: ', data.detail);
     }
   },
 });

Note

To define the onButtonState handler in Ionic Vue, use lowercase: v-on:buttonstate. Otherwise the handler will not be working.

onConnectionStatus handler

Use the onConnectionStatus handler to capture and handle the connection status for the voice project. For details, see onConnectionStatus handler.

Client app
<ion-content :fullscreen="true">
  <alan-button v-on:connectionstatus="connectionstatus" alan-key="YOUR_KEY_FROM_ALAN_STUDIO_HERE" />
</ion-content>

export default defineComponent({
  methods: {
    connectionstatus: function(data:any) {
      console.info('Received status: ', data.detail);
    }
  },
});

onEvent handler

Use the onEvent handler to capture and handle events emitted by Alan: get user’s utterances, voice assistant responses and so on. For details, see onEvent handler.

Client app
<ion-content :fullscreen="true">
  <alan-button v-on:event="event" alan-key="YOUR_KEY_FROM_ALAN_STUDIO_HERE" />
</ion-content>

export default defineComponent({
  methods: {
    event: function(data:any) {
      console.info('Received event: ', data.detail);
    }
  },
});

Note

To define the onEvent handler in Ionic Vue, use lowercase: v-on:event. Otherwise the handler will not be working.

What’s next?

../../../_images/git-purple.svg

Example apps

Find and explore examples of voice-enabled apps on the Alan AI GitHub repository.

View on GitHub