PHP 也有 Day #49：邊緣人救星！用 Laravel 打造私人定製的聊天機器人

Slide 1

Slide 1 text

邊緣人救星！用 Laravel 打造私人定製的聊天機器人李小胖 PHP也有Day #49 20191029

Slide 2

Slide 2 text

你認識李小胖嗎？

Slide 3

Slide 3 text

李小胖 ● 全端工程師 ● 自由工作者 ● 最近在學設計 ● PHP ● Vue.js ● Python ● 陸續增加中 ● Laravel Dojo ● WordPress ● Chatbot TW ● Devops TW ● 台灣拉麵愛好會 ● 陸續增加中

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

工商時間

Slide 6

Slide 6 text

Aganda ● LINE Chatbot 介紹 ● Laravel 設置 ● Live Demo ● 總結

Slide 7

Slide 7 text

LINE Chatbot 介紹 ● LINE 的來由 ● 為何需要 LINE Chatbot？ ● LINE Chatbot 的應用 ● LINE 官方帳號 2.0 方案介紹 ● LINE Chatbot 申請

Slide 8

Slide 8 text

LINE 的由來 ● Naver 創辦人李海珍因311大地震導致無法即時聯絡家人的想法，而在日本推出 LINE 即時通訊軟體 ● 由 Naver 集團旗下 LINE 株式會社所開發的即時通訊軟體綜合平台 ● 總公司是韓國，LINE 株式會社在日本 ● 於2011年6月發表

Slide 9

Slide 9 text

為何需要 LINE Chatbot？ ● 自動化 ● 開發簡單 ● 與顧客直接接觸 ● 點擊率較高 ● LINE 台灣活躍用戶破2,100萬

Slide 10

Slide 10 text

LINE Chatbot 的應用 ● TaxiGo (LINE Taxi) ● 微股力 ● 記帳雞 ● 多國語即時翻譯 ● 快速買早餐

Slide 11

Slide 11 text

LINE 官方帳號 2.0 方案介紹 ● 2019/4/18 之後開始申請 ● 整合以前的 LINE@ ● 以量計價

Slide 12

Slide 12 text

類型

Slide 13

Slide 13 text

舊價格

Slide 14

Slide 14 text

價格

Slide 15

Slide 15 text

LINE Chatbot 申請 ● LINE for Business ○ https://www.linebiz.com/tw/ ● LINE Developers ○ https://developers.line.biz/console/ ● Provider - 組織 ● Channel - Bot

Slide 16

Slide 16 text

工商時間 Chatbot TW meetup #14 預計時間：11/27 預計地點：Onramp

Slide 17

Slide 17 text

Laravel 設置 ● 服務架構 ● LINE bot SDK ● webhook URL ● Messaging API ● Rich Menu ● LIFF apps ● LINE Notify

Slide 18

Slide 18 text

服務架構

Slide 19

Slide 19 text

LINE bot SDK ● LINE 官方 SDK - linecorp/line-bot-sdk ○ https://packagist.org/packages/linecorp/line-bot-sdk ● 超好用 PHP HTTP Client 套件 - guzzlehttp/guzzle ○ https://packagist.org/packages/guzzlehttp/guzzle

Slide 20

Slide 20 text

webhook URL ● HTTPS ● 開發推薦使用 Ngrok ● Middleware\VerifyCsrfToken

Slide 21

Slide 21 text

Live Demo

Slide 22

Slide 22 text

Messaging API ● 官方API文件 ○ https://developers.line.biz/en/docs/messaging-api/overview/ ● Send reply messages ● Send push messages

Slide 23

Slide 23 text

Text message ● 文字訊息 ● 可以包含 emoji

Slide 24

Slide 24 text

Sticker message ● 貼圖訊息 ● 目前只有幾張貼圖而已 ● 官方列表 ○ https://developers.line.biz/media/messaging-api/sticker_list.pdf

Slide 25

Slide 25 text

Image message ● 圖片訊息 ● HTTPS ● Max: 4096 x 4096

Slide 26

Slide 26 text

Video message ● 影片訊息 ● HTTPS ● mp4 ● Max: 1 minute

Slide 27

Slide 27 text

Audio message ● 聲音訊息 ● HTTPS ● m4a ● Max: 1 minute

Slide 28

Slide 28 text

Location message ● 位置訊息 ● 通常會配合地圖選取器

Slide 29

Slide 29 text

Imagemap message ● 影像地圖訊息 ● 可以圖片，也可以影片 ● 多張會合併起來

Slide 30

Slide 30 text

Template message ● 樣板訊息 ● Buttons ● Confirm ● Carousel ● Image carousel

Slide 31

Slide 31 text

Buttons template ● 按鈕樣版 ● 按鈕可以搭配action

Slide 32

Slide 32 text

Confirm template ● 確認樣版 ● 只提供兩個按鈕 ● 不一定要Yes和No

Slide 33

Slide 33 text

Carousel template ● 輪播樣版 ● 左右排版 ● 最多10個

Slide 34

Slide 34 text

Image carousel template ● 圖片輪播樣版 ● 最多10個 ● 只能放一張圖片

Slide 35

Slide 35 text

Flex Message ● 客製化樣版訊息 ● 有官方模擬器 ○ https://developers.line.biz/console/fx/ ● 好看 ● 超難排版 ● 程式碼超多

Slide 36

Slide 36 text

Quick reply ● 快速回復按鈕 ● 方便限制使用者回復的內容 ● 可以綁Action ● Max: 13 objects

Slide 37

Slide 37 text

Rich Menu ● 管理後台新增 ● API新增 ● Image size (pixels): ○ 2500x1686 ○ 2500x843 ○ 1200x810 ○ 1200x405 ○ 800x540 ○ 800x270 ● Postman

Slide 38

Slide 38 text

LIFF apps ● 前端頁面 ● https://static.line-scdn.net/liff/edge/2.1/sdk.js ● 官方說明文件 ○ https://developers.line.biz/en/docs/liff/developing-liff-apps/ ● 需要認證授權 ● 常用的語法 ○ liff.init() ○ liff.sendMessages() ○ liff.closeWindow() ○ liff.isInClient()

Slide 39

Slide 39 text

LINE Notify ● 獨立的服務 ○ https://notify-bot.line.me/zh_TW/ ● 官方聊天機器人 ● 免費 ● 需要認證授權

Slide 40

Slide 40 text

工商時間 ● 徵 PHP 全端工程師、Python 工程師、Android 工程師 ● 工作地點：新光三越台南西門新天地附近

Slide 41

Slide 41 text

總結 ● 超級無敵多應用 ● 免費可以，但是很麻煩 ● LIFF超猛 ● 聊天機器人就是潮