สร้าง Line Message ประเภทต่างๆ ด้วย Golang กัน~~

เราจะมาสร้าง Line Message ด้วยภาษา Golang กัน ผมจะขอยกตัวอย่างมาทั้งหมด 7 รูปแบบ ดังนี้

1. Text Message
2. Image Message
3. Carousel Template
4. Confirm Template
5. Flex Message without JSON
6. Flex Message with JSON
7. Imagemap Message

บทความนี้เหมาะสำหรับผู้ที่เคยเขียน Line Messaging API อยู่แล้ว เพราะเราจะข้ามขั้นตอนการสร้าง Line Provider, Line Channel และ การตั้งค่าต่างๆของ Line Channel ไปนะครับ ขอเน้นกับการสร้าง Message อย่างเดียวละกัน :3

1. TextMessage

ตัวอย่างการสร้าง Text Message แบบตอบกลับทีล่ะ หนึ่งข้อความ

// New 
textMessage := linebot.NewTextMessage("My name is John Wick")
// Reply Message
linebot.Client.ReplyMessage({REPLY_TOKEN}, textMessage).Do()

ตัวอย่างการสร้าง Text Message แบบตอบกลับทีล่ะ หลายข้อความ

var newTextMessages []linebot.Message
// New TextMessage
newTextMessages = append(newTextMessages, linebot.NewTextMessage("Display Name: "+profile.DisplayName))
// New TextMessage
newTextMessages = append(newTextMessages, linebot.NewTextMessage("Status Message: "+profile.StatusMessage))
// New TextMessage
newTextMessages = append(newTextMessages, linebot.NewTextMessage("User ID: "+profile.UserID))
// Reply Message
linebot.Client.ReplyMessage({REPLY_TOKEN}, newTextMessages...).Do()

2. ImageMessage

ตัวอย่างการสร้าง Image Message

// New ImageMessage
imageMessage := linebot.NewImageMessage("https://i.ytimg.com/vi/n7gcats5uCQ/maxresdefault.jpg", "https://i.ytimg.com/vi/n7gcats5uCQ/maxresdefault.jpg")
// Reply Message
linebot.Client.ReplyMessage({REPLY_TOKEN}, imageMessage).Do()

3. Carousel Template

ตัวอย่างการสร้าง Carousel Template นี้ประกอบไปด้วย TemplateAction, MessageAction, CarouselColumn, CarouselTemplate และที่สำคัญก็คือ TemplateMessage

// New TemplateAction
var actions []linebot.TemplateAction
// Add Actions
actions = append(actions, linebot.NewMessageAction("left", "left clicked"))
actions = append(actions, linebot.NewMessageAction("right", "right clicked"))
// Image URL For CarouselColumn
imgURL := "https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1539963100/sloth-SLOTH1018.jpg?itok=n6IuFyx_"
// New CarouselColumns
 var columns []*linebot.CarouselColumn
// Add CarouselColumn
columns = append(columns, linebot.NewCarouselColumn(imgURL, "Title", "description", actions...))
// New CarouselTemplate
carousel := linebot.NewCarouselTemplate(columns...)
// New TemplateMessage
template := linebot.NewTemplateMessage("Carousel", carousel)
// Reply Message
linebot.Client.ReplyMessage({REPLY_TOKEN}, template).Do()

อธิบาย โค๊ดตัวอย่างด้านบนนี้ก็คือ เราทำการสร้าง TemplateActions(1) ไว้แล้วใส่ MessageActions(2) ให้กับ TemplateActions แล้วใส่ TemplateActions ให้กับ CarouselColumn(3) แล้วใส่ CarouselColumn ทั้งหมดให้กับ CarouselTemplate(4) และสุดท้ายใส่ CarouselTemplate ให้กับ TemplateMessage(5) เป็นอันเรียบร้อย หวังว่าจะช่วยให้เข้าใจขึ้น หรือ จะงงกว่าเดิม ฮ่าๆ 🤒

4. Confirm Template

ตัวอย่างการสร้าง ConfirmBox Template ประกอบไปด้วย MessageAction, ConfirmTemplate

// New MessageActions
leftBtn := linebot.NewMessageAction("Yes", "Yes clicked")
rightBtn := linebot.NewMessageAction("No", "No clicked")
// New ConfirmTemplate
template := linebot.NewConfirmTemplate("Are you John wick?", leftBtn, rightBtn)
// New TemplateMessage
message := linebot.NewTemplateMessage("Confirm Box.", template)
// Reply Message
linebot.Client.ReplyMessage({REPLY_TOKEN}, message).Do()

5. FlexMessage Without JSON

ตัวอย่างการสร้าง FlexMessage โดยใช้โค๊ด Golang ประกอบไปด้วย

