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

Приветствую вас дорогие друзья! В этом уроке я покажу, как можно создать робота для своего сайта!

Как создать робота-говоруна для сайта на javascript (jquery)

Итак, сначала стоит немного рассказать о том, что такое роботы и для чего они нужны. Робот на сайте – это один из способов обратной связи с посетителями вашего сайта.

Робот, как правило, дает ответы на часто задаваемые вопросы, либо на вопросы, которые связаны с вашим сайтов (вашей деятельностью, продуктом).

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

 

Зайдем издалека.. Например, вы хорошо знаете английский язык и решили оказывать платные услуги в виде обучающих уроков по английскому.

Для этого вы создали сайт, описали модель взаимодействия с вашими клиентами (длительность уроков, время занятий, цены и способы расчета, и так далее), но вам поступают все новые и новые вопросы.

Что делать в этом случае? Правильно! Нужно создать страницу с вопросами и ответами (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>',
		'как дела': 'У меня отлично! А у тебя я даже спрашивать не буду!',
		'как тебя зовут': 'Сергей',
		'кто тебя создал': 'Сергей Оганесян'
	};
	
	//Флаг того, что найден ответ на вопрос
	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 пример

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

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


Хостинг, которым я пользуюсь: Good-Host


Похожие статьи

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

Ваш email не будет опубликован. Обязательные поля отмечены *

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>