ไม่พลาดทุกการสื่อสารกับผู้ใช้บริการของคุณ ด้วยระบบแจ้งเตือนผ่าน LINE Notify

Published in

LINE Developers Thailand

5 min readMay 22, 2018

จากบทความที่แล้วที่ผมได้แนะนำการแจ้งเตือน crash ที่เกิดขึ้นในแอปผ่าน LINE Notify ไป ขั้นตอนในการพัฒนาจะเป็นการ generate access token แบบทางเดียว(static) จากฝั่งนักพัฒนา แล้วเอา access token ที่ได้ไประบุไว้ใน source code ดังนั้นการแจ้งเตือนก็จะสามารถทำได้แค่ช่องทางที่นักพัฒนาระบุไว้เท่านั้น และก่อนที่เราจะไปกันต่อ ผมขอแนะนำให้อ่านบทความ LINE Notify ภาคปฐมบท ตามลิงค์ด้านล่างนี้กันก่อน (จะได้เข้าใจแบบ Zero จนเป็น Hero)

แจ้งเตือน Crash จาก Crashlytics ผ่าน LINE Notify ด้วย Cloud Functions for Firebase v1.0.x

ผมคิดว่านักพัฒนาแอปทั้ง Android และ iOS ในบ้านเราส่วนมากน่าจะใช้บริการ Crashlytics ซึ่งเป็น crash reporter…

medium.com

บทความนี้จะเป็นการพัฒนา LINE Notify แบบที่ให้ผู้ใช้บริการของคุณสามารถเลือกช่องทางการรับข่าวสาร(subscription) ได้ด้วยตัวผู้ใช้เอง(dynamic) ซึ่งระบบที่เราจะพัฒนานี้ สามารถนำไปต่อยอดได้หลากหลาย use case เช่น

การรายงานสถานะการส่งสินค้าและบริการ
การแจ้งเตือนนัดหมายต่างๆ
การยืนยันการสั่งซื้อ
การส่งข่าวสารและโปรโมชัน
และอื่นๆอีกประมาณล้านแปด use case

ขั้นตอนการพัฒนา

สร้าง Service Provider
Integrate LINE Notify APIs กับระบบของเรา
ส่งข้อความผ่าน LINE Notify
Revoke Access Token

เอาหละ ถึงตรงนี้ให้ทุกคนเอามือจับติ่งหูของตัวเองไว้ ถ้าพร้อมจะพัฒนาแล้วหละก็…ไปกันเลย!

1. สร้าง Service Provider

1.1 เข้าไปที่เว็บ https://notify-bot.line.me/en/ จากนั้น กด Log in ที่มุมขวาบน แล้ว log in ให้เรียบร้อย

1.2 เลือกเมนู Manage registered services ที่มุมขวาบน จากนั้นให้กด Add service ต่อเลย

1.3 กรอกรายละเอียดให้ครบ โดยส่วนสำคัญที่ให้กรอกมี 2 ส่วนด้วยกันคือ

Service name: ชื่อบริการที่จะแสดงในข้อความแจ้งเตือนผ่าน LINE Notify
Callback URL: URL ที่ LINE จะทำการเรียกกลับมาพร้อมส่งค่าบางอย่างมา หลังจากผ่านการ Authentication

เสร็จแล้วก็กด Add ไป (มั่นใจแล้วปล่อยคิวโลด)

1.4 LINE Notify จะให้เรายืนยันการสร้าง service provider ผ่านอีเมล ก็ยืนยันซะ

ถ้าเจอผลลัพธ์แบบนี้ ก็ยินดีด้วย คุณมาถูกทางละ

ถึงส่วนสำคัญละ ให้คลิกเข้าไปที่ service provider ที่เราสร้าง จะเจอ Client ID และ Client Secret ซึ่งเราจะต้องใช้มันในขั้นตอนการ code

2. Integrate LINE Notify APIs กับระบบของเรา

เป้าหมายของการ integrate คือต้องการได้ access token ของผู้ใช้แต่ละคนมาเก็บไว้ เพื่อที่จะสามารถส่งข้อความหาผู้ใช้ได้ในอนาคต โดยจะแบ่งออกเป็น 3 ขั้นตอนย่อย

