Chatbot a jeho tvorba bez řádku kódu

23. 11. 2021 Azure, Programming

Přemýšleli jste někdy nad tím, že byste si rádi vyzkoušeli vytvořit vlastního chatbota, ale nemáte znalosti programování? V tomto článku si ukážeme jak si pomocí blokového programování vytvořit jednoduchého bota v Bot Framework Composer, který dokáže uživateli ukázat, jaké je počasí ve měště, které vybere.

Co vytvoříme

Následující video vám ukáže, co bude výsledkem vaší práce.

Co to je Boot Framework Composer

Bot Framework Composer lze vysvětlit jako integrované vývojové prostředí k práci s boty. V Composeru najdete vše, co potřebujete k vytvoření sofistikované konverzace: editor vizuálního dialogu, nástroje k trénování a správě Language Understanding (NLU), QnA Maker, generování jazyků a šablonové systémy pro jednoduché vytvoření vašeho automatického dialogu mezi vámi a uživatelem. V tomto článku si nastíníme základy Composeru v rámci projektu “Weather chatbot,” který vám pomůže se zorientovat v jeho základních funkcích.

Požadavky

Založení API pro získávání počasí

Pro využívání vámi vytvořeného bota je zapotřebí mít přístup ke stránce, která nám informace o počasí může poskytnout.

Pro získání odpovědi pro uživatele pošleme HTTP request (Hypertext Tranfer Protocol – protokol určený pro komunikaci s WWW servery – HTTP – wikipedia) na naší API (Application Programming Interface – rozhraní pro získání informací z jiné aplikace, více informací na API – wikipedia), pro získání informací o počasí v daném městě. V tomto případě využíváme API od webové stránky openweathermap.org. Na této stránce si založíme vlastní API klíč, pomocí kterého budeme volat příkazy na získání informací. Tyto příkazy mají tvar odkazu na webovou stránku a zároveň obsahují GET parametry (konkrétně metaproměnné – GET – wikipedia).

Klíč API

Nejdříve si založíme na stránce openweathermap.org/api API klíč. Dále klikneme na tlačítko Subscribe, které se nachází pod Current Weather Data pro získávání současných dat o počasí.

webové stránky openweathermap.org/api
API klíče | Zdroj: Open Weather App

Tady klikneme na možnost free, která nám umožní 60 požadavků/zavolání za minutu, což pro tyto účely bohatě stačí.

nabídky předplatných openweatherapp.org
Předplatné | Zdroj: Open Weather App

Založení účtu pro tvorbu chatbota

Nevlastníte účet? Nyní vás provedeme kroky, díky nimž ho docílíte.

vytváření účtu na openweatherapp.org
Zakládání účtu | Zdroj: Open Weather App

Poté obdržíte otázku směřující na účel vaší aplikace a na vaši firmu, toto není nutné vyplnit, ale můžete čistě vybrat účel aplikace, v tomto případě „Mobile apps developement

Výběr firmy na stránce openweatherapp.org
Výběr firmy | Zdroj: Open Weather App

Po vyplnění se vám zobrazí tato stránka, na ní klikněte na tlačítko Services.

Nové produkty na stránce openweatherapp.org
Nové produkty | Zdroj: Open Weather App

Práce přímo se službou Weather

A na této stránce byste měli vidět službu Weather, stejně jako na obrázku. Pokud ji nevidíte, tak přepněte na hlavní stránku a tam si znovu vyberte předplatné, jako jsme si to ukazovali na začátku.

Služby na stránce openweatherapp.org
Služby | zdroj: Open Weather App

Po ujištění a případném napravení klikneme na tlačítko API keys.

Služby na stránce openweatherapp.org
Služby | zdroj: Open Weather App

A tady si můžete zkopírovat váš API klíč.

API klíče na stránce openweatherapp.org
API klíče | zdroj: Open Weather App

Část vytváření chatbota

Založení bota

Aby mohl náš proces tvorby chatbota započít, musíme kliknout v Bot Framework Composeru na “New” a zvolíme „Create from scratch.” Poté bota pojmenujeme, zvolíme umístění na disku a klikneme na “Next.”

Vytvoření bota
Vytvoření chatbota | Zdroj: Bot Framework Composer

Všimněme si, že nám Composer defaultně nastavil tzv. “Trigger”, neboli relace, která vyzve vašeho robota k akci. Tento “Conversation started trigger” si můžeme libovolně pojmenovat, například “WelcomeTheUser.”

Vytvoření relace
Vytvoření relace | Zdroj: Bot Framework Composer

