Chatbot

啃書代表是在閱讀時，針對自己有幫助的片段，做反思與紀錄，如想閱讀完整知識建議還是購買完整書籍 :P always center. Chatbot 的機會與未來 近年來 Chatbot 技術興起，使用者下載App意願降低，加上各大平台也開始推出聊天機器人Api串接，開始越來越多應用出現，交互介面已經從傳統的App點擊互動，轉變為對話互動，也因為 Chatbot 依附在各大平台上 e.g Line/Facebook…等，推廣上也較容易，再加上自然語言分析技術日漸成熟，越來越多的AI服務可以應用，可以想像成百上千的 App 會逐漸轉為 Chatbot。 在設計 Chatbot 時，要時刻記得對話交互是手段而非目的，要通過最簡單的互動方式讓使用者獲取服務，而最簡單的交付方式不一定要用對話，這時就能透過圖形化介面與人工接入流程來替使用者完成目標，且應該時時刻刻去觀察使用者的心理變化，觀察上下文，是否造成迷路，觀察對話節奏是否合理，逐步的調教與優化流程，讓重複性的任務交給Bot引導來完成。本書提出軟體開發的生命週期，提供給產品設計師在規劃 Chatbot 產品時一個指南。 思考一下產品定位，定義產品邊界 Chatobt 的應用情境大概可以分為開放領域 (open-domain) 或封閉領域 (closed-domain) 兩大類，開放式大概沒有限定主題，像Google助理或者 Siri 這種問什麼都自由對話，這實踐起來也較困難，而封閉式通常會限縮在一定的場景下，也就是 Chatbot 的輸入輸出是有限的，譬如訂位為在線客服/教育/個人助理，跟這幾個任務無關的事項，就引導客戶能目前能完成什麼事情，僅針對該領域，結合商業.產品.運營，針對領域場景優化交互內容。 以應用市場角度來看，可以將 Chatbot 定為四類: 陪伴型: 自由回答，譬如兒童陪伴類的Bot 商務型: 協助企業完成商業任務Bot，譬如 Github 推出 Hubot 來完成跟 DevOps 有關的相關任務 資訊型: 讓使用者獲取新聞類的訊息，譬如疾管家 指令型: 透過指令來讓Bot完成一些任務，譬如串接智能家電打開電燈/電視 在設計 Chatbot 前，先思考一下產品定位，把商務型的bot對話設計成像陪伴型，只會讓人感覺到這個Bot很不智能，什麼都不會，造成極差的使用者體驗 流程設計應專注在完成商業目標及幫助使用者完成任務 影響網站成功的應用程式都有一個共同點，卓越的使用者體驗，Chatbot 可透過以下因素來評估 如何用最少的步驟解決使使用者問題? 能比其他方式更好解決使用者問題? 能否在使用者習慣的平台上運行 用戶獲取 Chatbot 的途徑是否方便 用戶能無門檻的使用 Chatbot 在進開發前，可透過以下的步驟來收斂需求：先有大量的對話腳本，再來繪製流程圖，Chatbot 常見的技術名詞有意圖 (intent) 及 實體 (entity)，繪製流程圖避免將意圖跟對話混在一起思考，因對話存在多種可能，故不能只考慮核心場景，故可從對話腳本裡面確定場景與優先及拆出意圖跟實體，e.g 意圖可能從優先級排序會是...

第12 屆iT邦幫忙鐵人賽系列文章 (Day30) 終於走到這一天了，每次都覺得鐵人賽過程都生不如死，但寫完30天候總有一種成就感，技術跟文章不難，難的是30天養成一個固定的習慣阿! 回到第一天文章所講的：所用到的技術預計採用 .NET Core 3.1、Html/CSS/JavaScript、Line API 、Azure的一些服務…等等 (但寫這篇文章時完全還沒實作XD…只能說待訂) 這次寫完30天也收穫良多，主要也是挑一些之前比較少碰的東西順便玩玩看 把 Line 的 Api 文件又完整K了一遍，並一個一個寫成 .NET Core 的版本， 之前比較沒碰過的是 Line Pay/Line Beacon 寫得過程中看到 vue 海賊王版本推出 (vue 3.0)，起了專案實踐了一些功能，來看看它的架構 用了 Razor Page，讓我回到 ASP.NET WebForm 的復古感 玩了一些 Azure 服務，Azure Storage、QnA Maker，其中 Azure SignalR Service 是之前比較沒玩過的 把之前自己婚禮用的 chatbot 改一版，順便要給接下來結婚的朋友用 XD 真實的把所做的Side Project給用上 邊看文件邊寫SDK出來，並開源出來 本篇就來講講最後一哩路，怎麼發佈到 NuGet 上吧！ 我將這次系列邊走邊看得的程式稍作整理，建立一個 .NET Core 的函示庫專案 在 VS 按右鍵套件 或者可以使用CLI : dotnet pack 編輯套件的資訊 release 編譯後，可以看到 bin\release 有 nupkg 檔案...

