LINE Chatbot

59 | P a g e

google sheet น่นั เอง

60 | P a g e

61 | P a g e

ในสว่ นของ Responses ให้ปล่อยวา่ งไว้ ไม่ต้องกาหนดคา่ ใดๆ และทาการ Enable Webhook call for this
intent

62 | P a g e

เพยี งเทา่ น้ี Chat bot ของเรากพ็ ร้อมทจ่ี ะใช้งานรว่ มกบั google sheet แล้ว

63 | P a g e

2. Inline Editor

Creating a function by Inline Editor

เม่อื ทาการ enable Fulfilment แลว้ สงิ่ ที่ ตอ้ งทาเปน็ อันดบั แรก คือ การสรา้ ง ฟังก์ช่ัน น่นั เอง

// See https://github.com/dialogflow/dialogflow-fulfillment-nodejs
// for Dialogflow fulfillment library docs, samples, and to report issues
'use strict';

const functions = require('firebase-functions');
const {WebhookClient} = require('dialogflow-fulfillment');
const {Card, Suggestion ,Payload} = require('dialogflow-fulfillment');

process.env.DEBUG = 'dialogflow:debug'; // enables lib debugging statements

64 | P a g e

exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => {
const agent = new WebhookClient({ request, response });
console.log('Dialogflow Request headers: ' + JSON.stringify(request.headers));
console.log('Dialogflow Request body: ' + JSON.stringify(request.body));

function welcome(agent) {
agent.add('Welcome to my agent!');
}

function fallback(agent) {
agent.add(`I didn't understand`);
agent.add(`I'm sorry, can you try again?`);
}
function showvalue(agent) {
let court = request.body.queryResult.parameters.court;
let year = request.body.queryResult.parameters.year;
let casenumber = request.body.queryResult.parameters.casenumber;

let result = ("สถานะสานวน+" : "+"court+" เลขคดี +"casenumber+" ปี +"year) ;
agent.add(result);

65 | P a g e

agent.add("พพิ ากษาวา่ จาเลยมีความผดิ ตามพระราชบัญญัติยาเสพติดใหโ้ ทษ พ / ๑๕ มาตรา ๒๕๒๒.ศ.
วรรคหนง่ึ ...วรรคหนึ่ง, ๖๗ จาคกุ ๑ ปี ๖ เดือน ปรับ ๓๐,๐๐๐ บาท จาเลยใหก้ ารรบั สารภาพ เป็นประโยชน์แก่
การพจิ ารณา มเี หตุบรรเทาโทษ ลดโทษใหก้ ึง่ หน่ึงตามประมวลกฎหมายอาญา มาตรา ๗๘ คงจาคุก ๙ เดือน ปรบั
๑๕,๐๐๐ บาท ไม่ปรากฏว่าจาเลยเคยต้องคาพิพากษาให้ลงโทษจาคกุ มาก่อน โทษจาคุกให้รอ การลงโทษไวเ้ ป็น
เวลา ๒ ปี ใหค้ ุมความประพฤติไวเ้ ปน็ เวลา ๑ ปี กาหนดเงอ่ื นไขการคุมประพฤติ ให้จาเลยไปรายงานตวั ต่อ
พนกั งานคุมประพฤติรวม ๔ ครงั้ ใหจ้ าเลยไปรับการบาบดั รกั ษาการตดิ ยาเสพติดใหโ้ ทษมีกาหนดไมเ่ กนิ ๗ วนั
ตามที่พนกั งานคมุ ประพฤติ ใหจ้ าเลยเขา้ รบั คาปรึกษาในคลินกิ ใหค้ าปรกึ ษาด้านติสงั คม จานวน ๑ ครั้ง ใหจ้ าเลย
ทางานบรกิ ารสงั คมหรือสาธารณประโยชน์ตามท่ีจาเลยและ พนกั งานคุมประพฤติเหน็ สมควรมีกาหนด ๑๒ ช่วั โมง
ไมช่ าระค่าปรบั ให้จัดการตามประมวลกฎหมายอาญา มาตรา ๒๙, ๓๐ ริบเมทแอมเฟตามีนทีเ่ หลือจากการตรวจ
พสิ ูจน์(".;

const payloadJson =
{
type: "sticker",
packageId: "1",
stickerId: "1"
};

let payload = new Payload(`LINE`, payloadJson, { sendAsMessage: true });
agent.add(payload);
}

// // Uncomment and edit to make your own intent handler
// // uncomment `intentMap.set('your intent name here', yourFunctionHandler);`

66 | P a g e

// // below to get this function to be run when a Dialogflow intent is matched
// function yourFunctionHandler(agent) {
// agent.add(`This message is from Dialogflow's Cloud Functions for Firebase editor!`);
// agent.add(new Card({
// title: `Title: this is a card title`,
// imageUrl:
'https://developers.google.com/actions/images/badges/XPM_BADGING_GoogleAssistant_VER.png',
// text: `This is the body text of a card. You can even use line\n breaks and emoji! `,
// buttonText: 'This is a button',
// buttonUrl: 'https://assistant.google.com/'
// })
// );
// agent.add(new Suggestion(`Quick Reply`));
// agent.add(new Suggestion(`Suggestion`));
// agent.setContext({ name: 'weather', lifespan: 2, parameters: { city: 'Rome' }});
// }

// // Uncomment and edit to make your own Google Assistant intent handler
// // uncomment `intentMap.set('your intent name here', googleAssistantHandler);`
// // below to get this function to be run when a Dialogflow intent is matched
// function googleAssistantHandler(agent) {

67 | P a g e

// let conv = agent.conv(); // Get Actions on Google library conv instance
// conv.ask('Hello from the Actions on Google client library!') // Use Actions on Google library
// agent.add(conv); // Add Actions on Google library responses to your agent's response
// }
// // See https://github.com/dialogflow/fulfillment-actions-library-nodejs
// // for a complete Dialogflow fulfillment library Actions on Google client library v2
integration sample

// Run the proper function handler based on the matched Dialogflow intent name
let intentMap = new Map();
intentMap.set('Default Welcome Intent', welcome);
intentMap.set('Default Fallback Intent', fallback);
intentMap.set('COJ.Tracking - Process - yes', showvalue);

// intentMap.set('your intent name here', yourFunctionHandler);
// intentMap.set('your intent name here', googleAssistantHandler);
agent.handleRequest(intentMap);
});

68 | P a g e

เมื่อกาหนด code ในส่วนของ function เรียบร้อยแล้ว สิง่ ทข่ี าดไมไ่ ด้คือ จะต้อง จบั คู่ function เข้ากบั intent
ท่ีเราต้องการใช้งาน
trick ! ในสว่ นนีจ้ ะต้องระวัง ชื่อ intent จะต้อง เปะ๊ ถกู ต้อง 100% ห้ามพิมพผ์ ดิ หรือ copy มาไม่ครบโดย
เดด็ ขาด

69 | P a g e

Customize LINE messages

และเชน่ เดยี วกบั LINE Response ในส่วนของ Fulfilment เรากส็ ามารถท่จี ะ ใช้ LINE Messaging ทเ่ี ป็น Json
ได้ เช่นกัน

ใน Tab ช่อื package.json นี้ เราจาเป็นตอ้ งอัพเดท dependency ทีช่ อื่ dialogflow-fulfillment ให้เป็น
เวอรช์ นั 0.6.)หรอื สงู กว่า 1default ที่ให้มาคือ 0.5.0) เพ่ือที่จะสามารถ custom message ของ LINE ได้

70 | P a g e

กาหนด code ตามตัวอยา่ ง โดย สามารถ นา LINE messaging Json มาใช้งานไดท้ ันที

71 | P a g e

Day 3 1
- Rich Menu Overview 2
- Rich Menu Maker 6
- Rich Menu Messaging API 21
- LIFF (LINE Frontend Framework) 23
- How to create LIFF Application 32
- Deploy Code to Heroku for Web Application (SSL) 34
- Register LIFF Application 42
- LIFF version 2 44
- Create Rich Menu 47
- Connecting databases 51
- Create LIFF Login 56
- Link Rich Menu to a User

1|Page

Rich Menus Overview

Rich Menu (ริชเมนู) คือ เมนูท่ีเปน็ แถบรูปภาพท่สี ามารถปรบั แต่งไดด้ ้านล่างทอ่ี ยใู่ นหอ้ ง Chat ของ LINE เพ่อื เพม่ิ ชอ่ ง
ทางการ Interact ระหวา่ ง Bot กบั User ใหม้ ีความหลากหลายมากขน้ึ นอกเหนือจากการพิมพ์เพยี งอยา่ งเดยี ว เราสามารถ
กาหนด Action ของพ้นื ทใ่ี นรปู ภาพได้ตา่ งกนั

https://medium.com/linedevth

