👶Azure Bot Service

มาหัดเขียนพวก Chat Bot กันง่ายนิดเดียว

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

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

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

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

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

🤔 แพงไหม ?

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

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

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

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

Azure Portal เนื้อหาในรอบนี้จะต้องเข้าไปที่ทำที่เว็บ https://portal.azure.com นี้นะครับ ซึ่งเราต้องสมัครสมาชิกก่อนด้วย ส่วนถ้าใครยังไม่ได้สมัครก็ไปสมัครให้เรียบร้อยแซ๊ร (วิธีสมัครจิ้มตรงนี้)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Visual Studio Community
• Visual Studio Code
• .NET Core SDK

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

การ 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 ของเราได้

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

• Download Microsoft Bot Emulator
• Microsoft Bot Emulator Document

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

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

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

🎯 บทสรุป

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