API.AI (Voice Recognition-Siri Like) & Ionic Integration

Hello everybody,

I found this interesting service : API.AI which seems to be a powerful tool to have a great own “Siri-Like” service inside mobile app…

They have an Cordova Plugin but can’t find the proper way to integrate it in Angular way.
Don’t think that it’s possible to use Cordova Plugins with Ionic & ngCordova, but it will be nice to have this kind of plugins available on ngCordova.

More an idea than code issue…

Merci !

1 Like

Why can’t you use the plugin? A Cordova plugin exposes a JavaScript API. In terms of an angular way, you just need to wrap the plugin calls within an Angular Service, or call them directly (wrapped in an $ionicPlatform.ready.

Hi,

Thanks for your answer ! In fact i’m trying to make it work, as i’m wrapping the calls in an $ionicPlatform.ready for now and later with Angular Services.
I will keep updated and posted if i found the proper way to make it works…

Paul

After my holidays i will code an Angular extension in the proper way with Services, but anyway, if some peoples wants to try it, please use:

ionic.Platform.ready(function (){});

instead of regular $ionicPlatform.

For example:

  ionic.Platform.ready(function(){
    window.ApiAIPlugin.init(
      {
        subscriptionKey: "", // insert your subscription key here
        clientAccessToken: "", // insert your client access key here
        lang: "fr" // set lang tag from list of supported languages
      },
      function(result) { console.log('API.AI: initialition OK') },
      function(error) { /* error processing */ }
    );
    window.ApiAIPlugin.setListeningFinishCallback(
      function(){
        $ionicLoading.hide();
      }
    );

  });

Make a button like this for example:

<button ng-click="voiceCommand();"></button>

Then:

  $scope.voiceCommand = function (){
    $ionicLoading.show({
      template: '<ion-spinner icon="lines"></ion-spinner><br>You can speak to me ! ...'
    });
    ionic.Platform.ready(function(){
      try {
        window.ApiAIPlugin.requestVoice(
          {}, // empty for simple requests, some optional parameters can be here
          function (response) {
            // place your result processing here
            alert(JSON.stringify(response));
          },
          function (error) {
            // place your error processing here
            alert(error);
          });
        } catch (e) {
          alert(e);
        }

      });
    };

OK it’s a basic think. But anyway if this can help someone to implement Api.Ai.

Paul

For some reason, I’m not able to run ‘ionic build ios’ with the API.AI cordova plugin installed. Here’s the error messaging:

Running command: /Users/james/Code/gray/hooks/after_prepare/010_add_platform_class.js /Users/james/Code/gray add to body class: platform-ios Running command: /Users/james/Code/gray/hooks/after_prepare/020_remove_sass_from_platforms.js /Users/james/Code/gray Running command: /Users/james/Code/gray/platforms/ios/cordova/build Building project : /Users/james/Code/gray/platforms/ios/gray.xcodeproj Configuration : Debug Platform : emulator Build settings from command line: ARCHS = i386 CONFIGURATION_BUILD_DIR = /Users/james/Code/gray/platforms/ios/build/emulator SDKROOT = iphonesimulator8.4 SHARED_PRECOMPS_DIR = /Users/james/Code/gray/platforms/ios/build/sharedpch VALID_ARCHS = i386 Build settings from configuration file ‘/Users/james/Code/gray/platforms/ios/cordova/build-debug.xcconfig’: CODE_SIGN_IDENTITY = iPhone Developer CODE_SIGN_RESOURCE_RULES_PATH = $(SDKROOT)/ResourceRules.plist 2015-08-20 18:38:37.259 xcodebuild[55053:829479] CFPropertyListCreateFromXMLData(): Old-style plist parser: missing semicolon in dictionary on line 66. Parsing will be abandoned. Break on _CFPropertyListMissingSemicolon to debug. 2015-08-20 18:38:37.260 xcodebuild[55053:829479] CFPropertyListCreateFromXMLData(): Old-style plist parser: missing semicolon in dictionary on line 66. Parsing will be abandoned. Break on _CFPropertyListMissingSemicolon to debug. 2015-08-20 18:38:37.317 xcodebuild[55053:829479] The data couldn’t be read because it isn’t in the correct format. xcodebuild: error: Unable to read project ‘gray.xcodeproj’. Reason: Project /Users/james/Code/gray/platforms/ios/gray.xcodeproj cannot be opened because the project file cannot be parsed. Error code 74 for command: xcodebuild with args: -xcconfig,/Users/james/Code/gray/platforms/ios/cordova/build-debug.xcconfig,-project,gray.xcodeproj,ARCHS=i386,-target,gray,-configuration,Debug,-sdk,iphonesimulator,build,VALID_ARCHS=i386,CONFIGURATION_BUILD_DIR=/Users/james/Code/gray/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/james/Code/gray/platforms/ios/build/sharedpch ERROR building one of the platforms: Error: /Users/james/Code/gray/platforms/ios/cordova/build: Command failed with exit code 2 You may not have the required environment or OS to build this project Error: /Users/james/Code/gray/platforms/ios/cordova/build: Command failed with exit code 2 at ChildProcess.whenDone (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/cordova/superspawn.js:139:23) at ChildProcess.emit (events.js:110:17) at maybeClose (child_process.js:1015:16) at Process.ChildProcess._handle.onexit (child_process.js:1087:5)

Nevermind - I ran ionic state reset and reinstalled the plugin and that seemed to work!

Hello jamesgray,

I experienced kind of same issues with others plugins. Sometimes the plugin is not proper installed and make the thing crash.

Could you please keep me updates or give me any feedback with the iOS platform ? It’s cool to have some opinions from differents devs on differents projects.

Paul

Hi Ptestud,

I’m just wondering did you get this working in the end?

Yes.

But if you have troubles, you have to be more more more on details to see if i can give help :wink:

Hi @ptestud, do you have a working prototype that I can try out?

Hey @ptestud thanks for replying so quickly.

I’m having trouble getting API.AI to work in my ionic project I just keep getting the error ApiAiPlugin not defined or cannot call init on undefined. It’s been a pain trying to get it to work but if you have a sample project with the plugin working that would be a massive help. I’m testing it on my android device using ionic view. Thanks.



Hey idoghoo,

Use this wrapper:
ionic.Platform.ready(function(){})

instead of $ionicPlatform.ready..

Important thing:
Don’t use ApiAIPlugin directly… use window.ApiAIPlugin.[wheneverAPIfunction, ex: init].

Look at my code on the previous post, it will work…

So I’ve changed the code to follow your post above. In my app.js I have

.run(function($ionicPlatform, GoogleMaps) {
 ionic.Platform.ready(function(){    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
    GoogleMaps.init();   
    window.ApiAIPlugin.init(
      {
        subscriptionKey: "cb9693af-85ce-4fbf-844a-5563722fc27f", // insert your subscription key here
        clientAccessToken: "3485a96fb27744db83e78b8c4bc9e7b7", // insert your client access key here
        lang: "en" // set lang tag from list of supported languages
      },
      function(result) { console.log('API.AI: initialition OK') },
      function(error) { /* error processing */ }
    );
    window.ApiAIPlugin.setListeningFinishCallback(
      function(){
        $ionicLoading.hide();
      }
    );

  });
})

and my controller.js file now has this controller

// EVERYTHING TO DO WITH Speech

app.controller('voiceCtrl', function($scope, $ionicPopup,  $ionicLoading) {

  $scope.voiceCommand = function (){
    $ionicLoading.show({
      template: '<ion-spinner icon="lines"></ion-spinner><br>You can speak to me ! ...'
    });
    ionic.Platform.ready(function(){
      try {
        window.ApiAIPlugin.requestVoice(
          {}, // empty for simple requests, some optional parameters can be here
          function (response) {
            // place your result processing here
            alert(JSON.stringify(response));
          },
          function (error) {
            // place your error processing here
            alert(error);
          });
        } catch (e) {
          alert(e);
        }

      });
    };

});

I now get the error Uncaught TypeError: Cannot read property ‘init’ of undefined. Type Error cannot read requestVoice of undefined. And the $ionicLoading wheel keeps spinning.

This is will not work if you’re using emulator…
Test it on an device.

Inspect the device and open the dev console, start typing “window” and you should see where ApiAIPlugin is referenced…

I do not know your config.
Be careful that everything is up to date…

Can you pls check this issue…“Ionic app not recognizing speech in android mobile”