มาทำให้ Line มีมากกว่า Message ด้วย Flex Message และ Line Bot Designer

จากบทความที่แล้วผมได้แนะนำการใช้งาน ผ่าน Line Messaging API ถ้าใครยังไม่ได้อ่านก็ฝากติดตามด้วยนะครับ สำหรับวันนี้ผมจะทำให้ Message มีมากกว่าคำว่า Message แล้วมันจะมากกว่าข้อความได้ยังไงเดียวผมจะพาไปดูกันว่า Line เขามีของดีอะไรให้เราได้เล่นกัน

Chat Bot ง่ายๆ ด้วย Line Messaging API !! [PHP, NodeJS, Heroku] แบบ Step by step

ข้อความที่แสนจะธรรมดา

ตั้งแต่เรามีการแชทเกิดขึ้นมาเราก็ได้แค่ส่งข้อความหากันไปมาด้วย ตัวอักษรเท่านั้นมาเป็นเวลาเนิ้นนานมาแล้ว (นานจนจำความไม่ได้) ซึงมันก็มีการปรับปรุงมามากมาย มีการเติม Emoji Icon ต่างๆ ทำให้รู้สึกว่าไม่น่าเบื่อแล้วสามารถแสดงอารมณ์ได้ และก็มีการพัฒนาอย่างต่อเนื่องจนมาถึงยุคปัจจุบัน มีการส่งสติกเกอร์ ส่งเป็นเสียงและ ฯลฯ จัดเต็มทุก Media ทำให้ข้อความจากที่มันธรรมดาอยู่แล้วยิ่ง ธรรมดาลงไปอีก จากที่ได้ไปศึกษามา ทาง Line ได้มี Message ตัวนึงชื่อ Flex Message ทำให้ Message ธรรมดาไม่น่าเบื่ออีกต่อไป

ปล. ถ้าคุณเคยเห็นภาพนี้แสดงว่าคุณเริ่มมีอายุแล้วนะ

Flex Message เป็นยังไง

ภาพนี้เป็นการส่งข้อความจาก Push message แต่ส่งเป็นแค่ข้อความเฉยๆ ดูเฉยๆไม่น่าสนใจ ไม่มีการเล่น Style อะไรเลย Text ล้วนๆ

text อย่างเดียวไม่มีอย่างอื่นผสม

ส่วนภาพด่านล่างเป็นการใช้ Flex Message ทำให้ข้อความธรรมดาดูมีความน่าสนใจขึ้นดูง่ายขึ้นและยังมี View Detail ได้อีกเพิ่มลูกเล่นในการส่งข้อความธรรมดานั้นไม่ธรรมดา

ภาพนี้เป็นการใช้ Flex Message เข้ามาในการนำเสนอทำให้ข้อความน่าสนใจมากขึ้น

เราจะทำ Flex Message ได้อย่างไร

มีสองวิธีในการที่จะทำ Flex Message

1. ด้วยจินตนาการ JSON ของเราลงไปตามคู่มือของ Flex Message อ่านเพิ่มเติม
2. สร้างด้วย Line Bot Designer ดาว์โหลด

Line Bot Designer คืออะไร

เป็นตัวช่วยในการ simulation Flex message ให้ง่ายต่อการพัฒนาแทนที่จะต้องไปนั้งคิดว่าใน Flex เราจะ Custom ยังไงให้สวยงานโดยไม่ต้องมโนจากการคิด JSON ทำให้การพัฒนาเป็นไปได้ง่ายขึ้น เรามาดูกันเลยดีกว่า

เปิดมาหน้าตาจะเป็นแบบนี้ก็ไป Start a New Project กันเลย

เข้ามาจะมีให้ ตั้งชื่อต่างๆ และหมวดของเรา โดยหมวดธุรกิจ ตัว Line Bot Designer มีตัวอย่างของ Message ให้ดูด้วยถือว่าสะดวกมากๆและ ยังให้ idea ในการพัฒนา

เราจะมาสร้างให้คล้ายกับของ Rabbit Line Pay ทำตามภาพที่ 1

ภาพที่ 1

หลังจากที่ทำตามภาพที่ 1 แล้วจะเจอ Popup ให้เลือก ว่าเราจะใช้ตาม Template หรือจะทำเอง แล้วแต่ความชอบของเราเลยแต่อันนี้เราจะมาทำกันเองนะครับ เลือกเป็น Blank แล้ว Create โลดดด!!!

