Как добавить чатбот в React Native

Создание чатбота в приложении React Native в прошлом могло быть сложным делом, но сегодня это не так, благодаря конструктору чатботов Kompose от Kommunicate.

В этом руководстве мы создадим приложение чатбота с нуля, используя Kompose (Kommunicate Chatbot) и React Native.

Мы проведем интеграцию в 2 этапа:

1. Создадим чатбот Kompose и настроим ответы.
2. Добавим созданный чатбот в ваш React Native.

Давайте перейдем непосредственно к этому.
Этап 1: Создание чатбота в Kompose и настройка ответов

Шаг 1: Создайте аккаунт в Kommunicate
Если у вас нет аккаунта в Kommunicate, вы можете бесплатно создать аккаунт чатбота Kommunicate здесь.

Затем войдите в панель управления Kommunicate и перейдите в раздел Интеграция ботов. Найдите раздел Kompose и нажмите на Интегрировать бота.

Если вы хотите создать бота с нуля, выберите пустой шаблон и перейдите в раздел Настройка бота. Выберите имя вашего бота, аватар бота, язык по умолчанию и нажмите «Сохранить и продолжить».

Теперь вы закончили создание бота, и все, о чем вам теперь нужно беспокоиться, это «Включить передачу данных от бота к человеку», когда бот сталкивается с запросом, который он не понимает. Включите эту функцию и нажмите «Завершить настройку бота».

На следующей странице вы можете выбрать, будет ли этот бот обрабатывать все входящие разговоры. Нажмите на «Пусть этот бот обрабатывает все разговоры», и все готово.

Созданный бот находится здесь: Dashboard →Bot Integration → Manage Bots.

Шаг 2: Создайте приветственные сообщения и ответы для вашего чатбота
Перейдите в раздел ‘Kompose — Bot Builder’ и выберите созданного вами бота.

Сначала настройте приветственное сообщение для вашего чатбота. Приветственное сообщение — это первое сообщение, которое чатбот отправляет пользователю, инициировавшему чат.

Перейдите в раздел «Приветственное сообщение». В поле «Введите приветственное сообщение — сообщение бота» укажите сообщение, которое ваш чатбот должен показывать пользователям, когда они открывают чат, а затем сохраните намерение приветствия.

После создания приветственного сообщения следующим шагом будет подача ответов/намерений. Этими ответами/намерениями могут быть распространенные вопросы о вашем продукте или услуге.

Раздел «Ответы» — это место, куда нужно добавить все сообщения пользователя и ответы чатбота.

Перейдите в раздел «Ответ», нажмите +Добавить, затем дайте имя намерению.

В разделе «Настроить сообщение пользователя» — вам нужно указать фразы, которые вы ожидаете от пользователей, которые будут срабатывать.

Раздел «Настроить ответ бота» — вам нужно указать ответы (текстовые или в виде Rich-сообщений), которые чатбот будет выдавать пользователям для конкретного сообщения. Вы можете добавить любое количество ответов и последующих ответов для чатбота. Здесь я использовал пользовательскую полезную нагрузку, выбрав опцию «Custom» в опции «More».

После настройки ответов необходимо нажать на кнопку «Обучить бота», которая находится справа и слева от экрана предварительного просмотра. После успешного обучения в правом верхнем углу появится тост «Обучение ответов завершено».

Этап 2: Добавьте созданного чатбота в ваш проект React Native:

Шаг 1: Настройте среду разработки React Native

https://reactnative.dev/docs/environment-setup

Шаг 2: Создайте приложение React Native
Создайте новое приложение React Native (my-app) с помощью команды в терминале или командной строке:

npx react-native init my-app

Шаг 3: Теперь перейдите в папку my-app
cd my-app

Шаг 4: Установите Kommunicate в ваш проект
Чтобы добавить модуль Kommunicate в ваше react native приложение, добавьте его с помощью npm:

npm install react-native-kommunicate-chat –save

Шаг 5: Добавьте код Kommunicate в ваш проект
Перейдите к App.js в вашем проекте. По умолчанию новый проект содержит демонстрационный код, который не требуется. Вы можете удалить эти коды и написать свой собственный код для начала разговора в Kommunicate.

Сначала импортируйте Kommunicate с помощью:
import RNKommunicateChat from ‘react-native-kommunicate-chat’;

Затем создайте этот метод для открытия беседы, прежде чем возвращать какие-либо представления:

Далее нам нужно добавить кнопку, при нажатии на которую будет открываться беседа. Добавьте эти элементы React и верните ее.

Полный код примера

const App: () => Node = () => {

const isDarkMode = useColorScheme() === ‘dark’;

  const backgroundStyle = {

    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,

  };

  startConversation = () => {

    let conversationObject = {

      ‘appId’: ‘eb775c44211eb7719203f5664b27b59f’ // The [APP_ID](https://dashboard.kommunicate.io/settings/install) obtained from kommunicate dashboard.

    }

    RNKommunicateChat.buildConversation(conversationObject, (response, responseMessage) => {

      if (response == “Success”) {

        console.log(“Conversation Successfully with id:” + responseMessage);

      }

    });

  }

  return (

    <SafeAreaView style={styles.con}>

      <StatusBar barStyle={isDarkMode ? ‘light-content’ : ‘dark-content’} />

      <ScrollView

        contentInsetAdjustmentBehavior=”automatic”

        style={backgroundStyle}>

        <Header />

        <View

          style={{

            backgroundColor: isDarkMode ? Colors.black : Colors.white,

          }}>

          <Text style={styles.title}></Text>

          <Text style={styles.title}>Here you can talk with our customer support.</Text>

          <View style={styles.container}>

            <Button

              title=”Start conversation”

              onPress={() => startConversation()}

            />

          </View>

        </View>

      </ScrollView>

    </SafeAreaView>

  );

};

Вот скриншот: