Getting Started with LINE Messaging: From Concept to Deployment

This blog post documents the process of creating a simple recommendation app within the LINE messaging ecosystem, covering account registration, channel setup, and webhook development using Google Apps Script. It offers a practical guide for beginners interested in integrating LINE messaging into their business.

Posted Aug 20, 2024 Updated Sep 6, 2024

By Chandrasekaran

views 3 min read

Background

The other day, I was discussing with one of my customers the growing trend of businesses using the LINE messaging app for customer engagement.

It’s true that in the last few years, many businesses, both small and large, have started employing LINE for customer communication in Japan. Personally, I’ve used the LINE app for booking doctor appointments, selecting food in fast-food-style restaurants, using coupons sent by clothing stores, lining up in a virtual queue for a haircut, and more. It’s incredibly convenient and user-friendly.

This inspired me to try developing a simple app within the LINE ecosystem. In this blog post, I’ll document my experience.

After some basic research, I followed the steps below to develop a simple recommendation app for retail users.

Registration of LINE Developer Account

First, you’ll need to create a LINE Developer account using a new or existing LINE account, which will be treated as a business account. You’ll need to provide some basic details and register as a “Provider.” Once the provider is set up, developers can create different types of channels. For our demo, I created a “Messaging API” channel.

End users need to subscribe to the created messaging channel.

LINE Messaging API Development

LINE requires us to provide a webhook link that will be called whenever a user sends a message to our channel. The webhook can be registered for each channel under “Messaging API Settings.”

A webhook is an HTTP-based callback function that allows lightweight, event-driven communication between 2 application programming interfaces (APIs). Webhooks are used by a wide variety of web apps to receive small amounts of data from other apps, but webhooks can also be used to trigger automation workflows in GitOps environments.
Source: Redhat.com

LINE Messages:

Developers can send several types of messages to channel subscribers, which can broadly be classified into two types:

Text Message
Flex Message

Typically, flex messages are pre-defined templates; most business messages fall under this category.

  
{
  "type": "bubble",
  "body": {
 "type": "box",
 "layout": "vertical",
 "contents": [
   {
     "type": "image",
     "url": "https://i.pinimg.com/736x/e8/7e/51/e87e512b7db942f22b82339079440943.jpg",
     "size": "full",
     "aspectMode": "cover",
     "aspectRatio": "1:1",
     "gravity": "center"
   }
 ],
 "paddingAll": "0px"
  }
}

Flex Message Simulator:

The Flex Message Simulator allows us to preview the layout of Flex Messages without sending them. It essentially simulates the custom JSON message.

Rich menus are composed of a menu image, tappable areas, and a chat bar. They can be easily built using the rich menu builder under the LINE Official Account Manager.

Webhook Development

I used Google Apps Script to develop the webhook and deployed it to the internet. The syntax is similar to JavaScript, making it extremely easy to develop and deploy.

Once the App Script development is completed, it needs to be deployed, and a webhook URL needs to be generated. This URL is then registered in the LINE Developer Console under the appropriate section.

  
function doPost(e) {

  debugLog("Info", "Received Message from LINE")
  const data = JSON.parse(e.postData.contents).events[0];
  debugLog("Content", data)
  const lineUserId = data.source.userId;
  const replyToken = data.replyToken;
  const postMsg = data.message.text;

  switch (postMsg.toLowerCase()) {
    case "recommend":
      sendRichTextMessage(replyToken,"Our Recommendations", recommendJSON)      
      break;
    case "location":
      sendNormalMessage(replyToken, "location")
      break;
    case "coupon":
      sendRichTextMessage(replyToken,"Your Coupon Details", couponJSON)
      break;
    case "member card":
      sendRichTextMessage(replyToken,"Our Recommendations", memberJSON)
      break;
    default:
      sendNormalMessage(replyToken, "Please send any of (recommend/location/coupon/member card)")
  }

}