平台功能介紹 介紹 GOSU BAR 平台上每一個頁面的功能 登入 GOSU BAR 登入 GOSU BAR ，登入方式包含透過帳號密碼、Facebook、Google   選擇你要操作的組織   接下來點擊左上角漢堡選單按鈕      就會看到所有功能頁面囉！   接下來我們要開始建立自己的聊天機器人囉！     群發訊息   相信大多數的人都不希望收到不需要的訊息，因此發送訊息前需要思考如何將訊息精準的推送給需要的用戶，這可以避免用戶收到不感興趣的訊息造成反感，降低封鎖機器人的機會。 在 GOSU BAR 透過 群發訊息 搭配  篩選 功能，就可以事半功倍的進行精準訊息的推播～   介面 進入群發訊息時的畫面。 左側區塊是快速篩選，可以快速篩選出相對應的群發訊息。 上方是自訂搜尋，可以組合篩選區塊的條件進行篩選。 點選介面左上方的按鈕  撰寫新訊息 來開啟建立訊息視窗。 視窗中的 發送對象 除了可以選擇平台來源、擁有標籤、身分類型、好友狀態來作為訊息發送對象外，還可以選擇以   篩選 功能建立的篩選條件為對象來發送訊息。 註：以上圖為例，透過篩選功能建立的篩選條件 男性管理員 （同時擁有 生理性別男性 與 管理人員 標籤的用戶），一樣可以作為 群發訊息 的發送對象。善加利用 篩選 與 群發訊息，將有效提升訊息的精準發送比例。 訊息建立方式與發送訊息節點大同小異，可以插入不同種類的訊息內容、新增快速回應，並透過標籤對此則訊息設定分類。 設定完後就可以立即發送訊息出去囉，也可以先儲存成草稿，或改成預約發送的方式來進行群發訊息。 若點選 立即發送 需要進行二次確認，會告知此則群發訊息將會發送給多少用戶。 發送成功！ 重新整理介面後，透過快速篩選功能選擇 已發送 的訊息分類，篩選清單中就會出現剛剛發送的訊息，查閱相關紀錄十分方便。 直接點開一則群發訊息的紀錄，這時會顯示這則群發訊息的訊息內容。將滑鼠移至底部還會顯示訊息的點擊數與已讀數。 點擊的判定條件：卡片、海報的連結類型按鈕點擊時才會進行統計。 已讀的判定條件：當有夾帶圖片、海報、卡片訊息時，才有辦法計算已讀數，已讀就是字面上的意思，當打開訊息時就會計算已讀數。 有時候需要發送一些內容相似度很高的群發訊息，這時候可以透過 複製功能 快速建立訊息副本至草稿分類。 點選複製後，會跳出視窗來編輯副本的訊息名稱，訊息名稱之後隨時可進行修改。 建立副本後，副本會建立至草稿類別中。 點開副本訊息就會看到訊息內容被完整的拷貝，只需修改要調整的內容就可以進行發送囉，是不是快速又方便呢～ 如果對某則訊息的標籤分類需要調整，可以透過點選 貼上標籤 對其進行更改。 點選 貼上標籤 後會展開標籤清單，可以新增或刪除訊息上的標籤。 以上圖為例，多貼上一個 測試用戶 的標籤，此則訊息的標籤分類就會從 管理人員 變成 2個標籤。 重新整理畫面，在訊息的搜尋條件中同時選擇 管理人員 與 測試用戶 兩個標籤，按下 ENTER 進行篩選，這時篩選出來的訊息就會有剛剛多貼上 測試用戶  標籤的訊息囉！ 好友清單   在好友清單除了可以查閱成為好友的名單，詳細資料、屬性內容、擁有標籤、好友狀態也都可以在這個介面中一覽無疑。 快速篩選 預設會是呈現所有來源的好友清單，若要縮小篩選範圍，可以在紅色框選區塊中選擇來源種類進行調整。 您也可以透過標籤來進行篩選，擁有該標籤的好友就會被篩選出來。 自訂搜尋 自訂搜尋可以透過以下幾種種類進行搜尋： 編號： 如果已經知道好友的編號，直接輸入編號就可以搜尋到這位好友。 好友暱稱： 輸入完整或局部的好友暱稱，即可搜尋該好友。 標籤： 想知道擁有特定標籤的好友名單，可以在搜尋列中選擇要查詢的標籤，並按下 ENTER 進行搜尋。 進階篩選： 若已經建立了進階篩選條件，往後可以選擇此篩選條件查詢符合的好友名單。 好友狀態： 如果想搜尋特定好友狀態的對象，可以在自訂搜尋列中選擇進行搜尋。 分頁管理 當好友人數很多時，可以透過分頁協助快速找到對象。 點選分頁管理上的好友人數會展開設定選項，可以調整每頁要顯示的人數。 若已經知道好友位於第幾頁，也可以直接指定頁數查看。     好友列表 好友列表中會呈現好友們的編號、大頭貼、暱稱、狀態、所屬機器人、以及其他屬性的值。 若想查看好友的詳細資訊（例如：擁有的標籤、圖文選單等內容），請直接點選好友就會展開好友的詳細資料。 如果需要與該好友進行１：１的私訊，右上角也提供按鈕可以快速進入私訊介面。 在好友詳細資料中可以查看所屬機器人平台、加入時間、圖文選單、擁有標籤、屬性內容等，並且可以直接編輯該位好友的資料。 其中需留意的是標籤的更改是即時改動，其他像是屬性、圖文選單的更改則需要進行再次確認才會進行更新。 提醒您請謹慎小心操作資料異動。 好友屬性顯示設定 好友的屬性順序若需要調整，可以點選右上角的漢堡選單進行編排。 點選漢堡選單 可以對屬性的順序進行調整，並透過勾選屬性來決定是否要顯示於列表清單中。 以截圖為例，可以將屬性生日移至屬性行動電話之前。 1 : 1 私訊 透過 1：1 私訊 可以查看所有曾經與機器人對話過、互動過的用戶對話紀錄，並且可以直接選擇用戶進行回覆。 介面 介面左邊區塊會有曾與機器人互動、對話的用戶清單。 在紅色框選處可以直接選擇篩選對象（平台來源、個人或是群組），預設會是全選狀態，呈現所有的用戶。 有時好友的數量過於龐大，或是想更快的方式搜尋出單一用戶，這時候可以透過搜尋功能輸入用戶的暱稱，就能夠馬上找到要找的用戶囉～ 選取用戶後的介面，在右側區塊可以看到選取用戶的相關資料（暱稱、平台來源、身分種類、圖文選單、擁有標籤、屬性內容）。 點選紅色區塊可以直接抽換該用戶的圖文選單。 也可以直接更改用戶擁有的標籤內容。 更改屬性內容當然也可以做到。 若要以真人回覆的方式，各種類型的訊息都可以使用。 註：以上圖為例，插入一則文字訊息準備回覆給指定用戶。 訊息送出。 機器人管理   在開始使用聊天機器人之前，最重要的事情就是先建立好聊天機器人！ 一個組織中能夠建立兩隻機器人，機器人的平台可以任選 LINE@ 或是 Facebook。 註：建立聊天機器人的詳細教學請先參考： LINE@ 聊天機器人 與 Facebook 聊天機器人 那我們就開始一窺機器人管理介面的細節吧！ 當建立好聊天機器人後，機器人管理的畫面如上圖所示，我們可以檢視或更改設定的內容。   首先是外觀資訊 帳號名稱 在 GOSU BAR 上串接聊天機器人時設定的帳號名稱，建議命名與 LINE Developers 上聊天機器人名稱相同，日後要查詢與維護會比較友善。   平台類型 建立的聊天機器人平台類型。 若是 LINE@ 的聊天機器人會多顯示其 API 類型。以下圖為例，此 LINE@ 聊天機器人是 Push API。   封面圖片 點選封面圖片會開啟新分頁，顯示的內容會依據平台類型而有所不同。 ※  LINE@ 會顯示此聊天機器人的 QRcode，掃描後即可加該機器人為好友。 ※  Facebook 則是進入紛絲專業的首頁。 封面圖片可以在 進階設定 中進行更換。   啟用開關 控制該聊天機器人是否要啟用，若不使用此機器人則可中斷。   進階設定 點選按鈕以進行進階設定 機器人基本資料 編號 此機器人在 GOSU BAR 平台上的編號，值為唯一且無法被更改。 帳號名稱（必填） 此機器人在 GOSU BAR 平台上的名稱，命名建議與聊天機器人的名稱相同，未來較容易維護與查詢。 Message API 類型（LINE@） 共有二種類型，分別是 Reply Message 與 Push Message，若聊天機器人需要主動推送訊息給用戶，則必須開啟 Push Message。 LINE ID（LINE@） 須代入 LINE Developers 建立的 Messaging API 中的 Bot basic ID。 封面圖片網址 若有更換圖片的需求，可以點選上傳或直接代入圖片網址進行更換。 機器人憑證設定 平台編號 若是 LINE@ 須代入 LINE Developers 建立的 Messaging API 中的 Channel ID。 平台金鑰（必填，LINE@） 須代入 LINE Developers 建立的 Messaging API 中的 Channel secret。 平台憑證（必填） 若是 LINE@ 須代入 LINE Developers 建立的 Messaging API 中的 Channel access token。 LINE LOGIN 設定（LINE@） 開放授權編號 須代入 LINE Developers 建立的 LINE Login 中的 Channel ID。 開放授權密碼 須代入 LINE Developers 建立的 LINE Login 中的 Channel secret。 Account Link 設定（LINE@） 透過 Account link 可以將聊天機器人的使用者與原先商業網站的帳戶互相綁定，對已經有相當量用戶數的服務提供商來說，將可讓使用者有一致的體驗。 登入頁面的網址 讀取使用者資料的網址 讀取使用者資料時所使用雜湊的 SALT Webhook 設定（LINE@） Webhook URL 什麼是 Webhook ? 用比較簡單的解釋可以理解成 Webhook 是讓一個網站能訂閱另一個網站的方法。 若要使用 Webhook，請複製此 Webhook URL 將值設定到 LINE Developers 的 Messaging API 中的 Webhook URL 欄位。 記得驗證後重新整理畫面，確保其值有正確設定，才可以使用此功能 。 安全性設定 Webhook 白名單 當我們要進行自訂事件的跨網域請求時，請將會用到的網域設定到 Webhook 白名單 中。 範例： https://www.gosu.bar https://anyong.com.tw http://google.com 機器人屬性設定 機器人初次建立時不會有任何屬性（如上圖所示），若有使用機器人屬性的需求，請至 設定＞屬性管理 新建所需的機器人屬性。 建立屬性後，就可以進到 機器人屬性設定 檢視或更改屬性的值。   重新授權 Facebook 聊天機器人會多出一個重新授權按鈕，當授權過期時可以點選對其進行更新。           標籤管理   在介紹標籤管理介面之前，我們必須先認識 GOSU BAR 提供的 標籤（Tag） 何謂標籤 GOSU BAR 提供了 標籤（Tag），使用標籤可以方便的對用戶進行分眾、分群，透過對目標用戶賦予特定的標籤，就等同對用戶賦予一個特定的狀態或是身分。 聽起來似乎很抽象，請參考以下例子會比較容易理解！ 假設今天在聊天機器人提供某份問卷讓用戶填寫，這問卷中的問題之一是詢問用戶的生理性別，我們可以根據用戶的選擇，透過流程對其貼上對應的生理性別標籤，這時就對這些有填答問卷的用戶進行生理性別上的分眾了。 適當的使用標籤可以方便未來根據不同的需求篩選出擁有特定標籤的用戶，針對篩選對象推送特定的訊息或抽換特定的選單（LINE@）；也可以透過判斷用戶是否擁有特定標籤，讓擁有特定標籤的用戶使用特別的服務或功能！（例如：VIP會員） 理解標籤為何以及標籤可以達到的成效後，接著是本章的重點 標籤管理 的介紹。 標籤管理 初次進到 標籤管理 的畫面，此時還尚未存在任何標籤，請點選按鈕 新增項目 建立 。 點選 新增項目 後會跳出視窗，請輸入標籤的名稱。 以上圖示範為例，建立 生理性別女性 與 生理性別男性 兩個標籤。 建立標籤後請點選標籤區塊，這時右側會顯示該標籤的其他資訊，透過資訊可以發現，上方有顯示擁有此標籤的用戶總數。（目前因為標籤剛建立，所以共 0 人擁有此標籤） 請啟用 適用於使用者 ，會再展開以下設定： 1. 列表 ：標籤將會顯示於好友清單中的列表中，目前此功能在規畫內所以列表還不能看到標籤。 2. 詳細資料 ：能顯示於好友清單中的好友詳細資料中。 若啟用 適用於發送紀錄 ：標籤可提供統計圖表使用。 標籤建立時預設是白色字配深灰底，若有個人化的需求可以點選標籤上的編輯按鈕，除了可以重新命名標籤名稱外，也可以更改標籤的底色，方便辨識與管理。 點開 編輯按鈕 後我們先更改標籤的底色，直接點選圓圈處會出現顏色編輯器。 顏色編輯器如圖所示，可以自行選擇喜愛的顏色。選擇並調整完後按下 確定 。 這就是更換後的樣子，是不是很簡單呢！ 屬性管理 在正式介紹 屬性管理 之前，我們需要先理解：何謂屬性、屬性的應用對象、屬性的型態。 何謂屬性 屬性是特定對象共同具有的特質或性質 ，且這些特質在這些對象之間呈現的結果不一定會完全相同。 像是每個人都具有眼睛且眼睛顏色因人而異不會完全相同，身高、體重、膚色、頭髮長度也是相同的道理，而這些就是身為人共同具有的特質，所以我們可以說每個人都具有眼睛顏色、身高、體重...等等的屬性。 基於這個概念，GOSU BAR 可以根據不同的需求建立適合的屬性，並運用這些屬性來記錄、管理特定的資訊與資料。 釐清屬性的概念後，接著需要理解 GOSU BAR 屬性的應用對象種類，了解其作用對象的差異以及各自適合使用的情境。 屬性的應用對象（好友／機器人／組織） 在 GOSU BAR 平台上屬性共分成 3 種應用對象： 好友、機器人、組織 。 ※ 以層級來說：組織＞機器人＞好友，組織位於最上層（最外），好友位於最下層（最內）。 ※ 建立在合適的應用對象，有助於管理上的簡化，功能執行的效能、效率也會獲得優化。 好友 多數情境下屬性的應用對象會選擇好友，因為常見的需求是直接記錄使用者本身的資訊比較多。 例如：身高、體重、電話、住址、身分ID，這些都是屬於用戶自己的資訊。 ※ 註：假設建立了電話、住址、身分ID 這三個應用對象為好友的屬性，在同一個組織中無論所屬機器人為何，組織中的所有好友都將具有這三個屬性。 機器人 部分情境下會需要使用應用對象為機器人的屬性，當屬性的資訊內容不屬於用戶個人，或是該屬性代表的是共有的資訊、資料，那麼屬性的應用對象就會選擇機器人。 情境： 今天要透過聊天機器人舉辦一個限時活動，當活動開始用戶可以觸發活動的功能，當活動尚未開始或是結束，活動功能就必須鎖定不開放使用，並且回應用戶活動尚未開放等訊息。 要達到這個需求有很多方法，其中一種是透過屬性來設定 開始時間 與 結束時間，並根據這兩個時間判斷活動是否已經開始或結束。 這時候出現一個問題，這兩個屬性的應用對象應該選擇 好友 還是 機器人？既然在這裡提出問題，答案顯而易見是建立在機器人。 會這麼選擇是因為一個活動的 開始時間 與 結束時間 對所有用戶來說都是相同的，它是一個共同、共有的資訊，不會因為不同的用戶而有不同的活動時間。 此情境下將屬性建立在機器人，將有助於資料管理上的簡化，如果活動時間需要更改只需要改一次機器人的屬性，如果屬性建立在好友就需要對每一個用戶的屬性都個別設定，這不但費時也增加許多沒必要的操作，並且無意義的增加用戶個人的屬性資料造成浪費。 組織 若能理解機器人的說明，那麼建立在組織就不難理解。由於組織的層級比機器人再高一層，所以會將屬性建立在組織的情境，就是當組織之下的所有機器人都需要共用某個屬性，那就會選擇將屬性建立到組織，而非建立到機器人。 無論屬性是建立在哪個應用對象，屬性都有 3 種型態可以選擇。建議依使用情境選擇適當的型態，這將有效優化一些操作，甚至提升運行的效能。 屬性的型態（文字／數字／列表） 在 GOSU BAR 平台上屬性共分成 3 種型態： 文字、數字、列表 。 文字 顧名思義，就是專門用來儲存文字的型態。 例如：姓名、生日、身分ID，這些只需要被記錄而不用進行數字運算的資料，就會使用文字型態的屬性來記錄。 數字 專門用來儲存數字的型態。 此種型態在流程編輯器中的 設定屬性節點 將會出現對此種屬性的內容（值）進行數字 加N 或 減N 的操作可選擇。 ※ N為一個數字。 列表 可以當作是一個可以依序塞入不同內容的文件夾，文件夾中每一個內容彼此之間都會透過逗號區隔。 若以程式撰寫來理解，列表其實就是陣列，所以能做的操作也相同，在流程編輯器中的部分操作可以直接對該屬性進行陣列的相關操作。 屬性管理 理解何謂屬性、屬性的應用對象、屬性的型態後，就來看看屬性管理的介面吧！ 介面 初始狀態就已經包含了一些預設的屬性。 ※ 部分屬性顯示上鎖，這是因為這些屬性包含了不可變更且必要的資料內容。 紅色框選處代表的是 新增屬性 的按鈕。 記得前面提到的，建立屬性之前請根據使用情境選擇適合的應用對象唷！ 點選 新增屬性 後會進來此介面。 如果想要更改 應用對象 在這裡可以重新選擇。 建立屬性需要給予中文以及英文名稱。 中文名稱主要目的是讓管理者容易理解屬性記錄何種資訊，因此命名建議要清楚易理解，避免日後忘記屬性的存在意義以及影響範圍。 英文名稱除了命名要清楚明瞭，長度也建議簡短，因為往後在流程編輯器使用到屬性會是以英文命名來進行相關操作，英文過長或命名涵義不明確，容易造成未來閱讀與維護上的困難。 請根據使用情境以及存放資料的類型選擇適合的屬性型態。 ※ 屬性型態若往後有更改種類，該屬性現有儲存的資料可能會遺失，因此請謹慎評估是否要進行型態的更動。 設定該屬性在後台管理介面中是否顯示或隱藏。 舉例：如果只關閉 顯示於列表 ，管理介面中的好友清單列表不會顯示這個屬性欄位，但點選用戶進入詳細資料介面會顯示該屬性欄位；反之，若只關閉 顯示詳細資料 情況則相反。 可以對屬性進行排序調整，方便日後尋找。 若屬性的總數相當龐大可能會很難尋找，這時候可以透過關鍵字搜尋找出在尋找的屬性。         圖像編輯器   若有重複使用訊息的需求，可以在 圖像編輯器 建立訊息範本，這些範本除了在 圖像編輯器 中可以統一管理維護，也可以在  流程編輯器 、 1:1私訊 、 群發訊息 重複使用。 新增範本 初次進入圖像編輯器介面的畫面，尚無任何範本。 選擇需要新增的範本類型。 新增範本後需對範本命名，建議名稱要容易辨識好理解，日後若範本數量增加會比較容易維護管理。 成功建立範本，再來點選範本進行編輯。 關於編輯介面 功能列 上方功能列由左至右依序是： 範本名稱： 點選後可以重新命名。 圖層尺寸： 顯示範本的圖層尺寸。以卡片範本為例，圖層尺寸為固定值不可更改。 開啟檔案： 點選後回到圖像編輯器的範本清單。 建立副本： 對範本建立副本，要建立副本前必須先進行儲存。 編輯： 點選後可以對範本內容進行編輯，不同種類的範本組成結構略有不同。 資源： 點選後可以建立 輸入參數 ，透過  輸入參數 來接收外部導入的資料並使用，藉由這種方式可以提高範本的應用範圍。操作方式與相關應用會在後續介紹中說明。 儲存： 儲存目前範本的內容。 範本結構 選擇 編輯 頁籤後可以看到範本結構： 圖層： 每種範本訊息都包含圖層。 圖層的範圍等於灰白方格的範圍，在範本結構中擁有高彈性，可以依需求自行設計需要的版型樣式！ 資源建立的 輸入參數 可以在這裡代入使用。 卡片（卡片範本專屬）： 可以設定儲存格式、靜態／動態、標題、內文以及替代文字。 靜態／動態：使用資源導入的外部資料若會隨時間動態改變，請勾選啟用動態；反之，請維持靜態設定。 替代文字：接收到此範本的訊息時，要顯示的提示文字。 資源建立的 輸入參數 可以在這裡代入使用。 按鈕（卡片範本專屬）： 按鈕類型可以根據需求選擇說話或網址。 說話是指替使用者說一句話，網址則是開啟瀏覽器瀏覽網址內容。 資源建立的 輸入參數 可以在這裡代入使用。 海報（海報範本專屬）： 可以設定儲存格式、靜態／動態、替代文字。 資源建立的 輸入參數 可以在這裡代入使用。 圖片（圖片範本專屬）： 可以設定儲存格式、靜態／動態、替代文字。 資源建立的 輸入參數 可以在這裡代入使用。 工具列 點選左側小圖示可以切換對應的功能，由上往下依序是： 移動： 透過此工具可以選擇與拖曳圖層。 文字： 在範本圖層中以拖拉方式建立。 文字圖層中可以直接輸入文字，或是使用資源建立的 輸入參數 ，透過 輸入參數 取得外部導入的文字資料。 圖片： 在範本圖層中以拖拉方式建立。 圖片圖層可以上傳本地圖片檔、使用公開的圖片網址，或是透過資源建立的 輸入參數 取得外部導入的圖片網址。 矩形： 在範本圖層中以拖拉方式建立。 矩形圖層可以設定顏色、透明度、圓角、邊框、陰影。 圓形： 在範本圖層中以拖拉方式建立。 圓形圖層可以設定顏色、透明度、邊框、陰影。 圖表： 在範本圖層中以拖拉方式建立。 圖表圖層可以設定多種類型的圖表，折線圖、圓餅圖、柱狀圖......等等都可以繪製， 因為可以設定的欄位較多，因此僅列出幾個最重要的欄位項目先進行介紹， 其餘可參考  圖像編輯器 - 圖表工具使用案例 會有較完整的說明，有提供作出特定種類圖表的作法供參考。 以圖片範本為例，點選 圖表 拖拉建立一個圖表圖層，並在 基本屬性 中設定將圖層稱滿整個範本範圍。 展開圖表，其中有 資料、內距 等欄位可以設定。 資料 的格式必須是一個 物件陣列 ，建立不同種類的圖表資料內容也會略有差異，但大致上的格式會像是下列這個樣子： [ 　{ year: '1991', value: 3 }, 　{ year: '1992', value: 4 }, 　{ year: '1993', value: 3.5 }, 　{ year: '1994', value: 5 }, 　{ year: '1995', value: 4.9 }, 　{ year: '1996', value: 6 }, 　{ year: '1997', value: 7 }, 　{ year: '1998', value: 9 }, 　{ year: '1999', value: 13 } ] 從上面的資料可以理解不同年份對應著不同的值，接著以這筆資料示範如何產出 基礎折線圖 。 直接將 資料 填入圖表的資料欄位中。 接著設定 內距 ，內距顧名思義是指 距離內部的距離 ，內距可以直接填上４個數值，數值由左至右依序對應到上、右、下、左這四個方向的距離（單位 px ），與網頁 CSS 的 padding 是一樣的設定方式。 由於示範的圖表是 基礎折線圖 ，X、Y軸 的資訊會需要占用較多的內部空間，所以內距就設多一點， 因此設定： 40,20,50,50 接著建立 X、Y軸 的 比例尺 Scale ，點選 新增 Scale。 先建立 Year 比例尺（ X軸 ） ，因為 X軸 對應到的欄位是資料中的 year，請在欄位輸入 year。 類型選擇 linear。 以這份資料來說， X軸 的 1 個刻度表示 1 年即可，所以 刻度間距 請設定為 1。 開啟 優化數據範圍 ，開啟後圖表繪製時會適度調整留白增加易讀性，可根據情況自行調整。 再來新增 value 比例尺（Y軸） ，作法同 X軸，因為是對應資料中的 value 因此欄位填上 value；類型一樣是 linear。 刻度在這次範例中一樣以 1 為單位即可，並開啟 優化數據範圍。 另外因為資料中的 value 值已經知道最小至最大的範圍，所以可以直接設定 最小值 與 最大值。 接著是設定圖表中最重要圖表本身 （圖 Geom） ，構成  基礎折線圖 的元素有二，分別是點與線，點跟線需要分開進行繪製。 首先先來繪製線的部分。請點選 新增 Geom。 欄位請填上 year*value ，類型選擇 線圖 ，此設定是指以線條的方式，依據資料中 year 對應的 value 去繪製出線條。 設定 Margin Ratio 值為 1。這樣 線條部分 就被繪製好囉！ 接著是繪製點的部分。 接下來示範一些範本應用的例子。 示範－卡片範本 情境： 已經取得一份用戶資料的清單，將發送給名單內的所有用戶一張卡片，這張卡片的圖片就是用戶本人的頭像，標題是用戶的暱稱，內文是固定的文字「我愛 GOSU BAR！」，並且有2個說話類型的按鈕，其中 按鈕2 的內容要透過外部代入文字資料。 從以上需求中可以得知 用戶頭像、用戶暱稱、按鈕2的內容 這三個資料需要經由外部導入取得，我們可以建立三個 輸入參數 分別對應這三個要導入的資料。大多數情境會以一個參數對應一個外部資料的方式取得外部資料，會比較好理解與維護。 輸入參數 本身是由 key、中文名稱、預設值 所組成，其中 key 的值只能以 英文+數字 命名。 在圖像編輯器中若要取得外部傳入 輸入參數 的資料，請以 ${prop.KEYNAME} 的方式取得。 理解上述概念後，就來開始新增 輸入參數 吧！ 首先先建立提供給 按鈕2 使用的參數，為了方便未來管理維護，參數 key 直接命名為 btn2。 中文名稱命名為 按鈕2 。 參數預設值因為只是示範，故隨意命名即可（示意圖中命名為「我是 btn2 的預設值」），實際應用時則依照使用情境給予最適合的預設值。 新增完成的 輸入參數會顯示於此。若要更改名稱或是預設值，可以點選 筆的小圖示 進行編輯。 以同樣方式再另外建立 key 為 picture 與 key 為 name 的 輸入參數，分別對應 用戶頭像 與 用戶暱稱。 註1： 用戶頭像的預設值一般來說就是要作為預設頭像使用，因此需要輸入的是預設圖片的網址。網址可以透過一些上傳圖片的服務取得，記得網址須對外公開才能讀取到圖片唷。 註2： 做完任何改動後，請記得養成儲存的好習慣！ 接著回到 編輯 ，開始設定卡片範本的內容吧！ 在 GOSU BAR 的圖層中都是以 直角座標系 的方式決定圖層內容的位置。 先點選小工具的圖片，準備建立圖片圖層來存放用戶頭像。 透過拖拉方式建立出一個圖片圖層，可以看到在右側範本結構的圖層中多出了「圖片圖層1」。 點選「圖片圖層1」，這時右邊的範本結構變成圖層結構，包含：圖層、圖片、基本屬性、邊框、陰影。 展開圖片（紅色框選處），可以上傳本地圖片檔案、使用公開的圖片網址，或是直接設定 輸入參數 接收外部傳入的資料內容。也可以設定圖片圖層的裁切方式（填滿、符合大小、擴展、置中、並列）。 請點選框選處的「撰寫一小段程式碼」，因為範例目的是讓卡片的圖是收到卡片的用戶頭像，所以圖片網址要使用 輸入參數 ${prop.picture} ，才能透過這個參數接收外部傳入的用戶頭像。 在展開的介面中輸入「 ${prop.picture} 」，輸入完畢後點選外圍空白處離開輸入介面。 凡是有使用程式碼或使用 輸入參數 ，設定欄位就會變成紅色框選處的樣子。 基本屬性：可以設定圖層的座標位置、寬度、高度、旋轉角度、背景色、不透明度。 先將圖片填滿圖層範圍，可以使用移動工具直接拖曳圖片的位置與尺寸，或是直接輸入參數值進行設定。 為了將建立的 圖片圖層１ 填滿整個範圍，請將X、Y軸座標設為0，寬度450，高度300。 邊框：可以設定邊框樣式（實線、虛線）、樣式寬度、顏色。此範例不需要進行設定。 陰影：可以設定X、Y軸的偏移量、模糊、顏色。此範例不需要進行設定。 再來是設定卡片標題。 點選畫面空白處切回範本結構並選擇卡片，標題內容一樣使用 輸入參數 接收外部的資料。 輸入「 ${prop.name} 」。 透過即時預覽可以發現 輸入參數 的標題內容，變成 輸入參數 name 當初設定的預設值了！ （示意圖中設定的預設值為「用戶暱稱預設值」） 內文直接設定為「我愛 GOSU BAR！」，一樣透過即時預覽可以看出內容變化。 設定替代文字，當用戶收到這則範本訊息時，會出現的替代文字內容。 （範例中輸入「用戶專屬卡片！」） 由於圖片並不需要保留透明度，所以儲存格式選擇 jpg 格式儲存。 按鈕1 的設定因為在練習，直接使用預設值即可。 按鈕2 要使用 輸入參數 btn2 接收外部傳入的資料。 在按鈕文字以及訊息內容中都輸入「 ${prop.btn2} 」。 設定好即時預覽就會出現當初設定的預設值囉。記得做完設定後要儲存唷！ 以上是此應用情境在 圖像編輯器 需要做的部分，剩下的就是要在 流程編輯器 中透過 for 迴圈的方式，將取得的用戶資料一筆一筆的代入至此範本卡片，這樣經由 for 迴圈發送出去的範本卡片內容，就會是每一位用戶自己的資料了！ 示範－ 海報範本 情境： 針對特定活動或是節日發送用戶專屬的海報形式賀卡，訊息包含一張背景圖，圖中預留位置可以放入用戶頭像，海報下方有按鈕可以開啟活動相關的介紹網站。 從情境可以得知，用戶頭像需要透過 輸入參數 從外部傳入資料，至於按鈕的網址根據需求可以自行決定要以彈性、外部傳入資料的方式，或是非彈性直接輸入固定的網址。在這一次練習中就只建立用戶頭像的 輸入參數 即可。 進入剛建立好的海報範本。 海報的尺寸寬度不可更改固定1040（px），高度可根據需求進行調整。在此練習高度維持預設值即可。 先點開資源建立 輸入參數 picture 。 切回編輯，以拖拉方式建立一個圖片圖層，在圖片網址上傳賀卡背景圖。 將圖層填滿整張海報範圍，直接在基本屬性中設定參數，X、Y座標皆為0，寬度、高度皆為1040，圖層尺寸就會填滿整張海報囉。 再建立一個圖片圖層，這個圖層會使用 輸入參數 picture  來接收外部傳入的用戶頭像。 用戶頭像應該要放在背景圖底下（後面）才不會遮住背景圖，但當我們將圖層移動順序後會發現，用戶頭像的圖層整個被覆蓋住。 這是因為背景圖的圖層沒有調整背景顏色的設定，點選背景圖的圖層，並在基本設定中點開背景調整顏色。 調整透明度為0，記得按下確定進行更改。 背景圖層的背景變為透明後，原本圖片預留透明的範圍就露出來囉！ 在來回到用戶圖層進行設定，點選框選處更改圖片網址，輸入  ${prop.picture} 以接收外部傳入的資料。 目前還缺少一個按鈕，請使用文字工具建立一個文字圖層。 先將文字圖層的外觀進行調整，讓它看起來更像一個按鈕。 首先先設定按鈕名稱，命名為「活動參加辦法」，粗細設定為「粗體」，並對水平對齊與垂直對齊都設定為「置中」。 在基本設定中更改背景顏色（底色）。 在點擊行為中設定為連結，並輸入連結網址。因為是練習在此就輸入  GOSU BAR 官網（ https://www.gosu.bar/home ） 。 邊框也進行調整，樣式選擇「實線」，寬度設定「20」，設定邊框「顏色」，讓文字區塊更像一個按鈕。 設定完成後記得儲存範本。 以上是這個應用情境在 圖像編輯器 中範本要進行的設定，而在 流程編輯器 中則是使用 for 迴圈的方式，將要發送訊息的用戶頭像資料一筆一筆分別傳入範本，這樣每一比發送的範本訊息內容就會是用戶的頭像囉！ 優惠券 如果有要發送贈品或是中獎訊息的需求，使用優惠券系統是一個不錯的選項。 初次進入優惠券介面會是這個樣子。 點選建立優惠券按鈕來新建優惠券。 進入到優惠券的設定介面。 介面的右邊是收到優惠券訊息的預覽畫面。 先來上傳優惠券的圖片吧！ 根據使用需求選擇適合的優惠券類型，如果是當作中獎通知使用的訊息，優惠券類型可以選擇贈品。 設定優惠券標題文字，文字長度限13個字以內。 設定優惠券的開始與結束時間，若超過設定的時間，用戶將無法使用該優惠券。 設定優惠券使用說明敘述，例如： 使用限制。 清楚的說明規則才能有效避免爭議發生。 字數上限 255 字。 設定領取優惠券的關鍵字。 當優惠券建立好且對外公開後，可以透過該關鍵字觸發獲得此優惠券。 設定是否允許用戶重複領取優惠券。 選擇允許，每次領到的優惠券序號皆為不同序號；若不允許，每次領到的序號皆相同。 設定是否限制優惠券總數。 限制總數將無法透過群發訊息發送此優惠券，且當設定的數量發送完畢後，之後送出的優惠券會改用替代文字告知發送完畢。 設定是否允許優惠券訊息可分享給好友。 允許分享，優惠券可以分享給好友兌換，也可以設定分享給好友的文案，字數上限255字；反之，不允許分享就不可以分享給好友。 設定取得優惠券以及使用優惠券時要貼上的標籤，可以根據需求貼上標籤來紀錄。 優惠券設定完後記得按下 儲存優惠券，此時建立好的優惠券尚未公開，還不能使用。 可以直接立即公開此優惠券，或是預約要公開使用的時間。 當優惠券公開後，優惠券將無法被刪除，且優惠券總數量限制、重複領取限制都無法再被修改。 當優惠券公開後選項有了改動，出現 統計報表 以及 QR Code。 選擇 QR Code，並輸入合適的額外資訊，按下產生。 會產出帶有設定額外資訊的 QR Code，掃描此QR Code也可以獲得此張優惠券。 選擇統計報表可以進到統計頁面查看相關的統計資訊。 發送媒介的圓餅圖可以點選要顯示的內容進行切換。 最下方可以下載總表。 關鍵字管理   在 GOSU BAR 中可以透過建立關鍵字來定義索引特定文字內容時需要的詞彙。 簡單的說，關鍵字就是單個或複數相同含意的文字集合，而這個集合在流程編輯器中可以作為被判斷的內容，因此可以藉由建立關鍵字來避開一些希望被忽略掉的文字集合，或是單純的建立關鍵字當作同義詞集合來使用。   介面 初次進入關鍵字管理的樣子。 點選按鈕 新增關鍵字分類 。 設定關鍵字分類的名稱，並按下 確定 建立。 建立好關鍵字分類後就會多出一個群組它就像是一個資料夾，透過資料夾來分類管理關鍵字，這樣未來的維護也會較有效率。 註：在流程決策點中的關鍵字比對，是比對整個關鍵字分類的內容。 建立完關鍵字的分類，還需要設定關鍵字以及對應的同義詞，請點選 新增關鍵字 來新增。 設定關鍵字名稱。 建立完關鍵字後，再來要編輯這個關鍵字的同意詞，同義詞可以多組詞彙或文字內容。 設定完同意詞，按下勾勾儲存。 註：以此為例，之後透過決策點判斷這一組關鍵字分類時，無論是輸入 管理人、 管理 或是 管管 都會判定符合關鍵字。 若我們在關鍵字分類中建立了許多關鍵字，當需要快速查詢關鍵字時，可以透過 搜尋關鍵字 快速的篩選出目標。 註：搜尋會同時比對關鍵字與同義詞相符合者。 篩選功能 教學篇 最初進入篩選功能的介面 點擊 建立第一個篩選條件 新增完成後將再右側看到可以建立篩選條件區塊 選擇您的篩選條件 條件選擇後可以使用預覽篩選結果來檢查是否正確篩選 確認後就可以儲存篩選條件 使用篩選功能 => 進入好友清單選擇您的篩選條件 => 按下確定即可 實戰篇 問題一： 篩選屬性 ex: 我要性別為 "男" 還要 電子信箱有資料  篩選功能   問題二： 標籤篩選 ex: 我要選擇有 "喜歡吃甜食" 標籤 或著 有"喜歡吃鹹食" 標籤 篩選功能 圖文選單   圖文選單  可以提供給  LINE 的聊天機器人使用。 尺寸固定為 2 種尺寸，分別是 2500 * 1686 或 2500 * 843 （單位 px ）。 選單上可以建立多組按鈕區塊，根據需求自行決定按鈕區塊的位置與尺寸，每個按鈕區塊可以設定不同的行為。 行為共有 3 種類型，分別是： 文字、網址、回傳資料 ，當用戶點選按鈕區塊時就會觸發設定的行為。 文字 ： 是指用戶點選時會幫用戶說一句話，通常會搭配 流程編輯器 定義的文字指令，讓用戶只需在圖文選單上點選就可以直接下達指令，省去用戶手動輸入指令的困擾。 網址 ： 是指要導向的網頁位置，用戶點選會直接開啟瀏覽器瀏覽網址的內容。 回傳資料(Postback) ： 圖文選單的按鈕區塊若選擇此種類型，當使用者點選該區塊將會觸發 起始點 - Postback 事件。 共有 回傳內容 與 文字內容  兩個部分可以設定，其中 回傳內容 為 必填 欄位。 當觸發 Postback 事件 後，會將此回傳內容發送至所有的  起始點 - Postback 事件 ，因此可以做為相對隱私的資料夾帶方式使用。 文字內容 為選填，若有輸入 文字內容 ，觸發區塊按鈕時使用者本人會說出該內容，但需要注意此文字訊息並非說話的文字訊息，所以並無法觸發 起始點 - 接收文字 事件 。   介面 初次進入圖文選單的畫面。 先選擇圖文選單要建立的機器人。 選擇好機器人後，按下 新增圖文選單 。 進到建立選單的介面。 選單名稱是指在 GOSU BAR 後台中顯示的名稱，用戶並不會看到此名稱。 命名建議容易辨識好理解，將來若選單數量較多會比較好管理維護。 選擇選單的尺寸，僅有 2 種尺寸可以選擇，分別是 2500 * 1686 或 2500 * 843 （單位px）。 選單提示是指當用戶以手機使用機器人時，介面底部顯示的提示文字，適合的名稱有助於引導使用者使用選單。 設定是否要 預設展開 選單，若勾選啟用，則使用者開起機器人時選單會自動展開顯示；反之，不會展開顯示。 根據需求自行上傳需要的圖片作為底圖，圖片尺寸要符合選擇的尺寸，且 圖片檔案大小必須小於 1MB 。 按鈕區塊預設劃分成6等分，可以根據需求新增、刪減。 按鈕區塊的位置是以直角座標系進行設定，以上圖 2500 * 1686 （px）的尺寸為例，圖文選單左上角的座標為（0,0），右下角座標為（2500,1686），X軸向右，Y軸向下。 設定 按鈕區塊 的方法，除了直接透過座標計算位置來設定，也可以直接點選 按鈕區塊 拖拉調整位置跟尺寸。 以上圖為例，選單有兩個按鈕區塊。 區塊1 為文字，用戶點選後會幫用戶說一句話「GOSU BAR 真不錯！」。 區塊2 為網址，用戶點選後會開啟瀏覽器至 Google 搜尋 。 選單建立完成就會顯示在圖文選單清單中。 有時可能需要將圖文選單複製給其他機器人使用，或是想要複製副本修改內容另作他用，這時候可以按下建立副本。 建立副本的介面，基本上與建立選單相同，差別在於多了機器人來源可以選擇，可以維持在原本的機器人建立副本，也可以建立副本給其他機器人使用。