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

Jirawatee
Jirawatee
May 22, 2018 · 5 min read

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

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

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

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

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

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

1. สร้าง Service Provider

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

Step 1

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

step 2

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-urlencoded
Params:
- 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 วันนี้ขอตัวลาไปก่อน ราตรีสวัสดิ์นักพัฒนาชาวไทย

LINE Developers Thailand

Closing the distance. Our mission is to bring people, information and services closer together

Jirawatee

Written by

Jirawatee

Technology Evangelist at LINE Thailand / Google Developer Expert - 🔥Firebase

LINE Developers Thailand

Closing the distance. Our mission is to bring people, information and services closer together

More From Medium

More on Linedevth from LINE Developers Thailand

More on Linedevth from LINE Developers Thailand

ใช้งาน Dialogflow ผ่าน API detectIntent

More on Linedevth from LINE Developers Thailand

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade