Expo 中用于 React Native 的 Dialogflow API 聊天机器人

Posted 2023-03-15

【中文标题】Expo 中用于 React Native 的 Dialogflow API 聊天机器人

【英文标题】：Dialogflow API Chatbot for React Native in Expo

【发布时间】：2019-10-01 13:56:14

【问题描述】：

我正在学习 React Native 作为初学者。 我想在 Expo 中使用 Dialogflow 创建一个聊天机器人。

我搜索了所有的论坛和谷歌，但没有找到任何使用 Dialogflow 专门用于 Expo 的参考，尽管找到了对 React Native CLI 的参考。

在这种情况下，谁能指导我如何在 Expo React Native 中使用 Dialogflow 创建聊天机器人

【参考方案1】：

在这里你将有一个很棒的教程！

https://blog.jscrambler.com/build-a-chatbot-with-dialogflow-and-react-native/

如果这对您有帮助，请检查它是否为正确答案...

下面是一些代码：

import React,  Component  from 'react';
import  StyleSheet, Text, View  from 'react-native';
import  GiftedChat  from 'react-native-gifted-chat';
import  Dialogflow_V2  from 'react-native-dialogflow';

import  dialogflowConfig  from './env';

const BOT_USER = 
  _id: 2,
  name: 'FAQ Bot',
 avatar: 'https://i.imgur.com/7k12EPD.png'
;

class App extends Component 
 state = 
   messages: [
    
    _id: 1,
    text: `Hi! I am the FAQ bot ? from Jscrambler.\n\nHow may I help you with today? 
    `,
     createdAt: new Date(),
    user: BOT_USER
   
  ] 
;

componentDidMount() 
 Dialogflow_V2.setConfiguration(
  dialogflowConfig.client_email,
  dialogflowConfig.private_key,
  Dialogflow_V2.LANG_ENGLISH_US,
  dialogflowConfig.project_id
 );


handleGoogleResponse(result) 
 let text = result.queryResult.fulfillmentMessages[0].text.text[0];
 this.sendBotResponse(text);


onSend(messages = []) 
  this.setState(previousState => (
  messages: GiftedChat.append(previousState.messages, messages)
));

let message = messages[0].text;
Dialogflow_V2.requestQuery(
  message,
  result => this.handleGoogleResponse(result),
  error => console.log(error)
 );


sendBotResponse(text) 
  let msg = 
  _id: this.state.messages.length + 1,
  text,
  createdAt: new Date(),
  user: BOT_USER
;

 this.setState(previousState => (
   messages: GiftedChat.append(previousState.messages, [msg])
  ));
  

render() 
 return (
  <View style= flex: 1, backgroundColor: '#fff' >
    <GiftedChat
      messages=this.state.messages
      onSend=messages => this.onSend(messages)
      user=
        _id: 1
      
    />
  </View>
    );
  
 

 export default App;

【讨论】：

感谢您的建议，但我想要一个与 EXPO 合作的解决方案。这没有用。我使用 EXPO 的目标是在 EXPO 中编写一次代码并在 android 和 ios 中运行模拟器。

但这在 platafrom expo 中可以看到小吃：

你只需要在env.js文件import dialogflowConfig from './env';987654323@中遵循一些参数

我在 IOS 和 ANDROID 平台都使用 expo... 见上面的代码 .. 拥抱

@Matheuscabral 教程中使用 Expo 的链接过程如何？