Nyní vytvoříme zprávu pro uživatele vašeho chatbota, která se mu ukáže, jakmile se připojí ke konverzaci. Klikneme na plus a zvolíme “Send a response” a do tabulky vpravo napíšete zprávu, která se automaticky zobrazí uživateli.

Vytvoření zprávy pro uživatele
Vytvoření zprávy pro uživatele | Zdroj: Bot Framework Composer

V levém sloupci si nyní vytvoříme další “Trigger,” typ ponecháme defaultní a pro “regEx pattern” zvolíte klíčová slova, pomocí kterých vyvolá uživatel tento “Trigger.”

Vytvoření další relace
Vytvoření další relace | Zdroj: Bot Framework Composer

V tomto novém Triggeru klikneme poté na plus a vybereme “Dialog management” a “Begin a new dialog.”

Vytvoření nového dialogu
Vytvoření nového dialogu | Zdroj: Bot Framework Composer

Znovu klikneme na tlačítko na plus, zvolíme “Send message” a do tabulky vpravo napíšete zprávu, která se automaticky zobrazí uživateli.

Dialog pro získání počasí

Nejdříve se uživatele zeptáme na název města pomocí Ask a question – Text (klikneme na tlačítko se symbolem + a vybereme Text).

Vkládání textového pole | zdroj: Bot Framework Composer
Vkládání textového pole | Zdroj: Bot Framework Composer
Textového pole | zdroj: Bot Framework Composer
Textového pole | Zdroj: Bot Framework Composer

Do Prompt for text vyplníme například „- Zadejte město pro získání informací o počasí“ (pomlčky v těchto případech určují možnosti, pokud by jste vyplnili více textů s pomlčkami na začátku, tak bot pokaždé náhodně vybere jednu z možností)

Bot Asks | zdroj: Bot Framework Composer
Bot Asks | Zdroj: Bot Framework Composer

User Input nastavíme Property na „user.city“. Díky tomu se nám vyplněná informace uloží do objektu user pod názvem city.

User Input | zdroj: Bot Framework Composer
User Input | Zdroj: Bot Framework Composer

Dále v Other nastavíme, aby se systém uživatele pokaždé zeptal, i když je proměnná user.city už vyplněná. To nastavíme pomocí přepnutí Alway prompt na true.

Other | zdroj: Bot Framework Composer
Other | Zdroj: Bot Framework Composer

Dále uživateli odpovíme pomocí Send a Response.

Send a response | zdroj: Bot Framework Composer
Send a response | Zdroj: Bot Framework Composer

Aby byla vyplněná odpově´d zobrazena pro uživatee, tak název proměné musíme umístit mezi složené závorky a před ně umístit znak dolaru. Vyplníme například „- Hledáme informace o městě ${user.city}“.

Language Generation | zdroj: Bot Framework Composer
Language Generation | Zdroj: Bot Framework Composer

Teď s naším API klíčem můžeme poslat požadavek. Klikněte na tlačítko se symbolem + a vyberte Acces external resources – Send an HTTP request.

Send a HTTP request | zdroj: Bot Framework Composer
Send a HTTP request | Zdroj: Bot Framework Composer

Jak pokračovat dál?

Vybereme metodu GET (to znamená, že atributy/hodnota píšeme přímo do našeho od „odkazu“ požadavku). Do Url vložte „http://api.openweathermap.org/data/2.5/weather?q=${user.city},CZ&appid=VašeAPI&units=metric“ (pokud máte zájem o více informacích o API požadavcích, tak zavítejte na Current weather data – Dokumentace). A do Result property napíšeme „dialog.api_response“ (do objektu dialog do proměné api_response se nám uloží naše proměnná). Do Content type vložíme „=“, tím určíme, že se nám vrácená hodnota uloží do naší proměné a u Response type vybereme „json“, protože to je typ dat, které nám API vrátí.

HTTP request | zdroj: Bot Framework Composer
HTTP request | Zdroj: Bot Framework Composer

Naše API nám kromě hodnot také vrací, zda došlo k nalezení dané věci (jestli město bylo nalezeno), a proto musíme zkontrolovat, jakou jsme obdrželi odpověď. To poznáme pomocí stavových kódů HTTP (stavových kódů HTTP – wikipedia). Nejdůležitější odpovědi jsou:

My chceme vědět, zdali server odpovědel správně a na základě toho ho popřípadě požádat o nové město, nebo pokud je vše v pořádku, tak pokračovat.

Další kroky tvoření chatbota

Přidáme si podmínku pomocí tlačítka se symbolem + a vyberte Create a condition – Branch: if/else.

Branch: if/Else | zdroj: Bot Framework Composer
Branch: if/Else | Zdroj: Bot Framework Composer

