Создаем робота-говоруна для сайта!


Приветствую вас дорогие друзья! В этом уроке я покажу, как можно создать робота для своего сайта! Как создать робота-говоруна для сайта на javascript (jquery) Итак, сначала стоит немного рассказать о том, что такое роботы и для чего они нужны. Робот на сайте - это один из способов обратной связи с посетителями вашего сайта. Робот, как правило, дает ответы на часто задаваемые вопросы, либо на вопросы, которые связаны с вашим сайтов (вашей деятельностью, продуктом).

Давайте приведу практический пример:

 
Зайдем издалека.. Например, вы хорошо знаете английский язык и решили оказывать платные услуги в виде обучающих уроков по английскому. Для этого вы создали сайт, описали модель взаимодействия с вашими клиентами (длительность уроков, время занятий, цены и способы расчета, и так далее), но вам поступают все новые и новые вопросы. Что делать в этом случае? Правильно! Нужно создать страницу с вопросами и ответами (FAQ), а можно создать специального робота, который будет общаться с вашими клиентами и давать ответы на их вопросы.
 

Другой пример:

 
У вас имеется собственный интернет магазин и вам часто поступают одни и те же вопросы (или новые вопросы) от ваших клиентов - в этом случае было бы удобно создать бота, который бы отвечал на те вопросы, ответы на которые у него имеются в базе, а те вопросы, на которые он еще не знает ответ, поступали ли бы вам, после чего вы обучаете своего робота новым ответам и так далее.
В данном уроке я расскажу как реализовать такого робота, а в конце урока. как и всегда, вы сможете посмотреть демо пример такого робота, а также cкачать все исходные файлы из этой статьи. Сделать такого робота очень просто! Состоит он из одной картинки, одного текстового поля для ввода вопроса и кнопки отправки. HTML код:
			<center>
				<img src="https://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="https://sergey-oganesyan.ru/seo-knigi/kak-sozdat-sajt-na-wordpress.html">Читай эту статью!</a>',
		'как дела': 'У меня отлично! А у тебя я даже спрашивать не буду!',
		'как тебя зовут': 'Сергей',
		'кто тебя создал': 'Сергей Оганесян'
	};
	
	//Флаг того, что найден ответ на вопрос
	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 этапа:
  1. Приводим текст к нижнему регистру - функция "toLowerCase()"
  2. Удаляем из текста все лишние символы (знаки препинания, вопрос, восклицание, слеш и прочее) - функция - "replace"
  3. После первых двух обработок удаляем все пробелы с обоих концов
Стоит заметить, что все ключи в массиве также должны быть в нижнем регистре! Переменная - "have_answer" отвечаем за найденное совпадение, то есть если совпадение найдено, то присваиваем этой переменной true (правду), выводим ответ в "result" и выходим из цикла (break). Чтобы вручную обучить бота, нужно просто добавлять новые элементы массива - пары фраз вида 'Вопрос':'Ответ'. Вообще, область применения таких роботов на FAQ не заканчивается, можно создать такого робота, который в процессе вашего с ним общения, соберет нужную информацию о вас (внеся её в базу данных). Исходя из ваших предпочтений, подберет нужный товар (услугу, предложение, тариф и т.д.), а после чего предложит, например, оформить заявку или заказ, забронировать номер в отеле (в кино), заказать обратный звонок - все ограничивается только фантазией! Пишите любые вопросы, идеи и предложения по этой теме, будет интересно узнать ваше мнение. Теперь вы можете скачать исходные файлы, вручную обучить вашего робота и установить на свой сайт!

Demo пример

Скачать исходники

На этом все, желаю вам удачи.


Раздел: Программирование

Дата последнего изменения: 2015-10-25 01:56:13

Просмотров: 11435

Оставить комментарий

* Комментарий: (отменить ответ)

* Ваше имя:

Ваш e-mail:

*