Як пабудаваць інтэрфейс чат-бота

Аўтар: Randy Alexander
Дата Стварэння: 2 Красавік 2021
Дата Абнаўлення: 16 Травень 2024
Anonim
Как создать бесплатного чат-бота на сайт за 25 минут (с нуля без программирования)
Відэа: Как создать бесплатного чат-бота на сайт за 25 минут (с нуля без программирования)

Задаволены

У сярэдзіне 2000-х віртуальныя агенты і чат-боты для абслугоўвання кліентаў атрымалі шмат захаплення, хаця і не вельмі размаўлялі, і пад капотам яны проста складаліся з абменаў дадзенымі з вэб-серверамі.

У наш час, нягледзячы на ​​тое, што існуе велізарная колькасць прыкладаў "слабага ІІ" (у тым ліку Siri, Alexa, вэб-пошукавыя сістэмы, аўтаматызаваныя перакладчыкі і распазнаванне твараў) і іншыя тэмы, такія як адаптыўны вэб-дызайн, усё роўна выклікаюць ажыятаж. . З вялікімі інвестыцыямі буйных кампаній застаецца шмат магчымасцей узламаць размоўныя інтэрфейсы будучыні.

  • Як стварыць вопыт чат-бота

Часам яны атрымліваюць дрэнную рэпутацыю, але чат-боты могуць спатрэбіцца. Ім не трэба адчуваць сябе асноўнай заменай стандартнай вэб-формы, калі карыстальнік запаўняе палі ўводу і чакае праверкі - яны могуць забяспечыць размову.


Па сутнасці, мы паляпшаем карыстацкае ўражанне, каб адчуваць сябе больш натуральна, напрыклад, размаўляць са спецыялістам ці сябрам, а не націскаць і націскаць вэб-браўзэр альбо жэсты на мабільным тэлефоне. Мэта складаецца ў тым, што, забяспечваючы спагадлівыя, кантэкстныя адказы, гэтая тэхналогія будзе ўкараняцца непасрэдна ў жыццё людзей.

Паглядзіце відэа ніжэй або чытайце далей, каб даведацца пра практычны спосаб распрацоўкі і стварэння чат-бота, заснаванага на рэальным дадатку для прыёму праектаў у практыцы дызайну паслуг.

01. Усталюйце асобу

Паколькі гэтая практыка абслугоўвае больш за 110 000 членаў па ўсім свеце, мэта складалася ў тым, каб забяспечыць хуткі, зручны і натуральны інтэрфейс, дзякуючы якому ўнутраныя зацікаўленыя бакі могуць запытаць эфектыўныя лічбавыя паслугі, замест таго, каб запаўняць заблытаныя формы.

Першым крокам было вызначыць асобу чат-бота, бо гэта будзе прадстаўляць голас дызайнерскай службы для яе зацікаўленых бакоў. Мы абапіраліся на асноўную працу Аарона Вальтэра па дызайне. Гэта значна дапамагло нашай камандзе развіць рысы характару бота, якія потым вызначылі паведамленні для прывітання, памылак і зваротнай сувязі з карыстальнікамі.


Гэта далікатны этап, бо ён уплывае на тое, як успрымаецца арганізацыя. Каб пераканацца, што мы маем як мага больш інфармацыі, мы неадкладна стварылі семінары для зацікаўленых бакоў, каб уключыць адпаведную індывідуальнасць, колер, тыпаграфіку, выявы і паток карыстальнікаў пры ўзаемадзеянні з ботам.

Пасля таго, як мы атрымалі ўсе неабходныя ўзгадненні - у тым ліку шукаць юрысконсульта, - мы паспрабавалі ператварыць архаічныя формы запытаў у шэраг пытанняў, якія імітуюць размову паміж зацікаўленымі бакамі і прадстаўніком нашай дызайнерскай службы.

02. Выкарыстоўвайце RiveScript

Мы ведалі, што не хочам паглыбляцца ў мову разметкі ІІ для часткі апрацоўкі - нам проста трэба, каб пачаць вопыт.

RiveScript - гэта просты API чат-бота, які дастаткова просты ў засваенні і дастатковы для нашых патрэб. На працягу некалькіх дзён у нас з'явілася логіка прыняць запыт на праект ад бота і разабраць яго з дастатковай бізнес-логікай для праверкі і класіфікацыі, каб можна было адправіць яго праз службы JSON REST у адпаведную чаргу ўнутраных заданняў па праекце.


Каб гэты асноўны чат-бот працаваў, перайдзіце да рэпа RiveScript, кланіруйце яго і ўсталюйце ўсе стандартныя залежнасці ад Node. У рэпа можна таксама паспрабаваць узаемадзеянне, якое можна дадаць з рознымі фрагментамі прыкладаў.

Далей запусціце тэчку вэб-кліента, якая ператварае бота ў вэб-старонку, запусціўшы асноўны сервер Grunt. На дадзены момант вы можаце палепшыць досвед у адпаведнасці з вашымі патрэбамі.

03. Стварыце мозг бота

Наступны крок - стварэнне «мозгу» нашага бота. Гэта паказана ў файлах з пашырэннем .RIVE, і, на шчасце, RiveScript ужо пастаўляецца з асноўнымі ўзаемадзеяннямі (напрыклад, такімі пытаннямі, як "Як цябе завуць?", "Колькі табе гадоў?" І "Якой ты любімы колер? ').

Калі вы запускаеце прыкладанне вэб-кліента, выкарыстоўваючы адпаведную каманду Node, HTML-файлу даручана загрузіць іх.RIVE файлы.

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

Так, напрыклад:

  • Добры дзень, чым мы можам дапамагчы?
  • Выдатна, як хутка нам трэба пачаць?
  • Ці можаце вы прыблізна ўявіць ваш бюджэт?
  • Раскажыце мне больш пра свой праект ...
  • Як вы пачулі пра нас?

Звычайная даступная вэб-форма будзе выглядаць так:

form action = ""> fieldset> legend> Тып запыту: / legend> input id = "option-one" type = "radio" name = "request-type" value = "option-one"> label for = "option- one "> option 1 / label> br> input id =" option-two "type =" radio "name =" request-type "value =" option-two "> label for =" option-two "> option 2 / label> br> input id = "option-three" type = "radio" name = "request-type" value = "option-three"> label for = "option-three"> варыянт 3 / label> br> / fieldset > fieldset> legend> Timeline: / legend> input id = "one-month" type = "radio" name = "request-timeline" value = "one-month"> label for = "one-month"> 1 месяц / label> br> input id = "адзін-тры месяцы" type = "radio" name = "request- timeline" value = "one-three-months"> label for = "one-month"> 1-3 месяцы / label> br> input id = "чатыры плюс месяцы" type = "radio" name = "request- timeline" value = "four-plus-months"> label for = "four-plus-months"> 4+ месяцаў / label> br> / fieldset> br> label for = "request-budget"> Інфармацыя пра бюджэт / label> br> textarea id = "request-budget" name = "request-budget-text" рядкі = "10" cols = "30"> / textarea> br> label for = "request-description"> Апісанне / этыкетка праекта> br> textarea id = "request-description" name = "request- description-text" шэрагі = "10" cols = "30"> / textarea > br> label for = "request-reference"> Reference / label> br> textarea id = "request-reference" name = "request-reference- text" ряд = = 10 "cols =" 30 "> / textarea> br > input type = "submit" value = "Submit"> / form>

З вэб-формамі мы добра знаёмыя з пэўнымі шаблонамі: вы націскаеце кнопку "Адправіць", усе дадзеныя формы перасылаюцца на іншую старонку, дзе апрацоўваецца запыт, і тады, хутчэй за ўсё, выскачыць нахабная старонка "Дзякуй".

З дапамогай чат-ботаў мы можам узаемадзейнічаць пры падачы запыту і зрабіць яго больш значным.

04. Дызайн голасу

Каб пераўтварыць гэтую форму ў размоўны карыстацкі інтэрфейс, які падаецца ў вэб-кліенце чат-бота RiveScript, нам трэба пераўтварыць інфармацыйную архітэктуру з цвёрдай у вадкую; альбо пазнакі палёў у радкі карыстацкага інтэрфейсу.

Давайце разгледзім некаторыя даступныя этыкеткі палёў і звязаны з імі тон пытання:

  • Запыт: Чым мы можам дапамагчы? Не ўпэўнены? Вы не супраць, калі я задам некалькі пытанняў?
  • Графік: Як хутка нам трэба пачаць?
  • Інфармацыя пра бюджэт: Ці можаце вы прыблізна ўявіць ваш бюджэт?
  • Апісанне праекта: Добра, вы можаце сказаць мне кароткі змест праблемы, якую трэба вырашыць?
  • Даведка: Акрамя таго, хто накіраваў вас да нас?

Далей нам трэба пераўтварыць код вэб-формы ў AI-сцэнар, прытрымліваючыся вельмі вывучаемай логікі апрацоўкі RiveScript для двухбаковых размоў:

- Чым мы можам дапамагчы? + *%, чым мы можам дапамагчы - set areas = varSure, Вы не супраць, калі я задам пару пытанняў? + *% упэўнены, што вы не супраць, калі я задаю пару пытанняў - як хутка мне трэба пачаць гэты запыт? + *%, як хутка мне трэба пачаць гэты запыт - усталюйце калі = varМожаце вы даць мне прыблізнае ўяўленне пра свой бюджэт? + *% Вы можаце даць мне прыблізнае ўяўленне пра свой бюджэт - усталяваць бюджэт = varOK, ці можаце вы сказаць мне кароткі змест праблемы, якую трэба вырашыць, закранутыя кампаненты і асяроддзе, альбо агульнае апісанне? + *% нармальна, ці можаце вы сказаць мне кароткі змест праблемы, якую трэба вырашыць, закранутыя кампаненты і асяроддзе, альбо агульнае апісанне - set project = var. Акрамя таго, хто накіраваў вас да нас? + *% таксама хто да вас накіраваў - усталюйце referal = vargreat вось што я да гэтага часу атрымаў: n Патрэбныя паслугі: атрымаць раёны> n Трэба пачаць: атрымаць калі> n Грубы бюджэт: атрымаць бюджэт> n Аб вашым праекце: атрымаць праект> n Звярнуўся: атрымайце рэферал> n і хутка выйдзе на сувязь, ці ёсць яшчэ што-небудзь, чым я магу вам дапамагчы сёння? выклік> прыёмныя зоны> атрымаць калі> атрымаць бюджэт> атрымаць праект> атрымаць рэферал> / патэлефанаваць>

05. Падача запыту

У адрозненне ад стандартных зменных формаў, якія адпраўляюцца на іншую старонку альбо ў службу для апрацоўкі, чат-боты могуць неадкладна праверыць і адправіць інфармацыю, уведзеную карыстальнікам у акне чата (альбо прамоўленую), што азначае, што карыстальнікі могуць лёгка перагледзець раней уведзеныя значэнні.

Нам трэба было адправіць запыт карыстальніка, уведзены ў карыстацкім інтэрфейсе чат-бота, праз API JSON REST на знешні сервер заданняў праекта.

У RiveScript-js мы можам выкарыстоўваць XMLHttpRequest аб'ект падаць запыт практычна адначасова, бо дадзеныя ўводзяцца карыстальнікам:

> прыём аб'ектаў javascript var http = new XMLHttpRequest (); var a = rs.getUservar (rs.currentUser (), "вобласці"); var b = rs.getUservar (rs.currentUser (), "калі"); var c = rs.getUservar (rs.currentUser (), "бюджэт"); var d = rs.getUservar (rs.currentUser (), "праект"); var e = rs.getUservar (rs.currentUser (), "рэферал"); var url = "http: // localhost: 3000 / send"; var params = "areas =" + a + "& when =" + b + "& budget =" + c + "& pro ject =" + d + "& referal =" + e; console.log (параметры); http.open ("POST", url, праўда); http.setRequestHeader ("Тып змесціва", "application / x- www-form-urlencoded"); http.setRequestHeader ("Злучэнне", "закрыць"); http.onreadystatechange = function () {// Выклікаць функцыю пры змене стану. if (http.readyState == 4 && http.status == 200) {папярэджанне (http.responseText); }} http.send (параметры); аб'ект

06. Не бойцеся чат-бота

Неўзабаве сучасныя спосабы ўзаемадзеяння з кампутарамі для атрымання інфармацыі саступяць такой тэхналогіі на аснове ІІ, як чат-боты, дзе людзі проста робяць простыя галасавыя каманды, як мы бачылі з такімі тэхналогіямі, як Amazon Echo і Google Home.

Супольнасці вэб-дызайну не трэба баяцца - мы ўсе павінны ўспрымаць дадатковую вартасць гэтай новай тэхналогіі.

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

Гэты артыкул першапачаткова быў размешчаны ўсеткавы часопіс, самы прадаваны ў свеце часопіс для вэб-дызайнераў і распрацоўшчыкаў. Падпішыцеся тут.

Займальныя Публікацыі
Спампаваць файлы 3D World для выпуску 209
Далей

Спампаваць файлы 3D World для выпуску 209

Каб загрузіць суправаджальныя файлы да выпуску 3D World 209, проста націсніце спасылку пад кожным артыкулам, і ZIP-файл аўтаматычна загрузіць змесціва на ваш Mac або ПК.Калі вы прапусцілі гэты выпуск ...
Выдавецтва Five Simple Steps вярнулася
Далей

Выдавецтва Five Simple Steps вярнулася

Месяц пасля нечаканага закрыцця "Пяці простых крокаў", выдавец мэтанакіраваных вэб-кніг, знайшоў новы дом. Першапачатковыя ўладальнікі Mark і Emma Boulton зачынілі краму пасля таго, як Mark ...
БЛОГ ТЫДНЯ: Творчы агляд
Далей

БЛОГ ТЫДНЯ: Творчы агляд

Удзел у камандзе Creative Bloq азначае, што нам пашанцавала правесці свае працоўныя будні, правяраючы іншыя цудоўныя дызайнерскія блогі. І там шмат насычанага інфарматыўнага і натхняючага зместу.Такім...