Do této podmínky napíšeme „=dialog.api_response.statusCode == 200“. Rovnítka se zde nachází, protože nejdříve se pomocí tohoto textu ujistíme, zda true nebo false. Poté tento výsledek vrátíme celé podmínce. Můžete si to představit, jako kdyby celý text svírala závorka > nejdříve se vše vypočítá a pak se porovná výsledek.

Na základě výsledku se nám kód rozvětví, pokud bylo vše v pořádku, město bylo nalezeno a výsledky se nám vrátily, tak uživateli zobrazí výsledek v jím zobrazeném formátu. Pokud ne, resetujeme celou tuto funkci.

Bloky kódu | zdroj: Bot Framework Composer
Bloky kódu | Zdroj: Bot Framework Composer

Vše proběhlo v pořádku

Nejdříve se uživatele zeptáme, zda si přeje, aby odpověď byla stručná nebo podrobná. Přidáme si multi-choice otázku pomocí tlačítka se symbolem + a vyberte Ask a question – Multi-choice.

Multi choice | zdroj: Bot Framework Composer
Multi choice | Zdroj: Bot Framework Composer

Do Bot Asks vložíme naší otázku „- Chcete stučné infromace nebo podrobné?“.

Bot Asks | zdroj: Bot Framework Composer
Bot Asks | Zdroj: Bot Framework Composer

Do User Input vyplníme nejprve proměnnou do Property, což bude „user.shortLong“, jako Output formát vybereme „index“ (tím je myšleno, v jakém formátu se nám do proměnné uloží vybraná odpověď. Mohl by se uložit její text, ale my si vybrali index, což znamená číslování neboli umístění v listu/arrayi). Do List style vybereme vzhled naší otázky, tedy „heroCard“. Do Array of choice vložíme nejprve „Stučné“ a pak „Podrobné“.

User Input | zdroj: Bot Framework Composer
User Input | Zdroj: Bot Framework Composer
User Input | zdroj: Bot Framework Composer
User Input | Zdroj: Bot Framework Composer

A v Other v Prompt Configurations si nastavíme Always prompt na „true“ (díky tomu nemusíme mazat proměnnou a vždy se to zeptá a již uloženou proměnnou přepíše).

Other | zdroj: Bot Framework Composer
Other | Zdroj: Bot Framework Composer

Teď se znovu pomocí podmínky ujistíme, co uživatel vybral. Podle toho mu vrátíme data. Přidáme si podmínku pomocí tlačítka se symbolem + a vyberte Create a condition – Branch: if/else.

Branch: if/Else | zdroj: Bot Framework Composer
Branch: if/Else | Zdroj: Bot Framework Composer

Čím dále zajistit funčknost chatbota?

Zde se zeptáme, zdali je user.shortLong rovné nule, což by znamenalo, že uživatel vybral první možnost (v programování se většínou začíná s číslováním od 0), neboli krátké. Pokud ne, tak se automaticky vybere druhá možnost a zobrazí se podrobné informace. Jako kód vložíme „=user.shortLong == 0“.

Condition | zdroj: Bot Framework Composer
Condition | Zdroj: Bot Framework Composer

Uživateli pošleme odpověď pomocí Send a Response.

stručné možnosti vložíme:

-```${user.city}:
teplota: ${dialog.api_response.content.main.temp}°C
vlhkost: ${dialog.api_response.content.main.humidity} %
tlak: ${dialog.api_response.content.main.pressure} hPa```

