สร้าง Flex Message แบบต่างๆ ใน LINE Bot ด้วย Spring Boot

Photo by Katie Smith on Unsplash

สวัสดี!!!!!! หลังจากที่สร้าง LINE Bot ง่ายๆ ด้วย Spring Boot และ สร้าง Rich Menu แบบว่าไม่ได้ออกแบบอะไรไปแล้ว ต่อไปทำอะไรดีล่ะ ผมก็เลยคิดว่า Flex Message นี่น่าสนใจดีเพราะว่าเราสามารถปรับอะไรได้เยอะมาก เลยลองคิดว่าเราจะ implement Flex Message แต่ล่ะแบบใน Spring Boot อย่างไร เลยลองทำกันเลยดีกว่า

Flex Message คืออะไร

มันก็คือข้อความที่ Bot ตอบกลับให้กับ user ที่เราสามารถปรับแต่ง layout ได้ ว่าจะให้มีหน้าตาแบบไหนแล้วแต่สถานการณ์ โดยที่สามารถรวมหลายๆ element ให้อยู่ใน message เดียวกัน

คุณสมบัติ

• เราสามารถสร้างโครงสร้าง message ที่ซับซ้อนได้ โดยรวมโครงสร้างแนวตั้งและแนวนอนด้วยระบบ box-layout
• เราสามารถแสดง message ในแบบ carousel (ข้อความแบบหมุน) โดยที่ user สามารถเลื่อนดูหลายๆ message ได้
• เราสามารถตั้งทิศทางของข้อความเลื่อนได้ จากซ้ายไปขวา หรือ จากขวามาซ้าย
• และก่อนที่เราจะ develop สมารถทดลอง Flex message ได้ด้วย simulator

JSON Schema

เหมือนกับหลาย message ของ LINE bot ก็จะใช้ JSON format เป็นตัวแสดงข้อความ ดังนั้นเราสามารถใช้สร้าง JSON เพื่อแสดงข้อความที่เราต้องการได้ ดังนี้

{  
  "type": "flex",
  "altText": "this is a flex message",
  "contents": {
    "type": "bubble",
    "body": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "text",
          "text": "hello"
        },
        {
          "type": "text",
          "text": "world"
        }
      ]
    }
  }
}

องค์ประกอบ

Flex message ประกอบไปด้วยโครงสร้างข้อมูล 3 แบบ คือ Container, Block และ Component ดังรูปนี้ จะเห็นได้ว่า container จะเป็นส่วนนอกสุดของ message และข้างในจะมี block ในแบบต่างๆ เช่น Header, Hero, Body และ Footer และส่วนในสุดจะประกอบไปด้วย component หลายๆ แบบ เช่น Text, Image, Icon และ Button

Container

เป็นส่วนนอกสุดของ message มี 2 แบบด้วยกัน คือ

• Bubble — เป็นการแสดง message เดียว
• Carousel — เป็นการแสดงหลายๆ message และสามารถเลื่อนได้

Block

เป็นส่วนข้างใน Container โดยมีองค์ประกอบต่างๆ ดังนี้

• Header — เป็น block ที่แสดงสวนหัวของ message
• Hero — เป็น block ที่แสดง image หลัก
• Body — เป็น block ที่แสดง ข้อความหลัก
• Footer — เป็น block ที่แสดงส่วนด้านล่างของ message

Component

เป็นส่วนข้างในของแต่ล่ะ block มี 8 แบบ คือ

• Button — เป็น component ที่แสดงปุ่มบน message
• Icon — เป็น component ที่แสดงไอคอนบน message
• Image — เป็น component ที่แสดงรูปภาพบน message
• Text — เป็น component ที่แสดงข้อความบน message
• Box — เป็น component ที่ระบุโครงสร้างของ component ลูก
• Filler — เป็น component ที่มองไม่เห็นที่มีความกว้างและความสูงเท่านั้น
• Separator —เป็น component ที่สร้างตัว separator
• Spacer — เป็น component ที่มองไม่เห็นที่สร้างส่วนว่างๆ

ในบทความนี้จะมาสร้าง Flex message ในแต่ละแบบตามที่ LINE Message API PLAYGROUND ทั้งหมด 6 แบบ คือ Restaurant, Menu, Receipt, News, Tickets, Catalogue ด้วย Spring Boot (Java)

