Giter VIP home page Giter VIP logo

react-native-dialogflow's Introduction

react-native-dialogflow (react-native-api-ai)

Build Status Version Downloads

Rename Warningmore info

A React-Native Bridge for the Google Dialogflow AI SDK.

Header Image

Support for iOS 10+ and Android!

Dialogflow is a powerful tool for building delightful and natural conversational experiences. You can build chat and speech bots and may intergrate it in a lot of platform like twitter, facebook, slack, or alexa.

Install

Add react-native-dialogflow and link it:

npm install --save react-native-dialogflow

react-native link react-native-dialogflow
react-native link react-native-speech-to-text-ios

iOS: IMPORTANT xCode plist settings

Also, you need open the React Native xCode project and add two new keys into Info.plist Just right click on Info.plist -> Open As -> Source Code and paste these strings somewhere into root <dict> tag

<key>NSSpeechRecognitionUsageDescription</key>
<string>Your usage description here</string>
<key>NSMicrophoneUsageDescription</key>
<string>Your usage description here</string>

Application will crash if you don't do this.

Usage

Import Dialogflow:

import Dialogflow from "react-native-dialogflow";

Configuration

Set the clientAccessToken and the language in your constructor:

 constructor(props) {
        super(props);

        Dialogflow.setConfiguration(
          "4xxxxxxxe90xxxxxxxxc372", Dialogflow.LANG_GERMAN
        );
    }

Listening

Start listening with integrated speech recognition:

   <Button onPress={() => {
            Dialogflow.startListening(result=>{
                console.log(result);
            }, error=>{
                console.log(error);
            });
        }}
   />

In iOS only you have to call finishListening(). Android detects the end of your speech automatically. That's the reason why we didn't implement the finish method in Android.

// only for iOS
Dialogflow.finishListening();
// after this call your callbacks from the startListening will be executed.

Text Request

For using your own speech recognition:

   <Button onPress={() => {
           Dialogflow.requestQuery("Some text for your Dialogflow agent", result=>console.log(result), error=>console.log(error));
        }}
   />

Request an Event

For sending an event to Dialogflow (Contexts and Entities have no effect!):

Dialogflow.requestEvent(
    "WELCOME",
    {param1: "yo mr. white!"},
    result=>{console.log(result);},
    error=>{console.log(error);}
);

Contexts

Set contexts (will take affect on next startListening or queryRequest):

const contexts = [{
  name: "deals",
  lifespan: 1,
  parameters: {
      Shop: "Rewe"
  }
}];

Dialogflow.setContexts(contexts);

Reset all (non-permantent) contexts for current session:

Dialogflow.resetContexts(result=>{
       console.log(result);
    }, error=>{
       console.log(error);
    });

Set permanent contexts, which will be set automatically before every request. This is useful for e.g. access tokens in webhooks:

const permanentContexts = [{
  name: "Auth",
  // lifespan 1 is set automatically, but it's overrideable
  parameters: {
      AccessToken: "1234yo1234"
  }
}];

Dialogflow.setPermanentContexts(permanentContexts);

Entities

Set UserEntities (will take affect on next startListening or queryRequest):

const entities = [{
  "name":"shop",
  "extend":true,
  "entries":[
      {
          "value":"Media Markt",
          "synonyms":["Media Markt"]
      }
  ]
 }];

 Dialogflow.setEntities(entities);

Listener for Android

Only in Android we have four additional methods: onListeningStarted, onListeningCanceled, onListeningFinished and onAudioLevel. In iOS they will be never called:

   <Button onPress={() => {

            Dialogflow.onListeningStarted(()=>{
                console.log("listening started");
            });

            Dialogflow.onListeningCanceled(()=>{
                console.log("listening canceled");
            });

            Dialogflow.onListeningFinished(()=>{
                console.log("listening finished");
            });

            Dialogflow.onAudioLevel(level=>{
                console.log(level);
            });


            Dialogflow.startListening(result=>{
                console.log(result);
            }, error=>{
                console.log(error);
            });
        }}
   />

Note: Make sure you are setting the callbacks before startListening every single time again. Don't set the callbacks in e.g. constructor or componentsDidMount if you are executing startListening more than one times.

Supported Languages

Set the language in your configuration:

Dialogflow.setConfiguration("4xxxxxxxe90xxxxxxxxc372", Dialogflow.LANG_GERMAN);
  • LANG_CHINESE_CHINA
  • LANG_CHINESE_HONGKONG
  • LANG_CHINESE_TAIWAN
  • LANG_DUTCH
  • LANG_ENGLISH
  • LANG_ENGLISH_GB
  • LANG_ENGLISH_US
  • LANG_FRENCH
  • LANG_GERMAN
  • LANG_ITALIAN
  • LANG_JAPANESE
  • LANG_KOREAN
  • LANG_PORTUGUESE
  • LANG_PORTUGUESE_BRAZIL
  • LANG_RUSSIAN
  • LANG_SPANISH
  • LANG_UKRAINIAN

Methods

name platform param1 param2 param3 param4
setConfiguration both clientAccessToken: String languageTag: String
startListening both resultCallback: (result: object)=>{} errorCallback: (error: object)=>{}
finishListening ios
requestQuery both query: String resultCallback: (result: object)=>{} errorCallback: (error: object)=>{}
requestEvent both eventName: String eventData: Object resultCallback: (result: object)=>{} errorCallback: (error: object)=>{}
onListeningStarted android callback: ()=>{}
onListeningCanceled android callback: ()=>{}
onListeningFinished android callback: ()=>{}
onAudioLevel android callback: (level: number)=>{}
setContexts both array
resetContexts both resultCallback: (result: object)=>{} errorCallback: (error: object)=>{}
setPermanentContexts both array
setEntities both array

Blogpost

Deutsch

Sprachsteuerung mit Api.ai in einer React-Native App

English

Contributors

Powered by innFactory

react-native-dialogflow's People

Contributors

barbaragomes avatar jona7o avatar spoeck avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.