Как использовать исполнения DialogFlow в вашем приложении React Native
Привет классные разработчики! Добро пожаловать в заключительную часть серии руководств "DialogFlow и Firebase с помощью React Native - это просто". Если вы пропустили последние две части, я настоятельно рекомендую вам сначала проверить их здесь.
Итак, в этом уроке мы собираемся создать приложение для отслеживания личных сбережений. Мы создадим чат-бота, с помощью которого мы сможем добавить или немного сэкономить, просто сказав ему сказать «Добавьте 500 к сбережениям» или «Уберите 200 с сбережений». Мы также можем попросить чат-бота сообщить нам текущий баланс сбережений. Я знаю, что идея довольно проста, но для целей нашего обучения этого будет достаточно.
Мы будем использовать Firebase для хранения данных сбережений и выполнения DialogFlow, чтобы получить сумму сбережений из сообщения, переданного чат-боту при добавлении / удалении баланса, а затем, соответственно, для добавления / удаления баланса из Firebase. Итак, приступим.
Во-первых, нам нужно создать учетную запись на DialogFlow. Так что перейдите на официальный сайт DialogFlow и зарегистрируйтесь, используя свою учетную запись Google. После входа в систему вы увидите такое окно:
Здесь мы создадим намерение DialogFlow. Но прежде всего, что такое «намерение»? Намерение - это конкретное действие, которое пользователь может вызвать, используя один из терминов, определенных в консоли Dialogflow. Например, если пользователь спрашивает: «Какая сегодня погода?», То какое намерение будет делать, это попытается распознать это утверждение и вызовет действие, основанное на том, что оно предопределено для этого конкретного действия намерения. Здесь можно вызвать действие, подобное «Сегодня солнечная погода».
Итак, для нашего приложения мы определим три намерения. Первое намерение будет касаться текущего баланса. Второе намерение будет заключаться в экономии. Третье намерение будет заключаться в снятии остатка с сбережений.
Но перед созданием намерения нам нужно создать агента, который будет содержать все наши три намерения. Итак, нажмите Создать агента. Я даю агенту имя «ChatApp», но вы можете дать любое имя по вашему выбору. Нажмите кнопку Создать.
Таким образом, создан наш первый агент. Теперь создадим намерение. Итак, в боковом навигационном меню DialogFlow нажмите на намерения, а затем нажмите кнопку Создать намерение .
Первое намерение, которое мы создадим, будет заключаться в отображении нашего текущего баланса сбережений. Мы назовем это намерение ReadSavings:
Нажмите кнопку Сохранить, и готово наше первое намерение. Теперь нам нужно дать нашему намерению несколько T фразеологизмов. Фазы обучения - это в основном то, что пользователь может сказать нашему чат-боту, чтобы показать текущую экономию. Например, пользователь может спросить: «Каков мой текущий баланс сбережений?». Поэтому нажмите Добавить обучающие фразы и добавьте несколько фраз:
DialogFlow создаст больше возможных фраз на основе заданных обучающих фраз, которые пользователь может сказать нашему агенту. В этом сила предварительно обученных моделей НЛП Dialogflow.
Итак, мы сначала создали агента, а затем наше намерение. Теперь намерение должно вызывать действие, когда оно распознает, что пользователь запрашивает текущий баланс. Текущие данные баланса будут получены из Firebase. Но для чтения данных из Firebase через наш агент нам нужно будет включить веб-перехватчик для намерения, которое позволит выполнять операции чтения и записи в Firebase. Прокрутите страницу вниз и под заголовком "Выполнение" нажмите Включить вызов веб-перехватчика для этого намерения.
Теперь, чтобы прочитать информацию об экономии из нашей базы данных, мы будем использовать Dialogflow Fulfillment, который в основном отправит запрос в нашу службу веб-перехватчика, которая в нашем случае будет Firebase для извлечения и изменения данных из нее. . Итак, на боковой панели навигации перейдите к Выполнение.
Под выполнением вы увидите встроенный редактор (по умолчанию отключен). Включите это. Мы пишем наш код в этом редакторе для отправки запросов клиентам веб-перехватчиков.
Итак, во встроенном редакторе удалите все и напишите следующий код:
'use strict';
const functions = require('firebase-functions');
const admin = require('firebase-admin');
const {WebhookClient} = require('dialogflow-fulfillment');
const {Card, Suggestion} = require('dialogflow-fulfillment');
admin.initializeApp({
credential: admin.credential.applicationDefault(),
databaseURL:'ws://your_project_name.firebaseio.com/'
// In the databaseURL give your own firebase url
});
process.env.DEBUG = 'dialogflow:debug'; // enables lib debugging statements
exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => {
const agent = new WebhookClient({ request, response });
console.log('Dialogflow Request headers: ' + JSON.stringify(request.headers));
console.log('Dialogflow Request body: ' + JSON.stringify(request.body));
function welcome(agent) {
agent.add(`Welcome to my agent!`);
}
function fallback(agent) {
agent.add(`I didn't understand`);
agent.add(`I'm sorry, can you try again?`);
}
function ReadSavings(agent){
return admin.database().ref('firbase-project-name').once('value', snapshot => {
const value = snapshot.val().notes;
if(value !== null){
agent.add(`Your current saving balance is ${value}`);
}
else{
agent.add("Oops! It seems that no value has been returned from the database");
}
});
}
// Run the proper function handler based on the matched Dialogflow intent name
let intentMap = new Map();
intentMap.set('Default Welcome Intent', welcome);
intentMap.set('Default Fallback Intent', fallback);
intentMap.set('ReadSavings', ReadSavings);
agent.handleRequest(intentMap);
});
Так что это кажется довольно сложным правом. Давайте разберемся с этим. Таким образом, на основе того, что пользователь говорит нашему чат-боту, агент классифицирует его для выполнения действий по одному из следующих намерений. Во-первых, это резервное намерение, когда он не может распознать, что пользователь намеревается сделать. Во-вторых, это приветствие, когда Dialogflow понимает, что пользователь произносит приветственные слова, такие как «Привет» или «Привет». Итак, в этом случае наш чат-бот возвращается с приветствием пользователю. Таким образом, откат и приветствие - это намерения по умолчанию в firebase. Третье намерение, которое мы создали, - это ReadSavings, которое отправит запрос в firebase для чтения данных из него, а затем покажет его пользователю. Итак, вы можете видеть, что у нас есть три функции для выполнения действия.
В первых нескольких строках кода мы импортировали зависимости firebase и Dialogflow, поскольку собираемся сделать запрос на firebase. Затем есть действия по умолчанию для отката и приветствия.
Затем мы определили действия, которые необходимо выполнить в намерении ReadSaving. Итак, в основном нам нужно получить данные из базы данных в намерении ReadSaving. Для этого мы использовали предопределенные функции firebase. Следует отметить, что вам нужно добавить имя проекта firebase, чтобы агент знал, к какому проекту он должен сделать запрос в «databaseURL», как указано в приведенном выше коде. Вы можете перейти на вкладку «База данных» в firebase и выбрать там «База данных в реальном времени». Например:
Как только агент фиксирует значение, он отвечает пользователю с балансом, как указано в методе agent.add в приведенном выше коде. Итак, посмотрим, как это работает. Но перед этим нам нужно сначала внести изменения в наше собственное приложение для реагирования, добавив некоторые конфигурации Dialogflow. Для добавления конфигураций нам необходимо скачать файл JSON, предоставленный Dialogflow.
Итак, сначала перейдите в настройки (шестеренка рядом с названием вашего проекта). В настройках нажмите ссылку рядом с учетной записью службы. Он перенаправит вас на облачную платформу Google.
Найдите ссылку на свой проект и нажмите на значок с тремя точками под ACtions, затем нажмите «создать ключ» и загрузите файл в формате JSON. Этот файл содержит файлы конфигурации нашего проекта.
Создайте файл .env и экспортируйте такие конфигурации ваших данных JSON:
export const dialogflowConfig = {"type": "service_account",
"project_id": "your project id here",
"private_key_id": "your project key id here",
"private_key": "YOUR PRIVATE KEY",
"client_email": "your client_email here",
"client_id": "your client_id here",
"auth_uri": "your auth_uri here",
"token_uri": "your token_uri here",
"auth_provider_x509_cert_url":"Your auth_provider_x509_cert_url here",
"client_x509_cert_url": " your client_x509_cert_url here"
}
Также нам нужно установить зависимость DialogFlow для react-native. Так что запустите свой терминал и напишите:
npm install --save react-native-dialogflow
Теперь в вашем файле Home.js добавьте следующий код. Сначала добавьте следующий импорт.
import { Dialogflow_V2 } from 'react-native-dialogflow';
import { dialogflowConfig } from './env'; // env file that we created earlier
Теперь загрузим наш файл конфигурации. Итак, мы будем использовать функцию componentDidMount. Внутри функции напишите следующие строки:
componentDidMount() {
Dialogflow_V2.setConfiguration(
dialogflowConfig.client_email,
dialogflowConfig.private_key,
Dialogflow_V2.LANG_ENGLISH_US,
dialogflowConfig.project_id
);}
Теперь внутри функции onSend, которую мы создали ранее, мы отправим сообщение пользователя в Dialogflow и получим ответ от Dialogflow, а затем покажем его пользователю. Для этого:
onSend(messages = []) {
this.setState(previousState => ({
messages: GiftedChat.append(previousState.messages, messages)
}));
let new_message = messages[0].text; //Latest msg entered by user
// This function sends message to the DialogFlow agent.Dialogflow_V2.requestQuery(
message,
result => this.DialogFlowAgentResponse(result),
error => console.log(error)
);}
// Response from Dialogflow
DialogFlowAgentResponse(result) {
let text = result.queryResult.fulfillmentMessages[0].text.text[0];
this.reply(text); //
}
// This function will display the response
reply(text) {
let msg = {
_id: this.state.messages.length + 1,
text,
createdAt: new Date(),
user: BOT_USER
};
this.setState(currentState => ({
messages: GiftedChat.append(currentState.messages, [msg])
}));}
Это будет в значительной степени для того, чтобы принять пользовательский запрос на чтение базы данных и затем отобразить его для пользователя. Давай проверим.
Довольно круто! Хм?
Теперь, чтобы добавить и удалить экономию, мне просто нужно определить две функции в намерении, которые будут выглядеть примерно так (например, для добавления сохранения):
function AddSavings(agent){
const text = agent.parameters.text;
let total_savings;
return admin.database().ref('notes').once('value', snapshot => {
var current_savings = snapshot.val().notes;
total_savings = parseInt(current_savings) + parseInt(text);
admin.database().ref('notes').set({
notes: total_savings,
});
});
}
Я думаю, что для того, чтобы хорошо усвоить контент, вы должны над этим что-то построить. Поэтому я оставляю вам AddSavings и RemoveSavings. Вам нужно провести небольшое исследование, чтобы узнать, как получить ценность от пользователя и передать ее агенту. Но я думаю, что это можно сделать легко, и после выполнения задачи вы также почувствуете чувство выполненного долга, которое действительно продвигает нас вперед в жизни.
Итак, это конец моей серии руководств из трех частей «React-native с Dialogflow made easy». Надеюсь, вам понравилось. Если у вас есть какие-либо сомнения, не стесняйтесь спрашивать в комментарии, и если вы хотите увидеть проект, у меня есть ссылка на этот проект на Github, где я также реализовал визуальные графики расходов.
И, наконец, если ваш код сломается, не волнуйтесь, как сказал один бедный программист:
Всякий раз, когда есть код, всегда будут ошибки. Дело в том, что вам нужно найти полезный код из ошибок, прежде чем они смогут вас найти (я думаю, это я;))
Заканчивая эту статью самой важной точкой с запятой, Adios;