第12 屆iT邦幫忙鐵人賽系列文章 (Day29) 在上一篇我們用 Console App 發送訊息到 Api 的 Server Hub，並呈現在HTML上，今天這篇我們要來結合 chatbot，其實就是在chatbot當成SignalR的client而已，實際效果如下(本篇不會介紹CSS部分)： 新增一個 MessageBoard class 來處理留言板發送，這部分可以看這篇 而透過 Line 的 User Id ，我們能取得使用者的大頭照.姓名…等等資訊 public async Task ReplyAsync(string replyToken) { var profile = await lineProfileUtility.GetUserProfile(userId); var hubClient = new ClientSignalR(); await hubClient.Initialize("http://localhost:12733/message"); await hubClient.SendHubMessage("SendMessage", profile.pictureUrl, profile.displayName, message); await lineMessageUtility.ReplyMessageAsync(replyToken, "謝謝您，我們已收到留言"); } GetUserProfile public async Task<UserProfile> GetUserProfile(string userId) { using (var httpClient = new HttpClient()) { using (var request = new HttpRequestMessage(new HttpMethod("GET"), $"{lineMessageApiBaseUrl}/{userId}")) { request....

第12 屆iT邦幫忙鐵人賽系列文章 (Day28) SignalR是實現即時通訊的框架，如下圖，在Server Hub宣告要給client端呼叫的方法，能傳送即時訊息給已連線的使用者 https://www.pubnub.com/learn/glossary/what-is-signalr/ 而透過Azure SignalR 服務，大大簡化使用門檻，很簡單就能建立一個服務，且享有雲端帶來的高拓展性，這篇文章會step by step 實作以下內容 建立 Azure SignalR 服務 建立 SignalR Server Hub 建立 HTML Client 即時呈現訊息 建立 .NET Console App 來發送訊息 建立 Azure SignalR 服務 登入Azure，進入https://portal.azure.com/#create/Microsoft.SignalRGalleryPackage 新增服務 建完後，到key的選單，我們等等需要這個 Connection String 建立 SignalR Server Hub 打開 Web Api 專案的 .csproj，加入以下程式碼 <ItemGroup> <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.0" /> <DotNetCliToolReference Include="Microsoft.Extensions.SecretManager.Tools" Version="2.0.0" /> </ItemGroup> 用 Nuget 安裝 Microsoft.Azure.SignalR 在 Web Api 專案案右鍵，建立管理使用者密碼， 建立 Azure:SignalR:ConnectionString ，把剛剛的連線字串貼上 Web Api 專案 Startup....

第12 屆iT邦幫忙鐵人賽系列文章 (Day27) 婚禮現場一定會有各種親朋好友視角的照片，以往都要一個一個傳在社群媒體之類的，本次來實作 chatbot 來廣收各種朋友拍的照片.. XD 上傳到 Imgur Imgur是個圖床服務，如果是非商業使用，是完全免費的，串接起來也很容易，首先先到 https://api.imgur.com/oauth2/addclient 註冊一個 OAuth 服務 會得到 client id 和 client secret 回到 LineBotApp.cs，我們可以針對圖片類型的訊息做處理 GetContentBytesAsync public async Task<Stream> GetContentBytesAsync(string messageId) { using (var httpClient = new HttpClient()) { using (var request = new HttpRequestMessage(new HttpMethod("GET"), $"https://api-data.line.me/v2/bot/message/{messageId}/content")) { request.Headers.TryAddWithoutValidation("Authorization", $"Bearer {accessToken}"); var response = await httpClient.SendAsync(request); var results = await response.Content.ReadAsStreamAsync(); return results; } } } UploadToImgurAsync 可以透過 Nuget 安裝 Imgur.API public async Task<string> UploadToImgurAsync(Stream stream) { var apiClient = new ApiClient("<Your Imgur ClientId>"); var httpClient = new HttpClient(); var imageEndpoint = new ImageEndpoint(apiClient, httpClient); var imageUpload = await imageEndpoint....