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


Приветствую вас дорогие друзья! В этом уроке я покажу, как можно создать робота для своего сайта! Как создать робота-говоруна для сайта на 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

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

Читайте также:

Игра Угадай число на JavaScript!
Html таблица на JavaScript
Сортировка пузырьком на JavaScript
Движущаяся машина на JavaScript!
Генератор случайных картинок на JavaScript!
Как изменить фон страницы на JavaScript
Виртуальная клавиатура на javascript!
Как создать слайд шоу на javascript?

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

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

* Ваше имя:

Ваш e-mail:

*