​โดยใช้ต้นแบบของ project sample-spring-boot-kitchensink ส่วนของ Flex messageใน SDK กับ ตัวอย่าง JSON ของ Flex Message Simulator

Restaurant Flex Message

Flex message แบบนี้จะเหมือนกับตัวอย่างที่มีใน LINE-BOT-SDK เลย สร้าง class ขึ้นมาชื่อว่า RestaurantFlexMessageSupplier ที่ implements interface Supplier ซึ่งจะสร้าง Flex message ด้วย implement method get ที่สร้าง Bubble container ประกอบด้วย Hero block, Body block และ Footer block ใช้ method createHero Block, createBodyBlock และ createFooterBlock ตามลำดับ ซึ่งจะไม่ใช้ Header และจะ return เป็น FlexMessage ของ bubbleContainer ดังนี้

จะเห็นได้ว่าแต่ละ Flex component จะใช้ builder pattern และ decorator pattern เพื่อสร้าง JSON element

เมื่อรันแล้วส่ง Flex message กลับมาจะได้ดังนี้

Menu Flex Message

Flex message แบบนี้จะคล้ายกับแบบที่แล้วที่จะสร้าง Flex message ที่ประกอบด้วย Hero, Body และ Footer แต่จะแตกต่างใน layout ของ Body ที่มีรายการของอาหาร และ Footer สร้างด้วย createMenuBox และ createRecipeBox ตามลำดับ ที่จะมีเพียงปุ่มเดียวโค้ดดังนี้

เมื่อรันแล้วส่ง Flex message กลับมาจะได้ดังนี้

Receipt Flex Message

Flex message แบบนี้จะใช้เพียง ​ฺBody block เท่านั้น และใช้ Text component ในการแสดงรายละเอียดของใบเสร็จ และใช้ Separator component แสดงเส้นคั่น โดยที่ไม่ใช้ block แบบอื่นเลย ดังนี้

เมื่อรันแล้วส่ง Flex message กลับมาจะได้ดังนี้

News Flex Message

Flex message แบบนี้จะคล้ายกับ 2 อันที่แล้วแต่ว่าจะมี ส่วนของ Header block เพื่อแสดงหัวข้อของข้อความ ด้วย ​method createHeaderBlock ซึ่งเป็นแบบที่ใช้งาน block ของ LINE Message API ได้ครบ ดังนี้

เมื่อรันแล้วส่ง Flex message กลับมาจะได้ดังนี้

Ticket Flex Message

Flex message แบบนี้จะคล้ายกับแบบ Restaurant ซึ่งรายละเอียดต่างๆ ของข้อความอยู่ใน Body block แต่จะไม่ใช้ Footer block ดังนั้นแบบนี้จึงใช้ Hero block และ Body block ดังนี้

เมื่อรันแล้วส่ง Flex message กลับมาจะได้ดังนี้

Catalogue Flex Message

แบบสุดท้ายที่ไม่เหมือนกับแบบก่อน นั้นคือแบบนี้จะเป็นแบบ Carousel container ที่ข้างในมีหลายๆ Bubble container ซึ่งสามารถเลื่อนได้จากซ้ายไปขวาเพื่อแสดงในหน้าจอของ LINE messager

ข้างใน Carousel container ก็คือ Bubble container เหมือน Flex messager แบบอื่น

เมื่อรันแล้วส่ง Flex message กลับมาจะได้ดังนี้

หลังจากที่เราได้สร้าง Flex Message แต่ละแบบเรียบร้อยแล้วก็ลองให้สร้าง message ตามข้อความที่ส่งมาให้ Bot ดังนี้

GitHub Repo ของ Project นี้ในนี้น่ะครับ

iphayao/line-bot-spring-boot-flex

สรุป

จากที่เราได้สร้าง Flex message ในแต่ล่ะแบบตามตัวอย่างของ LINE Messaging API document ด้วย Spring Boot จะเห็นได้ว่าสุดท้ายแล้ว เราก็จะสร้าง JSON เพื่อแสดงใน LINE Messager โดยสร้าง Bubble container ที่มี block ของ Header, Hero, Body หรือ Footer ประกอบกับ Flex component ต่างๆ ทำให้ได้ message ที่มีลักษณะต่างๆ กัน เหมือนเราสร้างเว็บ ซึ่งก็ง่ายไม่ยาก

รูปภาพต่างๆ เป็นลิขสิทธิ์ของ Flex Message Simulator

Using Flex Messages