Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
用 AI 和 LINE Bot 簡化生活：
讓圖片告訴你何時該忙！-- LINE 工作坊
Slide 3
Slide 3 text
NiJia Lin 🥷
LINE Technology Evangelist
Developer Relations
External Evangelism
Internal Evangelism
Slide 4
Slide 4 text
From when you wake up until you fall asleep,
as the foundation for your daily life,
we aim to surprise, inspire and make your life better.
Create an amazing life platform
that brings WOW! to our users.
02
ABOUT LINE | BY THE N UMBERS | GLO BA L | FINTECH | WEB3 | SERVICES | SO CIAL RESPON SIBILITY | AWARDS
Slide 5
Slide 5 text
Getting up and
checking the news
Having pizza delivered
for lunch
Get coupon notifications
from your favorite brands
when you visit a store
S hoppi
ng f
or gr
ocer
i
es Listening to music on
the way hom e from work
Buying new shoes before heading to
bed
LINE NEWS
LINE TODAY
Demae-can
LINE MAN
LINE Official Account LINE Pay LINE MUSIC
LINE TV
L I
N E S H O P P I
N G
03
LIFE PLATFORM
ABOUT LINE
A platform to support users’ lives 24/7
12:00 17:00 22:00
14:
00
7:00 20:00
ABOUT LINE | BY THE N UMBERS | GLO BA L | FINTECH | WEB3 | SERVICES | SO CIAL RESPON SIBILITY | AWARDS
Slide 6
Slide 6 text
發送各種訊息格式
Message Event
Imagemap message
Flex message
Text message
Template message
Location message
Sticker message
Image message
Video/Audio Message
Quote message
Slide 7
Slide 7 text
Text & Sticker message
Slide 8
Slide 8 text
Image, Video, Audio, Location
messag
Slide 9
Slide 9 text
Template message
Slide 10
Slide 10 text
Imagemap message
Slide 11
Slide 11 text
回覆訊息 -
Quote Message
• 回覆特定訊息
• 得知用戶回覆的訊息
• 目前僅支援 text 與 sticker
Slide 12
Slide 12 text
Flex Message
Slide 13
Slide 13 text
Flex Message Simulator
https://developers.line.biz/flex-simulator/
Slide 14
Slide 14 text
什麼是 Provider?
• 獨立開發者、公司或組織
• Channel 建立之後是不能更動
channel 的 Provider
• 請勿使用測試帳號到線上環境
Slide 15
Slide 15 text
LINE Bot 的兩種回應方式
Messaging API Reply event Push event
LINE Platform
Slide 16
Slide 16 text
如何跟 Messaging API 溝通
Slide 17
Slide 17 text
Flex Message Simulator
https://developers.line.biz/flex-simulator/
Slide 18
Slide 18 text
先建立第一個
Channel !!
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
簡介後續實用 API
Slide 30
Slide 30 text
取得用戶資訊
• Display Name
• User Id
• Language
• Picture Url
• Status Message
https://developers.line.biz/en/reference/messaging-api/#get-profile
Slide 31
Slide 31 text
Icon Switch
修改大頭貼圖示與名字
Slide 32
Slide 32 text
什麼是 Quick Reply?
• Camera action
• Camera roll action
• Location action
• Postback action
• Message action
• URI action
• Datetime picker action
Slide 33
Slide 33 text
什麼是 Rich Menu?
• 圖片格式: JPEG or PNG
• 寬度 (pixels): 800 to 2500
• 高度 (pixels): 250 or more
• 比率 (width/height): 1.45 or more
• 檔案最大尺寸: 1 MB
Slide 34
Slide 34 text
• 圖片格式: JPEG or PNG
• 寬度 (pixels): 800 to 2500
• 高度 (pixels): 250 or more
• 比率 (width/height): 1.45 or more
• 檔案最大尺寸: 1 MB
什麼是 Rich Menu?
Slide 35
Slide 35 text
Messaging API
讓您可以快速建立聊天機器人
支援多種程式語言
• Java
• Python
• PHP
• Node.js
• Go
• Ruby
• Perl
Slide 36
Slide 36 text
LINE Login
透過整合 LINE Login 能夠讓您的應用程式更快地連結 LINE 用戶
https://developers.line.biz/zh-hant/docs/line-login/overview/
Slide 37
Slide 37 text
什麼是 LIFF
Slide 38
Slide 38 text
穿衣服要挑大小 - LIFF 尺碼
Slide 39
Slide 39 text
LIFF 在哪兒 – 預約系統
Slide 40
Slide 40 text
LIFF 在哪兒 – 會員卡
Slide 41
Slide 41 text
發給 OA 互動的用戶 -
Send Message
• 各式 Message 格式
• 最多一次發送 5 則訊息
• 從 OA 點過去的 LIFF 才能使用
https://developers.line.biz/en/reference/liff/#send-messages
Slide 42
Slide 42 text
分享很重要 –
Share Target Picker
• 外部瀏覽器 liff.login()
• liff.isApiAvailable()
• 透過個人帳號發送
Slide 43
Slide 43 text
OMO 最需要的! -
liff.scanCodeV2()
• Powered by WebRTC
• LINE v11.7.0+
• LIFF v2.15.0+
• External Browser/Android/iOS
Slide 44
Slide 44 text
• LIFF starter app
- https://github.com/line/line-liff-v2-starter
- NextJS
- NuxtJS
- Vanilla
• LIFF Playground
- https://github.com/line/liff-playground
- https://liff-playground.netlify.app/
- 外部/手機 瀏覽器皆可使用
從哪開始呢？ -
Starter
Slide 45
Slide 45 text
接著來測試部署環境
Google Cloud
Slide 46
Slide 46 text
部署
做個 GCP 測試
https://github.com/louis70109/FastAPI-Cloud-Run-Sample
QRcode
Slide 47
Slide 47 text
相關技術文件
• LINE Login
• Messaging API
• LINE Front-end Framework
• LINE Simple Beacon
Slide 48
Slide 48 text
申請 Gemini Pro API
Slide 49
Slide 49 text
Gemini Pro
申請一把 Key 來使用 AI
https://aistudio.google.com/app/apikey
QRcode
Slide 50
Slide 50 text
整合 AI 服務範例
Slide 51
Slide 51 text
(範例)Bot 還記得剛剛說過什麼嗎？
https://www.evanlin.com/linebot-cloudfunc-firebase-gemini-workshop/
Slide 52
Slide 52 text
• 修改 prompt 判斷地板
• 重新部署 Cloud Functions
• https://lin.ee/UfdHydQ/yltz
(範例)天氣應用範例
Slide 53
Slide 53 text
• 修改 prompt 判斷台灣上空是否有雲
• 重新部署 Cloud Functions
• https://lin.ee/1UoxY7Gj/yltz
(範例)天氣應用範例 2 – 衛星雲圖
Slide 54
Slide 54 text
• API Expert – David 撰寫
• 記帳機器人整合 LLM 快速實現
• Demo 影片參考連結
(範例) 使用 Dify 以No Code方式建立記帳機器人
Slide 55
Slide 55 text
• LangcChain 整合
• 總結 Youtube 內容 (省時)
(範例)如何在 GCP Cloud Run 透過 LangChain
取得YouTube 的相關資訊
Slide 56
Slide 56 text
更快速的文件客服機器人
EmbedChain LINE Bot
Slide 57
Slide 57 text
圖片整合案例
Slide 58
Slide 58 text
最近跑去上課了
Slide 59
Slide 59 text
Google -> Apple
Slide 60
Slide 60 text
01
同步很快 (< 60s)
果粉(蠅)要原生的！
02
Google GET API 方便
03
手機電腦平板都同步
Slide 61
Slide 61 text
標題
時間
位置
簡述
Slide 62
Slide 62 text
動手部署
把宣傳文宣轉換成行事曆連結！
https://github.com/louis70109/linebot-image2calendar
QRcode
• 圖片關鍵字搜尋並生成 Google Calendar URL
• 透過網址生成 Google Calendar URL
• 對話記錄儲存於 Firebase
Slide 63
Slide 63 text
申請 REURL API
把宣傳文宣轉換成行事曆連結！
https://reurl.cc/dev/main/tw
QRcode
• 圖片關鍵字搜尋並生成 Google Calendar URL
• 透過網址生成 Google Calendar URL
• 對話記錄儲存於 Firebase
Slide 64
Slide 64 text
上述跟 RAG 有何關係？
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
No content