用 AI 和 LINE Bot 簡化生活：讓圖片告訴你何時該忙！-- LINE 工作坊

NiJia Lin 🥷 LINE Technology Evangelist Developer Relations External Evangelism
Internal Evangelism

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

發送各種訊息格式 Message Event Imagemap message Flex message Text message Template
message Location message Sticker message Image message Video/Audio Message Quote message

Text & Sticker message

Image, Video, Audio, Location messag

Template message

Imagemap message

回覆訊息 - Quote Message • 回覆特定訊息 • 得知用戶回覆的訊息 • 目前僅支援
text 與 sticker

Flex Message

Flex Message Simulator https://developers.line.biz/flex-simulator/

什麼是 Provider? • 獨立開發者、公司或組織 • Channel 建立之後是不能更動 channel 的 Provider
• 請勿使用測試帳號到線上環境

LINE Bot 的兩種回應方式 Messaging API Reply event Push event LINE
Platform

如何跟 Messaging API 溝通

Flex Message Simulator https://developers.line.biz/flex-simulator/

先建立第一個 Channel !!

簡介後續實用 API

取得用戶資訊 • Display Name • User Id • Language •
Picture Url • Status Message https://developers.line.biz/en/reference/messaging-api/#get-profile

Icon Switch 修改大頭貼圖示與名字

什麼是 Quick Reply? • Camera action • Camera roll action
• Location action • Postback action • Message action • URI action • Datetime picker action

什麼是 Rich Menu? • 圖片格式: JPEG or PNG • 寬度
(pixels): 800 to 2500 • 高度 (pixels): 250 or more • 比率 (width/height): 1.45 or more • 檔案最大尺寸: 1 MB

• 圖片格式: JPEG or PNG • 寬度 (pixels): 800 to
2500 • 高度 (pixels): 250 or more • 比率 (width/height): 1.45 or more • 檔案最大尺寸: 1 MB 什麼是 Rich Menu?

Messaging API 讓您可以快速建立聊天機器人支援多種程式語言 • Java • Python • PHP
• Node.js • Go • Ruby • Perl

LINE Login 透過整合 LINE Login 能夠讓您的應用程式更快地連結 LINE 用戶 https://developers.line.biz/zh-hant/docs/line-login/overview/

什麼是 LIFF

穿衣服要挑大小 - LIFF 尺碼

LIFF 在哪兒 – 預約系統

LIFF 在哪兒 – 會員卡

發給 OA 互動的用戶 - Send Message • 各式 Message 格式
• 最多一次發送 5 則訊息 • 從 OA 點過去的 LIFF 才能使用 https://developers.line.biz/en/reference/liff/#send-messages

分享很重要 – Share Target Picker • 外部瀏覽器 liff.login() • liff.isApiAvailable()
• 透過個人帳號發送

OMO 最需要的! - liff.scanCodeV2() • Powered by WebRTC • LINE
v11.7.0+ • LIFF v2.15.0+ • External Browser/Android/iOS

• 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

接著來測試部署環境 Google Cloud

部署做個 GCP 測試 https://github.com/louis70109/FastAPI-Cloud-Run-Sample QRcode

相關技術文件 • LINE Login • Messaging API • LINE Front-end
Framework • LINE Simple Beacon

申請 Gemini Pro API

Gemini Pro 申請一把 Key 來使用 AI https://aistudio.google.com/app/apikey QRcode

整合 AI 服務範例

(範例)Bot 還記得剛剛說過什麼嗎？ https://www.evanlin.com/linebot-cloudfunc-firebase-gemini-workshop/

• 修改 prompt 判斷地板 • 重新部署 Cloud Functions • https://lin.ee/UfdHydQ/yltz
(範例)天氣應用範例

• 修改 prompt 判斷台灣上空是否有雲 • 重新部署 Cloud Functions • https://lin.ee/1UoxY7Gj/yltz
(範例)天氣應用範例 2 – 衛星雲圖

• API Expert – David 撰寫 • 記帳機器人整合 LLM 快速實現
• Demo 影片參考連結 (範例) 使用 Dify 以No Code方式建立記帳機器人

• LangcChain 整合 • 總結 Youtube 內容 (省時) (範例)如何在 GCP
Cloud Run 透過 LangChain 取得YouTube 的相關資訊

更快速的文件客服機器人 EmbedChain LINE Bot

圖片整合案例

用 AI 和 LINE Bot 簡化生活： 讓圖片告訴你何時該忙！-- LINE 工作坊

用 AI 和 LINE Bot 簡化生活： 讓圖片告訴你何時該忙！-- LINE 工作坊

More Decks by LINE Developers Taiwan

Featured

Transcript

用 AI 和 LINE Bot 簡化生活：讓圖片告訴你何時該忙！-- LINE 工作坊

用 AI 和 LINE Bot 簡化生活：讓圖片告訴你何時該忙！-- LINE 工作坊