สร้าง Rich Menu เพื่อเชื่อมต่อ LINE แชทบอทของเราที่ทำไว้ใน DialogFlow
พอเราเข้าไลน์มาที่หน้าแชทของ OA แล้ว มีเจ้า Rich Menu โผล่มาตอนแรกที่เข้ามาเลย จะดีไหมถ้าใส่เมนูช่วยให้ user รู้ว่าบอทเราทำอะไรได้บ้าง
![](https://www.mikkipastel.com/content/images/2020/02/1_f9hWfXDAeaxoXtNR0v6Hbg.png)
และแล้วก็มาถึงน้องหมีตัวแตก v4.0 กันแล้ว (v1 ในงาน Firebase AppFest 2017 แบบเขียนเองหมด, v2 ใช้ Chatfuel, v3 DialogFlow, แบบมีแต่ text, v4 มีความสวยงามมากขึ้น)
เนื่องจากเราเขียนสองบล็อกนี้ค้างไว้ ซึ่งคิดแล้วว่ามีตอนสามแน่นอน แต่ไม่ใช่ท่า Rich Menu นะ 5555
![](https://mikkipastel.com/content/images/2020/02/1_PVABG4-ZuIRYqBuw27R3xA-1.png)
![](https://mikkipastel.com/content/images/2020/02/1_8xUX9rWEQCr4MUVS_QM9Rg-1.jpeg)
แน่นอนว่าสาเหตุที่เราเลือกทำ chatbot เฉพาะในไลน์นั้น คงไม่ใช่ผู้ใช้งานที่มีประมาณ 44 ล้านคนแต่อย่างไร แต่เป็นเพราะสาเหตุเหล่านี้
- ไม่ต้องลงแอปใหม่ (แน่สิ)
- ไม่ต้องรอ approve ทำเสร็จ ใช้ได้เลย ชิวๆ (ไม่เหมือนของ Messenger เนอะ อันนี้ได้แค่ Business Account)
- ปลดล็อก 50 คนแล้ว ดังนั้นเราไม่ต้องกังวลเรื่องติด limit แล้ว
- กลัว user ใช้แล้วไม่รู้เรื่อง เออมี Rich Menu และอื่นๆให้ใช้เยอะแยะ
ดังนั้นในบล็อกนี้ เราจะใช้ Rich Menu เพื่อช่วย user คุยกับน้องหมีได้ง่ายขึ้น ไม่ต้องเดาว่าสุ่มอาหารจะต้องพิมพ์อะไรมา แล้วมี feature มาม่าเสี่ยงทาย และ สุ่มร้านอาหารในย่านนั้นๆ ซึ่งตอนนี้มีแค่ย่านเดียวก่อนจ้า เพราะหาไม่ทัน กลัวไม่ครอบคลุม อะแง
แน่นอนว่า function feature อื่นๆก็ควรจะเสร็จก่อนไหมอ่ะ 55555
- มาม่าเสี่ยงทาย เราจะใช้ Firebase Realtime Database/Firestore เพื่อดึง data ออกมาแสดงผล
- สุ่มร้านอาหาร อันนี้เป็น chatbot text ที่เบื้องต้นสุ่มเอาชื่อร้านออกมาก่อน แล้วค่อยพัฒนาออกมาเป็นหน้าตาสวยงาม
ซึ่งจริงๆแล้วเจ้า Rich Menu นั้น สามารถเปลี่ยนเมื่อไหร่ก็ได้ตามใจเรา แถมยังสามารถขึ้นได้คามบุคคลอีกด้วย ดังนั้นเราขอแบบขั้นง่ายๆ แบบทำตามได้ก่อนเนอะ
การสร้าง Rich Menu ด้วย LINE Rich Menu Maker
เข้าไปที่ LINE Rich Menu Maker เลยจ้า
![](https://lineforbusiness.com/richmenumaker/assets/cover.jpg)
ตอนแรกเขามี template ให้เลือก จากภาพพบว่าเจ้า Rich Menu มีขนาดพื้นที่รวม size เดียวกัน โดยแบ่งพื้นที่สูงสุดตามความนิยมใช้เป็น 6 ช่อง และน้อยสุดเป็น 1 ช่อง ตามการใช้งานจ้า
![](https://www.mikkipastel.com/content/images/2020/02/image-165.png)
ซึ่งเหมาะสำหรับ developer และคนทั่วไปมากๆเลยเนอะ เพราะอะไร กด next ดู step ต่อไปสิ มันง่ายมากๆในความเข้าใจอ่ะ แถมขยับรูปให้ตรงช่องแต่ละช่องตามเราต้องการเลย
![](https://www.mikkipastel.com/content/images/2020/02/image-166.png)
มาที่งานจริงกันบ้างดีกว่า ขอลองแบบช่องเดียวก่อนแล้วกันเนอะ
![](https://www.mikkipastel.com/content/images/2020/02/image-167.png)
แน่นอนว่าเราลองเซฟรูปไปแล้ว รูปเอียงจ้า ดังนั้น ดูฝั่งหน้าจอ sample แล้วกันเนาะ
จริงๆมันสามารถปรับแต่งรูปเพิ่มเติม หรือเริ่มทำในนี้ก็ยังได้
![](https://www.mikkipastel.com/content/images/2020/02/1_VsNwMo8Ieg29prI8K0WMYA.png)
![](https://www.mikkipastel.com/content/images/2020/02/1_ZTDsQGR43jizCDaDfV1DGQ.png)
กดปุ่ม “บันทึกไฟล์รูป Rich menu” เลยจ้า ไฟล์ที่ได้จะเป็นไฟล์นามสกุล .jpgโดยรูปที่ได้เป็นดังนี้
![](https://www.mikkipastel.com/content/images/2020/02/image-168.png)
จากนั้นไปที่ LINE Official Account Manager แล้วไปที่ Rich Menu จิ้ม Create new เลยจ้า
![](https://www.mikkipastel.com/content/images/2020/02/image-169.png)
และกรอก Menu settings กับ Menu content ให้ครบถ้วน
![](https://www.mikkipastel.com/content/images/2020/02/1_IOoF9aV7JH24dopDdkTd5A.png)
![](https://www.mikkipastel.com/content/images/2020/02/1_H7kQMsaDegg20mQrRJKwVQ.png)
ซึ่งเราไม่สามารถอัพโหลดรูปได้ ถ้าไม่ได้ Select template ก่อน
![](https://www.mikkipastel.com/content/images/2020/02/image-170.png)
เจ้า template แบ่งเป็น 2 ขนาดคือ Large ที่เราเห็นทั่วๆไป ซึ่ง 7 templates ใน Rich Menu Maker ก็ตามนี้แหละ และแบบ compact คือ ความสูงเป็นครึ่งนึงของแบบ Large พบได้ที่ Rabbit LINE Pay จ้า
![](https://www.mikkipastel.com/content/images/2020/02/1_Iny8T7evYi0-HVVvr7LKuA.png)
![](https://www.mikkipastel.com/content/images/2020/02/1__Cl7TQzSCIRJ6l78RA2SpQ.jpeg)
จากตัวอย่างนี้เราเลือกเป็น 1 ช่องใหญ่ๆเลย
![](https://www.mikkipastel.com/content/images/2020/02/image-171.png)
จริงๆ Action type มีหลายแบบเลย คือ Link, Coupon, Text, Reward cards, และก็ No action
เราอัพโหลดรูปได้แล้ววว พอเราอัพโหลดรูปเสร็จเราเลือกเป็น text แล้วใส่คำว่า สุ่มอาหารตามสั่ง
![](https://www.mikkipastel.com/content/images/2020/02/image-172.png)
และก็กดปุ่มเซฟ เอ่อออออ กดไม่ได้ง่ะ ฮืออออออ ใส่ Display Period ด้วยนะ ใส่เสร็จกดเซฟได้ เย้ๆ
![](https://www.mikkipastel.com/content/images/2020/02/image-173.png)
ไปดูน้องหมีหน่อยจ้า Rich Menu มาล้าวจ้าาาาาาา งั้นกดเล่นเลยแล้วกันนะ
![](https://www.mikkipastel.com/content/images/2020/02/1_c0-Gr9rjZEPFxHJBdU_cWw.png)
![](https://www.mikkipastel.com/content/images/2020/02/1_b7uuk-9TKDCYl-iqBzu_7A.gif)
![](https://www.mikkipastel.com/content/images/2020/02/1_1PumumFAYepD7u6L6wYoAA.png)
พบว่า มันสามารถทำงานได้เป็นอย่างดี จากการทดลองนี้พบว่า เมื่อเราใส่ keyword ที่เรา set action ใน Rich Menu ตรงกับใน Intent ที่เราต้องการ ก็จะทำงานตามที่เราต้องการเลยจ้า
เราขอลองอัพเลเวล ใส่เพิ่มอีกสักอัน คือ มาม่าเสียงทาย ถ้าเอาแบบไวๆคือใส่ LIFT ลงไป แต่อยากทำเป็น Flex Message เลยยกเป็นอีกบล็อกนึง
![](https://mikkipastel.com/content/images/2020/02/1_SKx-EwwDPQVu50TsR0e77Q-1.png)
พอเราทำสองอัน ขั้นตอนเดิมคือโหลดรูปมาใส่แต่ละช่องใน Rich Menu Maker จากนั้นเซฟรูปก็จะได้ไฟล์รูป Rich Menu ออกมา จากนั้นสร้าง Rich Menu ใน bot เราใหม่อีกอัน อัพรูปไป มันจะตีช่องให้แบบนี้จ้า เอ้อออ ก่อนจะสร้างนั้น มันสร้างซ้อนกันไม่ได้ อาจจะต้องปรับวันที่ หรือกดปิดไม่ให้แสดงก่อนนะ
![](https://www.mikkipastel.com/content/images/2020/02/image-206.png)
หลังจากกดปุ่มเซฟลองเล่นดู แน่นอนเรายังไม่มีคำสั่งมาม่าเสี่ยงทาย น้องหมีจึงไม่เข้าใจจ้า ดังนั้นเราสามารถ proof ได้ว่า ถ้าเรายังไม่มี intent นั้นๆ มันก็จะไม่รู้เรื่องจ้า
![](https://www.mikkipastel.com/content/images/2020/02/image-207.png)
เมื่อเราใส่การทำงานมาม่าเสี่ยงทายก็จะเป็นแบบนี้จ้า
![](https://www.mikkipastel.com/content/images/2020/02/image-208.png)
อยากคุยกับน้องแอดไลน์ไปคุยได้ที่ http://nav.cx/2whfpiD นะ
feedback การใช้เจ้า Rich Menu Maker แบบไวๆ ข้อดีคือใช้ง่าย ไม่ต้องกลัวอัพโหลดผิดนามสกุล แถมยังเห็นได้เลยว่าตอนเอารูปไปใส่แล้ว user จะเห็นแบบนี้นะ ถ้าไม่ทำภาพมาก่อนก็ใส่ icon กับ text ในนั้นได้เลย แถมจัดกลาง ซ้ายขวา ได้ด้วย ข้อเสียมีอย่างเดียวคือ ในที่เราลากดันไม่ตรงกับ sample ซึ่งเราเองต้องลากให้ตรงกับ sample ใช่ม่ะ กลัวตาเราจะเอียงแล้ววางเอียงแทนที่จะวางตรงกลางนี่แหละ
แต่ถ้าอยากอ่านแบบ zero-to-hero ไปอ่านบล็อกพี่ตี๋เลยจ้า
![](https://miro.medium.com/max/1200/1*0SUtMG4TcLz8wn2wpXyOTg.png)
สุดท้ายฝากร้านกันสักนิด ฝากเพจด้วยนะจ๊ะ
อย่าลืมกด like กด share บทความกันด้วยนะคะ :)
Posted by MikkiPastel on Sunday, December 10, 2017