Documentation

Powered by Algolia

Alan Apache Cordova Framework


Available on iOS and Android platforms.

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

  1. Create an Apache Cordova app
  2. Integrate the app with Alan
  3. Build and run the app

Step 1. Create an Apache Cordova app

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

To create an Apache Cordova app:

  1. Install the Cordova CLI:

    $ npm install -g cordova

    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:

    $ cordova create hello com.example.hello HelloWorld

    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

To add voice to your app:

  1. Navigate to the folder where your app resides:

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

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

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

    function onDeviceReady() {
    // Cordova is now initialized. Have fun!
    
    	// The Alan 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 SDK key for your Alan Studio project. To get the key, in the Alan 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:

    $ cordova build ios
    $ cordova build android
  2. (For iOS) In iOS, the user must explicitly grant permission for an app to access the device microphone and camera. The Info.plist file of the app must contain NSMicrophoneUsageDescription and NSCameraUsageDescription key with string values explaining how the app uses this data.
    To add the keys:

    a. 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.

    b. In Xcode, go to the Info tab.

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

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

    e. 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.

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

    mic

  3. To run your Apache Cordova app integrated with Alan, use the following commands:

    cordova run ios
    cordova run android

    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.