LINE Chatbot

37 | P a g e

38 | P a g e

1. กรอกชอื่ LIFF App Name: LIFF Demo
2. เลอื ก Size : Full
3. Endpoint URL: URL Application จาก Heroku
4. Scopes : เลอื ก Profile และ Chat_message.write และ Open ID
5. Scan QR: Enable ----> กด Create

จะพบ LIFF Item ทสี่ รา้ งไว้เรยี บร้อยเตรยี มนาไปใชง้ าน
หมำยเหตุ กอ่ นนำไปใชง้ ำน กดป่มุ ข้ำงบน เปล่ยี นจำก Developing เป็น Published

39 | P a g e

Config LIFF ID and Deploy Again

Copy LIFF ID เพอื่ นาไปแก้บน Code index.php

40 | P a g e

แกไ้ ข LIFF ID ของท่าน
ทาการ Deploy Code ทแ่ี กไ้ ขอีกรอบบน Heroku

41 | P a g e

นา URL จาก LIFF มาวางไวใ้ นช่องแชทของเราและทาการเปดิ URL จะพบกับ LIFF Web View
หมายเหต:ุ ใน Channel หนึ่งจะสามารถสรา้ ง LIFF App ได้สูงสดุ 30 อนั
ใครมเี ว็บอยูแ่ ล้วกล็ องเอาไป Integrate ต่อกบั LIFF ไดเ้ ลย ใครอยากลองทาตามสามารถลอง Clone หรือ Fork Repo ไป
สร้างเล่นไดต้ ามลงิ กด์ า้ นลา่ งเลยครับ :)
https://drive.google.com/file/d/1EKRViCcQiTbx9ZNO0UohMA9pADxwqTg0/view?usp=sharing

42 | P a g e

LIFF version 2

เปรยี บเทยี บ Feature ในการใช้ LIFF บน LINE กบั Web browser

ดขู อ้ มลู Environment ต่ำง ๆ ของ LIFF App

LIFF v2 มาพรอ้ มกบั ฟงั กช์ ่ันใหม่ๆ เราสามารถดูขอ้ มลู ของ Environment ตา่ งๆได้ เช่น

• liff.getOS() ผู้ใชท้ เ่ี ปดิ LIFF ของเราขน้ึ มาเคา้ ใช้ OS อะไร?
• liff.getLanguage() ดคู า่ Setting ของผู้ใชว้ ่าเค้าใช้ภาษาอะไร? (ในแอป LINE)
• liff.isInClient() ผู้ใช้เปดิ LIFF จากในแอป LINE หรือไม่?
• liff.isLoggedIn() ผูใ้ ช้ทาการ Login แล้วหรือยัง?

43 | P a g e

Connecting Database

1. Create Rich menu 2 item by LINE Bot Designer
a. Rich menu HOME
b. Rich Menu Register

2. Download Source Code
3. Connecting databases& Connecting APIs
4. Create & Deploy Heroku : lastworkshopthepnatee
5. Create LIFF Login by LINE Developer Console
6. Create Rich menu 2 item by Postman

a. Rich menu HOME
b. Rich Menu Register
7. Config LIFF ID and Config API Rich menu and Deploy Again
8. Link Rich Menu Home -> Register by Database

44 | P a g e

Create Rich menu 2 item by LINE Bot Designer
Download LINE Bot Designer File :
https://lineexam.page.link/L6JA

Action 1 :
Type : Message Action
Text : สวสั ดี

Action2 :
Type : URL Action
URL : URL From LIFF Demo สาหรบั ทดสอบ LIFF

Action 3:
Type : URL Action
URL: URL From LIFF Login สาหรับทดสอบ Sign in ไป Menu Employee

45 | P a g e

Action 1:
Type : Message Action / Text : สวสั ดี

Action 2:
Type: Message Action / Text : ค้นหา

Action3:
Type: URL Action / URL: https://www.coj.go.th/

Action4:
Type: Message Action / Text: Sign Out สาหรบั ทดสอบ Sign out กลับไปหนา้ HOME ผ่าน Webhook.php

หมายเหตุ action ท่ี 4 Sign Out เป็น Message Event จะทาตอ่ ในข้นั ตอนถัดไปไฟล์ Webhook.php

****ยงั ไม่ต้องทำอะไรเพม่ิ เตมิ คำ้ งไว้กอ่ นครบั เรำจะนำ line URL LIFF มำใส่