เรามาดูส่วนของ Header กันก่อน

"header": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "text",
          "text": "Purchase",
          "size": "lg",
          "align": "start",
          "weight": "bold",
          "color": "#009813"
        },
        {
          "type": "text",
          "text": "฿ 100.00",
          "size": "3xl",
          "weight": "bold",
          "color": "#000000"
        },
        {
          "type": "text",
          "text": "Rabbit Line Pay",
          "size": "lg",
          "weight": "bold",
          "color": "#000000"
        },
        {
          "type": "text",
          "text": "2019.02.14 21:47 (GMT+0700)",
          "size": "xs",
          "color": "#B2B2B2"
        },
        {
          "type": "text",
          "text": "Payment complete.",
          "margin": "lg",
          "size": "lg",
          "color": "#000000"
        }
      ]
    }

ส่วนของ Body

"body": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "separator",
          "color": "#C3C3C3"
        },
        {
          "type": "box",
          "layout": "baseline",
          "margin": "lg",
          "contents": [
            {
              "type": "text",
              "text": "Merchant",
              "align": "start",
              "color": "#C3C3C3"
            },
            {
              "type": "text",
              "text": "BTS 01",
              "align": "end",
              "color": "#000000"
            }
          ]
        },
        {
          "type": "box",
          "layout": "baseline",
          "margin": "lg",
          "contents": [
            {
              "type": "text",
              "text": "New balance",
              "color": "#C3C3C3"
            },
            {
              "type": "text",
              "text": "฿ 45.57",
              "align": "end"
            }
          ]
        },
        {
          "type": "separator",
          "margin": "lg",
          "color": "#C3C3C3"
        }
      ]
    }

ส่วนของ Footer

"footer": {
      "type": "box",
      "layout": "horizontal",
      "contents": [
        {
          "type": "text",
          "text": "View Details",
          "size": "lg",
          "align": "start",
          "color": "#0084B6",
          "action": {
            "type": "uri",
            "label": "View Details",
            "uri": "https://google.co.th/"
          }
        }
      ]
    }

ปล. อันนี้คือทั้งหมดของ Flex เพื่อใครไม่อยากลองแล้ว Copy ไปใช้เลย

{
  "type": "flex",
  "altText": "Flex Message",
  "contents": {
    "type": "bubble",
    "direction": "ltr",
    "header": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "text",
          "text": "Purchase",
          "size": "lg",
          "align": "start",
          "weight": "bold",
          "color": "#009813"
        },
        {
          "type": "text",
          "text": "฿ 100.00",
          "size": "3xl",
          "weight": "bold",
          "color": "#000000"
        },
        {
          "type": "text",
          "text": "Rabbit Line Pay",
          "size": "lg",
          "weight": "bold",
          "color": "#000000"
        },
        {
          "type": "text",
          "text": "2019.02.14 21:47 (GMT+0700)",
          "size": "xs",
          "color": "#B2B2B2"
        },
        {
          "type": "text",
          "text": "Payment complete.",
          "margin": "lg",
          "size": "lg",
          "color": "#000000"
        }
      ]
    },
    "body": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "separator",
          "color": "#C3C3C3"
        },
        {
          "type": "box",
          "layout": "baseline",
          "margin": "lg",
          "contents": [
            {
              "type": "text",
              "text": "Merchant",
              "align": "start",
              "color": "#C3C3C3"
            },
            {
              "type": "text",
              "text": "BTS 01",
              "align": "end",
              "color": "#000000"
            }
          ]
        },
        {
          "type": "box",
          "layout": "baseline",
          "margin": "lg",
          "contents": [
            {
              "type": "text",
              "text": "New balance",
              "color": "#C3C3C3"
            },
            {
              "type": "text",
              "text": "฿ 45.57",
              "align": "end"
            }
          ]
        },
        {
          "type": "separator",
          "margin": "lg",
          "color": "#C3C3C3"
        }
      ]
    },
    "footer": {
      "type": "box",
      "layout": "horizontal",
      "contents": [
        {
          "type": "text",
          "text": "View Details",
          "size": "lg",
          "align": "start",
          "color": "#0084B6",
          "action": {
            "type": "uri",
            "label": "View Details",
            "uri": "https://google.co.th/"
          }
        }
      ]
    }
  }
}

หลังจากออกแบบเสร็จแล้วก็จะเป็นขั้นตอนการส่งผ่าน Line messaging ไปดูกันต่อเลย

เข้าใช้งานรวมกับ API

ดูตัวอย่าง Code ได้ที่นี่เลยครับ จริงๆเหมือนการส่ง Message API ธรรมดาเลย แค่เปลี่ยนจาก Type: text เป็น Type: Flex เอง ดูตัวอย่างโค๊ดได้ที่นี้เลยครับ

benzintel/linebot

อันนี้คือตัวอย่างที่ทำเสร็จแล้วจะได้หน้าตาแบบนี้ออกมา อาจจะต้องไปปรับกันอีกหน่อยเพื่อความสวยงานนะครับ ส่วนต่อไปที่เราจะแก้คือ altText นะครับส่งทั้งที่เวลา Noti เด่งก็ควรจะเป็นเรื่องนี้นั้น เราจะแก้ที่ไหนไปดูกันครับ

แก้ตรงที่เป็นชื่อ altText นะครับ ผมจะเขียนว่า “Hello Flex Message”

{
  "type": "flex",
  "altText": "Hello Flex Message",  // แก้ตรงนี้นะครับ
  "contents": {
    "type": "bubble",
    "direction": "ltr",
    "header": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "text",
          "text": "Purchase",
          "size": "lg",
          "align": "start",
          "weight": "bold",
          "color": "#009813"
        },
        {
          "type": "text",
          "text": "฿ 100.00",
          "size": "3xl",
          "weight": "bold",
          "color": "#000000"
        },
        {
          "type": "text",
          "text": "Rabbit Line Pay",
          "size": "lg",
          "weight": "bold",
          "color": "#000000"
        },
        {
          "type": "text",
          "text": "2019.02.14 21:47 (GMT+0700)",
          "size": "xs",
          "color": "#B2B2B2"
        },
        {
          "type": "text",
          "text": "Payment complete.",
          "margin": "lg",
          "size": "lg",
          "color": "#000000"
        }
      ]
    },
    "body": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "separator",
          "color": "#C3C3C3"
        },
        {
          "type": "box",
          "layout": "baseline",
          "margin": "lg",
          "contents": [
            {
              "type": "text",
              "text": "Merchant",
              "align": "start",
              "color": "#C3C3C3"
            },
            {
              "type": "text",
              "text": "BTS 01",
              "align": "end",
              "color": "#000000"
            }
          ]
        },
        {
          "type": "box",
          "layout": "baseline",
          "margin": "lg",
          "contents": [
            {
              "type": "text",
              "text": "New balance",
              "color": "#C3C3C3"
            },
            {
              "type": "text",
              "text": "฿ 45.57",
              "align": "end"
            }
          ]
        },
        {
          "type": "separator",
          "margin": "lg",
          "color": "#C3C3C3"
        }
      ]
    },
    "footer": {
      "type": "box",
      "layout": "horizontal",
      "contents": [
        {
          "type": "text",
          "text": "View Details",
          "size": "lg",
          "align": "start",
          "color": "#0084B6",
          "action": {
            "type": "uri",
            "label": "View Details",
            "uri": "https://google.co.th/"
          }
        }
      ]
    }
  }
}

หลังจากแก้แล้วจะเป็นแบบนี้นะครับ

ง่ายแค่นี้เอง เราก็เปลี่ยน Text ธรรมดาให้มีลูกเล่นมาขึ้นสวยงามน่าอ่านมากกว่า Text ธรรมดาทั่วไปและ ทำให้คนที่ใช้งานสนุกไปกับการอ่านเนื้อหาที่มากขึ้น นำเสนอ Content ที่เกี่ยวกับข้อความได้มากขึ้น

สำหรับ ครั้งหน้า ผมจะมาเล่าเรื่อง การทำ NodeMCU จากคนท่ีไม่มีความรู้ด้าน Hardware ก็สามารถทำได้

ขอขอบคุณผู้ให้ความรู้ทั้งหลาย ทั้ง google และ Blog ต่างที่ทำให้สามารถมาถึงจุดนี้ได้

ตัวอย่าง Code ของผม

benzintel/linebot

ตัวอย่าง Template Line Bot Designer

benzintel/linebot

Ref.

https://developers.line.biz/en/reference