ประเภทและแสดงลำดบั ควำมสำคัญของรชิ เมนู

มรี ิชเมนู สามประเภทดังตอ่ ไปนข้ี น้ึ อยกู่ บั วิธกี ารตัง้ คา่ และผูใ้ ชเ้ ปา้ หมาย

Type Setting method Target users Display priority
Per-user rich menu set Messaging API Individual user 1
with the Messaging API 2
Default rich menu set Messaging API All users who have
with the Messaging API added your LINE official 3
account as a friend
Default rich menu set LINE Official Account All users who have
with LINE Official Manager added your LINE official
Account Manager account as a friend

2|Page

Rich Menu Maker

สร้าง Rich Menu ผา่ น LINE Official Account Manager (ไมต่ ้องเขยี นโคด้ ) (Priority 3)
ดาวโหลดไฟล์ Template : https://static.line-scdn.net/biz-

app/16bd9ea9e03/manager/static/LINE_rich_menu_design_template.zip

กดปุม่ สรา้ งใหม่

1. กรอกช่ืองานของรชิ เมนู : รชิ เมนู 1
2. สถานการณใ์ ชง้ าน : เปดิ
3. กาหนดวันทแี่ ละเวลา * จาเปน็ มากหา้ มลมื : กรอกวันเวลาปจั จุบัน และ วันเวลาไปอีก 1 ปี
4. กาหนดขอ้ ความเมนูบาร์ (จะแสดงด้านลา่ งใตร้ ิชเมนู กรณตี ั้งชอ่ื อื่น ๆ ) : เมนู
5. การแสดงเมนแู บบเร่ิมตน้ : แสดง

3|Page

เลือกเทมเพลต
ไฟลท์ ่ไี ด้จากDownload Template : Compact -> Small -> richmenu-template-guides-02

4|Page

เลอื กแอ็คชนั ดังรูป
กรณีต้องการสรา้ งรูป ดาวโหลดไฟล์จาก https://lineexam.page.link/3N7P จะพบไฟล์ 1.png 2.png

กด สรา้ งรปู -> import image 1.png and 2.png -> กดใช้
หมายเหตุ ทา่ นสามารถเลอื กภาพท่ที ่านเตรียมมา และไม่เปน็ ไปตามเงือนไขของการอัพโหลดภาพ สามารถนามาจัดการได้ผา่ น
maker ริชเมนูได้

5|Page

Rich Menu Action

• ข้อความ : ส่งข้อความตาม Message ทไี่ ด้ตง้ั ไว้
• ลิงค์: การเปดิ เว็บไซต์ หรือ Scheme อน่ื ๆ เช่น tel
• คปู อง: การแนบคปู องในรายการโปรโมชน่ั ทสี่ ร้างไว้
• บัตรสะสมแต้ม: การแนบบตั รสะสมแตม้ ในรายการโปรโมชน่ั ทสี่ ร้างไว้
• ไม่กาหนด: กดแลว้ ไม่ขึน้ อะไรเลย

