> For the complete documentation index, see [llms.txt](https://www.saladpuk.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.saladpuk.com/cloud/azure-bot-service.md).

# Azure Bot Service

ในคอร์สนี้เราจะมาพูดถึงการเขียน **Bot** กัน ซึ่งหลายๆคนที่ได้เคยเห็น Chat Bot ก็อาจจะอยากมีเป็นของตัวเองบ้างไรงี้ ส่วนสำหรับคนที่ไม่รู้ว่าเจ้านี่คืออะไรเลย ผมอธิบายให้เห็นภาพง่ายๆว่า เราสามารถเขียนระบบโต้ตอบอัตโนมัติกับผู้ใช้ได้ เพื่อเอาไว้ช่วยเหลือผู้ใช้จากคำถามที่เจอบ่อยๆได้ หรือแม้กระทั่งช่วยงานเราในการจัดซื้อสินค้าไรงี้ ดังนั้นในรอบนี้เราจะมาเรียนรู้เจ้าสิ่งที่ชื่อว่า **Azure Bot Service** กันครับ

## 🤔 Bot ทำอะไรได้บ้าง ?

คำตอบมันเยอะจนไม่รู้จะเลือกตอบยังไงดีเลย เอาเป็นว่า **Bot** มันสามารถ **`พูดคุยกับเราได้`** **`เข้าใจบทสนทนาได้`** **`ตัดสินใจจากข้อมูลที่มี`** **`ค้นหาข้อมูล`** บลาๆ ดังนั้นถ้าถามว่ามันทำอะไรได้บ้าง คำตอบคือ ของที่ผม highlight ไว้เราสามารถเอามาประกอบกันแล้วอยากให้ bot เราทำอะไรก็ได้ เช่น ช่วยตอบคำถามลูกค้า หรือ จะให้เป็นเลขาเราแบบจาวิสในไอรอนแมนก็ทำได้ เพราะ bot มันมีความสามารถในการทำงานร่วมกับ service อื่นๆของคลาว์ทุกเจ้านั่นเอง เช่นทำงานร่วมกับ AI เพื่อช่วยวิเคราะห์ว่าหุ้นตัวไหนน่าสนใจไรงี้

ตัวอย่างที่เห็นกันบ่อยๆคือทำ Chat Bot เอาไว้ช่วยอำนวยความสะดวกต่างๆ หรือ เป็นเลขาส่วนตัว มันง่ายมากจนเด็กก็ทำได้เชื่อไหม ?

![](/files/-LrB7KS8qbaXGfsSjsb2)

สาเหตุที่ Bot มันเก่งเพราะมันสามารถทำงานร่วมกับ service ต่างๆได้นั่นเอง

![](/files/-Lw4qL_ACZtYWotE-5lq)

## 🤔 แพงไหม ?

มีทั้งตัวเสียเงินและตัวไม่เสียเงิน ซึ่งถ้าเราอยากลองวิชาก็ลองเล่นฟรีได้เลยครับ

| CHANNEL  | FREE                 | S1                          |
| -------- | -------------------- | --------------------------- |
| Standard | ไม่จำกัด             | ไม่จำกัด                    |
| Premium  | 10,000 ข้อความ/เดือน | $0.50 USD ต่อ 1,000 ข้อความ |

## 🤔 สนใจละ เริ่มไง ?

การสร้าง Chat Bot ทำได้หลายวิธีเลย แต่อันแรกที่อยากแนะนำคือทำผ่าน **Azure Portal** ครับ ส่วนวิธีสร้างแบบอื่นๆลองดูจากลิงค์ด้านล่างเอาต่อนะครับ

{% hint style="info" %}
**Azure Portal**\
เนื้อหาในรอบนี้จะต้องเข้าไปที่ทำที่เว็บ <https://portal.azure.com> นี้นะครับ ซึ่งเราต้องสมัครสมาชิกก่อนด้วย ส่วนถ้าใครยังไม่ได้สมัครก็ไปสมัครให้เรียบร้อยแซ๊ร [(วิธีสมัครจิ้มตรงนี้)](https://saladpuk.gitbook.io/learn/cloud/azure101/register)
{% endhint %}

1.หลังจากที่ Login เข้ามาละ ที่เมนูด้านซ้ายมือให้เลือก **`+ Create a resource`** ซะ แล้วเมนูในหน้าตรงกลางให้เลือก **`AI + Machine Learning`** แล้วจะเห็น **`Web App Bot`** ให้จิ้มมันเข้าไปเบย

![](/files/-Lo5stqhyX7Azzg41xDr)

2.ถัดมาเขาก็จะขอให้เราใส่รายละเอียด **Web App Bot** ที่จะสร้าง ดังนั้นก็ใส่ๆข้อมูลไปครับ รายละเอียดแต่ละช่องคืออะไรอยู่ด้านล่างครับ

| ชื่อ | รายละเอียด |
| ---- | ---------- |

| Bot name | ชื่อ Bot service ของเรา |
| -------- | ----------------------- |

| Resource group | <p>จะสร้างไว้ใน resource group ไหน</p><p>(ถ้าไม่มีให้กด Create new เลยครับ แล้วเลือกเป็น Southeast Asia)</p> |
| -------------- | ------------------------------------------------------------------------------------------------------------ |

| Location | <p>จะสร้าง Bot ไว้ที่เซิฟเวอร์โซนไหน</p><p>(ถ้าเราลองเล่นในไทยให้เลือก Southeast Asia ครับเร็วดี)</p> |
| -------- | ----------------------------------------------------------------------------------------------------- |

| Pricing tier | <p>ราคาต่อเดือน อยากดูรายละเอียดกด View full pricing details ได้นะ</p><p>ตัวนี้ถ้าเราลองวิชาเฉยๆใช้ <strong>F0</strong> ครับไม่เสียตังเลย</p> |
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------- |

| Bot template | <p>เราจะเขียน bot ด้วยภาษาอะไร และจะให้ใส่ตัวอย่างแบบไหนมา</p><p><strong>ดูรายละเอียดด้านล่างต่อ</strong></p> |
| ------------ | ------------------------------------------------------------------------------------------------------------- |

| LUIS App location | <p>ถ้าใครเลือก Bot template เป็น Basic Bot (C#)</p><p>เราจะต้องสร้าง LUIS ด้วย ซึ่งเจ้านี่คือตัวที่คอยทำความเข้าใจ</p><p>ว่าคนที่คุยด้วยกำลังพูดถึงอะไร ซึ่งเจ้าตัวนี้ยังไม่มีใน</p><p>Southeast Asia ดังนั้นเลือกๆอะไรก็ได้ไปก่อนครับ</p> |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |

| App service plan | <p>ตัวเซิฟเวอร์ที่เราจะสร้างเว็บ</p><p>หากใครยังไม่มีให้กด setting เข้าไปแล้วกด Create เลยครับ</p><p><strong>ดูรายละเอียดด้านล่างต่อ</strong></p> |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |

**Bot template** ให้เลือกเป็นภาษา C# และ Basic Bot นะครับ เพราะในตัวอย่างเราจะเขียนโดยวิธีนี้ครับ อ่านจบแล้วไปลองแบบอื่นก็ตามสะดวกเบย

![](/files/-LngfAxoGUZhaQAYWYkg)

**App service plan** ถ้าใครยังไม่มีให้กดตามขั้นตอนนี้เลยนะครับ

![](/files/-LofIwxtmRGoOVNvXon-)

หลังจากที่ใส่ทุกอย่างจนหนำใจแล้วก็จิ้มปุ่ม **Create** เบาๆไป 1 ทีงับก็เป็นอันจบพิธีกรรม แล้วก็รอเขาสร้างจนเสร็จครับ

![](/files/-LnNDWdnC_ChnvlxLvlE)

## 🤔 สร้างเสร็จแล้วจะลองเล่นทำไง ?

1.เราสามารถลองเล่น Bot Service ที่สร้างมาได้โดยการเข้าไปใน Resource group ที่เราสร้างมันเอาไว้ครับ ในตัวอย่างผมสร้างไว้ใน `saladpuk-demo` ดังนั้นของเพื่อนๆสร้างไว้ที่ไหนก็ลองหาดูเด้อ

![](/files/-Lo6OCS5J33x_qtgx6oF)

2.พอเข้ามาก็จะเจอกับผองเพื่อนของมัน ไม่ต้องตกใจครับให้กดตัวที่มันเป็น Bot Service เลยครับ

![](/files/-M-_TDnr7ZE4SOMXffUY)

3.จากตรงนี้เขาก็จะมีรายละเอียดให้ว่าจะทำนั่นนู่นนี่กับ Bot ยังไงได้บ้าง ก็ถ้าสนใจลึกๆก็ลองเข้าไปอ่านต่อเอาละกันครับ แต่ในรอบนี้ผมจะลองเข้าใช้งานตัว Bot ละดังนั้นผมก็ขอกด **`Test in Web Chat`** ที่เมนูด้านซ้ายเลยละกัน

![](/files/-LsfK8fhiOEDCkYXkXYy)

4.ในตัว `Test in Web Chat` จะเป็นการลองคุยกับตัว Bot ของเราผ่านหน้าเว็บเลย ซึ่งมันก็จะมีการทำงานพื้นฐานแบบง่ายๆให้เราลองจองตั๋วเครื่องบินจากเบอร์ลินไปปารีสไรงี้นะครับ ซึ่งเจ้าตัวนี้มันก็จะยังไม่เก่งเท่าไหร่ เดี๋ยวเราก็จะค่อยๆทำให้มันเก่งขึ้นไปเรื่อยๆเอาครับ

![](/files/-M-VEfvwSZuCW2cZwlxA)

## 🤔 อยากทำให้มันเก่งขึ้นทำไง ?

ในรอบนี้เราก็จะต้องเอา source code ไปแก้ไขครับ โดยการคลิกที่เมนู `Build` ด้านซ้าย แล้วเลือก `Download bot source code` ครับ ส่วนถ้าแก้ไขเสร็จแล้วจะเอากลับขึ้นมายังไง หรือจะเทสมันยังไง รายละเอียดก็จะอยู่ในหน้านี้เช่นกันครับ

![](/files/-LoNy-kKR0D1ADLqykRy)

เสร็จเขาจะถามว่าตัว source code จะให้ใส่ รหัสลับในการเข้าใช้งาน Bot ตัวจริงลงมาด้วยหรือเปล่า ในตัวอย่างนี้ผมเอาง่ายเขาว่าครับเลยขอตอบ `Yes` ไปละกัน

![](/files/-LwiZSETk5fugkgmyWWw)

หลังจากได้ไฟล์มาแล้ว ก็ให้ทำการแตก zip เพื่อเตรียมเล่นกับโค้ดละครับ ซึ่งเราก็จะเจอของเยอะๆประมาณรูปนี้แหละ ซึ่งเราก็จะเห็นไฟล์โปรเจคของ Visual Studio นะครับ ให้กดเปิดไฟล์นี้ได้เลยถ้ามี Visual Studio อยู่แล้ว หรือจะเปิด Folder นี้ด้วย Visual Studio Code ก็ได้ครับ

![](/files/-LnNWBtPwtReZq1_PBTL)

{% hint style="success" %}
**Visual Studio Installer**\
หากยังไม่มี Visual Studio IDE หรือ Visual Studio Code สามารถดาวโหลดได้จากลิงค์ด้านล่างนี้ครับ ฟรี (ถ้าเอาด่วนๆแนะนำให้ลง Visual Studio Code ครับ) อ่ออย่าลืมลง .NET Core ด้วยนะ

* [Visual Studio Community](https://visualstudio.microsoft.com/)
* [Visual Studio Code](https://code.visualstudio.com/)
* [.NET Core SDK](https://dotnet.microsoft.com/download)
  {% endhint %}

พอเราเปิดออกมา เราจะเห็นว่าเขามี Web App ให้เราตัวนึง แล้วข้างในก็มีโค้ดของ Bot ทำงานร่วมกับ LUIS อีกทีนึง ซึ่งรายละเอียดของโค้ดเดี๋ยวมาว่ากันทีหลัง ตอนนี้ผมขอลอง Run web ขึ้นมาให้ดูก่อน

![](/files/-Lqkn3vdHmo9tMDNeFuR)

**การ Run website ขึ้นมาดู**

สำหรับการเปิดเว็บถ้าเป็น **Visual Studio IDE** สามารถกด `CTRL + F5` เพื่อเปิดเว็บได้เลยนะครับ ส่วนสำหรับคนที่ใช้ **Visual Studio Code** นั้นให้เปิด command prompt/terminal ขึ้นมา แล้วเข้ามาที่ directory ของโปรเจคนี้นะครับ แล้วใช้คำสั่งด้านล่างได้เลยครับ

```
dotnet run
```

แล้วจะเห็นลิงค์ของเว็บขึ้นมาครับ (ตัว port อาจจะไม่ตรงกับผมก็ไม่เป็นไรครับ) ให้ copy ลิงค์ที่ได้ไปเปิดใน web browser ได้เลยครับ

```
Now listening on: http://localhost:3978
```

พอเปิดเว็บขึ้นมาเราก็จะเจอหน้าตาประมาณนี้ โดยรวมๆเขาก็จะบอกว่าเรามี Bot ที่พร้อมทำงานแล้ว แต่ถ้าเราอยากทดสอบ Bot ตัวนี้ให้ไปดาวโหลด `Emulator` มาลองใช้คุยกับ Bot ของเราได้

![](/files/-Lo3xthJT8kRnns094FH)

{% hint style="info" %}
**Emulator**\
ในที่นี้ปรกติตัว Bot จะทำงานเป็น background อยู่ด้านหลัง หรือพูดง่ายคือคนจะเข้ามาคุยกับ Bot ได้จะต้องคุยผ่าน API ไรงี้ ซึ่งจริงๆเราจะต้องเขียน Client เพื่อทำหน้าที่เป็นตัวคุยกับ Bot อีกทีนึง ซึ่งเจ้า Emulator นี้จะทำหน้าที่แทน Client ของเรานั่นเอง ดังนั้นอย่างรอช้าไปดาวโหลด Emulator จากลิงค์ด้านล่างนี้ได้เลย

* [Download Microsoft Bot Emulator](https://github.com/Microsoft/BotFramework-Emulator/blob/master/README.md)
* [Microsoft Bot Emulator Document](https://docs.microsoft.com/en-us/azure/bot-service/bot-service-debug-emulator?view=azure-bot-service-4.0\&tabs=csharp)
  {% endhint %}

หลังจากดาวโหลดมาเสร็จแล้วก็ให้เปิดโปรแกรมขึ้นมาก็จะเจอหน้าตาประมาณนี้ครับ ถัดมาเราก็จะลองทำงานกับ Bot ของเราโดยการกดปุ่มสีฟ้าๆ `Open Bot`ได้เลย

![](/files/-M-iBfg7D6rXK6pURxV7)

ถัดมาเขาก็จะให้เรากรอกตัว Web API ของ Bot ของเราลงไป ก็ไป copy ลิงค์เว็บของเรามาใส่ครับ แต่จะต้องต่อท้ายด้วย `/api/messages` ด้วยครับ (ลองเข้าไปดู API ใน source code ได้ครับ มันอยู่ในไฟล์`Controllers/BotController.cs` นั่นแหละ) แล้วก็กดปุ่ม `Connect` เลยครับ

![](/files/-M-_Rs61Sk_rrfxLQ7z0)

เราก็จะสามารถมาลองเล่นกับ Bot เราได้ละ โดยเจ้าตัว Bot Emulator นี้เราสามารถเอาเมาส์ไปคลิกพวกข้อความอะไรพวกนี้ได้นะครับ เพื่อดูว่ามันส่ง request ไปที่ไหนและได้ response อะไรกลับมาอีกด้วย

![](/files/-LrKK0437W46kAL49bWa)

## 🎯 บทสรุป

ในตัวอย่างนี้เราจะเห็นว่าการสร้าง Chat Bot จริงๆงายม๊วกๆ คลิกๆไม่กี่ทีก็ได้ Chat Bot ง่ายๆมา 1 ตัวละ แถมยังมีเครื่องมือที่เอาไว้ช่วยให้เรา Test การทำงานของ Bot เราได้แบบละเอียดยิบเลยด้วย ส่วนที่เหลือเราก็จะต้องไปเขียนโค้ดเพื่อให้ Bot ของเราเก่งขึ้นต่อไป ซึ่งรอติดตามได้ในคอร์สนี้เลยครับ จะมาอัพเดทเรื่อยๆที่ side menu ครับป๋ม