Chatbot

Azure Static Web App 是什麼? 在今年 5 月 Azure 推出了 Azure Static Web App 的服務，如果要一句話來說，建立此服務時，可以一併設定與 Github or Azure DevOps 連結，在每次 Commit 的時候，就能直接將前端應用程式佈署到Azure，大大的增加開發體驗。除了靜態的 HTML、CSS、JavaScript，支援主流框架 React/Angular/Vue.js，也支援用 C# 撰寫 SPA 的框架 Blazor，支援的前端框架可以到此連結，後端可搭配 Azure 的 Serverless 服務 (Azure Function) 來實現 Api 的串接，透過 Reverse-Proxy 也省去的 CORS 的設定 Azure Static Web App 的價格 在免費的方案，即提供 SSL 的 Hosting，及 2 個自訂網域，可於 DNS Server 設定 cname，也可佈署你的後端程式於 Azure Function 搭配前後端串接，享有 100 萬個 Request 的免費額度 發佈 LINE Liff App 到 Azure Static Web App LIFF 全名是 LINE Front-end Framework，一個可以在 LINE App 內運作的網頁程式，可以將一些不適合對話式的情境，結合於 Line App 裡面，達成一致的體驗，也因為是 Liff App 是全前端實現，所以很適合發佈到 Azure Static Web App，以下用官方的 Liff Starter 來做一個部屬示範 https://github....

這是我自己整理的 Line Message Api Postman Collections 任何人只要 Import 後修改即可直接調用測試 詳細內容請見我的 Github Repo: https://github.com/kyleap/line-message-api-postman

Flex Message 是 Line 透過 JSON 格式所實現的動態訊息，可以組出各種訊息格式，且比起 Template Message，Flex Message 也支援 Line 電腦版，故現在在寫 Line Bot 的時候，第一考量就會用 Flex 來自訂一些較特別的訊息，官網提供兩個 GUI 工具來快速拉 Flex 的訊息： Bot Designer Flex Simulator 我自己比較常用是第二個，官網已經很多的範本提供套入 且目前支援很方便的功能，可以直接發到手機裝置瀏覽結果 在 Flex 的 image 類型是可支援放入 .APNG 格式圖片的動畫，透過以下網站可以將 Git 轉成 .APNG 格式 https://ezgif.com/gif-to-apng Demo Flex 範例 { "type": "bubble", "body": { "type": "box", "layout": "vertical", "contents": [ { "type": "image", "url": "https://apng.onevcat.com/assets/elephant.png", "size": "full", "aspectMode": "cover", "aspectRatio": "1:1", "gravity": "center" }, { "type": "box", "layout": "vertical", "contents": [], "position": "absolute", "background": { "type": "linearGradient", "angle": "0deg", "endColor": "#00000000", "startColor": "#00000099" }, "width": "100%", "height": "40%", "offsetBottom": "0px", "offsetStart": "0px", "offsetEnd": "0px" }, { "type": "box", "layout": "horizontal", "contents": [ { "type": "box", "layout": "vertical", "contents": [ { "type": "box", "layout": "horizontal", "contents": [ { "type": "text", "text": "APNG Demo", "size": "xl", "color": "#ffffff" } ] } ], "spacing": "xs" } ], "position": "absolute", "offsetBottom": "0px", "offsetStart": "0px", "offsetEnd": "0px", "paddingAll": "20px" } ], "paddingAll": "0px" } } –...

Rich Menu 圖文選單是什麼? 寫 Chatbot 引導很重要，在 Line 裡面有 RichMenu 可以用，讓使用者可以快速的點擊常用功能，要如何建立 RichMenu 呢? 快速不用寫程式的方式是透過 Official Account 設定 你可選擇已經預設好的版型，並針對每個區塊設定要執行的動作 但如果是透過 Message Api 的話，可以設定的動作就更彈性了，一張圖總共可以設定 20 個 Actions，可以做得事就更多了。要透過 Message Api 新增一個 Rich Menu，有以下步驟 新增一個選單 上傳該選單的圖檔 我整理了Rich Menu相關的 postman collections 只要將環境變數 {{botAcceccToken}} 設為你 Channel 的 Access Token 可直接匯入使用： https://www.getpostman.com/collections/f090d101b7e08e411f12 方法1: 透過 Postman 來上傳 Rich Menu 在上面的 postman collections，你可以使用 Create Rich Menu 來新增，成功的話會回傳 RichMenuID 那這個 Post 的 JSON 怎麼產生呢？在 NET 5 你可以直接安裝我的 NetCoreLineBotSDK 透過物件的方式直接產生 Api 所需要的 JSON Request，丟到 postman 裡面...

寫 Line Bot 也應該理解 Line URL Scheme 怎麼用，它是透過一串特殊的 URL 來啟動 Line 的功能，可以設計於 BOt 的 URL Action，或者是直接傳至對話框，讓使用者點擊此篇文章就能引導到開啟一些功能，此篇文章邊玩並做個紀錄，也為自己當個小抄 開啟相機或相片 https://line.me/R/nv/camera (打開相機) https://line.me/R/nv/cameraRoll/single (打開相簿，傳送一張) https://line.me/R/nv/cameraRoll/multi (打開相簿，傳送多張 開啟定位 https://line.me/R/nv/location/ (打開地圖) 分享官方帳號 https://line.me/R/ti/p/ (直接跳至此Bot的對話視窗) https://line.me/R/nv/recommendOA/ (傳送此Bot給好友) https://line.me/R/home/public/main?id= (Bot主頁) https://line.me/R/home/public/profile?id= (Bot個人檔案頁) https://line.me/R/home/public/post?id=svgvs&postId={postId} (移至貼文) Chatbox https://line.me/R/share?text=Hello (分享給好友訊息) https://line.me/R/oaMessage/@102svgvs/?Hello學院 (跳至Bot對話視窗，並帶入文字到Chatbox) 個人資訊相關 https://line.me/R/nv/profile (個人檔案頁) https://line.me/R/nv/profileSetId (移置個人ID設定頁) https://line.me/R/nv/chat (移置對話列表) https://line.me/R/nv/timeline (移至動態列表) https://line.me/R/nv/wallet (移至錢包) https://line.me/R/nv/addFriends (加入好友頁) https://line.me/R/nv/officialAccounts (探索官方帳號) https://line.me/R/nv/settings (設定頁) https://line.me/R/nv/settings/account (個人帳號設定頁) https://line.me/R/nv/connectedApps (管理已連結的ChatBot) https://line.me/R/nv/connectedDevices (管理已連結的設備) https://line.me/R/nv/settings/privacy (隱私設定) https://line.me/R/nv/things/deviceLink (管理Line Thing已連結裝置) https://line....