คลังความรู้ ครูตราด

การลงทะเบียนเพื่อใช้งานเว็บ heroku.com

 

1. คลิกที่ Sign up

 

1. กรอกข้อมูล แล้วกดปุ่ม CREATE FREE ACCOUNT
   
2. ขึ้นข้อความแจ้งให้ตรวจสอบจดหมาย ใน e-mail ที่เราใช้สมัคร

 

1. คลิกที่จดหมายที่ได้รับจาก heroku.com
2. คลิกลิงค์ในจดหมาย
3. กำหนดรหัสผ่าน ต้องประกอบด้วย ตัวอักษร (อังกฤษ) ตัวเลข และสัญลักษณ์ โดยรวมกันไม่น้อยกว่า 8 ตัว
4. คลิกที่ปุ่ม “CLICK HERE TO PROCEED”
5. สำเร็จแล้วววว

 

การลงทะเบียนเพื่อใช้งานเว็บ github.com

 

1. ตั้ง Username กรอก e-mail และตั้งรหัสผ่าน (8-15 ตัว ประกอบด้วยตัวอักษรภาษาอังกฤษ และตัวเลข)  แล้วกด Sign up for GitHub
   

 

1. แก้ปริศนา โดยกด “ตรวจสอบ” แล้วทำตามภารกิจที่กำหนด

1. เลือกประเภทสมาชิก (ใช้แบบ Free)

 

1. แล้วกดปุ่ม Continue ด้านล่าง
2. ตอบคำถาม 2 ข้อ หรือคลิกที่ skip this step
3. แจ้งให้เปิด e-mail
4. เข้าเว็บ e-mail (เช่น gmail.com) แล้วคลิกจดหมายที่ได้รับจาก github
5. คลิกที่ “Verify email address”
6. สำเร็จแล้ววววว

 

การคัดลอกโค้ด (Repository) มาเป็นของเรา

แนวคิดของ GitHub คือการแบ่งปันโค้ด (ใน github จะให้สร้าง Repository เปรียบเสมือนโฟลเดอร์สำหรับเก็บไฟล์โปรแกรม) ซึ่งเราสามารถนำโค้คโปรแกรมของผู้อื่นมาเป็นของเราแล้วใช้พัฒนาต่อได้ ดังนี้

1. ค้นหา Repository ที่เราต้องการ โดยพิมพ์ชื่อในช่องค้นหา (Search) ด้านซ้ายบน (ในที่นี้ให้พิมพ์ arkhoms/linebot2) แล้วกด enter
2. เมื่อพบแล้ว ให้คลิกที่ repository นั้น
3. ก็จะเห็นไฟล์ต่างๆใน Repository นั้น เราสามารถคัดลอกทั้ง Repository มาเป็นของเราได้ โดยคลิกที่ Fork (เหมือนการใช้ส้อมจิ้มอาหารบนโต๊ะบุฟเฟ่)
4. github จะทำการคัดลอกสักครู่
5. แล้วจะแสดงไฟล์ใน Repository ของเรา ซึ่งจะเหมือนกับต้นฉบับ แต่จะต่างกันตรงซ้ายบน ซึ่งแสดงชื่อผู้ใช้ของเรา และชื่อผู้ใช้ที่เรา forked มา
6. ทดลองแก้ไขโค้ดของเรา (ที่ fork มา) ในที่นี้ให้คลิกที่ไฟล์ app.py แล้วคลิกที่ไอคอนรูปดินสอ เพื่อใช้โหมดแก้ไข
7. แก้ชื่อ เลขที่ ชั้น (บรรทัดที่ 11) ให้เป็นชื่อ เลขที่ ชั้น ของเรา จากนั้นเลื่อนลงด้านล่าง แล้วคลิกที่ Commit changes
8. จะกลับมาที่หน้าแสดงโค้ด

 

การสร้าง webapp ด้วย heroku.com

 

1. เข้าเว็บ heroku.com และล็อกอินให้เรียบร้อย จากนั้นคลิกที่ New -> Create new app

 

1. ตั้งชื่อแอพ ด้วยคำภาษาอังกฤษ (รวมตัวเลข ไม่เว้นวรรค) แล้วคลิกที่ Create app (ส่วนอื่นไม่ต้องแก้ไข)

 

1. ก็จะมาถึงขั้นตอนการนำโค้ด (โปรแกรม) มาใช้งาน (หากไม่ขึ้นหน้านี้ ให้คลิก Deploy ตามวงกลมในภาพก่อน) ซึ่งสามารถทำได้ 3 วิธี ในที่นี้เราจะใช้วิธีเชื่อมโยง (ใช้โค้ดใน) กับ GitHub ดังนั้นให้คลิกตามที่ลูกศรชี้

 

1. คลิกที่ Connect to GitHub

 

1. หากยังไม่ได้ล็อกอินเข้า GitHub ไว้ก่อน ก็จะขึ้นหน้าต่างให้เรากรอก Username หรือ อีเมล และรหัสผ่าน ที่เราสมัครไว้กับ GitHub แล้วกด Sign in
   ถ้าล็อกอินแล้ว ก็ให้คลิกที่ Authorize heroku ได้เลย
2. ในวงกลมจะแสดงชื่อผู้ใช้ (Username) ที่เราสมัครใน GitHub  ให้คลิกที่ปุ่ม Search แล้วกด Connect หลังรายการ Repository ที่ต้องการ (ในที่นี้มีเพียง lineBot2)
3. เลื่อนลงด้านล่าง แล้วกด Enable Automatic Deploys และ Deploy Branch ตามลำดับ
4. รอสักครู่ จนกว่าจะขึ้น Your app was successfully deployed ดังภาพ
5. เลื่อนขึ้นด้านบน แล้วคลิกที่ Setting
6. คลิกที่ Reveal Config Vars
7. ตั้งชื่อตัวแปรระบบ (ในที่นี้ให้ใส่ Authorization) ในช่อง Key แล้วกด Add
8. กดที่ Open app
9. ก็จะแสดงหน้าเว็บแอพของเราขึ้นมา (ดังภาพ)

สร้าง Line messaging api channel

 

1. เข้าเว็บ developers.line.me แล้วกดที่ Log in
2. กด “เข้าสู่ระบบด้วยบัญชี LINE” (ต้องลงทะเบียนอีเมล์ก่อน)
3. ป้อนอีเมล์ และรหัสผ่าน แล้วกด “เข้าสู่ระบบ”
   
4. สร้าง Provider (หากยังไม่เคยสร้าง) โดยกดที่เครื่องหมาย +
5. ตั้งชื่อ Provider (ห้องเก็บ Channel-lineBot) ตามต้องการ  แล้วกด Confirm

 

1. ยืนยัน โดยกดที่ Create
   
2. สร้าง Messaging API Channel โดยกด ดังรูป
3. ป้อนข้อมูล Channel (LineBot) โดยในเบื้องต้นต้องใส่ App name (ชื่อ LineBot), App description (อธิบายเพิ่มเติม), Category, Subcategory และ Email address แล้วกด Confirm
4. กด “ยอมรับ” ข้อตกลง
5. เลือกยอมรับเงื่อนไขการใช้งาน แล้วกด Create
6. สำเร็จ
   

การเชื่อม Line messaging api Channel เข้ากับ Heroku webapp

 

1. กดที่ Channel ที่ต้องการเชื่อม (ในที่นี้คือ “น้องฟ้า”)
2. เลื่อนลงมาที่หัวข้อ Use webhooks กด Edit ปรับให้เป็น Enabled แล้วกด Update
3. และหัวข้อ Webhook URL กด Edit แล้วป้อน URL ของ Heroku webapp ตามด้วย /callback เช่น linebotarkhom.herokuapp.com/callback แล้วกด Update
4. กดปุ่ม Verify เพื่อตรวจสอบการเชื่อมต่อ ซึ่งต้องแสดง Success กลับมา

 

1. ที่หัวข้อ Channel access token(long-lived) ให้กด issue เมื่อมีหน้าต่างปรากฎมาก็ให้กด Issue อีกครั้ง

 

1. คัดลอกข้อความที่ปรากฎขึ้นมาทั้งหมด
2. ไปที่เว็บ heroku.com ล็อกอิน แล้วคลิกที่ชื่อ app
3. กดที่ Setting แล้วกดที่ Reveal Config Vars
4. กดรูปดินสอ (Edit) วางค่าที่คัดลอกมา ในช่อง Value แล้วกด Save changes
   

การปรับแต่ง และทดสอบ LineBot

 

1. กลับไปที่เว็บ Line Developers ในส่วน Channel setting เลื่อนลงด้านล่าง หัวข้อ Auto-reply messages ให้กดที่ Set message (ด้านขวามือ)
2. จะเปิดหน้าต่างเว็บ manager.line.biz ขึ้นมา ให้ล็อกอินด้วยบัญชีไลน์เช่นเดิม แล้วตั้งค่าดังภาพ (ปิด – ตอบกลับ, เปิด – Webhook)
3. กลับไปหน้าต่าง Line Developers อีกครั้ง เลื่อนลงมาหา QR code of your bot จากนั้นใช้มือถือสแกนเพื่อเพิ่มเพื่อน Line

 

1. ทดลองส่งข้อความถึง LineBot ของเรา ซึ่งโค้ดเบื้องต้นของ bot จะตอบกลับด้วยข้อความที่เราส่งไป (ดังภาพ)

ปรับปรุงให้ bot สามารถโต้ตอบได้

 

1. เขียนคำสั่งเพื่อตรวจสอบข้อความที่ส่งมาหา bot เพื่อโต้ตอบ ในที่นี้เพื่อให้ง่ายต่อการโค้ดดิ้ง เราจะใช้ Turtle editor ซึ่งเป็นเครื่องมือเขียนโปรแกรมภาษาไพธอนแบบบล็อค เนื่องจากใช้วิธีลากวาง จึงไม่ต้องจดจำคำสั่งและรูปแบบการใช้งานคำสั่ง แต่จำเป็นต้องแก้ไขคำสั่งตอนนำไปใช้งานบ้าง
   จากนั้นคัดลอกคำสั่ง (เฉพาะส่วนที่เกี่ยวข้องกับการตรวจสอบข้อความ-ดังรูป) ภาษาไพธอน
   
2. ที่ GitHub ให้แก้ไขไฟล์ app.py โดยมองหาคำสั่ง sendText(user, userText)
3. วางคำสั่งที่คัดลอกจาก Turtle editor แทนที่คำสั่ง sendText(user, userText)
4. แก้ไขชื่อตัวแปรจาก Turtle editor (ในที่นี้คือ a2) เป็น userText และคำสั่ง print(  แก้เป็น sendText(user,
5. ที่แอพไลน์ ให้ทดสอบโดยการส่งข้อความไปหา bot (น้องฟ้า) ซึ่งต้องโต้ตอบตามเงื่อนไขที่ตั้งไว้



ปรับปรุงการตรวจสอบข้อความให้แม่นยำ ด้วย DialogFlow

 

การรับข้อความจากไลน์โดยตรงมาตรวจสอบ เราต้องเขียนเงื่อนไขในการตรวจสอบให้ครอบคลุมคำที่อาจใช้ ในเจตนาที่สื่อความในความหมายเดียวกัน ซึ่งจะทำให้โค้ดของเรายาวมาก แถมอาจไม่ครบถ้วน ดังตัวอย่าง

การใช้ AI มาช่วยวิเคราห์ข้อความ จึงเป็นทางเลือกที่ดี ในที่นี้เราเลือกบริการของ Google ที่ชื่อว่า DialogFlow

1. ไปที่เว็บไซต์ dialogflow.com แล้วคลิกที่ Go to console
2. กดที่ ปุ่ม Google
   
3. กด Allow เพื่ออนุญาตให้ DialogFlow ใช้ข้อมูลในบัญชี Google
4. กด CREATE AGENT เพื่อสร้าง Agent (เปรียบเสมือนตัวแทนของ bot)
5. ตั้งชื่อ Agent และเลือกภาษาตั้งต้น
6. กด CREATE INTENT เพื่อกำหนดข้อความที่ต้องการสื่อความ
7. กำหนดข้อความที่ต้องการสื่อความ
8. กดที่ ADD TRAINING PHRASES เพื่อกำหนดข้อความที่เป็นไปได้ กรณีที่จะสื่อความตามข้อความในข้อ 7
9. เลื่อนลงไปที่หัวข้อ Fultillment กรณีต้องการส่งข้อความไปยัง bot ของเรา
10. จากนั้น กด SAVE (ด้านบน)
11. ที่เมนูด้านซ้าย (หากทำบนมือถือ อาจต้องกดที่ ขีด 3 ขีด) เลือก Integrations

 

1. เลื่อนปุ่มสไลด์ใต้ไอคอน LINE (เพื่อกำหนดค่าให้เชื่อมกับบัญชี LineAPI

 

1. ที่หน้าต่างนี้ ให้กรอกข้อมูล (จากเว็บ developers.line.me) ใส่ให้ครบถ้วน (Channel ID, Channel Secret และ Channel Access Token) แล้วกดปุ่ม START
   
2. คัดลอก Webhook URL จาก DialogFlow (กดไอคอนสี่เหลี่ยมด้านขวา) เพื่อนำไปแก้ไขในเว็บ developers.line.me หัวข้อ Webhook URL  (ตอนวางแล้ว อย่าลืมลบ https:// ด้านหน้าออก เพื่อจะได้ไม่ซ้ำกับที่ line เตรียมไว้ให้)
   
3. กด Verify เพื่อตรวจสอบการเชื่อมต่อ
4. ไปที่เว็บ dialogFlow คลิกที่เมนู Fulfillment (ด้านซ้าย) กำหนดให้เป็น ENABLED แล้วป้อน Webhook URL ที่เคยกรอกในไลน์ ในช่อง URL แล้วกด SAVE (ด้านล่าง)
5. ทีเว็บ GitHub ให้แก้ไขคำสั่งบรรทัดที่ 23-24 โดยแก้
   จาก user = decoded[“events”][0][‘replyToken’]    เป็น
   user = decoded[‘originalDetectIntentRequest’][‘payload’][‘data’][‘replyToken’]
   และ userText = decoded[“events”][0][‘message’][‘text’]
   เป็น userText = decoded[‘queryResult’][‘intent’][‘displayName’]
   
6. ทดลองส่งข้อความถึง “น้องฟ้า” อีกครั้ง