Приветствую вас дорогие друзья! В этом уроке я покажу, как можно создать робота для своего сайта!
Итак, сначала стоит немного рассказать о том, что такое роботы и для чего они нужны. Робот на сайте – это один из способов обратной связи с посетителями вашего сайта.
Робот, как правило, дает ответы на часто задаваемые вопросы, либо на вопросы, которые связаны с вашим сайтов (вашей деятельностью, продуктом).
Давайте приведу практический пример:
Зайдем издалека.. Например, вы хорошо знаете английский язык и решили оказывать платные услуги в виде обучающих уроков по английскому.
Для этого вы создали сайт, описали модель взаимодействия с вашими клиентами (длительность уроков, время занятий, цены и способы расчета, и так далее), но вам поступают все новые и новые вопросы.
Что делать в этом случае? Правильно! Нужно создать страницу с вопросами и ответами (FAQ), а можно создать специального робота, который будет общаться с вашими клиентами и давать ответы на их вопросы.
Другой пример:
У вас имеется собственный интернет магазин и вам часто поступают одни и те же вопросы (или новые вопросы) от ваших клиентов – в этом случае было бы удобно создать бота, который бы отвечал на те вопросы, ответы на которые у него имеются в базе, а те вопросы, на которые он еще не знает ответ, поступали ли бы вам, после чего вы обучаете своего робота новым ответам и так далее.
В данном уроке я расскажу как реализовать такого робота, а в конце урока. как и всегда, вы сможете посмотреть демо пример такого робота, а также cкачать все исходные файлы из этой статьи.
Сделать такого робота очень просто! Состоит он из одной картинки, одного текстового поля для ввода вопроса и кнопки отправки.
HTML код:
<center>
<img src="http://sergey-oganesyan.ru/wp-content/uploads/2014/11/robot.png">
<br><br><input autofocus placeholder="Есть вопросы?" id="text"><input style="cursor:pointer;" type="submit" id="send">
<result style="color: #444"></result>
</center>
- autofocus – делаем поле ввода активным (даем ему фокус) сразу после загрузки страницы
- placeholder – текст внутри поля, который сам пропадает при наборе текста
- result – в этот тег обрамлен ответ робота
Программный код тоже очень простой! У нас имеется ассоциативный массив, в котором ключ является вопросом, а значение ключа, соответственно, ответом.
Стоит сказать, что в данной статье описан самый примитивный вариант реализации робота, поэтому у него есть свои недостатки – решаемые недостатки.
Давайте рассмотрим код, а после разберем его основные моменты.
Jquery код:
//Массив ответов
var answers = {
'привет': 'И тебе привет!',
'сколько тебе лет': '21',
'кто ты': 'Я Робот!',
'как создать сайт': '<a href="http://sergey-oganesyan.ru/seo-knigi/kak-sozdat-sajt-na-wordpress.html">Читай эту статью!</a>',
'как дела': 'У меня отлично! А у тебя я даже спрашивать не буду!',
'как тебя зовут': 'Виталий',
'кто тебя создал': 'Виталий Admin'
};
//Флаг того, что найден ответ на вопрос
var have_answer = false;
$('#send').click(function(){
var text = $('#text').val();
if( text != '' ){
for (var i in answers){
if( i == text.toLowerCase().replace(/[/.,!?;]*/g, '').trim() ){
$('result').append('<p>' + answers[i] + '</p>');
have_answer = true;
break;
}
}
if( !have_answer ) $('result').append('<p>Я тебя не понимаю!</p>');
var have_answer = false;
$('#text').val('').focus();
}else $('result').append('<p>Не нужно пустых слов..</p>');
});
По клику на кнопку – “Отправить” мы проверяем значение поля на пустоту – если оно пустое, то выводим фразу – “Не нужно пустых слов..”, если не пустое, то обрабатываем.
В цикле проходимся по всему массиву ответов и сравниваем ключи с введенными данными, если есть совпадение, то выводим значение ключа, иначе выводим сообщение о том, что робот не понимает своего “приятеля по разговору”.
Сказу возникает вопрос – “Как простым способом увеличить процент совпадения с ключами?” – Очень просто!
Для этого мы обрабатываем введенные данные в 3 этапа:
- Приводим текст к нижнему регистру – функция “toLowerCase()”
- Удаляем из текста все лишние символы (знаки препинания, вопрос, восклицание, слеш и прочее) – функция – “replace”
- После первых двух обработок удаляем все пробелы с обоих концов
Стоит заметить, что все ключи в массиве также должны быть в нижнем регистре!
Переменная – “have_answer” отвечаем за найденное совпадение, то есть если совпадение найдено, то присваиваем этой переменной true (правду), выводим ответ в “result” и выходим из цикла (break).
Чтобы вручную обучить бота, нужно просто добавлять новые элементы массива – пары фраз вида ‘Вопрос’:’Ответ’.
Вообще, область применения таких роботов на FAQ не заканчивается, можно создать такого робота, который в процессе вашего с ним общения, соберет нужную информацию о вас (внеся её в базу данных).
Исходя из ваших предпочтений, подберет нужный товар (услугу, предложение, тариф и т.д.), а после чего предложит, например, оформить заявку или заказ, забронировать номер в отеле (в кино), заказать обратный звонок – все ограничивается только фантазией!
Пишите любые вопросы, идеи и предложения по этой теме, будет интересно узнать ваше мнение.
Теперь вы можете скачать исходные файлы, вручную обучить вашего робота и установить на свой сайт!
Demo пример
Скачать исходники
На этом все, желаю вам удачи.
Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.