2.1 Request Authorization Code

สำหรับขั้นตอนนี้ เราจะทำการเปิดหน้าเว็บ เพื่อให้ผู้ใช้เข้ามา log in และเลือกช่องทางในการรับการแจ้งเตือน โดยมีรายละเอียดของการเปิดเว็บดังนี้

Endpoint: https: //notify-bot.line.me/oauth/authorizeMethod: GETParams:
  response_type: “code”
  client_id: Client ID จากขั้นตอนที่ 1.4
  redirect_uri: Callback URL จากขั้นตอนที่ 1.3
  scope: “notify”
  state: ระบุ random string ได้ทั้งตัวเลขและตัวหนังสือ เพื่อป้องกันเคส CSRF

ซึ่งหลังจากเรา login ด้วย web เสร็จเรียบร้อยจะมีการ redirect กลับมาตามที่เรากำหนด callback URL ไว้ พร้อมค่า query string ของตัวแปร code ไว้สำหรับขั้นตอนต่อไป

ตัวอย่าง https://mokmoon.com/bangkok?code=XXXYYYZZZ&state=12345abcde

2.2 Get Access Token (Subscription)

หลังจากเราเก็บ code ซึ่งเป็น query string จากขั้นตอนที่ 2.1 มาได้แล้ว ก็เรียก API เพื่อมา get ค่า access token กันต่อได้ละ

Endpoint: https://notify-bot.line.me/oauth/tokenMethod: POSTHEADER:
- Content-Type: application/x-www-form-urlencodedParams:
- grant_type: "authorization_code"
- code: code ที่ได้จากขั้นตอนที่ 2.1
- redirect_uri: Callback URL จากขั้นตอนที่ 1.3
- client_id: Client ID จากนั้นตอนที่ 1.4
- client_secret: Client Secret จากขั้นตอนที่ 1.4

ลองทดสอบผ่าน Postman ดูหน่อย

ถ้าไม่มีอะไรผิดพลาด response ก็จะมี access_token ติดมาในรูปแบบ JSON

2.3 Collect Access Token

ขั้นตอนนี้เราก็จะเก็บ access_token ที่ได้มาจากข้อ 2.2 ไว้ในส่วนลึกของความทรงจำ อะ ล้อเล่นน้า เก็บไว้ใน database ที่สามารถเชื่อมโยงกับผู้ใช้คนนั้นๆได้

ตัวอย่าง ผมได้ทำแอป Brown Bag เพื่อใช้สำหรับการ meetup ในองค์กรขึ้นมา โดยผมทำ toggle ให้ subscribe รับแจ้งเตือนผ่าน LINE Notify ในหน้า Settings โดยมี user journey ดังนี้

ผู้ใช้กด toggle เพื่อ subscribe แล้วมี popup มาถามว่า ได้ add ตัว LINE Notify OA แล้วหรือยังจ๊ะ ถ้ายังไม่ add เราก็ provide ปุ่มให้กระโดดไป add ได้ผ่านลิงค์

https://line.me/R/ti/p/%40linenotify

ถ้า add แล้วก็จะเปิด webview ขึ้นมา(2.1) ให้ผู้ใช้ทำการ log in และเลือกช่องทางที่จะรับการแจ้งเตือน
เมื่อเลือกแล้ว กดยอมรับก็ไปทำการขอ access_token(2.2) และหลังจากได้ access_token มาก็เก็บลง Firebase Realtime Database
LINE Notify ก็จะแจ้งเตือนว่าเราได้ผูกสัมพันธ์กับ Brown Bag ละน้าาา

3. ส่งข้อความผ่าน LINE Notify

มาถึงขั้นตอนที่จะแสดงให้เรารู้ละ ว่าที่ทำมามันสำเร็จไหม 555 ก่อนอื่นมาดูรายละเอียดของ API กันก่อน