(„` – nám umožnuje psát odpověd na více řádků místo pouze na jeden)

podrobné možnosti vložíme:

-```${user.city}:
teplota: ${dialog.api_response.content.main.temp} °C
vlhkost: ${dialog.api_response.content.main.humidity} %
tlak: ${dialog.api_response.content.main.pressure} hPa
min. teplota: ${dialog.api_response.content.main.temp_min} °C
max. teplota: ${dialog.api_response.content.main.temp_max} °C
rychlost větru: ${dialog.api_response.content.wind.speed} m/s```
Bloky rozdělení s Branch | zdroj: Bot Framework Composer
Bloky rozdělení s Branch | Zdroj: Bot Framework Composer

Proměnná dialog.api_response je proměnná, kterou nám vrátil náš HTTP request (to obsahuje i samotný výsledek requestu a ostatní) a dialog.api_response.content je objekt, ve kterém jsou pouze všechna vrácená data (v našem případě informace o počasí v zadaném městě). Pokud si chcete prohlédnout, jak vypadají vrácená data, tak můžete HTTP request jednoduše vložit do prohlížeče a data se vám zobrazí. Pokud vložíme „http://api.openweathermap.org/data/2.5/weather?q=Beroun,CZ&appid=VAŠEAPI&units=metric“, tak se Vám zobrazí podobný text (objekt) jako mně (samozřejmě data budou jiná, protože počasí se mění)

Výsledek HTTP request | zdroj: HTTP request
Výsledek HTTP request | Zdroj: HTTP request

Shrnutí dosažených výsledků

Tady jasně vidíme, že pokud chceme například získat současnou teplotu, tak musíme otevřít objekt main a v něm temp, dále lze pomocí tohoto principu vypisovat všechna další dat. Například zemi (sys.country), jméno města (name), viditelnost (visibility) atd.

Tím je naše část, když zadal uživatel data správně, hotová.

Uživatel nezadal město správně

Posvítíme si ještě na resetování programu v případě zadání špatného města. (Pro přípomenutí, toto je podmínka spojená s dialog.api_response.statusCode, která určuje, zdali byl náš HTTP request správný a dostali jsme data, která jsme požadovali.)

Uživateli pošleme odpověď pomocí Send a Response. Můžeme mu napsat například „- Nastala chyba při hledání města, zkontrolujte, zda jste ho zadali správně, popřípadě zadejte větší město poblíž.“.

 Send a response | zdroj: Bot Framework Composer
Send a response | Zdroj: Bot Framework Composer

A nyní jednoduše pomocí tlačítka se symbolem + a vyberte Dialog management – Repeat this dialog.

Repeat this dialog | zdroj: Bot Framework Composer
Repeat this dialog | Zdroj: Bot Framework Composer

Gratulujeme! Nyní je Váš kód kompletní a pouze ho musíme otestovat. Jeho podoba by měla odpovídat následovné:

Bloky kódu | zdroj: Bot Framework Composer
Bloky kódu | Zdroj: Bot Framework Composer
Bloky kódu | zdroj: Bot Framework Composer
Bloky kódu | Zdroj: Bot Framework Composer

Testování funkčního chatbota v emulátoru

V tuto chvíli si kód můžeme otestovat pomocí stisknutí Start bot v pravém horním rohu.

Zapnutí emulátoru | zdroj: Bot Framework Composer
Zapnutí emulátoru | Zdroj: Bot Framework Composer

Po nějaké době čekání se zobrazí malé okno a my klikneme na Test in Emulator.

Zapnutí emulátoru | zdroj: Bot Framework Composer
Zapnutí emulátoru | Zdroj: Bot Framework Composer

Pokud se překliknete a okno zmizí, tak stačí kliknout na ikonku balíčku vedle Restart bot.

Zapnutí emulátoru | zdroj: Bot Framework Composer
Zapnutí emulátoru | Zdroj: Bot Framework Composer

Zobrazí se vám následující okno.

Chat emulátoru | zdroj: Bot Framework Emulator
Chat emulátoru | Zdroj: Bot Framework Emulator

Není potřeba řešit ostatní věci, vše potřebné pro nás se děje v levé půlce aplikace.

Bot nás jíž pozdravil a řekl nám, že se věnuje počasí. Protože nás počasí zajímá, tak napíšeme „počasí“. Následně vyplníme město, např. „Beroun“. Dále vybereme možnost „Podrobné“. Vaše obrazovka by měla nyní vypadat podobně jako na obrázku.

Chat emulátoru | zdroj: Bot Framework Emulator
Chat emulátoru | Zdroj: Bot Framework Emulator

Obtížnější možnost programování chatbota

Kromě programování pomocí bloků kódu můžete také programovat psaním textu pomocí kliknutí na Show code.

Toto však zdaleka neshrnuje vše, co Bot Framework Composer dokáže. Tento bot může být například vaším prostředníkem mezi vámi a Azure službou. Vyfotíte-li botovi obrázek a pošlete mu jej, on ho přepošle na server a může vám poskytnout informaci, co se na obrázku nachází. Díky tomu, že tento bot dovede posílat HTTP requesty, jsou možnosti jeho využití prakticky nekonečné. Můžete pomocí něho ovládat chytrou domácnoust – například světla, topení a další. Nebo vám bot může zasílat výsledky vyhledávání z databáze bez potřeby pro uživatele se do databáze připojovat.

Pokud Vás Bot Framework Composer zaujal, tak doporučuji následující odkazy:

Závěr

Jestliže se vám vše povedlo: Gratulujeme! Zvládli jste přivést na svět svého vlastního chatbota se schopností zjistit informace o počasí ve vybraných městech.

Pokud Vám z nějakého důvodu chatbot stále nefunguje, tak nevěšte hlavu a zkuste si projít celý článek znovu a zkontrolovat kód. Výzvy k práci s moderními technologiemi zkrátka patří!

Nastavení souborů Cookies

1. Co jsou soubory cookies

Soubory cookies jsou krátké textové soubory, které internetová stránka odešle do vašeho prohlížeče. Umožňují internetové stránce zaznamenat informace o vaší návštěvě, například zvolený jazyk a podobně. Následující návštěva stránek tak pro vás může být snazší a příjemnější. Soubory cookies jsou důležité, neboť bez nich by procházení sítě Internet bylo mnohem složitější. Soubory cookies umožňují lepší využití naší internetové stránky a přizpůsobení jejího obsahu vašim potřebám. Soubory cookies používá téměř každá internetová stránka na světě.

2. Druhy souborů cookies

Relační (tedy dočasné) soubory cookies nám umožňují propojovat vaše jednotlivé aktivity po dobu prohlížení těchto internetových stránek. V okamžiku otevření okna vašeho prohlížeče se tyto soubory vytvoří a po zavření okna vašeho prohlížeče se odstraní.

Trvalé soubory cookies nám pomáhají váš počítač identifikovat, jestliže opětovně navštívíte naši internetovou stránku.

3. Využívání souborů cookies

V souladu s ustanovením § 89 odst. 3 zák. č. 127/2005 Sb., o elektronických komunikacích, v účinném znění, si vás tímto dovolujeme informovat, že naše internetové stránky využívají pro svoji činnost soubory cookies, tedy vaše soubory cookies, včetně trvalých, zpracováváme.

Internetové prohlížeče obvykle obsahují správu souborů cookies. V rámci nastavení vašeho prohlížeče tak pravděpodobně můžete jednotlivé soubory cookies ručně mazat, blokovat či zcela zakázat jejich používání. Pro více informací použijte nápovědu vašeho internetového prohlížeče. Jsou-li cookies povoleny, lze toto nastavení internetového prohlížeče považovat za souhlas se zpracováním osobních údajů.

4. Účel použití souborů cookies

K personalizaci obsahu a reklam, poskytování funkcí sociálních médií a analýze naší návštěvnosti využíváme soubory cookies. Informace o tom, jak náš web používáte, sdílíme se svými partnery působícími v oblasti sociálních médií, inzerce a analýz. Používáním internetových stránek vyjadřujete souhlas propojením následujících služeb: Google Analytics, Google Tag Manager, Facebook Pixel, Microsoft Clarity.

Soubory cookies využíváme, kromě účelu uvedeného v předchozím odstavci, pouze pro měření návštěvnosti webové stránky.

5. Správce osobních údajů

Provozovatelem webové stránky studuj.digital a správcem osobních údajů je společnost: pg-sec s.r.o., sídlem Rybná 716/24, Staré Město, 110 00 Praha 1, identifikační číslo 09580905, zapsaná v obchodním rejstříku Městského soudu v Praze, oddíl C, vložka 338028.

​6. Zásady ochrany osobních údajů

Podrobnější informace o souborech cookies a zpracování tvých osobních údajů najdete v našich Zásadách ochrany osobních údajů.

Nezbytné

Tyto soubory cookie jsou nutné pro základní funkce stránky, a jsou proto vždy povolené. Mezi ně patří soubory cookie, které stránce umožňují si vás zapamatovat při procházení stránky v rámci jedné relace nebo, pokud o ně požádáte, mezi relacemi.

Volitelné

Výkon

Tyto soubory cookie nám pomáhají vylepšovat funkce stránek sledováním využití této webové stránky. V některých případech zrychlují zpracování vašeho požadavku a umožňují nám zapamatovat si vaše vybrané předvolby na stránce. Pokud soubory cookie zakážete, může se tím zhoršit přesnost našich doporučení a zpomalit funkčnost stránek.

Sociální média a relamy

Díky souborům cookies sociálních médií si můžete připojit ke svým sociálním sítím a prostřednictvím sociálních médií sdílet obsah z naší webové stránky. Reklamní soubory cookie (třetích stran) shromažďují informace pro lepší přizpůsobení reklamy tvým zájmům, a to na webových stránkách studuj.digital i mimo ně. V některých případech tyto soubory cookies zpracovávají vaše osobní údaje. Pokud chcete získat více informací o zpracování osobních údajů, přečtěte si naše Zásady ochrany osobních údajů. Pokud zakážete soubory cookies, mohou se zobrazovat reklamy, které méně souvisejí s vašimi zájmy, nebo nebudete moci účinně používat odkazy na Facebook, Instagram či jiné sociální sítě anebo nebudete moci sdílet obsah na sociálnch médiích.