สร้าง LINE Flex Message ง่ายๆ ด้วย ChatGPT

สวัสดีเพื่อนๆ ชาว LINE Developer ทุกท่าน กวิ้นกลับมาแล้วจ้า หลังจากที่หายไปอยู่ต่างประเทศนาน เลยไม่ค่อยมีเวลาเขียน blog เลย วันนี้กวิ้นกลับมาพร้อมกับ blog สั้นที่บอกได้เลยว่า ตอนที่ลองทำกวิ้นก็งงเหมือนกันว่ามันทำได้ขนาดนี้เลยเรอะ!! ประเด็นคือมันทำออกมาสวยด้วยนะ จะเป็นยังไงมาติดตามกันเลย

PART 1 - แนะนำเครื่องมือ

วันนี้เราจะใช้เครื่องมือด้วยกัน 2 ตัวด้วยกันนั่นก็คือ
1.ChatGPT (https://chatgpt.com) ตัวนี้กวิ้นใช้ตัวฟรีเลย ไม่ได้จ่ายเงินด้วยนะ (แอบงก 🤣🤣🤣)

2.FLEX MESSAGE SIMULATOR (https://developers.line.biz/flex-simulator)

PART 2— ออกแบบ Flex Message โดยใช้ ChatGPT

เอาละมาถึงขั้นตอนที่เราจะมาออกแบบ Flex Message ที่เราต้องการโดยใช้ ChatGPT กันแล้วนะครับ กวิ้นบอกเลยว่า กวิ้นเป็นคนนึงที่ออกแบบ Flex Message ได้ไม่สวยพอมี ChatGPT เข้ามาช่วยแบบนี้ทำให้งานกวิ้นง่ายขึ้นเยอะเลย

โดยรอบนี้โจทย์ของกวิ้นคือการสร้าง Flex Message คนที่เช่ารถไปใช้เกินเวลา กวิ้นก็จะทำการพิมพ์ promt เป็นภาษาไทยเข้าไปเลยว่า “ช่วยสร้าง LINE Flex Message แจ้งเตือนเวลาคนเช่ารถเกินกำหนดให้หน่อย” ซึ่ง ChatGPT ก็จะทำการสร้าง json สำหรับ Flex Message ออกมาแบบนี้

{
  "type": "flex",
  "altText": "Rental Car Overdue Notification",
  "contents": {
    "type": "bubble",
    "header": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "text",
          "text": "Rental Overdue Alert",
          "weight": "bold",
          "size": "xl",
          "color": "#FF0000"
        }
      ]
    },
    "body": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "text",
          "text": "Customer Name: John Doe",
          "wrap": true
        },
        {
          "type": "text",
          "text": "Car Model: Toyota Camry",
          "wrap": true
        },
        {
          "type": "text",
          "text": "License Plate: ABC-1234",
          "wrap": true
        },
        {
          "type": "text",
          "text": "Rental Due Date: 2024-07-10",
          "wrap": true
        },
        {
          "type": "text",
          "text": "Current Date: 2024-07-15",
          "wrap": true,
          "color": "#FF0000"
        },
        {
          "type": "separator",
          "margin": "lg"
        },
        {
          "type": "button",
          "style": "primary",
          "color": "#FF0000",
          "action": {
            "type": "uri",
            "label": "Contact Customer",
            "uri": "tel:+1234567890"
          }
        },
        {
          "type": "button",
          "style": "secondary",
          "action": {
            "type": "uri",
            "label": "Send Email",
            "uri": "mailto:customer@example.com"
          }
        }
      ]
    },
    "footer": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "text",
          "text": "Please take necessary action immediately.",
          "wrap": true,
          "size": "sm",
          "color": "#888888"
        }
      ]
    }
  }
}

ทีนี้เราลองเอา json ที่เราได้ไปทดลองดูใน Flex Message Simulator โดยเมื่อเราเข้าไปที่ Flex Message Simulator แล้วให้เรากดไปที่ View as JSON

จะขึ้นเป็นหน้าจอให้เราใส่ json เข้าไปได้ให้เราทำการ copy json ตั้งแต่หลัง contents เอาไปวางแบบนี้

หลังจากนั้นให้กดปุ่ม apply เพื่อดูผลลัพธ์

ซึ่งที่เราได้มามันก็ยังแบบไม่สวยไม่ถูกใจใช่ไหมครับ นี่แหละความเจ๋งครับ เราสามารถบอก ChatGPT ให้มันทำสวยกว่านี้ได้โดยกวิ้นก็จะพิมพ์บอกว่า “ช่วยจัดให้สวยงามกว่านี้หน่อย”

