Alan AI Apache Cordova Framework

Available on: Android iOS

To create an in-app assistant for an Apache Cordova app, you need to do the following:

  1. Create an Apache Cordova app

  2. Integrate the app with Alan AI

  3. Build and run the app

Step 1. Create an Apache Cordova app

You can create an Apache Cordova app from scratch or add an in-app assistant to an existing project. In the latter case, skip this step and go to Step 2. Integrate the app with Alan AI.

To create an Apache Cordova app:

  1. Install the Cordova CLI:

    Terminal
    npm install -g cordova
    

    Note

    For Mac or Linux, you may need to run the commands with sudo. For more details, see the Cordova CLI Reference.

  2. Go to the directory where your app must reside and create a Cordova project:

    Terminal
    cordova create hello com.example.hello HelloWorld
    

    Note

    This command creates the required structure for your Cordova app. By default, it generates a web-based app. You will add the iOS and Android targets later in this procedure.

Step 2. Integrate the app with Alan AI

To add a conversational experience to your app:

  1. Navigate to the folder where your app resides:

    Terminal
    cd hello
    
  2. Add the platform for which you want to build the app — iOS and/or Android:

    Terminal
    cordova platform add ios
    cordova platform add android
    
  3. Install the Alan AI SDK Cordova plugin:

    Terminal
    cordova plugin add @alan-ai/cordova-plugin-alan-voice
    
  4. Modify the app to add the Alan AI button. To do this, to the index.js file, add the following code:

    index.js
    function onDeviceReady() {
    // Cordova is now initialized. Have fun!
    
      // The Alan AI button component
      cordova.exec(
        function(data) {
          console.log(data);
        },
        function(error) {
          console.log(error);
        },
        "alanVoice",
        "addButton",
        ["YOUR_KEY_FROM_ALAN_STUDIO_HERE"]);
    
      console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
      document.getElementById('deviceready').classList.add('ready');
    }
    
  5. Replace YOUR_KEY_FROM_ALAN_STUDIO_HERE with the Alan AI SDK key for your Alan AI Studio project. To get the key, in Alan AI Studio, at the top of the code editor, click Integrations and copy the value from the Alan SDK Key field.

Step 3. Build and run the app

  1. Build the app for the target platform — iOS and/or Android:

    Terminal
    cordova build ios
    cordova build android
    
  2. (For iOS) In iOS, the user must explicitly grant permission for an app to access user’s data and resources. An app with the Alan AI button requires access to:

    • User’s device microphone for voice interactions

    • User’s device camera for testing Alan AI projects on mobile

    To comply with this requirement, you must add NSMicrophoneUsageDescription and NSCameraUsageDescription keys to the Info.plist file of your app and provide a message why your app requires access to the microphone and camera. The message will be displayed only when Alan AI needs to activate the microphone or camera.

    To add the keys:

    1. In the app, navigate to the platforms/ios folder and open the generated XCode workspace file: <appname>.xcworkspace. You should use this file to open your Xcode project from now on.

    2. In Xcode, go to the Info tab.

    3. In the Custom iOS Target Properties section, hover over any key in the list and click the plus icon to the right.

    4. From the list, select Privacy - Microphone Usage Description.

    5. In the Value field to the right, provide a description for the added key. This description will be displayed to the user when the app is launched.

    6. Repeat the steps above to add the Privacy - Camera Usage Description key.

    ../../../_images/pods-mic.png
  3. To run your Apache Cordova app integrated with Alan AI, use the following commands:

    Terminal
    cordova run ios
    cordova run android
    

Note

You can also launch the app from XCode or the Android Studio: open platforms/android or platforms/ios in the IDE and run the app in a usual way.

What’s next?

Upon integration, your app gets the in-app assistant that can be activated with the Alan AI button displayed on top of the app’s UI.

To build a full-fledged multimodal UX, you can use Alan AI SDK toolkit:

../../../_images/method.svg

Client API methods

Enable communication between the client app and Alan AI and perform actions in the app.


Learn more

../../../_images/handler.svg

Alan AI handlers

Handle commands, understand the button state and capture events in the client app.


Learn more

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

Example app

Find and explore an example of a voice-enabled app on the Alan AI GitHub repository.


View on GitHub