Создание мини-чата на PHP и jQuery

$(function(){

 

    // Сохраняем некоторые элементы в переменные для удобства

 

    var refreshButton = $(‘h2 img’),

        shoutboxForm = $(‘.shoutbox-form’),

        form = shoutboxForm.find(‘form’),

        closeForm = shoutboxForm.find(‘h3 span’),

        nameElement = form.find(‘#shoutbox-name’),

        commentElement = form.find(‘#shoutbox-comment’),

        ul = $(‘ul.shoutbox-content’);

 

    // Заменяем 🙂 на смайлики-эмоджи:

    emojione.ascii = true;

 

    // Загружаем комментарии.

    load();

    

    // При отправке формы, если все заполнено, публикуем сообщение в базе данных

    

    var canPostComment = true;

 

    form.submit(function(e){

        e.preventDefault();

 

        if(!canPostComment) return;

        

        var name = nameElement.val().trim();

        var comment = commentElement.val().trim();

 

        if(name.length && comment.length && comment.length < 240) {

        

            publish(name, comment);

 

            // Блокируем публикацию новых сообщений

 

            canPostComment = false;

 

            // Разрешаем новому комментарию быть опубликованным через 5 секунд

 

            setTimeout(function(){

                canPostComment = true;

            }, 5000);

 

        }

 

    });

    

    // Переключаем видимость формы.

    

    shoutboxForm.on(‘click’, ‘h3’, function(e){

        

        if(form.is(‘:visible’)) {

            formClose();

        }

        else {

            formOpen();

        }

        

    });

    

    // При клике на кнопку REPLY (Ответить) происходит добавление в текстовое поле имени человека, которому вы хотели бы ответить.

    

    ul.on(‘click’, ‘.shoutbox-comment-reply’, function(e){

        

        var replyName = $(this).data(‘name’);

        

        formOpen();

        commentElement.val(‘@’+replyName+’ ‘).focus();

 

    });

    

    // При клике на кнопку «Обновить» происходит срабатывание функции load

    

    var canReload = true;

 

    refreshButton.click(function(){

 

        if(!canReload) return false;

        

        load();

        canReload = false;

 

        // Разрешаем дополнительные перезагрузки через 2 секунды

        setTimeout(function(){

            canReload = true;

        }, 2000);

    });

 

    // Автоматически обновляем сообщения каждые 20 секунд

    setInterval(load,20000);

 

 

    function formOpen(){

        

        if(form.is(‘:visible’)) return;

 

        form.slideDown();

        closeForm.fadeIn();

    }

 

    function formClose(){

 

        if(!form.is(‘:visible’)) return;

 

        form.slideUp();

        closeForm.fadeOut();

    }

 

    // Сохраняем сообщение в базе данных

    

    function publish(name,comment){

    

        $.post(‘publish.php’, {name: name, comment: comment}, function(){

            nameElement.val(«»);

            commentElement.val(«»);

            load();

        });

 

    }

    

    // Получаем последние сообщения

    

    function load(){

        $.getJSON(‘./load.php’, function(data) {

            appendComments(data);

        });

    }

    

    // Обрабатываем массив с сообщениями в виде HTML

    

    function appendComments(data) {

 

        ul.empty();

 

        data.forEach(function(d){

            ul.append(‘<li>’+

                ‘<span>’ + d.name + ‘</span>’+

                ‘<p>’ + emojione.toImage(d.text) + ‘</p>’+

                ‘<div><span data-name=»‘ + d.name + ‘»>REPLY</span>’+

                ‘<span>’ + d.timeAgo + ‘</span></div>’+

            ‘</li>’);

        });

 

    }

 

});

5 проверенных сервисов для создания чат-ботов

Чат-боты вез­де. Они кон­суль­ти­ру­ют в интернет-магазинах, отве­ча­ют в соц­се­тях и дают справ­ки в мес­сен­дже­рах. Пора и нам заве­сти соб­ствен­но­го.

Общий прин­цип рабо­ты чат-ботов такой: есть типо­вые ситу­а­ции, с кото­ры­ми при­хо­дят люди, и для этих ситу­а­ций есть типо­вые реше­ния. А когда стан­дарт­но­го реше­ния нет, бот пере­да­ёт управ­ле­ние чело­ве­ку.

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

Мы собра­ли 5 сервисов-конструкторов чат-ботов, поз­во­ля­ю­щих с помо­щью мыши и про­ду­ман­ных сце­на­ри­ев диа­ло­га создать сво­е­го тек­сто­во­го робо­та.

Flow XO

flowxo.com

Сто­и­мость: базо­вые воз­мож­но­сти — бес­плат­но, для серьёз­ной рабо­ты — от 19$ в месяц.

Плат­фор­мы: Facebook Messenger, Telegram, Slack, SMS, инте­гра­ция с сай­том.

Основ­ная зада­ча это­го бота — собрать как мож­но боль­ше дан­ных, что­бы потом пере­дать их чело­ве­ку. Такой про­стой чат-бот, кото­рый спра­ши­ва­ет кон­такт­ную инфор­ма­цию и зано­сит её в базу.

Если потра­тить поболь­ше вре­ме­ни, то мож­но научить его рас­по­зна­вать отдель­ные вопро­сы и давать на них зара­нее заго­тов­лен­ные отве­ты. Кро­ме это­го бот уме­ет отправ­лять кар­тин­ки и видео, запра­ши­вать нуж­ную инфор­ма­цию и зада­вать уточ­ня­ю­щие вопро­сы.

Chatfuel

chatfuel.com

Сто­и­мость: до 1 000 обра­ще­ний бес­плат­но, далее — 15$ в месяц.

Плат­фор­мы: основ­ная — Facebook Messenger, но мож­но настро­ить инте­гра­цию и с дру­ги­ми сер­ви­са­ми, в зави­си­мо­сти от тер­пе­ния (тут уже потре­бу­ет­ся про­грам­ми­ро­ва­ние).

Это про­стой и быст­рый кон­струк­тор чат-ботов. Он авто­ма­ти­че­ски свя­зы­ва­ет­ся с вашим про­фи­лем и стра­ни­ца­ми, кото­рые вы ведё­те. Вся настрой­ка сво­дит­ся к тому, что нуж­но объ­яс­нить боту, как реа­ги­ро­вать на сооб­ще­ния и что делать в раз­ных слу­ча­ях. Он может отправ­лять и при­ни­мать кар­тин­ки, ссыл­ки, давать быст­рые отве­ты и сохра­нять исто­рию всех чатов.

Здесь даже мож­но настро­ить подо­бие искус­ствен­но­го интел­лек­та: как реа­ги­ро­вать на кон­крет­ные фра­зы или сло­ва в сооб­ще­нии. Напри­мер, если в диа­ло­ге всплы­ва­ет вопрос «Сколь­ко сто­ит…», то бот может в ответ дать ссыл­ку на прайс-лист или назвать кон­крет­ную сто­и­мость.

Botsify

botsify.com

Сто­и­мость: от 50$ до 300$ в месяц, бес­плат­ный проб­ный пери­од — 30 дней.

Плат­фор­мы: Facebook Messenger, Slack, инте­гра­ция с сай­том.

Один из самых про­стых кон­струк­то­ров в нашей под­бор­ке. Для реги­стра­ции доста­точ­но почты, а сра­зу после стар­та вам пред­ла­га­ют на выбор несколь­ко обла­стей при­ме­не­ния чат-бота. Если что-то пошло не так, все­гда мож­но вер­нуть­ся на несколь­ко шагов назад и испра­вить что угод­но. Кон­струк­тор настоль­ко про­стой, что вряд ли у вас полу­чит­ся сде­лать что-нибудь непра­виль­но.

Прин­цип пове­де­ния бота — типо­вые отве­ты на стан­дарт­ные вопро­сы, на боль­шее он не спо­со­бен. Но если гра­мот­но про­ду­мать сце­на­рии и про­пи­сать самые частые фра­зы, то чат-бот вполне может рас­ска­зать в выход­ные или ночью про то, как добрать­ся до офи­са, сколь­ко сто­ят услу­ги и по како­му теле­фо­ну мож­но дозво­нить­ся до опе­ра­то­ра.

SAP Conversational AI (бывший Recast.AI)

cai.tools.sap

Сто­и­мость: бес­плат­но, но за неко­то­рые бизнес-функции нуж­но пла­тить отдель­но.

Плат­фор­мы: прак­ти­че­ски все.

Эти ребя­та сде­ла­ли став­ку на машин­ное обу­че­ние, тон­кую настрой­ку и гиб­кость в сце­на­ри­ях. Они пони­ма­ют, что для раз­ных задач нуж­ны раз­ные боты, поэто­му на стар­те нам пред­ла­га­ют выбрать сце­на­рий исполь­зо­ва­ния и сде­лать несколь­ко базо­вых настро­ек, кото­рые упро­ща­ют пер­вый запуск.

После это­го мож­но при­сту­пать к пол­но­цен­но­му обу­че­нию и тон­ким настрой­кам. Всё мож­но сде­лать в виде схе­мы уме­ний и свя­зей меж­ду ними. Их мож­но созда­вать сколь­ко угод­но, про­пи­сы­вать внут­ри любые свой­ства, собы­тия и усло­вия.

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

Microsoft Azure (Azure AI)

azure.microsoft.com/ru-ru/overview/ai-platform/

Сто­и­мость: бес­плат­но. При жела­нии мож­но сде­лать премиум-бота по 32 руб­ля за 1 000 сооб­ще­ний.

Плат­фор­мы: все. Систе­ме неваж­но, куда её встро­ят, она будет рабо­тать вез­де.

Мы вклю­чи­ли этот сер­вис в под­бор­ку для того, что­бы пока­зать: чат-боты не про­сто игруш­ки для интернет-магазинов. Microsoft пред­ла­га­ет исполь­зо­вать свой сер­вис всем жела­ю­щим создать по-настоящему умно­го чат-бота. Внут­ри Azure сто­ит тот же дви­жок, кото­рый Microsoft исполь­зо­ва­ла для созда­ния голо­со­во­го помощ­ни­ка Cortana.

В нём нет про­стых поша­го­вых инструк­ций и шаб­ло­нов, но зато мож­но исполь­зо­вать насто­я­щее рас­по­зна­ва­ние тек­ста и речи, нечёт­кую логи­ку и само­обу­ча­е­мые ней­рон­ные сети. Дру­гой вопрос, зачем вам такая мощь искус­ствен­но­го интел­лек­та для шаб­лон­ных отве­тов в Facebook, но сама воз­мож­ность, без­услов­но, впе­чат­ля­ет.

Создание чат-приложения реального времени за пять минут с помощью Node-RED

Луиса Густав Феррас Аоки и Брэдли Штайнфельд
Опубликовано 19.12.2014

Зарегистрируйтесь в IBM Bluemix™
Эта облачная платформа содержит бесплатные службы, инструменты времени выполнения и инфраструктуру, которые помогут вам быстро создать и развернуть свое следующее мобильное или веб-приложение.

Ссылка на оригинал (in English)

Node-RED — это инструмент с открытым исходным кодом, разработанный группой новых технологии IBM, который позволяет создавать приложения, просто соединяя готовые компоненты. Эти компоненты могут быть устройствами, веб-API или онлайн-службами.

“Мы покажем, как всего за несколько минут построить приложение чата реального времени на платформе Node-RED с помощью Bluemix.”

На платформе IBM Bluemix легко организовать среду выполнения Node-RED. Всего несколько щелчков кнопки мыши, и вы получаете рабочую среду, готовую к созданию нового приложения. В этой статье мы покажем, как всего за несколько минут построить приложение чата реального времени на платформе Node-RED с помощью Bluemix.

Запустить приложениеПолучить код

Что для этого требуется

• Учетная запись Bluemix
• Знакомство с HTML, CSS и JavaScript. Мы предоставляем весь необходимый код, но знакомство с этими технологиями поможет вам понять детали.

Шаг 1. Создание приложения на платформе Node-RED

1. Войдите в Bluemix и создайте новый шаблон Node-RED.
2. Присвойте приложению имя и нажмите кнопку CREATE.
3. На информационной панели Bluemix перейдите по URL-адресу, указанному для вашего нового приложения, чтобы запустить его на главной странице Node-RED.
4. Теперь щелкните на ссылке Go to your Node-RED flow editor, чтобы открыть редактор блок-схемы.
5. Вы увидите пустой лист, на котором мы будем строить приложение. При использовании Node-RED приложения строятся с помощью этого графического редактора путем соединения нужных блоков. Блоки просто перетаскиваются из левого меню в рабочую область в центре экрана и соединяются для создания новой блок-схемы.

Шаг 2. Импорт кода

Каждое приложение Node-RED можно импортировать и экспортировать в формате JSON. Давайте импортируем наше приложение чата на новый лист.

1. Войдите в репозиторий проекта на сайте IBM DevOps Services и откройте файл nodechat.json.
2. Скопируйте все содержимое файла, а затем вернитесь в свой браузер с открытой страницей Node-RED.
3. Нажмите кнопку меню в верхнем правом углу и выберите Import from… > Clipboard…
.
4. Вставьте содержимое файла из репозитория и нажмите кнопку ОК.
5. Щелкните где-нибудь на пустом листе, чтобы добавить импортированные узлы.
   

Позже мы объясним, что делает каждый компонент, а пока развернем и запустим приложение.

Шаг 3. Развертывание и запуск приложения

1. Нажмите красную кнопку Deploy рядом с кнопкой меню, чтобы оживить свое приложение.
   
2. Вы увидите сообщение об успешном развертывании в верхней части окна, и синие точки над узлами исчезнут. Эти точки означают, что узел был изменен, но еще не развернут.
   
3. Теперь откройте новую вкладку в браузере и перейдите на страницу http://[appname].mybluemix.net/chat, заменив [app name] именем своего приложения.
   
4. Теперь приложение чата работает. Введите имя пользователя в поле слева, напишите сообщение в поле справа и нажмите кнопку Send.
   
5. Откройте чат во втором окне или отправьте ссылку кому-нибудь из своих друзей и наслаждайтесь общением. Сообщения должны приходить мгновенно.
   

Шаг 4. Разбор кода (факультативно)

В этом разделе мы рассмотрим код нашего приложения. Этот раздел можно пропустить, но мы рекомендуем прочесть его, чтобы понять, как построено приложение, и узнать, как работает Node-RED.

1. В первом разделе у нас есть три узла:
   • WebSocket in
   • Function
   • WebSocket out

   Эти блоки отвечают за создание канала связи и обработку сообщений в режиме реального времени с помощью протокола WebSocket. Блок Function довольно прост. Он всего лишь удаляет значение _session из объекта msg, чтобы сообщение транслировалось во все клиенты, подключенные к WebSocket.

2. Второй поток отвечает за код на стороне клиента. В нем есть узел HTTP in, Template для отображения HTML-страницы и узел HTTP out для ответа.

   Узел HTTP in ([get] /chat) создает конечную точку для получения запросов GET и их передачи в Template. Узел HTTP out создает надлежащий ответ, возвращаемый пользователю после визуализации шаблона.

3. Шаблон можно разбить на три части: структура страницы, обработка сообщений и визуальное представление.
4. По своей структуре страница – это простая HTML-страница с элементом div, в который поступают все сообщения чата, и нижним колонтитулом, который содержит поля для отправки сообщений.
5. Обработка сообщений производится с помощью JavaScript. Сначала мы открываем соединение с конечной точкой WebSocket, которую создали с помощью Node-RED.
   

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

6. Когда пользователь отправляет сообщение, создается объект с именем пользователя и сообщением, который передается на сервер с помощью метода send в нашем объекте ws.
7. Визуальная часть выполнена с помощью простых правил CSS, которые не рассматриваются в этой статье.

Заключение

Node-RED упрощает разработку кода, предоставляя набор узлов, готовых к соединению и использованию. Как показано в этой статье, для получения сервера, установленного на платформе Bluemix, который можно использовать в своих проектах, требуется совсем немного усилий. Это простое приложение чата можно совершенствовать, добавляя к существующим узлам новые и создавая новые потоки.

Ресурсы для скачивания

Подпишите меня на уведомления к комментариям

9 платформ искусственного интеллекта для создания чат-ботов в социальных сетях

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

Что есть чат-бот?

Чат-бот^એ есть интеллектуальная программа для автоматизации диалога в чате. Представьте себе, что вы что-то купили в Интернете и хотели бы узнать, когда это что-то привезут, так называемое ETA (Estimate Time of Arrival — ожидаемое время прибытия). Что бы вы сделали?

Обычно, надо отправить электронное письмо, позвонить в магазин или зайти на сайт продавца для проверки статуса своего заказа. Согласны?

Сейчас можно посетить сайт магазина или страницу facebook для того, чтобы ввести номер своего заказа и чат-бот предоставит вам ETA покупки. Веселее, не так ли?

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

Почему чат-бот — это важно?

Чат-бот экономит издержки по поддержке бизнеса — индивидуальный диалог между клиентом и бизнес-организацией без привлечения человека. Клиент может задавать вопросы и получать ответы от чата.

Чат-бот экономит время клиента — не нужно тратить время на звонки и электронную почту. Большинство из нас уже используют чаты популярных платформ, таких как Facebook, WhatsApp и т.д. Мы уже привыкли к такому общению.

Сегодня каждый может создать чат-бот для своего бизнеса или себя любимого на любой известной платформе, включая Facebook Messenger, WhatsApp, Website, Slack, Twitter и т.д.

Возможности приложений искусственного интеллекта помогут вам создавать мультиплатформенный чат-бот, в том числе и для Facebook Messenger.

1Converse.ai

Converse.ai — компания из Сан-Франциско, которая позволяет легко создавать чаты для вашей бизнес-организации.

Решения Converse.ai можно интегртровать с Google, Slack, Twitter, Twilio, Kik, Layer, Intercom, Airtable, Flight Stats, MailChimp, Mailgun, и Hubspot.

Основные моменты:

• Простой пользательский интерфейс, основанный на Web.
• Множество диалогов бота клиентами точно оцениваются и обучают его для подходящих ответов.
• Интеграция одним щелчком мыши для большинство известных платформ.

2Chatty People

Chatty People   одна из наилучших платформ искусственного интеллекта для создания чат-ботов для Facebook. Кроме того, она интегрируется с Facebook commerce. Создавая соообщения, Вы можете закодировать собственный опыт. Это наилучшее решение для малого и среднего бизнеса.

Основные моменты:

• Он может принимать заказы сразу и от мессенджера и из комментариев.
• Вы можете регулировать предложения и совершать сделки, реагируя на активность своих фалловеров.
• Chatty people — это E-Commerce, интегрированная с компаниями поддерживающими open cart, например, Magento ил Woocommerce.
• ChattyPeople на 100% бесплатна для старта.

3ManyChat

Платформа, которая поддерживает FB messenger, продажи и маркетинг.

ManyChat предлагает drag-n-drop бот-конструктор, где вы можете определить логику, автоматизировать проводку и многое другое без кодирования.

Кроме страниц Facebook вы можете использовать значок чата на своем сайте для увеличения числа подписчиков. Прекрасные перспективы, целая платформа для обмена чат-ботом.

4Smooch

Используя мощный API от Smooch, Вы можете создавать чат-боты для множества платформ, включая Facebook Messenger. Единственный унифицированный API предоставляет нам множество надежных функций.

Smooch интегрирован в топовые платформы, такие как Messenger, Twitter, Slack, Zendesk, Android SDK и iOS SDK.

5MobileMonkey

Для начала совершенно бесплатно подключите свою страницу Facebook — это займет всего несколько минут. MobileMonkey обладает всеми возможностями для расширения своих контактов, маркетинга своего продукта, контента, сервисов ипрочее, прочее, прочее…

Некоторые из лучших функций:

• Сегментация аудитории
• Blast-чаты для продвижения и уведомлений
• Автоматизация ежедневных операционных задач
• Построение воронки продаж
• Триггеры на основе ключевых слов для использования ИИ
• Мощная аналитика отслеживания изменений

С помощью MobileMonkey вы сможете добавить виджет чата на свой сайт.

6Beep Boop

Beep Boop — платная хостинговая программа для создания чат-ботов. Можно делать чат-боты для Slack, используя мессенджер.

Основные моменты:

• Исходный код интеграции размещен на GitHub, поэтому вы можете выбрать любой подходящий язык программирования
• Имеется модуль node.js с открытым исходным кодом, который особе ценен при создании Slack-ботов.
• Имеется аналитика для мониторинга и обоснованных гипотез относительно активности вашего бота.

7Botkit

Botkit — платформы с открытым исходным кодом для создания чатов. Разработана командой Howdy и предлагает семантический интерфейс для отправки и получения сообщений, чтобы разработчики могли сосредоточиться на создании великолепных приложений, а не на проблемах использования API.

Вот некоторые инструменты Botkit:

• Botkit Studio, интегрированная среда разработки и настройки ботов
• Starter Kits, типовые приложения, предварительно настроенные для работы с современными платформами
• Botkit Core Library, SDK^એ для создания диалогового программного обеспечения
• Plugins and Middlewares, которые могут расширить и улучшить ваш бот

Основные моменты:

• Можно добавлять в API дополнительный код для улучшения функциональности
• Можно управлять сообщениями в реальном времени, мониторить активность и предоставлять подробную статистику
• Можно включить пузырьки, которые отправляют значения обратной передачи, когда пользователь нажимает на них
• Можно настроить звуки при отправке сообщений и уведомлений

8Botsociety

Botsociety — простой инструмент для создания чатов. Все, что вам нужно сделать, это отправить текст пользователя и ответ бота.

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

9Wit.ai

Wit.ai с января 2015 года принадлежит Facebook и призвано помочь разработчикам в распознавании речи. Wit.ai имеет более 100 000 активных разработчиков, которые создали API голосовых интерфейсов.

Механизм ботов в настоящее время доступен на 11 языках, в настоящее время еще 39 находятся в стадии бета-тестирования. Полностью открытый код, можно использовать опыт и код другого разработчика в своих проектах.

Wit.ai интегрируется с Python, Node.js и Ruby.

Эта платформа должна помогать в создании своих ботов для бизнеса.

PS: Это не первая статья об инструментах «чат-ботизма» здесь. Дополнительно о них можно прочитать в предыдущем вирше «Маркетинг: как сделать чат-бота», где немножко есть об отечественных ресурсах

Источник перевода: 9 AI Platform to Help you in Creating Facebook Chatbot

9 платформ искусственного интеллекта для создания чат-ботов в социальных сетях, опубликовано К ВВ, лицензия — Creative Commons Attribution-NonCommercial 4.0 International.

Респект и уважуха