• FlexComponent
• TextComponent
• FlexComponentTypeText
• FlexTextSizeType{SIZE}
• ImageComponent
• FlexComponentTypeImage
• FlexImageAspectRatioType{RATIO}
• FlexImageAspectModeType{MODE_TYPE}
• MessageAction
• BoxComponent
• FlexComponentTypeBox
• FlexBoxLayoutTypeVertical
• BubbleContainer
• FlexContainerTypeBubble
• NewFlexMessage

มันก็จะเยอะๆหน่อยนะ 😭

// Make Contents
var contents []linebot.FlexComponent
text := linebot.TextComponent{
  Type:   linebot.FlexComponentTypeText,
  Text:   "Brown Cafe",
  Weight: "bold",
  Size:   linebot.FlexTextSizeTypeXl,
}
contents = append(contents, &text)
// Make Hero
hero := linebot.ImageComponent{
  Type:        linebot.FlexComponentTypeImage,
  URL:         "https://scdn.line-apps.com/n/channel_devcenter/img/fx/01_1_cafe.png",
  Size:        "full",
  AspectRatio: linebot.FlexImageAspectRatioType20to13,
  AspectMode:  linebot.FlexImageAspectModeTypeCover,
  Action:      linebot.NewMessageAction("left", "left clicked"),
}
// Make Body
body := linebot.BoxComponent{
  Type:     linebot.FlexComponentTypeBox,
  Layout:   linebot.FlexBoxLayoutTypeVertical,
  Contents: contents,
}
// Build Container
bubble := linebot.BubbleContainer{
  Type: linebot.FlexContainerTypeBubble,
  Hero: &hero,
  Body: &body,
}
// New Flex Message
flexMessage := linebot.NewFlexMessage("FlexWithCode", &bubble)
// Reply Message
linebot.Client.ReplyMessage({REPLY_TOKEN}, flexMessage).Do()

6. FlexMessage With JSON

ตัวอย่างการสร้าง FlexMessage ด้วย JSON อันนี้จะง่ายกว่าในการ Implements เพราะเราสามารถก็อปปี้ JSON จาก Line Bot Designer มาวางได้เลย แต่ในการอ่านโค๊ดนั้นผมมองว่าเขียนด้วย โค๊ด Golang เลยอ่านง่ายกว่านะ

// Unmarshal JSON
 flexContainer, err := linebot.UnmarshalFlexMessageJSON([]byte(`PASTE_JSON_TO_HERE`))
 if err != nil {
  log.Println(err)
 }
// New Flex Message
flexMessage := linebot.NewFlexMessage("FlexWithJSON", flexContainer)
// Reply Message
linebot.Client.ReplyMessage({REPLY_TOKEN}, flexMessage).Do()

7. Imagemap Message

ตัวอย่างการสร้าง Imagemap Message ประกอบไปด้วย URIImagemapAction, ImagemapArea, MessageImagemapAction, ImagemapAction, ImagemapMessage, ImagemapBaseSize

// New URIImagemapAction
 uriAction := linebot.URIImagemapAction{
  LinkURL: "https://www.google.com/search?q=sloth&source=lnms&tbm=isch",
  Area: linebot.ImagemapArea{
   Height: 0,
   Width:  0,
   X:      0,
   Y:      0,
  },
 }
// New MessageImageAction
 messageAction := linebot.MessageImagemapAction{
  Text: "สวัสดีจ๊ะ",
  Area: linebot.ImagemapArea{
   Height: 0,
   Width:  0,
   X:      0,
   Y:      0,
  },
 }
// Append URI, Message Action into ImagemapAction
 actions := &[]linebot.ImagemapAction{
  &uriAction,
  &messageAction,
 }
// New Imagemap Message
 imagemapMessage := linebot.NewImagemapMessage(
  "http://guinnessworldrecords.com/Images/Sloth-header_tcm25-544723.jpg",
  "Imagemap Message",
  linebot.ImagemapBaseSize{
   Width:  1024,
   Height: 640,
  },
  *actions...,
 )
// Reply Message
linebot.Client.ReplyMessage({REPLY_TOKEN}, imagemapMessage).Do()

สรุป

ที่ผมยกตัวอย่างข้อความทั้ง 7 รูปแบบนั้น เป็นแค่ส่วนหนึ่งเท่านั้น ยังมีอีกหลายรูปแบบที่สามารถทำได้ หวังว่าบทความนี้จะเป็นแนวทางให้กับผู้ที่สนใจเขียน ภาษา Golang กับ Line API นะครับ

ดูเพิ่มเติม Message types ได้ที่

LINE Developers

หรือใครต้องการรายละเอียดเพิ่มเติมเกี่ยวกับ Messages แต่ล่ะแบบแนะนำให้ลองอ่าน 2 บทความนี้ครับ

รู้จักกับ Message ใน LINE ที่คนส่งได้ LINE Bot ก็ส่งได้

รู้จักกับ Message ใน LINE ที่ LINE Bot ส่งได้ แต่คนส่งเองไม่ได้

สุดท้ายฝากกด 👏 👏 👏 กด Share ให้ด้วยนะครับ 🙌

line/line-bot-sdk-go