Endpoint: https://notify-api.line.me/api/notifyMethod: POSTHeaders:
- Content-Type: application/x-www-form-urlencoded หรือถ้าต้องการอัพโหลดภาพให้ใช้ multipart/form-data
- Authorization: Bearer <USER_ACCESS_TOKEN>Params:
- message: ข้อความไม่เกิน 1,000 ตัวอักษร (Required)
- imageThumbnail: URL ของรูปภาพที่จะแสดงใน chat (Optional)
- imageFullsize: URL ของรูปภาพที่เมื่อคลิก imageThumbnail แล้วจะสามารถแสดงออกมาได้ขนาดใหญ่ (Optional)
- imageFile: ไฟล์รูปภาพที่สามารถอัพโหลดไปที่ server ของ LINE ได้ (Optional)
- stickerPackageId: ID ของแพ๊คเกจสติ๊กเกอร์นั้นๆ Sticker List (Optional)
- stickerId: ID ของสติ๊กเกอร์นั้นๆ (Optional)

การระบุตัวแปร imageThumbnail จะต้องระบุ imageFullsize ด้วยเสมอ เช่นเดียวกับการระบุตัวแปร stickerPackageId จะต้องระบุ stickerId ด้วย

ตัวอย่าง(ต่อ) แอป Brown Bag ที่ผมทำจะมีการโหวตหัวข้อของ speaker ว่าอยากฟังหัวข้อไหน คราวนี้ผมก็จะแจ้งเตือน speaker ของหัวข้อนั้นๆเมื่อมีคนมากดโหวตให้เขา หลักการคือ เอา UID ของหัวข้อนั้นๆไป query หา line_access_token ใน Profile ของเขา ถ้าเจอก็จะ request ไปหาทันที

Firebase Thailand มาโหวตให้ด้วย ปลื้มใจอะ

Response หลังจากยิง API ไปแล้วจะมีค่าบางอย่างแนบมาใน Headers ด้วย

จริงๆแล้วมันคือตัวที่บอก limit การใช้งานต่อ access_token นั่นเอง ซึ่งเขาคิดกันเป็นชั่วโมง แปลว่าครบชั่วโมงก็จะ reset เริ่มใหม่ มาดูกันว่ามีอะไรบ้าง

X-RateLimit-Limit: จำนวนครั้งในการเรียก API โดยปกติอยู่ที่ 1,000 ครั้ง
X-RateLimit-Remaining: จำนวนครั้งที่ยังสามารถเรียก API ได้ภายใน 1 ชม.
X-RateLimit-ImageLimit: จำนวนครั้งในการอัพโหลดรูปภาพไปที่ server ของ LINE ซึ่งตอนนี้อยู่ที่ 50 ครั้ง
X-RateLimit-ImageRemaining: จำนวนครั้งที่เหลือในการอัพโหลดรูปได้ภายใน 1 ชม.
X-RateLimit-Reset: เวลาที่จะ reset โควต้ากลับมาใหม่ หน่วยเป็น Unix Time

4. Revoke Access Token

มาถึงขั้นตอนสุดท้ายละ เมื่อเรา provide ตัว toggle ให้ผู้ใช้ทำการ subscribe แล้ว เราก็ควรมอบประสบการณ์ที่ดีให้กับผู้ใช้ด้วย คือมีเปิดก็ควรมีปิดให้ด้วย คือเมื่อผู้ใช้ toggle ปิด Notify เราก็ควรไป revoke ตัว access_token รวมถึงลบข้อมูลใน Firebase Realtime Database ด้วย มาดูรายละเอียด Revoke API กัน

Endpoint: https://notify-api.line.me/api/revokeMethod: POSTHeaders:
- Content-Type: application/x-www-form-urlencoded
- Authorization: Bearer <USE_ACCESS_TOKEN>

ตัวอย่างผ่าน Postman

ตามด้วยตัวอย่างจากแอป Brown Bag

ปัจฉิมบท

บทความนี้ก็ถือเป็นภาคจบของ LINE Notify หวังว่านักพัฒนาทั้ง iOS, Android และ Web จะดลบันดาลไอเดียจากบทความนี้ แล้วใช้ LINE Notify ไปสร้างความสะดวกสบายให้กับผู้ใช้ของคุณ และให้การสื่อสารจากบริการของคุณมีประสิทธ์ภาพสูงสุด ขอให้สนุกกับ LINE Notify วันนี้ขอตัวลาไปก่อน ราตรีสวัสดิ์นักพัฒนาชาวไทย