ปมุ่ A Config Text : สวสั ดี และ ปมุ่ B Config URL : https://www.coj.go.th/

6|Page

Rich Menu Messaging API

ท่านสามารถตั้งคา่ ริชเมนูเรม่ิ ต้นและต่อผใู้ ชไ้ ดด้ ว้ ย Messaging API ใหท้ าตามขัน้ ตอน
A. Prepare a rich menu image - การเตรียมรูปภาพรชิ เมนู
B. Create a rich menu - การสรา้ งริชเมนดู ้วย
C. Upload the rich menu image – การอัพรปู ในรชิ เมนู
D. Set rich menu

- Set Default Rich Menu – การนาริชเมนไู ปใชง้ านตั้งต้น (Priority 2)
- Link a rich menu to an individual user – การนาริชเมนไู ปใชร้ ายคน (Priority 1)

A. Prepare a rich menu image - การเตรยี มรปู ภาพริชเมนู
รูปภาพริชเมนูของคุณตอ้ งเปน็ ไปตามขอ้ กาหนดต่อไปน้:ี

• รูปแบบภาพ: JPEG หรอื PNG
• ขนาดภาพ (พกิ เซล): 2500x1686, 2500x843, 1200x810, 1200x405, 800x540, 800x270
• ขนาดไฟลส์ ูงสดุ : 1 MB

B. Create a rich menu – การสรา้ งรชิ เมนดู ว้ ย
1. ดาวโหลดโปรแกรม LINE Bot Designer
2. ดาวโหลดไฟล์ Json : https://drive.google.com/file/d/1HgG-

SpdHbb7dPa61RjxXkPgNIX3kOBKa/view?usp=sharing

3. เปดิ โปรแกรม Postman และทาการ Import ไฟล์ LINE API Example.postman_collection.json

7|Page

Download LINE Bot Designer
เลือกตอบแบบสอบถามตามวตั ถุประสงคด์ งั ภาพ

8|Page

เลือกไฟล์ตดิ ต้ังตาม OS ของเครื่อง กดปุม่ : Archive file
เปดิ โปรแกรม LINE Bot Designer เลอื ก Event

9|Page

ส่วนที่ 1 Bot Items
สว่ นนใี้ หโ้ ฟกัสท่ีท่ชี อ่ งของ Rich Meu แล้วกด + เพือ่ สรา้ ง Rich Menu

ส่วนท่ี 2 Properties
ส่วนน้ใี ห้กาหนดคา่ ต่างใหก้ ับ Rich Menu ท่ีต้องการสร้างโดยมี
• Name: ชื่อของ Rich Menu(ผใู้ ชไ้ ม่เห็น)
• Image: ไฟลร์ ูปทม่ี ขี นาดตรงกับ Base Width และ Base Height
• Base Width: ความกว้างของ Rich Menu ซึ่งตอนน้ีมใี ห้เลอื กแค่ 2500
• Base Height: ความสูงของ Rich menu ซ่งึ สามารถเลือกได้ 2 ขนาดคือ Large(1686px) และ Compact(843px)
• Display Menu by Default: จะโชว์ต้ังแต่เปดิ หน้าแชทเลยไหม
• Chat Bar Title: ชือ่ เมนูตรงบาร์ดา้ นลา่ ง (ผู้ใชเ้ ห็น)
• Action: จะถูกสรา้ งอตั โนมตั ิหลังจากเราเลอื ก Area ท่ใี ห้คลกิ ไดใ้ นส่วนท่ี 3 ซงึ่ เมื่อถกู สรา้ งแล้วเราสามารถกาหนด
ได้ว่าคลกิ แล้วจะให้เกิดเหตุการณอ์ ะไร โดยสามารถกาหนด Action ไดท้ ัง้ Message, URI, Postback, Datetime
Picker และ Web App Action หรอื มนั กค็ ือ LIFF น่ันเอง

10 | P a g e

สว่ นท่ี 3 Preview

รปู ในสว่ นนนี้จะแสดงหลังจากเราเลือกรปู Image ในส่วนที่ 2 ซ่ึงเราสามารถ drag พืน้ ที่ท่ีเราต้องการให้คลิกได้สูงสุดถึง
20 จุดบนรูปจากตวั อยา่ ง “ให้ทาการเปลยี่ นรปู ทไี่ ด้จากไฟล์ Template แบบ Compact 2 ชอ่ งซา้ ยขวาเทา่ กัน”

ส่วนท่ี 4 JSON

ในสว่ นน้จี ะแสดงโคด้ ทีเ่ ปน็ รูปแบบของ JSON ซึ่งถูกสร้างมาจากจัดการในสว่ นท่ี 2 และ 3 ซง่ึ เราจะ copy เอาไวใ้ ชง้ าน

11 | P a g e

บรหิ ำรจดั กำร Rich Menu ผำ่ น Messaging API ด้วย Postman App
Postman คอื เคร่อื งมอื สาหรบั ช่วยในการพัฒนา API ทดสอบการทางานของ Service

Download และ Install Postman : https://www.getpostman.com/downloads/

ตดิ ตง้ั และทาการเปดิ โปรแกรม

12 | P a g e

Postman Application -> กดปมุ่ Import ด้านบนซา้ ย
ดาวโหลดไฟล์ Postman File : https://lineexam.page.link/H3Ed และทาการ import file

13 | P a g e

File Import: LINE API Example.postman_collection

14 | P a g e

Create Rich Menu

1. เลอื กหวั ข้อ Rich menu -> POST -> Create a rich menu
2. แก้ Access Token ทีไ่ ด้จก LINE Developer Console

Method: POST
URL: https://api.line.me/v2/bot/richmenu
Header: Authorization: Bearer Access Toeken / Content-Type: application/json
Body: Json Object from LINE Bot Designer

15 | P a g e

3. Copy Json Object จาก LINE Bot designer มาวางในสว่ นของ Body และทาการกด send

Copy Json Object จาก LINE Bot designer

นา Json มาวางในสว่ นของ body และ ทาการกด Send ซึ่งจะพบ Return API : richMenuId": "richmenu-
efb4bf49a1 เมื่อ Request ไป หากสาเรจ็ ก็จะได้ richMenuId คนื กลบั มา (แต่ Rich Menu ยงั ไมแ่ สดงในหนา้ แชทนะ)

16 | P a g e

C. Upload Rich Menu Image
เมื่อเราได้ richMenuId มาแล้ว ในขน้ั ตอนนเี้ ราจะอพั โหลดรูปให้กบั Rich Menu ผา่ น API สาหรับไฟล์รูปทจ่ี ะอัพ

โหลดจะมเี ง่อื นไขดงั นี้
• ไฟล์รูปจะรองรับเฉพาะ JPEG, JPG และ PNG
• Resolution รปู จะมี 2 รูปแบบคอื Large (2500×1686, 1200×810, 800×540) และ Compact(2500×843,
1200×405, 800×270)
• ขนาดไฟลร์ ปู จะมีขนาดไดไ้ ม่เกนิ 1MB
• เมื่อ Request ไป หากสาเรจ็ จะได้ status 200 แต่จะไมไ่ ด้คืน JSON ใดๆกลับมา (แต่ Rich Menu ยังไม่แสดงในหนา้
แชทนะ)

นา rich menu id ท่ไี ดม้ าใสใ่ นชอ่ ง URL ดงั ภาพ
Method: POST
URL: https://api-data.line.me/v2/bot/richmenu/{richmenu}/content
Header: Authorization : Bearer Access Toeken / Content-Type : image/jpeg
Body: Binary -> select file

17 | P a g e

ในสว่ นของ body ให้ เลือก binary และ กด select file ภาพของทา่ นทเ่ี ตรียมไว้ หลงั จากน้นั ใหท้ าการ send และระบบ return
{ } เปน็ อนั ผ่านเรยี บร้อย

1. เลือกไฟล์ RichMenu_DesignTemplate\Compact\Small\richmenu-template-guides-02
2. กดปุ่ม Send
3. ถา้ ข้อมูลรปู ภาพถูกตอ้ ง ระบบจะ return { }
หมายเหตุ: การจะ Update Rich Menu หลงั จาก Upload ไปแลว้ น้ันยงั ไม่สามารถทาได้ วธิ ีเดยี วคอื จะตอ้ งไปสร้าง Rich Menu
ใหม่เท่านั้น

18 | P a g e

D. Set Rich Menu
Set Default Rich Menu (Priority 2)
เม่ือผา่ นข้นั ตอนที่ Create Rich Menu และ Upload Rich Menu Image ถอื วา่ เราพรอ้ มแลว้ ท่ีจะนา Rich Menu ดังกลา่ ว

ไปแสดง API ตัวนจ้ี ะเปน็ การผกู Rich Menu ใหก้ บั Followers ทกุ คน

Method: POST
URL: https://api.line.me/v2/bot/user/all/richmenu/{richMenuId}
Header: Authorization : Bearer Access Token
1. นาริชเมนทู ส่ี รา้ งไว้มาใส่ https://api.line.me/v2/bot/user/all/richmenu/{richMenuId}
2. แกไ้ ข Authorization : Bearer {Access Token}
3. กดปุ่ม Send และทาการตรวจสอบท่ี มอื ถอื

เมนทู ไ่ี ดจ้ ากการ Set Default Rich Menu

19 | P a g e

Link a rich menu to an individual user (Priority 1)
เมอ่ื ผ่านขั้นตอนที่ Create Rich Menu และ Upload Rich Menu Image ถอื วา่ เราพรอ้ มแล้วท่จี ะนา Rich Menu ดงั กลา่ ว
ไปแสดง API ตัวนจ้ี ะเปน็ การผูก Rich Menu ให้กบั Followers ทกุ คน

User ID ของตัวเองสำมำรถดไู ด้จำก LINE Developers

1. นาริชเมนทู สี่ ร้างไวม้ าใส่ https://api.line.me/v2/bot/user/{userId}/richmenu/{richMenuId}
2. แกไ้ ข Authorization : Bearer {Access Token}
3. กดปุ่ม Send และทาการตรวจสอบที่

เมนทู ไี่ ดจ้ ากการ Link a rich menu to an individual user

20 | P a g e

API Rich menu - GET
Get a rich menu list - กรณถี ้ามกี ารสรา้ งริชเมนเู ราสามารถดปู ระวัติการสรา้ งเพอื่ หาริชเมนไู อดี เพ่อื นากลบั มาเข้ากระบวนการ
อืน่ ๆ ได้เชน่ เซตค่าเรมิ่ ต้นใหม่ หรอื ลบรชิ เมนนู น้ั

โดยรชิ เมนทู ้ังหมดมไี ด้ถึง 1000 item ถา้ เกนิ ให้ทาการลบกอ่ นแลว้ สร้างใหม่
Get a rich menu – กรณตี ้องการทราบ Object Json ของริชเมนนู น้ั
Get the default rich menu ID -กรณีมีการสรา้ ง item หลายรายการและตอ้ งการหารชิ เมนูตั้งต้น
หมายเหตุ หากตอ้ งการเปลยี่ นรชิ เมนูต้งั ตน้ ใหใ้ ช้ API POST : Set the default rich menu
Get the rich menu ID linked to a user – กรณีตอ้ งการทราบรชิ เมนปู ัจจบุ นั ท่ี user นั้นใชอ้ ยู่
Download rich menu image - กรณที ตี่ ้องการ Download ภาพของริชเมนูนนั้ ๆ
Get a rich menu – DELETE
Delete a rich menu – กรณีต้องการลบริชเมนูที่ไม่ใชอ้ อก
Cancel the default rich menu - กรณีตอ้ งการยกเลิกหรอื ลบริชเมนตู ง้ั ต้นออก
Unlink a rich menu from a user – ยกเลิกการเชอื่ มต่อหรือลบรชิ เมนูราย user

21 | P a g e

LIFF (LINE Front-End Framework)

LIFF ย่อมาจาก LINE Front-End Framework ครบั เป็น Web View ทอ่ี ยูภ่ ายในแอพพลิเคชั่น LINE เลย ทีท่ าใหเ้ รา
สามารถเชือ่ มตอ่ ระหว่าง ‘ห้องแชต’ กับ ‘เว็บ’ ได้อย่างมีประสทิ ธภิ าพ พดู ง่ายๆคือ เราสามารถฝงั เวบ็ ลงไปในหอ้ งแชตได้ ทาให้
การใช้งานของผใู้ ช้ง่ายขน้ึ มี User Journey สาหรบั การทา Bot ทด่ี ขี นึ้

https://medium.com/linedevth/introduction-to-liff-7d708e2f42ec
ขนาดของหน้าจอของ LIFF น้นั มีท้งั หมด 3 แบบด้วยกันไดแ้ ก่

• Compact: ตวั Web View จะข้นึ มาท่ี 50% ของหนา้ แชต(ครึ่งจอ) ตวั อย่างของการเอาไปใช้เชน่ ทาเป็น Simple Form
อยา่ งง่ายเพอื่ ให้ผูใ้ ชก้ รอกข้อมลู บางอย่าง หรอื ให้ User กรอกเพ่อื ทา OTP Validation

• Tall: ตวั Web View จะขึ้นมาท่ี 75% สงู ขึ้นมาอกี นดิ จากแบบ Compact ตวั อยา่ งที่ใช้อย่างเชน่ ทา Product Catalog
หรอื ทาเปน็ Form ที่รับข้อมลู จาก User ไดม้ ากขึ้น

• Full: ตัว Web View จะเตม็ จอ 100% เลย

22 | P a g e

https://medium.com/linedevth/introduction-to-liff-7d708e2f42ec

https://medium.com/linedevth/introduction-to-liff-7d708e2f42ec

ข้อดีของการใช้ LIFF

• ยกระดับการทา Chat Bot ใหม้ ี User Journey ทีด่ ยี ิ่งขนึ้ คือบางทีตวั Message ประเภทต่าง ๆ ท่ี LINE มใี ห้ เช่น
Template Message หรอื Imagemap ยังไม่ตอบโจทยใ์ นการใชง้ านในบางคร้งั เชน่ ผใู้ ชไ้ ม่สามารถทาอะไรท่ีซับซ้อน
มาก ๆ ได้ เราตอ้ งสร้าง Web App แลว้ Redirect ให้ผใู้ ชอ้ อกไปทาข้างนอกห้องแชตกอ่ น (หรือต้องทา LINE Login
เพม่ิ ถา้ อยากรวู้ ่าใครเข้าเว็บเราอกี ) แต่ดว้ ยตัว LIFF นีจ้ ะทาใหเ้ ปดิ หน้าเวบ็ ขึน้ มาภายในหอ้ งแชตไดเ้ ลย

• ตวั LIFF สามารถเชอ่ื มตอ่ กบั API อ่นื ๆ ของ LINE ได้ เพราะฉะนน้ั อย่างเวลาผใู้ ช้เปดิ Web View ทเ่ี ป็น LIFF ขึ้นมา
ภายในห้องแชต ตัว LIFF สามารถรู้ไดว้ ่าใครเปน็ คนเปดิ ขนึ้ มา โดยรจู้ ากท่เี ราตอ้ งไปเรยี ก API GET Profile (Cool!) หรอื
สามารถสง่ ขอ้ ความกลบั เข้าไปใหห้ ้องแชตไดด้ ้วย

• สามารถ Re-use Web App ที่คุณมีอยู่แลว้ ข้นึ มาเป็น LIFF บน LINE ไดเ้ ลย

23 | P a g e

How to create LIFF Application

required software

• Git https://git-scm.com/
• Heroku (*SSL HTTPS) https://www.heroku.com/home
• Code Editor (recommend: https://code.visualstudio.com/download)
GIT https://git-scm.com/

Download และ Install
ตดิ ตง้ั สาเรจ็ สามารถตรวจสอบ version ได้ “git version”

24 | P a g e

Heroku https://www.heroku.com/home

สมัครสมาชิกกดปมุ่ “Sign up for free”
ตรวจสอบ Email และทาการยืนยนั

25 | P a g e

ต้ัง password อยา่ งน้อย 8 ตวั มตี ัวเล็ก ตัวเลข และเครื่องใหมผ่ สมกนั เชน่ P@ssw0rd
เข้าสู่หน้า Console กดเลอื กภาษา PHP

26 | P a g e

กดปุม่ “Get Started with PHP”
กดปุ่ม “I’m ready to start”

27 | P a g e

เลือก OS ของเครอ่ื งเพ่อื ทาการตดิ ตง้ั เม่ือตดิ ตั้งเสรจ็ แล้ว เข้า GIT และพิมพ์ “Heroku login”

28 | P a g e

ระบบจะทาการเปดิ Browser ให้ทาการกด log in
Log in สาเร็จแลว้ ทาการปดิ git ได้

29 | P a g e

Editor: Visual Studio (https://code.visualstudio.com/download)

Visual Studio

30 | P a g e

ขั้นตอนการทาดงั นี้
1. Create Project Heroku: liffexamthepnatee (ตามดว้ ยชื่อตวั เองภาษาองั กฤษ)
2. Download Source Code:

https://drive.google.com/file/d/1EKRViCcQiTbx9ZNO0UohMA9pADxwqTg0/view?usp=sharing

3. Deploy Code to Heroku for Web Application (SSL)
4. Create LIFF: https://developers.line.biz/console/
5. Config LIFF ID and Deploy Again (Complete)
Create Project Heroku

กด Create New App เพอ่ื เร่มิ สรา้ ง Project

ตัง้ ชอ่ื liffexam…. (ตามดว้ ยช่อื ตวั เองภาษาอังกฤษ) และเลือก Region เป็น United States

31 | P a g e

ได้ Project เรยี บร้อย
Download Source Code:

https://drive.google.com/file/d/1EKRViCcQiTbx9ZNO0UohMA9pADxwqTg0/view?usp=sharing

สร้าง Folder Project และทาการแตกไฟล์ line_exam_liff.rar ภายใน Project

กลบั มาท่หี นา้ Heroku Console ทาตามข้นั ตอนดังนี้

32 | P a g e

Deploy Code to Heroku for Web Application (SSL)

คลกิ ขวาบนหน้าจอเพ่ือเปดิ โปรแกรม Git Bash Here
พมิ พ์ คาสั่งดงั นี้

33 | P a g e

$git init
$heroku git:clone -a liffexam….. ตามดว้ ยชื่อ
$git add .
$git commit -am "make it better"
$git push heroku master

เปิดหน้า Heroku Console กดปมุ่ Open App เพ่ือเปดิ หนา้ Web

เสรจ็ เรยี บร้อย เตรยี ม Copy URL เพ่ือนาไปสรา้ ง LIFF

34 | P a g e

Register LIFF Application

Create LIFF: https://developers.line.biz/console/

เปิด LINE Developer Console เลือก Create Channel
สร้าง LINE Login

35 | P a g e

กรอกขอ้ มลู ใหค้ รบถ้วน

36 | P a g e

เลอื กเมนู LINE Login และทาการเปลย่ี น Linked OA ให้ตรงกับ Messaging API
เลอื กเมนู LIFF และทาการกดปมุ่ Add