{
  "type": "flex",
  "altText": "Rental Car Overdue Notification",
  "contents": {
    "type": "bubble",
    "size": "mega",
    "header": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "text",
          "text": "Rental Overdue Alert",
          "weight": "bold",
          "size": "xl",
          "color": "#FF0000"
        }
      ]
    },
    "hero": {
      "type": "image",
      "url": "https://example.com/car-image.jpg",
      "size": "full",
      "aspectRatio": "20:13",
      "aspectMode": "cover"
    },
    "body": {
      "type": "box",
      "layout": "vertical",
      "spacing": "md",
      "contents": [
        {
          "type": "text",
          "text": "Customer Name: John Doe",
          "weight": "bold",
          "size": "md",
          "wrap": true
        },
        {
          "type": "text",
          "text": "Car Model: Toyota Camry",
          "size": "md",
          "wrap": true
        },
        {
          "type": "text",
          "text": "License Plate: ABC-1234",
          "size": "md",
          "wrap": true
        },
        {
          "type": "box",
          "layout": "horizontal",
          "contents": [
            {
              "type": "text",
              "text": "Rental Due Date:",
              "color": "#AAAAAA",
              "size": "sm"
            },
            {
              "type": "text",
              "text": "2024-07-10",
              "align": "end",
              "size": "sm"
            }
          ]
        },
        {
          "type": "box",
          "layout": "horizontal",
          "contents": [
            {
              "type": "text",
              "text": "Current Date:",
              "color": "#AAAAAA",
              "size": "sm"
            },
            {
              "type": "text",
              "text": "2024-07-15",
              "align": "end",
              "size": "sm",
              "color": "#FF0000"
            }
          ]
        },
        {
          "type": "separator",
          "margin": "md"
        },
        {
          "type": "button",
          "style": "primary",
          "color": "#FF0000",
          "action": {
            "type": "uri",
            "label": "Contact Customer",
            "uri": "tel:+1234567890"
          },
          "margin": "md"
        },
        {
          "type": "button",
          "style": "secondary",
          "action": {
            "type": "uri",
            "label": "Send Email",
            "uri": "mailto:customer@example.com"
          },
          "margin": "md"
        }
      ]
    },
    "footer": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "text",
          "text": "Please take necessary action immediately.",
          "wrap": true,
          "size": "sm",
          "color": "#888888",
          "align": "center"
        }
      ]
    }
  }
}

หลังจากนั้นลองเอา json ที่ได้ไปทดสอบอีกครั้ง จะเห็นว่ามันทำให้สวยขึ้นจริงๆ สวยจนตกใจ

ยังๆ กวิ้นยังรู้สึกว่ามันยังสวยไม่พอกวิ้นเลยพิมพ์บอก ChatGPT ว่า “ขอสวยกว่านี้”

{
  "type": "flex",
  "altText": "Rental Car Overdue Notification",
  "contents": {
    "type": "bubble",
    "size": "mega",
    "header": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "text",
          "text": "🚨 Rental Overdue Alert 🚨",
          "weight": "bold",
          "size": "xl",
          "color": "#FF0000",
          "align": "center"
        }
      ],
      "backgroundColor": "#FFE4E1",
      "paddingAll": "20px"
    },
    "hero": {
      "type": "image",
      "url": "https://example.com/car-image.jpg",
      "size": "full",
      "aspectRatio": "20:13",
      "aspectMode": "cover"
    },
    "body": {
      "type": "box",
      "layout": "vertical",
      "spacing": "md",
      "contents": [
        {
          "type": "text",
          "text": "Customer Name: John Doe",
          "weight": "bold",
          "size": "md",
          "wrap": true
        },
        {
          "type": "text",
          "text": "Car Model: Toyota Camry",
          "size": "md",
          "wrap": true
        },
        {
          "type": "text",
          "text": "License Plate: ABC-1234",
          "size": "md",
          "wrap": true
        },
        {
          "type": "box",
          "layout": "horizontal",
          "contents": [
            {
              "type": "text",
              "text": "Rental Due Date:",
              "color": "#AAAAAA",
              "size": "sm"
            },
            {
              "type": "text",
              "text": "2024-07-10",
              "align": "end",
              "size": "sm"
            }
          ]
        },
        {
          "type": "box",
          "layout": "horizontal",
          "contents": [
            {
              "type": "text",
              "text": "Current Date:",
              "color": "#AAAAAA",
              "size": "sm"
            },
            {
              "type": "text",
              "text": "2024-07-15",
              "align": "end",
              "size": "sm",
              "color": "#FF0000"
            }
          ]
        },
        {
          "type": "separator",
          "margin": "md"
        },
        {
          "type": "box",
          "layout": "horizontal",
          "contents": [
            {
              "type": "button",
              "style": "primary",
              "color": "#FF0000",
              "action": {
                "type": "uri",
                "label": "📞 Contact Customer",
                "uri": "tel:+1234567890"
              },
              "flex": 1
            },
            {
              "type": "button",
              "style": "secondary",
              "action": {
                "type": "uri",
                "label": "📧 Send Email",
                "uri": "mailto:customer@example.com"
              },
              "flex": 1
            }
          ],
          "spacing": "md",
          "margin": "md"
        }
      ]
    },
    "footer": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "text",
          "text": "Please take necessary action immediately.",
          "wrap": true,
          "size": "sm",
          "color": "#888888",
          "align": "center"
        }
      ]
    }
  }
}

เมื่อได้ json มาแล้วเราก็ลองเอาไปทดสอบอีกครั้ง ขอบอกเลยว่ารอบนี้มันสวยถูกใจกวิ้นมากเลย ตรงกับที่กวิ้นอยากได้

ที่เหลือเราก็ปรับตามที่เราต้องการได้เลย

เป็นยังไงบ้างครับกับบทความนี้ กวิ้นหวังว่าจะเป้นประโยชน์กับเพื่อนๆ กันนะครับ

ตอนนี้ LINE Developers เรามีแฟนเพจ และ ช่อง youtube แล้วนะจ๊ะอย่าลืมไปกด LIKE และ กดติดตามกันด้วยน้าาา

https://www.facebook.com/LINEDEVTH

ส่วนใครที่ยังไม่ได้เข้าร่วมกลุ่มกับเรา คลิ๊กที่นี่ได้เลย

https://www.facebook.com/groups/LINEDEVTH

https://www.youtube.com/@LINEDevelopersThailand

Resources

Developer console
https://developers.line.biz/console/

Messaging API Document
https://developers.line.biz/en/docs/messaging-api/

Messaging API Reference
https://developers.line.biz/en/reference/messaging-api/