46 | P a g e

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

จะไดไ้ ฟล์ Code line_exam_workshop ->Controller.php ให้ทาการเปดิ ด้วย VSCode
** รายละเอยี ดไฟล์

1. Controller.php มีหน้าท่ี Config Database และ Config APIs
2. Login.php มหี น้าทแ่ี สดงผลเปน็ View คอ่ ยสง่ คา่ parameter POST ไปที่ Controller.php

47 | P a g e

Connecting databases & Connecting APIs

แก้ Connection
หมายเหตุ สว่ น rich_menu_employee คอ่ ยกลับมาแกห้ ลัง Deploy

แก้ เฉพาะ Token ของ Channel เรา ใน function getrichMenuEmployee

48 | P a g e

Webhook.php -> แก้ Access Token ของทา่ นเอง
หมายเหตุ สว่ น rich_menu_home คอ่ ยกลับมาแกห้ ลัง Deploy
Create & Deploy Heroku : lastworkshopตำมดว้ ยช่อื ตัวเอง

49 | P a g e

ทาการเปิด View -> Terminal แลว้ Deploy โลด!
Create a new Git repository
Initialize a git repository in a new or existing directory
git init
heroku git:remote -a lastworkshop….

Deploy your application
Commit your code to the repository and deploy it to Heroku using Git.
git add .
git commit -am "make it better"
git push heroku master

50 | P a g e

กลับมาท่ี Heroku กด Open App
ใหเ้ พ่มิ /Login แลว้ ทาการ Copy URL เพอื่ นาไปสรา้ ง LIFF

51 | P a g e

Create LIFF Login by LINE Developer Console

เขา้ LINE Developer เลือก Channel LINE Login ทเ่ี คยสร้างไว้
สร้าง LIFF เพ่ือนา LIFF ID ไปแกไ้ ขใน Code

52 | P a g e

Login.php -> แก้ myLiffId ของทา่ นเอง -> Commit -> Deploy

#git commit -am “Update myLiffId”
#git push Heroku master
*** นา LIFF URL ไป Create ตอ่ ท่ี Line Bot Designer

53 | P a g e

Create Rich menu 2 item by Postman

a. Rich menu HOME
b. Rich Menu Employee

แกใ้ นหน้า LINE Bot Designer แล้วเตรียม Copy Json

54 | P a g e

นา Json ทีไ่ ดจ้ าก LIFF มาสรา้ งใน Postman API: Create a rich menu

1. ถ้าเปน็ HOME ใหเ้ ลอื กไฟล์ Compact -> Small -> richmenu-template-guides-01
2. ถา้ เป็น Employee ใหเ้ ลือกไฟล์ Large -> Small -> richmenu-template-guides-02

55 | P a g e

ให้นา rich menu ID ของ Home มาตั้งเปน็ ค่า Default -> Send
ตัวสอบใหด้ ี คณุ ต้องมี rich menu สองอัน

Config LIFF ID and Config API Rich menu and Deploy Again

ให้ทาการ Get a rich menu list ข้ึนมา เพ่อื หา rich menu ID ท้งั สองอนั ทง้ั HOME และ Employee

56 | P a g e

Link Rich Menu to a User

นา richmnuID ของ Employee มาแกใ้ นหน้า Controller.php

นา richmnuID ของ Home มาแก้ในหนา้ Webhook.php
Step

1. หน้ำ Home ตอ้ งทำกำร Login เมอื Login สำเรจ็ ใหเ้ รียก rich menu Employee
2. หน้ำ Employee สำมำรถ Log out ใหเ้ รยี ก rich menu ไปหน้ำ Home

Deploy Again
User : admin Pass : 1234

57 | P a g e

1. กดปุ่ม B จะได้หนา้ LIFF Demo Function
2. กดปุ่ม C จะไดห้ นา้ LIFF Login

a. Username: admin
b. Password: 1234

58 | P a g e

1. เมื่อ Login สาเรจ็ ระบบจะเปลี่ยน richmenu ไปยัง Employee
2. ในหน้า Employee กดปมุ่ C จะเป็นการ Sign Out เพอื่ กลบั ไปหนา้ Home

หมายเหตุ ท่านสามารถประยกุ ตใ์ ชง้ านในเรอื่ งของการแยก ผใู้ ช้งานและเมนอู อกจากกนั ในคนละวตั ถปุ ระสงคไ์ ด้