Создание чатбота в приложении React Native в прошлом могло быть сложным делом, но сегодня это не так, благодаря конструктору чатботов Kompose от Kommunicate.
В этом руководстве мы создадим приложение чатбота с нуля, используя Kompose (Kommunicate Chatbot) и React Native.
Мы проведем интеграцию в 2 этапа:
- Создадим чатбот Kompose и настроим ответы.
- Добавим созданный чатбот в ваш 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>
);
};
Вот скриншот: