# GOSU BAR 入門 從平台介紹開始引領你進入 GOSU BAR 的世界，讓你發揮創造力製作屬於自己的聊天機器人 # 認識 GOSU BAR #### [![gosu.png](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/O2ZWmzHKxcA3Ooi0-gosu.png)](https://www.gosu.bar) 歡迎來到 故事 BAR，首先要為你做個簡短的介紹： [GOSU BAR](https://www.gosu.bar "GOSU BAR 聊天機器人建置平台") 是一個由[安永金融科技](https://www.anyong.com.tw "Anyong Fintech Co., Ltd.")研發維運的**社群聊天機器人建置平台**，有別於以往客製化開發以及使用現成模組，我們優勢在於，用高於模組些許的成本做到客製開發才能達到的功能，讓聊天機器人協助你有效的經營品牌！ ![aX7phT9c41ImmIx2-image-1575805154226.png](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/aX7phT9c41ImmIx2-image-1575805154226.png) GOSU BAR 目前支援 ![LINE@_typeA.png](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/kdL6CCGYFx4WazNQ-LINE@_typeA.png) ![facebook_logo.png](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/uLeP6kG4m5n24XaW-facebook_logo.png) 台灣主流社群平台，透過平台核心功能的**流程編輯器**以及**圖像編輯器**搭配**屬性**與**標籤**等功能，能夠製作獨一無二的聊天機器人。 ![a37jBeId7s0DtQRj-image-1576848004319.png](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/a37jBeId7s0DtQRj-image-1576848004319.png)![ZWM2OaQAJlyuLxVI-image-1576848097210.png](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/ZWM2OaQAJlyuLxVI-image-1576848097210.png) ![RPS2jzOjS14K48uL-image-1575813948466.png](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/RPS2jzOjS14K48uL-image-1575813948466.png)同時 GOSU BAR 也已經服務了許多品牌與企業，還在等什麼呢？馬上**開始製作屬於你的聊天機器人**吧！ # 平台功能介紹 介紹 GOSU BAR 平台上每一個頁面的功能 # 登入 GOSU BAR 登入 [GOSU BAR](https://www.gosu.bar/app/ "點我開始使用 GOSU BAR")，登入方式包含透過帳號密碼、Facebook、Google ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/KF03pB1sqYYEIY7T-image-1575816929483.png) 選擇你要操作的組織 ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/GIeGj49mBDwesM41-image-1575817252096.png) 接下來點擊左上角漢堡選單按鈕 ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/vbg9AhfH7lJX8h8D-image-1575819386638.png) ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/dvyYBPJZTYFeRW8i-image-1575819356878.png) 就會看到所有功能頁面囉！ ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/rO1uXEBJEWWpVzlD-image-1575819462597.png) 接下來我們要開始建立自己的聊天機器人囉！ # 群發訊息 相信大多數的人都不希望收到不需要的訊息，因此發送訊息前需要思考如何將訊息精準的推送給需要的用戶，這可以避免用戶收到不感興趣的訊息造成反感，降低封鎖機器人的機會。 在 **GOSU BAR** 透過 **群發訊息** 搭配 **[ 篩選](http://book.gosu.bar/books/gosu-bar-%E5%85%A5%E9%96%80/page/%E7%AF%A9%E9%81%B8%E5%8A%9F%E8%83%BD)** 功能，就可以事半功倍的進行精準訊息的推播～ ##### **介面** [![1_介面.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/gJlyxx5ntsiJxvEx-1_%E4%BB%8B%E9%9D%A2.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/gJlyxx5ntsiJxvEx-1_%E4%BB%8B%E9%9D%A2.png) 進入群發訊息時的畫面。 [![1_介面-2快速篩選.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/sBvtFRgOpDXPjOGt-1_%E4%BB%8B%E9%9D%A2-2%E5%BF%AB%E9%80%9F%E7%AF%A9%E9%81%B8.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/sBvtFRgOpDXPjOGt-1_%E4%BB%8B%E9%9D%A2-2%E5%BF%AB%E9%80%9F%E7%AF%A9%E9%81%B8.png) 左側區塊是快速篩選，可以快速篩選出相對應的群發訊息。 [![1_介面-3搜尋列.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/A7xVS5aHzVaiM5i5-1_%E4%BB%8B%E9%9D%A2-3%E6%90%9C%E5%B0%8B%E5%88%97.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/A7xVS5aHzVaiM5i5-1_%E4%BB%8B%E9%9D%A2-3%E6%90%9C%E5%B0%8B%E5%88%97.png) 上方是自訂搜尋，可以組合篩選區塊的條件進行篩選。 [![2_撰寫新訊息-0.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/oNxlhs5mDlDvFkBo-2_%E6%92%B0%E5%AF%AB%E6%96%B0%E8%A8%8A%E6%81%AF-0.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/oNxlhs5mDlDvFkBo-2_%E6%92%B0%E5%AF%AB%E6%96%B0%E8%A8%8A%E6%81%AF-0.png) 點選介面左上方的按鈕 **撰寫新訊息** 來開啟建立訊息視窗。 **[![2_撰寫新訊息-2.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/laI3H8bRLukcvkah-2_%E6%92%B0%E5%AF%AB%E6%96%B0%E8%A8%8A%E6%81%AF-2.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/laI3H8bRLukcvkah-2_%E6%92%B0%E5%AF%AB%E6%96%B0%E8%A8%8A%E6%81%AF-2.png)** 視窗中的 **發送對象** 除了可以選擇平台來源、擁有標籤、身分類型、好友狀態來作為訊息發送對象外，還可以選擇以 [**篩選**](http://book.gosu.bar/books/gosu-bar-%E5%85%A5%E9%96%80/page/%E7%AF%A9%E9%81%B8%E5%8A%9F%E8%83%BD) 功能建立的篩選條件為對象來發送訊息。 註：以上圖為例，透過篩選功能建立的篩選條件 **男性管理員**（同時擁有 **生理性別男性** 與 **管理人員** 標籤的用戶），一樣可以作為 **群發訊息** 的發送對象。善加利用 篩選 與 群發訊息，將有效提升訊息的精準發送比例。 [![2_撰寫新訊息-3.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/thDtOedrh8IoLuT0-2_%E6%92%B0%E5%AF%AB%E6%96%B0%E8%A8%8A%E6%81%AF-3.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/thDtOedrh8IoLuT0-2_%E6%92%B0%E5%AF%AB%E6%96%B0%E8%A8%8A%E6%81%AF-3.png) 訊息建立方式與發送訊息節點大同小異，可以插入不同種類的訊息內容、新增快速回應，並透過標籤對此則訊息設定分類。 [![2_撰寫新訊息-4.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/beb6mwILgZmGSI5a-2_%E6%92%B0%E5%AF%AB%E6%96%B0%E8%A8%8A%E6%81%AF-4.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/beb6mwILgZmGSI5a-2_%E6%92%B0%E5%AF%AB%E6%96%B0%E8%A8%8A%E6%81%AF-4.png) 設定完後就可以立即發送訊息出去囉，也可以先儲存成草稿，或改成預約發送的方式來進行群發訊息。 [![2_撰寫新訊息-5立即發送.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/qhWgB3NF1GIWxMYh-2_%E6%92%B0%E5%AF%AB%E6%96%B0%E8%A8%8A%E6%81%AF-5%E7%AB%8B%E5%8D%B3%E7%99%BC%E9%80%81.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/qhWgB3NF1GIWxMYh-2_%E6%92%B0%E5%AF%AB%E6%96%B0%E8%A8%8A%E6%81%AF-5%E7%AB%8B%E5%8D%B3%E7%99%BC%E9%80%81.png) 若點選 立即發送 需要進行二次確認，會告知此則群發訊息將會發送給多少用戶。 [![2_撰寫新訊息-6發送成功.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/schlVfRmSzPM95Lw-2_%E6%92%B0%E5%AF%AB%E6%96%B0%E8%A8%8A%E6%81%AF-6%E7%99%BC%E9%80%81%E6%88%90%E5%8A%9F.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/schlVfRmSzPM95Lw-2_%E6%92%B0%E5%AF%AB%E6%96%B0%E8%A8%8A%E6%81%AF-6%E7%99%BC%E9%80%81%E6%88%90%E5%8A%9F.png) 發送成功！ [![3_更新已發送項目.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/1WcPi1NpvjwUMYBZ-3_%E6%9B%B4%E6%96%B0%E5%B7%B2%E7%99%BC%E9%80%81%E9%A0%85%E7%9B%AE.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/1WcPi1NpvjwUMYBZ-3_%E6%9B%B4%E6%96%B0%E5%B7%B2%E7%99%BC%E9%80%81%E9%A0%85%E7%9B%AE.png) 重新整理介面後，透過快速篩選功能選擇 已發送 的訊息分類，篩選清單中就會出現剛剛發送的訊息，查閱相關紀錄十分方便。 [![3_更新已發送項目2.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/z8kZY6fS7U74UUhm-3_%E6%9B%B4%E6%96%B0%E5%B7%B2%E7%99%BC%E9%80%81%E9%A0%85%E7%9B%AE2.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/z8kZY6fS7U74UUhm-3_%E6%9B%B4%E6%96%B0%E5%B7%B2%E7%99%BC%E9%80%81%E9%A0%85%E7%9B%AE2.png) 直接點開一則群發訊息的紀錄，這時會顯示這則群發訊息的訊息內容。將滑鼠移至底部還會顯示訊息的點擊數與已讀數。 點擊的判定條件：卡片、海報的連結類型按鈕點擊時才會進行統計。 已讀的判定條件：當有夾帶圖片、海報、卡片訊息時，才有辦法計算已讀數，已讀就是字面上的意思，當打開訊息時就會計算已讀數。 [![4_複製群發訊息.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/q8NzDb8YLbbArtVU-4_%E8%A4%87%E8%A3%BD%E7%BE%A4%E7%99%BC%E8%A8%8A%E6%81%AF.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/q8NzDb8YLbbArtVU-4_%E8%A4%87%E8%A3%BD%E7%BE%A4%E7%99%BC%E8%A8%8A%E6%81%AF.png) 有時候需要發送一些內容相似度很高的群發訊息，這時候可以透過 **複製功能** 快速建立訊息副本至草稿分類。 [![4_複製群發訊息2.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/v2R5jhy0tFdRkT5s-4_%E8%A4%87%E8%A3%BD%E7%BE%A4%E7%99%BC%E8%A8%8A%E6%81%AF2.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/v2R5jhy0tFdRkT5s-4_%E8%A4%87%E8%A3%BD%E7%BE%A4%E7%99%BC%E8%A8%8A%E6%81%AF2.png) 點選複製後，會跳出視窗來編輯副本的訊息名稱，訊息名稱之後隨時可進行修改。 [![4_複製群發訊息3.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/mZzkW0rFpWiUEciR-4_%E8%A4%87%E8%A3%BD%E7%BE%A4%E7%99%BC%E8%A8%8A%E6%81%AF3.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/mZzkW0rFpWiUEciR-4_%E8%A4%87%E8%A3%BD%E7%BE%A4%E7%99%BC%E8%A8%8A%E6%81%AF3.png) 建立副本後，副本會建立至草稿類別中。 [![4_複製群發訊息4.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/DUQKNuYTW2lxRO0e-4_%E8%A4%87%E8%A3%BD%E7%BE%A4%E7%99%BC%E8%A8%8A%E6%81%AF4.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/DUQKNuYTW2lxRO0e-4_%E8%A4%87%E8%A3%BD%E7%BE%A4%E7%99%BC%E8%A8%8A%E6%81%AF4.png) 點開副本訊息就會看到訊息內容被完整的拷貝，只需修改要調整的內容就可以進行發送囉，是不是快速又方便呢～ [![5_貼上標籤.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/RxE72cUOtQyA2SIW-5_%E8%B2%BC%E4%B8%8A%E6%A8%99%E7%B1%A4.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/RxE72cUOtQyA2SIW-5_%E8%B2%BC%E4%B8%8A%E6%A8%99%E7%B1%A4.png) 如果對某則訊息的標籤分類需要調整，可以透過點選 貼上標籤 對其進行更改。 [![5_貼上標籤-1.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/jDoZWVzt7bj2CJw9-5_%E8%B2%BC%E4%B8%8A%E6%A8%99%E7%B1%A4-1.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/jDoZWVzt7bj2CJw9-5_%E8%B2%BC%E4%B8%8A%E6%A8%99%E7%B1%A4-1.png) 點選 貼上標籤 後會展開標籤清單，可以新增或刪除訊息上的標籤。 [![5_貼上標籤-2.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/GHQeJyGvENDzuk92-5_%E8%B2%BC%E4%B8%8A%E6%A8%99%E7%B1%A4-2.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/GHQeJyGvENDzuk92-5_%E8%B2%BC%E4%B8%8A%E6%A8%99%E7%B1%A4-2.png) 以上圖為例，多貼上一個 測試用戶 的標籤，此則訊息的標籤分類就會從 管理人員 變成 2個標籤。 [![5_貼上標籤-3.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/1o2itRRhb9t1hWPS-5_%E8%B2%BC%E4%B8%8A%E6%A8%99%E7%B1%A4-3.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/1o2itRRhb9t1hWPS-5_%E8%B2%BC%E4%B8%8A%E6%A8%99%E7%B1%A4-3.png) 重新整理畫面，在訊息的搜尋條件中同時選擇 **管理人員** 與 **測試用戶** 兩個標籤，按下 **ENTER** 進行篩選，這時篩選出來的訊息就會有剛剛多貼上 **測試用戶** 標籤的訊息囉！ # 好友清單 在好友清單除了可以查閱成為好友的名單，詳細資料、屬性內容、擁有標籤、好友狀態也都可以在這個介面中一覽無疑。 - ##### **快速篩選** **[![2-好友來源.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/2nNYn55mgJdPlafV-2-%E5%A5%BD%E5%8F%8B%E4%BE%86%E6%BA%90.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/2nNYn55mgJdPlafV-2-%E5%A5%BD%E5%8F%8B%E4%BE%86%E6%BA%90.png)**預設會是呈現所有來源的好友清單，若要縮小篩選範圍，可以在紅色框選區塊中選擇來源種類進行調整。 您也可以透過標籤來進行篩選，擁有該標籤的好友就會被篩選出來。 - ##### **自訂搜尋** ##### **[![3-自訂搜尋.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/FyT2J2CJ7LlU4DnS-3-%E8%87%AA%E8%A8%82%E6%90%9C%E5%B0%8B.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/FyT2J2CJ7LlU4DnS-3-%E8%87%AA%E8%A8%82%E6%90%9C%E5%B0%8B.png)** 自訂搜尋可以透過以下幾種種類進行搜尋： 1. 編號： 如果已經知道好友的編號，直接輸入編號就可以搜尋到這位好友。 2. 好友暱稱： 輸入完整或局部的好友暱稱，即可搜尋該好友。 3. 標籤： 想知道擁有特定標籤的好友名單，可以在搜尋列中選擇要查詢的標籤，並按下 ENTER 進行搜尋。 4. 進階篩選： 若已經建立了進階篩選條件，往後可以選擇此篩選條件查詢符合的好友名單。 5. 好友狀態： 如果想搜尋特定好友狀態的對象，可以在自訂搜尋列中選擇進行搜尋。 - ##### **分頁管理** **[![4-分頁管理.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/mWKSHMyQwivMHmKn-4-%E5%88%86%E9%A0%81%E7%AE%A1%E7%90%86.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/mWKSHMyQwivMHmKn-4-%E5%88%86%E9%A0%81%E7%AE%A1%E7%90%86.png)** 當好友人數很多時，可以透過分頁協助快速找到對象。 **[![4-分頁查詢-2.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/GJtni4G0GomeK3W1-4-%E5%88%86%E9%A0%81%E6%9F%A5%E8%A9%A2-2.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/GJtni4G0GomeK3W1-4-%E5%88%86%E9%A0%81%E6%9F%A5%E8%A9%A2-2.png)**點選分頁管理上的好友人數會展開設定選項，可以調整每頁要顯示的人數。 [![4-分頁查詢-3.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/Clc37aStZJlLfu2g-4-%E5%88%86%E9%A0%81%E6%9F%A5%E8%A9%A2-3.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/Clc37aStZJlLfu2g-4-%E5%88%86%E9%A0%81%E6%9F%A5%E8%A9%A2-3.png)若已經知道好友位於第幾頁，也可以直接指定頁數查看。 - ##### **好友列表** **[![5-好友列表.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/ntV5lyecJvPgQbr7-5-%E5%A5%BD%E5%8F%8B%E5%88%97%E8%A1%A8.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/ntV5lyecJvPgQbr7-5-%E5%A5%BD%E5%8F%8B%E5%88%97%E8%A1%A8.png)** 好友列表中會呈現好友們的編號、大頭貼、暱稱、狀態、所屬機器人、以及其他屬性的值。 [![5-好友列表-2-詳細清單.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/y0BJYPI4M99yOoJk-5-%E5%A5%BD%E5%8F%8B%E5%88%97%E8%A1%A8-2-%E8%A9%B3%E7%B4%B0%E6%B8%85%E5%96%AE.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/y0BJYPI4M99yOoJk-5-%E5%A5%BD%E5%8F%8B%E5%88%97%E8%A1%A8-2-%E8%A9%B3%E7%B4%B0%E6%B8%85%E5%96%AE.png) 若想查看好友的詳細資訊（例如：擁有的標籤、圖文選單等內容），請直接點選好友就會展開好友的詳細資料。 如果需要與該好友進行１：１的私訊，右上角也提供按鈕可以快速進入私訊介面。 在好友詳細資料中可以查看所屬機器人平台、加入時間、圖文選單、擁有標籤、屬性內容等，並且可以直接編輯該位好友的資料。 其中需留意的是標籤的更改是即時改動，其他像是屬性、圖文選單的更改則需要進行再次確認才會進行更新。 提醒您請謹慎小心操作資料異動。 - ##### **好友屬性顯示設定** **[![6-好友屬性顯示設定.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/pZjvDbVmbZrbalO2-6-%E5%A5%BD%E5%8F%8B%E5%B1%AC%E6%80%A7%E9%A1%AF%E7%A4%BA%E8%A8%AD%E5%AE%9A.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/pZjvDbVmbZrbalO2-6-%E5%A5%BD%E5%8F%8B%E5%B1%AC%E6%80%A7%E9%A1%AF%E7%A4%BA%E8%A8%AD%E5%AE%9A.png)** 好友的屬性順序若需要調整，可以點選右上角的漢堡選單進行編排。 [![6-好友屬性顯示設定-2.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/GOOSQe8ra17pedu1-6-%E5%A5%BD%E5%8F%8B%E5%B1%AC%E6%80%A7%E9%A1%AF%E7%A4%BA%E8%A8%AD%E5%AE%9A-2.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/GOOSQe8ra17pedu1-6-%E5%A5%BD%E5%8F%8B%E5%B1%AC%E6%80%A7%E9%A1%AF%E7%A4%BA%E8%A8%AD%E5%AE%9A-2.png) 點選漢堡選單 **[![6-好友屬性顯示設定-3.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/ph6KObzBihieLSSj-6-%E5%A5%BD%E5%8F%8B%E5%B1%AC%E6%80%A7%E9%A1%AF%E7%A4%BA%E8%A8%AD%E5%AE%9A-3.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/ph6KObzBihieLSSj-6-%E5%A5%BD%E5%8F%8B%E5%B1%AC%E6%80%A7%E9%A1%AF%E7%A4%BA%E8%A8%AD%E5%AE%9A-3.png)** 可以對屬性的順序進行調整，並透過勾選屬性來決定是否要顯示於列表清單中。 以截圖為例，可以將屬性生日移至屬性行動電話之前。 # 1 : 1 私訊 透過 1：1 私訊 可以查看所有曾經與機器人對話過、互動過的用戶對話紀錄，並且可以直接選擇用戶進行回覆。 ##### **介面** [![0_1對1私訊-0-2.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/ULCdYxt1vFUbQYWH-0_1%E5%B0%8D1%E7%A7%81%E8%A8%8A-0-2.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/ULCdYxt1vFUbQYWH-0_1%E5%B0%8D1%E7%A7%81%E8%A8%8A-0-2.png) 介面左邊區塊會有曾與機器人互動、對話的用戶清單。 [![0_1對1私訊-0-3.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/cO3oiSL83s4ErasE-0_1%E5%B0%8D1%E7%A7%81%E8%A8%8A-0-3.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/cO3oiSL83s4ErasE-0_1%E5%B0%8D1%E7%A7%81%E8%A8%8A-0-3.png) 在紅色框選處可以直接選擇篩選對象（平台來源、個人或是群組），預設會是全選狀態，呈現所有的用戶。 [![0_1對1私訊-0-4.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/egqfkNsKZZI3E0RA-0_1%E5%B0%8D1%E7%A7%81%E8%A8%8A-0-4.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/egqfkNsKZZI3E0RA-0_1%E5%B0%8D1%E7%A7%81%E8%A8%8A-0-4.png) 有時好友的數量過於龐大，或是想更快的方式搜尋出單一用戶，這時候可以透過搜尋功能輸入用戶的暱稱，就能夠馬上找到要找的用戶囉～ [![0_1對1私訊-1.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/vMwfAQbdKP8x4mrH-0_1%E5%B0%8D1%E7%A7%81%E8%A8%8A-1.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/vMwfAQbdKP8x4mrH-0_1%E5%B0%8D1%E7%A7%81%E8%A8%8A-1.png) 選取用戶後的介面，在右側區塊可以看到選取用戶的相關資料（暱稱、平台來源、身分種類、圖文選單、擁有標籤、屬性內容）。 [![0_1對1私訊-3.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/QLUmZ0Dj0bINUBAw-0_1%E5%B0%8D1%E7%A7%81%E8%A8%8A-3.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/QLUmZ0Dj0bINUBAw-0_1%E5%B0%8D1%E7%A7%81%E8%A8%8A-3.png) 點選紅色區塊可以直接抽換該用戶的圖文選單。 [![0_1對1私訊-4.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/ITUL5l91QXA68XFX-0_1%E5%B0%8D1%E7%A7%81%E8%A8%8A-4.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/ITUL5l91QXA68XFX-0_1%E5%B0%8D1%E7%A7%81%E8%A8%8A-4.png) 也可以直接更改用戶擁有的標籤內容。 [![0_1對1私訊-5-1.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/52vz8cVDBDqdU2IX-0_1%E5%B0%8D1%E7%A7%81%E8%A8%8A-5-1.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/52vz8cVDBDqdU2IX-0_1%E5%B0%8D1%E7%A7%81%E8%A8%8A-5-1.png) 更改屬性內容當然也可以做到。 [![0_1對1私訊-5-2.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/vlgDFujX6jOWXTt4-0_1%E5%B0%8D1%E7%A7%81%E8%A8%8A-5-2.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/vlgDFujX6jOWXTt4-0_1%E5%B0%8D1%E7%A7%81%E8%A8%8A-5-2.png) 若要以真人回覆的方式，各種類型的訊息都可以使用。 註：以上圖為例，插入一則文字訊息準備回覆給指定用戶。 [![0_1對1私訊-6.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/BiF1DtKyGeGbABdb-0_1%E5%B0%8D1%E7%A7%81%E8%A8%8A-6.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/BiF1DtKyGeGbABdb-0_1%E5%B0%8D1%E7%A7%81%E8%A8%8A-6.png) 訊息送出。 # 機器人管理 在開始使用聊天機器人之前，最重要的事情就是先建立好聊天機器人！ 一個組織中能夠建立兩隻機器人，機器人的平台可以任選 **LINE@** 或是 **Facebook。** 註：建立聊天機器人的詳細教學請先參考：[LINE@ 聊天機器人](http://book.gosu.bar/books/gosu-bar-%E5%85%A5%E9%96%80/page/%E5%BB%BA%E7%AB%8B-line-%E8%81%8A%E5%A4%A9%E6%A9%9F%E5%99%A8%E4%BA%BA) 與 [Facebook 聊天機器人](http://book.gosu.bar/books/gosu-bar-%E5%85%A5%E9%96%80/page/%E5%BB%BA%E7%AB%8B-facebook-%E8%81%8A%E5%A4%A9%E6%A9%9F%E5%99%A8%E4%BA%BA) 那我們就開始一窺機器人管理介面的細節吧！ [![1_建立好機器人後的介面.png](http://book.gosu.bar/uploads/images/gallery/2020-01/scaled-1680-/udVc63RKxignRweo-1_%E5%BB%BA%E7%AB%8B%E5%A5%BD%E6%A9%9F%E5%99%A8%E4%BA%BA%E5%BE%8C%E7%9A%84%E4%BB%8B%E9%9D%A2.png)](http://book.gosu.bar/uploads/images/gallery/2020-01/udVc63RKxignRweo-1_%E5%BB%BA%E7%AB%8B%E5%A5%BD%E6%A9%9F%E5%99%A8%E4%BA%BA%E5%BE%8C%E7%9A%84%E4%BB%8B%E9%9D%A2.png) 當建立好聊天機器人後，機器人管理的畫面如上圖所示，我們可以檢視或更改設定的內容。 首先是外觀資訊 - ##### 帳號名稱 在 GOSU BAR 上串接聊天機器人時設定的帳號名稱，建議命名與 LINE Developers 上聊天機器人名稱相同，日後要查詢與維護會比較友善。 [![2-1_機器人名稱.png](http://book.gosu.bar/uploads/images/gallery/2020-01/scaled-1680-/xm94s0K5XtS16h7f-2-1_%E6%A9%9F%E5%99%A8%E4%BA%BA%E5%90%8D%E7%A8%B1.png)](http://book.gosu.bar/uploads/images/gallery/2020-01/xm94s0K5XtS16h7f-2-1_%E6%A9%9F%E5%99%A8%E4%BA%BA%E5%90%8D%E7%A8%B1.png) - ##### 平台類型 建立的聊天機器人平台類型。 若是 LINE@ 的聊天機器人會多顯示其 API 類型。以下圖為例，此 LINE@ 聊天機器人是 Push API。 [![2-2_機器人平台配型.png](http://book.gosu.bar/uploads/images/gallery/2020-01/scaled-1680-/XeJ13NEv4Lg5nwU8-2-2_%E6%A9%9F%E5%99%A8%E4%BA%BA%E5%B9%B3%E5%8F%B0%E9%85%8D%E5%9E%8B.png)](http://book.gosu.bar/uploads/images/gallery/2020-01/XeJ13NEv4Lg5nwU8-2-2_%E6%A9%9F%E5%99%A8%E4%BA%BA%E5%B9%B3%E5%8F%B0%E9%85%8D%E5%9E%8B.png) - ##### 封面圖片 點選封面圖片會開啟新分頁，顯示的內容會依據平台類型而有所不同。 **※** LINE@ 會顯示此聊天機器人的 QRcode，掃描後即可加該機器人為好友。 **※** Facebook 則是進入紛絲專業的首頁。 封面圖片可以在 **進階設定** 中進行更換。 [![2-3_機器人QRcode_可更換外觀圖片_提高辨識度.png](http://book.gosu.bar/uploads/images/gallery/2020-01/scaled-1680-/oZj1N5jlNLikPUpf-2-3_%E6%A9%9F%E5%99%A8%E4%BA%BAQRcode_%E5%8F%AF%E6%9B%B4%E6%8F%9B%E5%A4%96%E8%A7%80%E5%9C%96%E7%89%87_%E6%8F%90%E9%AB%98%E8%BE%A8%E8%AD%98%E5%BA%A6.png)](http://book.gosu.bar/uploads/images/gallery/2020-01/oZj1N5jlNLikPUpf-2-3_%E6%A9%9F%E5%99%A8%E4%BA%BAQRcode_%E5%8F%AF%E6%9B%B4%E6%8F%9B%E5%A4%96%E8%A7%80%E5%9C%96%E7%89%87_%E6%8F%90%E9%AB%98%E8%BE%A8%E8%AD%98%E5%BA%A6.png) - ##### 啟用開關 控制該聊天機器人是否要啟用，若不使用此機器人則可中斷。 [![2-4_機器人啟用與否.png](http://book.gosu.bar/uploads/images/gallery/2020-01/scaled-1680-/A5o8yRsMK7ZtVoYs-2-4_%E6%A9%9F%E5%99%A8%E4%BA%BA%E5%95%9F%E7%94%A8%E8%88%87%E5%90%A6.png)](http://book.gosu.bar/uploads/images/gallery/2020-01/A5o8yRsMK7ZtVoYs-2-4_%E6%A9%9F%E5%99%A8%E4%BA%BA%E5%95%9F%E7%94%A8%E8%88%87%E5%90%A6.png) - ##### 進階設定 點選按鈕以進行進階設定 [![2-5_機器人進階設定.png](http://book.gosu.bar/uploads/images/gallery/2020-01/scaled-1680-/0RtHSoFXxnAX7YzP-2-5_%E6%A9%9F%E5%99%A8%E4%BA%BA%E9%80%B2%E9%9A%8E%E8%A8%AD%E5%AE%9A.png)](http://book.gosu.bar/uploads/images/gallery/2020-01/0RtHSoFXxnAX7YzP-2-5_%E6%A9%9F%E5%99%A8%E4%BA%BA%E9%80%B2%E9%9A%8E%E8%A8%AD%E5%AE%9A.png) 1. ##### 機器人基本資料 [![3_機器人管理_LINE@_1_基本資料_局部.png](http://book.gosu.bar/uploads/images/gallery/2020-01/scaled-1680-/KIAAdLTLBfPSMrdf-3_%E6%A9%9F%E5%99%A8%E4%BA%BA%E7%AE%A1%E7%90%86_LINE@_1_%E5%9F%BA%E6%9C%AC%E8%B3%87%E6%96%99_%E5%B1%80%E9%83%A8.png)](http://book.gosu.bar/uploads/images/gallery/2020-01/KIAAdLTLBfPSMrdf-3_%E6%A9%9F%E5%99%A8%E4%BA%BA%E7%AE%A1%E7%90%86_LINE@_1_%E5%9F%BA%E6%9C%AC%E8%B3%87%E6%96%99_%E5%B1%80%E9%83%A8.png) - 編號 此機器人在 GOSU BAR 平台上的編號，值為唯一且無法被更改。 - 帳號名稱（必填） 此機器人在 GOSU BAR 平台上的名稱，命名建議與聊天機器人的名稱相同，未來較容易維護與查詢。 - Message API 類型（LINE@） 共有二種類型，分別是 Reply Message 與 Push Message，若聊天機器人需要主動推送訊息給用戶，則必須開啟 Push Message。 - LINE ID（LINE@） 須代入 LINE Developers 建立的 Messaging API 中的 Bot basic ID。 - 封面圖片網址 若有更換圖片的需求，可以點選上傳或直接代入圖片網址進行更換。 2. ##### 機器人憑證設定 [![3_機器人管理_LINE@_2_憑證設定_局部.png](http://book.gosu.bar/uploads/images/gallery/2020-01/scaled-1680-/Dq2nsXFhuQPM0lJG-3_%E6%A9%9F%E5%99%A8%E4%BA%BA%E7%AE%A1%E7%90%86_LINE@_2_%E6%86%91%E8%AD%89%E8%A8%AD%E5%AE%9A_%E5%B1%80%E9%83%A8.png)](http://book.gosu.bar/uploads/images/gallery/2020-01/Dq2nsXFhuQPM0lJG-3_%E6%A9%9F%E5%99%A8%E4%BA%BA%E7%AE%A1%E7%90%86_LINE@_2_%E6%86%91%E8%AD%89%E8%A8%AD%E5%AE%9A_%E5%B1%80%E9%83%A8.png) - 平台編號 若是 LINE@ 須代入 LINE Developers 建立的 Messaging API 中的 Channel ID。 - 平台金鑰（必填，LINE@） 須代入 LINE Developers 建立的 Messaging API 中的 Channel secret。 - 平台憑證（必填） 若是 LINE@ 須代入 LINE Developers 建立的 Messaging API 中的 Channel access token。 3. ##### LINE LOGIN 設定（LINE@） ##### [![3_機器人管理_LINE@_3_LINE-LOGIN-設定_局部.png](http://book.gosu.bar/uploads/images/gallery/2020-01/scaled-1680-/C2haH7MGBXk8I01W-3_%E6%A9%9F%E5%99%A8%E4%BA%BA%E7%AE%A1%E7%90%86_LINE@_3_LINE-LOGIN-%E8%A8%AD%E5%AE%9A_%E5%B1%80%E9%83%A8.png)](http://book.gosu.bar/uploads/images/gallery/2020-01/C2haH7MGBXk8I01W-3_%E6%A9%9F%E5%99%A8%E4%BA%BA%E7%AE%A1%E7%90%86_LINE@_3_LINE-LOGIN-%E8%A8%AD%E5%AE%9A_%E5%B1%80%E9%83%A8.png) - 開放授權編號 須代入 LINE Developers 建立的 LINE Login 中的 Channel ID。 - 開放授權密碼 須代入 LINE Developers 建立的 LINE Login 中的 Channel secret。 4. ##### Account Link 設定（LINE@） [![3_機器人管理_LINE@_4_Account-Link-設定_局部.png](http://book.gosu.bar/uploads/images/gallery/2020-01/scaled-1680-/1o0UDVtUfSG8IKCc-3_%E6%A9%9F%E5%99%A8%E4%BA%BA%E7%AE%A1%E7%90%86_LINE@_4_Account-Link-%E8%A8%AD%E5%AE%9A_%E5%B1%80%E9%83%A8.png)](http://book.gosu.bar/uploads/images/gallery/2020-01/1o0UDVtUfSG8IKCc-3_%E6%A9%9F%E5%99%A8%E4%BA%BA%E7%AE%A1%E7%90%86_LINE@_4_Account-Link-%E8%A8%AD%E5%AE%9A_%E5%B1%80%E9%83%A8.png) 透過 Account link 可以將聊天機器人的使用者與原先商業網站的帳戶互相綁定，對已經有相當量用戶數的服務提供商來說，將可讓使用者有一致的體驗。 - 登入頁面的網址 - 讀取使用者資料的網址 - 讀取使用者資料時所使用雜湊的 SALT 5. ##### Webhook 設定（LINE@） [![3_機器人管理_LINE@_5_Webhook-設定_局部.png](http://book.gosu.bar/uploads/images/gallery/2020-01/scaled-1680-/gSRBpNhKdJnwjcqj-3_%E6%A9%9F%E5%99%A8%E4%BA%BA%E7%AE%A1%E7%90%86_LINE@_5_Webhook-%E8%A8%AD%E5%AE%9A_%E5%B1%80%E9%83%A8.png)](http://book.gosu.bar/uploads/images/gallery/2020-01/gSRBpNhKdJnwjcqj-3_%E6%A9%9F%E5%99%A8%E4%BA%BA%E7%AE%A1%E7%90%86_LINE@_5_Webhook-%E8%A8%AD%E5%AE%9A_%E5%B1%80%E9%83%A8.png) - Webhook URL 什麼是 Webhook ? 用比較簡單的解釋可以理解成 **Webhook 是讓一個網站能訂閱另一個網站的方法。** 若要使用 Webhook，請複製此 Webhook URL 將值設定到 LINE Developers 的 Messaging API 中的 Webhook URL 欄位。 記得驗證後重新整理畫面，確保其值有正確設定，才可以使用此功能 。 6. ##### 安全性設定 [![3_機器人管理_LINE@_6_安全性設定_局部.png](http://book.gosu.bar/uploads/images/gallery/2020-01/scaled-1680-/kRclEVbIeTT92bsN-3_%E6%A9%9F%E5%99%A8%E4%BA%BA%E7%AE%A1%E7%90%86_LINE@_6_%E5%AE%89%E5%85%A8%E6%80%A7%E8%A8%AD%E5%AE%9A_%E5%B1%80%E9%83%A8.png)](http://book.gosu.bar/uploads/images/gallery/2020-01/kRclEVbIeTT92bsN-3_%E6%A9%9F%E5%99%A8%E4%BA%BA%E7%AE%A1%E7%90%86_LINE@_6_%E5%AE%89%E5%85%A8%E6%80%A7%E8%A8%AD%E5%AE%9A_%E5%B1%80%E9%83%A8.png) - Webhook 白名單 當我們要進行自訂事件的跨網域請求時，請將會用到的網域設定到 Webhook 白名單 中。 範例： - - https://www.gosu.bar - https://anyong.com.tw - http://google.com 7. ##### 機器人屬性設定 [![3_機器人管理_LINE@_7_機器人屬性設定_局部.png](http://book.gosu.bar/uploads/images/gallery/2020-01/scaled-1680-/2VIjwCnL1U6dqggb-3_%E6%A9%9F%E5%99%A8%E4%BA%BA%E7%AE%A1%E7%90%86_LINE@_7_%E6%A9%9F%E5%99%A8%E4%BA%BA%E5%B1%AC%E6%80%A7%E8%A8%AD%E5%AE%9A_%E5%B1%80%E9%83%A8.png)](http://book.gosu.bar/uploads/images/gallery/2020-01/2VIjwCnL1U6dqggb-3_%E6%A9%9F%E5%99%A8%E4%BA%BA%E7%AE%A1%E7%90%86_LINE@_7_%E6%A9%9F%E5%99%A8%E4%BA%BA%E5%B1%AC%E6%80%A7%E8%A8%AD%E5%AE%9A_%E5%B1%80%E9%83%A8.png) - 機器人初次建立時不會有任何屬性（如上圖所示），若有使用機器人屬性的需求，請至 設定＞屬性管理 新建所需的機器人屬性。 建立屬性後，就可以進到 機器人屬性設定 檢視或更改屬性的值。 - - ##### 重新授權 Facebook 聊天機器人會多出一個重新授權按鈕，當授權過期時可以點選對其進行更新。 [![2-6_機器人重新授權.png](http://book.gosu.bar/uploads/images/gallery/2020-01/scaled-1680-/Om3EYpT4CccJEAv8-2-6_%E6%A9%9F%E5%99%A8%E4%BA%BA%E9%87%8D%E6%96%B0%E6%8E%88%E6%AC%8A.png)](http://book.gosu.bar/uploads/images/gallery/2020-01/Om3EYpT4CccJEAv8-2-6_%E6%A9%9F%E5%99%A8%E4%BA%BA%E9%87%8D%E6%96%B0%E6%8E%88%E6%AC%8A.png) # 標籤管理 在介紹標籤管理介面之前，我們必須先認識 GOSU BAR 提供的 標籤（Tag） - ##### 何謂標籤 GOSU BAR 提供了 標籤（Tag），使用標籤可以方便的對用戶進行分眾、分群，透過對目標用戶賦予特定的標籤，就等同對用戶賦予一個特定的狀態或是身分。 聽起來似乎很抽象，請參考以下例子會比較容易理解！ 假設今天在聊天機器人提供某份問卷讓用戶填寫，這問卷中的問題之一是詢問用戶的生理性別，我們可以根據用戶的選擇，透過流程對其貼上對應的生理性別標籤，這時就對這些有填答問卷的用戶進行生理性別上的分眾了。 適當的使用標籤可以方便未來根據不同的需求篩選出擁有特定標籤的用戶，針對篩選對象推送特定的訊息或抽換特定的選單（LINE@）；也可以透過判斷用戶是否擁有特定標籤，讓擁有特定標籤的用戶使用特別的服務或功能！（例如：VIP會員） 理解標籤為何以及標籤可以達到的成效後，接著是本章的重點 **標籤管理** 的介紹。 - ##### 標籤管理 [![4_標籤管理_1_初次進入的樣子.png](http://book.gosu.bar/uploads/images/gallery/2020-01/scaled-1680-/geHx8NxeN4DfKlC2-4_%E6%A8%99%E7%B1%A4%E7%AE%A1%E7%90%86_1_%E5%88%9D%E6%AC%A1%E9%80%B2%E5%85%A5%E7%9A%84%E6%A8%A3%E5%AD%90.png)](http://book.gosu.bar/uploads/images/gallery/2020-01/geHx8NxeN4DfKlC2-4_%E6%A8%99%E7%B1%A4%E7%AE%A1%E7%90%86_1_%E5%88%9D%E6%AC%A1%E9%80%B2%E5%85%A5%E7%9A%84%E6%A8%A3%E5%AD%90.png)初次進到 **標籤管理** 的畫面，此時還尚未存在任何標籤，請點選按鈕 **新增項目** 建立。 [![4_標籤管理_2_新增項目_新增標籤名稱.png](http://book.gosu.bar/uploads/images/gallery/2020-01/scaled-1680-/lYbb9WbnXv7MIHto-4_%E6%A8%99%E7%B1%A4%E7%AE%A1%E7%90%86_2_%E6%96%B0%E5%A2%9E%E9%A0%85%E7%9B%AE_%E6%96%B0%E5%A2%9E%E6%A8%99%E7%B1%A4%E5%90%8D%E7%A8%B1.png)](http://book.gosu.bar/uploads/images/gallery/2020-01/lYbb9WbnXv7MIHto-4_%E6%A8%99%E7%B1%A4%E7%AE%A1%E7%90%86_2_%E6%96%B0%E5%A2%9E%E9%A0%85%E7%9B%AE_%E6%96%B0%E5%A2%9E%E6%A8%99%E7%B1%A4%E5%90%8D%E7%A8%B1.png) 點選 **新增項目** 後會跳出視窗，請輸入標籤的名稱。 [![4_標籤管理_3_建立好標籤.png](http://book.gosu.bar/uploads/images/gallery/2020-01/scaled-1680-/S5g8JH9h5BuH8id7-4_%E6%A8%99%E7%B1%A4%E7%AE%A1%E7%90%86_3_%E5%BB%BA%E7%AB%8B%E5%A5%BD%E6%A8%99%E7%B1%A4.png)](http://book.gosu.bar/uploads/images/gallery/2020-01/S5g8JH9h5BuH8id7-4_%E6%A8%99%E7%B1%A4%E7%AE%A1%E7%90%86_3_%E5%BB%BA%E7%AB%8B%E5%A5%BD%E6%A8%99%E7%B1%A4.png) 以上圖示範為例，建立 **生理性別女性** 與 **生理性別男性** 兩個標籤。 [![4_標籤管理_4_選取標籤.png](http://book.gosu.bar/uploads/images/gallery/2020-01/scaled-1680-/CKNGJGs53UWycNcz-4_%E6%A8%99%E7%B1%A4%E7%AE%A1%E7%90%86_4_%E9%81%B8%E5%8F%96%E6%A8%99%E7%B1%A4.png)](http://book.gosu.bar/uploads/images/gallery/2020-01/CKNGJGs53UWycNcz-4_%E6%A8%99%E7%B1%A4%E7%AE%A1%E7%90%86_4_%E9%81%B8%E5%8F%96%E6%A8%99%E7%B1%A4.png) 建立標籤後請點選標籤區塊，這時右側會顯示該標籤的其他資訊，透過資訊可以發現，上方有顯示擁有此標籤的用戶總數。（目前因為標籤剛建立，所以共 0 人擁有此標籤） [![4_標籤管理_5_適用於使用者.png](http://book.gosu.bar/uploads/images/gallery/2020-01/scaled-1680-/ZlXR3B951LxLZ4eO-4_%E6%A8%99%E7%B1%A4%E7%AE%A1%E7%90%86_5_%E9%81%A9%E7%94%A8%E6%96%BC%E4%BD%BF%E7%94%A8%E8%80%85.png)](http://book.gosu.bar/uploads/images/gallery/2020-01/ZlXR3B951LxLZ4eO-4_%E6%A8%99%E7%B1%A4%E7%AE%A1%E7%90%86_5_%E9%81%A9%E7%94%A8%E6%96%BC%E4%BD%BF%E7%94%A8%E8%80%85.png) 請啟用 **適用於使用者**，會再展開以下設定： 1. **列表**：標籤將會顯示於好友清單中的列表中，目前此功能在規畫內所以列表還不能看到標籤。 2. **詳細資料**：能顯示於好友清單中的好友詳細資料中。 若啟用 **適用於發送紀錄**：標籤可提供統計圖表使用。 [![4_標籤管理_6_編輯按鈕.png](http://book.gosu.bar/uploads/images/gallery/2020-01/scaled-1680-/zfPtEbkDcHgX3yn1-4_%E6%A8%99%E7%B1%A4%E7%AE%A1%E7%90%86_6_%E7%B7%A8%E8%BC%AF%E6%8C%89%E9%88%95.png)](http://book.gosu.bar/uploads/images/gallery/2020-01/zfPtEbkDcHgX3yn1-4_%E6%A8%99%E7%B1%A4%E7%AE%A1%E7%90%86_6_%E7%B7%A8%E8%BC%AF%E6%8C%89%E9%88%95.png) 標籤建立時預設是白色字配深灰底，若有個人化的需求可以點選標籤上的編輯按鈕，除了可以重新命名標籤名稱外，也可以更改標籤的底色，方便辨識與管理。 [![4_標籤管理_7_編輯標籤顏色.png](http://book.gosu.bar/uploads/images/gallery/2020-01/scaled-1680-/4Rg6Y7QcUesLjuI0-4_%E6%A8%99%E7%B1%A4%E7%AE%A1%E7%90%86_7_%E7%B7%A8%E8%BC%AF%E6%A8%99%E7%B1%A4%E9%A1%8F%E8%89%B2.png)](http://book.gosu.bar/uploads/images/gallery/2020-01/4Rg6Y7QcUesLjuI0-4_%E6%A8%99%E7%B1%A4%E7%AE%A1%E7%90%86_7_%E7%B7%A8%E8%BC%AF%E6%A8%99%E7%B1%A4%E9%A1%8F%E8%89%B2.png) 點開 編輯按鈕 後我們先更改標籤的底色，直接點選圓圈處會出現顏色編輯器。 [![4_標籤管理_9_編輯顏色顏色選擇器.png](http://book.gosu.bar/uploads/images/gallery/2020-01/scaled-1680-/8Sfrrza4Q7zwdD97-4_%E6%A8%99%E7%B1%A4%E7%AE%A1%E7%90%86_9_%E7%B7%A8%E8%BC%AF%E9%A1%8F%E8%89%B2%E9%A1%8F%E8%89%B2%E9%81%B8%E6%93%87%E5%99%A8.png)](http://book.gosu.bar/uploads/images/gallery/2020-01/8Sfrrza4Q7zwdD97-4_%E6%A8%99%E7%B1%A4%E7%AE%A1%E7%90%86_9_%E7%B7%A8%E8%BC%AF%E9%A1%8F%E8%89%B2%E9%A1%8F%E8%89%B2%E9%81%B8%E6%93%87%E5%99%A8.png) 顏色編輯器如圖所示，可以自行選擇喜愛的顏色。選擇並調整完後按下 確定 。 [![4_標籤管理_10_標籤顏色更改後.png](http://book.gosu.bar/uploads/images/gallery/2020-01/scaled-1680-/L5kaoSwlgFQG3SVt-4_%E6%A8%99%E7%B1%A4%E7%AE%A1%E7%90%86_10_%E6%A8%99%E7%B1%A4%E9%A1%8F%E8%89%B2%E6%9B%B4%E6%94%B9%E5%BE%8C.png)](http://book.gosu.bar/uploads/images/gallery/2020-01/L5kaoSwlgFQG3SVt-4_%E6%A8%99%E7%B1%A4%E7%AE%A1%E7%90%86_10_%E6%A8%99%E7%B1%A4%E9%A1%8F%E8%89%B2%E6%9B%B4%E6%94%B9%E5%BE%8C.png) 這就是更換後的樣子，是不是很簡單呢！ # 屬性管理 在正式介紹 **屬性管理** 之前，我們需要先理解：何謂屬性、屬性的應用對象、屬性的型態。 - ##### 何謂屬性 **屬性是特定對象共同具有的特質或性質**，且這些特質在這些對象之間呈現的結果不一定會完全相同。 像是每個人都具有眼睛且眼睛顏色因人而異不會完全相同，身高、體重、膚色、頭髮長度也是相同的道理，而這些就是身為人共同具有的特質，所以我們可以說每個人都具有眼睛顏色、身高、體重...等等的屬性。 基於這個概念，GOSU BAR 可以根據不同的需求建立適合的屬性，並運用這些屬性來記錄、管理特定的資訊與資料。 釐清屬性的概念後，接著需要理解 GOSU BAR 屬性的應用對象種類，了解其作用對象的差異以及各自適合使用的情境。 - ##### 屬性的應用對象（好友／機器人／組織） 在 GOSU BAR 平台上屬性共分成 3 種應用對象：**好友、機器人、組織**。 **※** 以層級來說：組織＞機器人＞好友，組織位於最上層（最外），好友位於最下層（最內）。 **※** 建立在合適的應用對象，有助於管理上的簡化，功能執行的效能、效率也會獲得優化。 - **好友** 多數情境下屬性的應用對象會選擇好友，因為常見的需求是直接記錄使用者本身的資訊比較多。 例如：身高、體重、電話、住址、身分ID，這些都是屬於用戶自己的資訊。 **※** 註：假設建立了電話、住址、身分ID 這三個應用對象為好友的屬性，在同一個組織中無論所屬機器人為何，組織中的所有好友都將具有這三個屬性。 - **機器人** 部分情境下會需要使用應用對象為機器人的屬性，當屬性的資訊內容不屬於用戶個人，或是該屬性代表的是共有的資訊、資料，那麼屬性的應用對象就會選擇機器人。 情境： 今天要透過聊天機器人舉辦一個限時活動，當活動開始用戶可以觸發活動的功能，當活動尚未開始或是結束，活動功能就必須鎖定不開放使用，並且回應用戶活動尚未開放等訊息。 要達到這個需求有很多方法，其中一種是透過屬性來設定 開始時間 與 結束時間，並根據這兩個時間判斷活動是否已經開始或結束。 這時候出現一個問題，這兩個屬性的應用對象應該選擇 好友 還是 機器人？既然在這裡提出問題，答案顯而易見是建立在機器人。 會這麼選擇是因為一個活動的 開始時間 與 結束時間 對所有用戶來說都是相同的，它是一個共同、共有的資訊，不會因為不同的用戶而有不同的活動時間。 此情境下將屬性建立在機器人，將有助於資料管理上的簡化，如果活動時間需要更改只需要改一次機器人的屬性，如果屬性建立在好友就需要對每一個用戶的屬性都個別設定，這不但費時也增加許多沒必要的操作，並且無意義的增加用戶個人的屬性資料造成浪費。 - **組織** 若能理解機器人的說明，那麼建立在組織就不難理解。由於組織的層級比機器人再高一層，所以會將屬性建立在組織的情境，就是當組織之下的所有機器人都需要共用某個屬性，那就會選擇將屬性建立到組織，而非建立到機器人。 無論屬性是建立在哪個應用對象，屬性都有 3 種型態可以選擇。建議依使用情境選擇適當的型態，這將有效優化一些操作，甚至提升運行的效能。 - ##### 屬性的型態（文字／數字／列表） 在 GOSU BAR 平台上屬性共分成 3 種型態：**文字、數字、列表**。 - **文字** 顧名思義，就是專門用來儲存文字的型態。 例如：姓名、生日、身分ID，這些只需要被記錄而不用進行數字運算的資料，就會使用文字型態的屬性來記錄。 - **數字** 專門用來儲存數字的型態。 此種型態在流程編輯器中的 設定屬性節點 將會出現對此種屬性的內容（值）進行數字 加N 或 減N 的操作可選擇。 **※** N為一個數字。 - **列表** 可以當作是一個可以依序塞入不同內容的文件夾，文件夾中每一個內容彼此之間都會透過逗號區隔。 若以程式撰寫來理解，列表其實就是陣列，所以能做的操作也相同，在流程編輯器中的部分操作可以直接對該屬性進行陣列的相關操作。 - ##### 屬性管理 理解何謂屬性、屬性的應用對象、屬性的型態後，就來看看屬性管理的介面吧！ - **介面** [![0-整體介面.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/awgbfxnpcMtZWpnp-0-%E6%95%B4%E9%AB%94%E4%BB%8B%E9%9D%A2.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/awgbfxnpcMtZWpnp-0-%E6%95%B4%E9%AB%94%E4%BB%8B%E9%9D%A2.png) 初始狀態就已經包含了一些預設的屬性。 **※** 部分屬性顯示上鎖，這是因為這些屬性包含了不可變更且必要的資料內容。 [![1-新增屬性按鈕.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/c8snYTMW6TkVG90W-1-%E6%96%B0%E5%A2%9E%E5%B1%AC%E6%80%A7%E6%8C%89%E9%88%95.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/c8snYTMW6TkVG90W-1-%E6%96%B0%E5%A2%9E%E5%B1%AC%E6%80%A7%E6%8C%89%E9%88%95.png) 紅色框選處代表的是 新增屬性 的按鈕。 記得前面提到的，建立屬性之前請根據使用情境選擇適合的應用對象唷！ [![3-新增屬性設定.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/PCNOKkKS8npWplkW-3-%E6%96%B0%E5%A2%9E%E5%B1%AC%E6%80%A7%E8%A8%AD%E5%AE%9A.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/PCNOKkKS8npWplkW-3-%E6%96%B0%E5%A2%9E%E5%B1%AC%E6%80%A7%E8%A8%AD%E5%AE%9A.png) 點選 新增屬性 後會進來此介面。 [![4-新增屬性設定-更改建立的應用對象.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/DhLLfM925qLZHkPM-4-%E6%96%B0%E5%A2%9E%E5%B1%AC%E6%80%A7%E8%A8%AD%E5%AE%9A-%E6%9B%B4%E6%94%B9%E5%BB%BA%E7%AB%8B%E7%9A%84%E6%87%89%E7%94%A8%E5%B0%8D%E8%B1%A1.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/DhLLfM925qLZHkPM-4-%E6%96%B0%E5%A2%9E%E5%B1%AC%E6%80%A7%E8%A8%AD%E5%AE%9A-%E6%9B%B4%E6%94%B9%E5%BB%BA%E7%AB%8B%E7%9A%84%E6%87%89%E7%94%A8%E5%B0%8D%E8%B1%A1.png) 如果想要更改 應用對象 在這裡可以重新選擇。 [![5-新增屬性設定-設定屬性的中文名稱與英文名稱.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/iUbB8QQVTgftFIxf-5-%E6%96%B0%E5%A2%9E%E5%B1%AC%E6%80%A7%E8%A8%AD%E5%AE%9A-%E8%A8%AD%E5%AE%9A%E5%B1%AC%E6%80%A7%E7%9A%84%E4%B8%AD%E6%96%87%E5%90%8D%E7%A8%B1%E8%88%87%E8%8B%B1%E6%96%87%E5%90%8D%E7%A8%B1.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/iUbB8QQVTgftFIxf-5-%E6%96%B0%E5%A2%9E%E5%B1%AC%E6%80%A7%E8%A8%AD%E5%AE%9A-%E8%A8%AD%E5%AE%9A%E5%B1%AC%E6%80%A7%E7%9A%84%E4%B8%AD%E6%96%87%E5%90%8D%E7%A8%B1%E8%88%87%E8%8B%B1%E6%96%87%E5%90%8D%E7%A8%B1.png) 建立屬性需要給予中文以及英文名稱。 中文名稱主要目的是讓管理者容易理解屬性記錄何種資訊，因此命名建議要清楚易理解，避免日後忘記屬性的存在意義以及影響範圍。 英文名稱除了命名要清楚明瞭，長度也建議簡短，因為往後在流程編輯器使用到屬性會是以英文命名來進行相關操作，英文過長或命名涵義不明確，容易造成未來閱讀與維護上的困難。 [![6-新增屬性設定-設定屬性的型態.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/NPNnCnZ4uZo2qpfM-6-%E6%96%B0%E5%A2%9E%E5%B1%AC%E6%80%A7%E8%A8%AD%E5%AE%9A-%E8%A8%AD%E5%AE%9A%E5%B1%AC%E6%80%A7%E7%9A%84%E5%9E%8B%E6%85%8B.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/NPNnCnZ4uZo2qpfM-6-%E6%96%B0%E5%A2%9E%E5%B1%AC%E6%80%A7%E8%A8%AD%E5%AE%9A-%E8%A8%AD%E5%AE%9A%E5%B1%AC%E6%80%A7%E7%9A%84%E5%9E%8B%E6%85%8B.png) 請根據使用情境以及存放資料的類型選擇適合的屬性型態。 **※** 屬性型態若往後有更改種類，該屬性現有儲存的資料可能會遺失，因此請謹慎評估是否要進行型態的更動。 [![7-新增屬性設定-顯示位置設定.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/ksLJl8e4cN2ZQ8mC-7-%E6%96%B0%E5%A2%9E%E5%B1%AC%E6%80%A7%E8%A8%AD%E5%AE%9A-%E9%A1%AF%E7%A4%BA%E4%BD%8D%E7%BD%AE%E8%A8%AD%E5%AE%9A.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/ksLJl8e4cN2ZQ8mC-7-%E6%96%B0%E5%A2%9E%E5%B1%AC%E6%80%A7%E8%A8%AD%E5%AE%9A-%E9%A1%AF%E7%A4%BA%E4%BD%8D%E7%BD%AE%E8%A8%AD%E5%AE%9A.png) 設定該屬性在後台管理介面中是否顯示或隱藏。 舉例：如果只關閉 **顯示於列表**，管理介面中的好友清單列表不會顯示這個屬性欄位，但點選用戶進入詳細資料介面會顯示該屬性欄位；反之，若只關閉 **顯示詳細資料** 情況則相反。 [![8-新增屬性設定-屬性排序順序調整.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/Ssn6RThg3npGTCA3-8-%E6%96%B0%E5%A2%9E%E5%B1%AC%E6%80%A7%E8%A8%AD%E5%AE%9A-%E5%B1%AC%E6%80%A7%E6%8E%92%E5%BA%8F%E9%A0%86%E5%BA%8F%E8%AA%BF%E6%95%B4.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/Ssn6RThg3npGTCA3-8-%E6%96%B0%E5%A2%9E%E5%B1%AC%E6%80%A7%E8%A8%AD%E5%AE%9A-%E5%B1%AC%E6%80%A7%E6%8E%92%E5%BA%8F%E9%A0%86%E5%BA%8F%E8%AA%BF%E6%95%B4.png) 可以對屬性進行排序調整，方便日後尋找。 [![2-關鍵字搜尋屬性.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/t54Qh9dlKDj6gF2h-2-%E9%97%9C%E9%8D%B5%E5%AD%97%E6%90%9C%E5%B0%8B%E5%B1%AC%E6%80%A7.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/t54Qh9dlKDj6gF2h-2-%E9%97%9C%E9%8D%B5%E5%AD%97%E6%90%9C%E5%B0%8B%E5%B1%AC%E6%80%A7.png) 若屬性的總數相當龐大可能會很難尋找，這時候可以透過關鍵字搜尋找出在尋找的屬性。 # 圖像編輯器 若有重複使用訊息的需求，可以在 **圖像編輯器** 建立訊息範本，這些範本除了在 **圖像編輯器** 中可以統一管理維護，也可以在 **流程編輯器**、**1:1私訊**、**群發訊息** 重複使用。 - ##### **新增範本** [![0-介面.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/Tw5Q1B9gUnHgsLdA-0-%E4%BB%8B%E9%9D%A2.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/Tw5Q1B9gUnHgsLdA-0-%E4%BB%8B%E9%9D%A2.png) 初次進入圖像編輯器介面的畫面，尚無任何範本。 [![0-新增圖像範本-選擇類型.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/sQ9RnfUJhjlsIjhq-0-%E6%96%B0%E5%A2%9E%E5%9C%96%E5%83%8F%E7%AF%84%E6%9C%AC-%E9%81%B8%E6%93%87%E9%A1%9E%E5%9E%8B.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/sQ9RnfUJhjlsIjhq-0-%E6%96%B0%E5%A2%9E%E5%9C%96%E5%83%8F%E7%AF%84%E6%9C%AC-%E9%81%B8%E6%93%87%E9%A1%9E%E5%9E%8B.png) 選擇需要新增的範本類型。 [![1-新增卡片-輸入卡片名稱.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/yy1r7L9bNle7k2AP-1-%E6%96%B0%E5%A2%9E%E5%8D%A1%E7%89%87-%E8%BC%B8%E5%85%A5%E5%8D%A1%E7%89%87%E5%90%8D%E7%A8%B1.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/yy1r7L9bNle7k2AP-1-%E6%96%B0%E5%A2%9E%E5%8D%A1%E7%89%87-%E8%BC%B8%E5%85%A5%E5%8D%A1%E7%89%87%E5%90%8D%E7%A8%B1.png) 新增範本後需對範本命名，建議名稱要容易辨識好理解，日後若範本數量增加會比較容易維護管理。 [![2-新增卡片-建立完成.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/h3YfjNGHAQP7uYg3-2-%E6%96%B0%E5%A2%9E%E5%8D%A1%E7%89%87-%E5%BB%BA%E7%AB%8B%E5%AE%8C%E6%88%90.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/h3YfjNGHAQP7uYg3-2-%E6%96%B0%E5%A2%9E%E5%8D%A1%E7%89%87-%E5%BB%BA%E7%AB%8B%E5%AE%8C%E6%88%90.png) 成功建立範本，再來點選範本進行編輯。 關於編輯介面 - ##### **功能列** [![5_卡片範本介面-1_功能列.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/diCwR4ZkDtTD6GVJ-5_%E5%8D%A1%E7%89%87%E7%AF%84%E6%9C%AC%E4%BB%8B%E9%9D%A2-1_%E5%8A%9F%E8%83%BD%E5%88%97.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/diCwR4ZkDtTD6GVJ-5_%E5%8D%A1%E7%89%87%E7%AF%84%E6%9C%AC%E4%BB%8B%E9%9D%A2-1_%E5%8A%9F%E8%83%BD%E5%88%97.png)上方功能列由左至右依序是： 1. 範本名稱： 點選後可以重新命名。 2. 圖層尺寸： 顯示範本的圖層尺寸。以卡片範本為例，圖層尺寸為固定值不可更改。 3. 開啟檔案： 點選後回到圖像編輯器的範本清單。 4. 建立副本： 對範本建立副本，要建立副本前必須先進行儲存。 5. 編輯： 點選後可以對範本內容進行編輯，不同種類的範本組成結構略有不同。 6. 資源： 點選後可以建立 **輸入參數**，透過 **輸入參數** 來接收外部導入的資料並使用，藉由這種方式可以提高範本的應用範圍。操作方式與相關應用會在後續介紹中說明。 7. 儲存： 儲存目前範本的內容。 - ##### **範本結構** **[![5_卡片範本介面-3_範本架構.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/RycigypDU87DiwHS-5_%E5%8D%A1%E7%89%87%E7%AF%84%E6%9C%AC%E4%BB%8B%E9%9D%A2-3_%E7%AF%84%E6%9C%AC%E6%9E%B6%E6%A7%8B.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/RycigypDU87DiwHS-5_%E5%8D%A1%E7%89%87%E7%AF%84%E6%9C%AC%E4%BB%8B%E9%9D%A2-3_%E7%AF%84%E6%9C%AC%E6%9E%B6%E6%A7%8B.png)**選擇 **編輯** 頁籤後可以看到範本結構： 1. 圖層： 每種範本訊息都包含圖層。 圖層的範圍等於灰白方格的範圍，在範本結構中擁有高彈性，可以依需求自行設計需要的版型樣式！ 資源建立的 **輸入參數** 可以在這裡代入使用。 2. 卡片（卡片範本專屬）： 可以設定儲存格式、靜態／動態、標題、內文以及替代文字。 靜態／動態：使用資源導入的外部資料若會隨時間動態改變，請勾選啟用動態；反之，請維持靜態設定。 替代文字：接收到此範本的訊息時，要顯示的提示文字。 資源建立的 **輸入參數** 可以在這裡代入使用。 3. 按鈕（卡片範本專屬）： 按鈕類型可以根據需求選擇說話或網址。 說話是指替使用者說一句話，網址則是開啟瀏覽器瀏覽網址內容。 資源建立的 **輸入參數** 可以在這裡代入使用。 4. 海報（海報範本專屬）： 可以設定儲存格式、靜態／動態、替代文字。 資源建立的 **輸入參數** 可以在這裡代入使用。 5. 圖片（圖片範本專屬）： 可以設定儲存格式、靜態／動態、替代文字。 資源建立的 **輸入參數** 可以在這裡代入使用。 - ##### **工具列** [![5_卡片範本介面-2_工具列.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/Zg9Uwmbei9ZlQhDy-5_%E5%8D%A1%E7%89%87%E7%AF%84%E6%9C%AC%E4%BB%8B%E9%9D%A2-2_%E5%B7%A5%E5%85%B7%E5%88%97.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/Zg9Uwmbei9ZlQhDy-5_%E5%8D%A1%E7%89%87%E7%AF%84%E6%9C%AC%E4%BB%8B%E9%9D%A2-2_%E5%B7%A5%E5%85%B7%E5%88%97.png) 點選左側小圖示可以切換對應的功能，由上往下依序是： 1. 移動： 透過此工具可以選擇與拖曳圖層。 2. 文字： 在範本圖層中以拖拉方式建立。 文字圖層中可以直接輸入文字，或是使用資源建立的 **輸入參數**，透過 **輸入參數** 取得外部導入的文字資料。 3. 圖片： 在範本圖層中以拖拉方式建立。 圖片圖層可以上傳本地圖片檔、使用公開的圖片網址，或是透過資源建立的 **輸入參數** 取得外部導入的圖片網址。 4. 矩形： 在範本圖層中以拖拉方式建立。 矩形圖層可以設定顏色、透明度、圓角、邊框、陰影。 5. 圓形： 在範本圖層中以拖拉方式建立。 圓形圖層可以設定顏色、透明度、邊框、陰影。 6. 圖表： 在範本圖層中以拖拉方式建立。 圖表圖層可以設定多種類型的圖表，折線圖、圓餅圖、柱狀圖......等等都可以繪製， 因為可以設定的欄位較多，因此僅列出幾個最重要的欄位項目先進行介紹， 其餘可參考 [圖像編輯器 - 圖表工具使用案例](http://book.gosu.bar/books/%E5%9C%96%E5%83%8F%E7%B7%A8%E8%BC%AF%E5%99%A8---%E5%9C%96%E8%A1%A8%E5%B7%A5%E5%85%B7%E4%BD%BF%E7%94%A8%E6%A1%88%E4%BE%8B) 會有較完整的說明，有提供作出特定種類圖表的作法供參考。 [![9_圖表介紹.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/YK5CZhoYAqtE01bU-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/YK5CZhoYAqtE01bU-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9.png) 以圖片範本為例，點選 **圖表** 拖拉建立一個圖表圖層，並在 **基本屬性** 中設定將圖層稱滿整個範本範圍。 [![9_圖表介紹-2.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/omrxQozt19rfyj0B-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-2.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/omrxQozt19rfyj0B-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-2.png) 展開圖表，其中有 **資料、內距** 等欄位可以設定。 **資料** 的格式必須是一個 **物件陣列**，建立不同種類的圖表資料內容也會略有差異，但大致上的格式會像是下列這個樣子： **\[** **{ 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 }** **\]** 從上面的資料可以理解不同年份對應著不同的值，接著以這筆資料示範如何產出 **基礎折線圖**。 [![9_圖表介紹-3-帶入資料.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/KKVYsGrFrckQM7bS-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-3-%E5%B8%B6%E5%85%A5%E8%B3%87%E6%96%99.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/KKVYsGrFrckQM7bS-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-3-%E5%B8%B6%E5%85%A5%E8%B3%87%E6%96%99.png) 直接將 **資料** 填入圖表的資料欄位中。 接著設定 **內距**，內距顧名思義是指**距離內部的距離**，內距可以直接填上４個數值，數值由左至右依序對應到上、右、下、左這四個方向的距離（單位**px**），與網頁 CSS 的 padding 是一樣的設定方式。 [![9_圖表介紹-4-內距設定.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/n0ajpVvqTIjN9qvH-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-4-%E5%85%A7%E8%B7%9D%E8%A8%AD%E5%AE%9A.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/n0ajpVvqTIjN9qvH-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-4-%E5%85%A7%E8%B7%9D%E8%A8%AD%E5%AE%9A.png) 由於示範的圖表是 **基礎折線圖**，X、Y軸 的資訊會需要占用較多的內部空間，所以內距就設多一點， 因此設定：**40,20,50,50** [![9_圖表介紹-5-比例尺新增Scale.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/tLjxYiKhrrgnjouv-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-5-%E6%AF%94%E4%BE%8B%E5%B0%BA%E6%96%B0%E5%A2%9EScale.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/tLjxYiKhrrgnjouv-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-5-%E6%AF%94%E4%BE%8B%E5%B0%BA%E6%96%B0%E5%A2%9EScale.png) 接著建立 X、Y軸 的 **比例尺 Scale**，點選 新增 Scale。 [![9_圖表介紹-6-X軸對應的欄位是year.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/KLWBjEkv9HavQP7T-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-6-X%E8%BB%B8%E5%B0%8D%E6%87%89%E7%9A%84%E6%AC%84%E4%BD%8D%E6%98%AFyear.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/KLWBjEkv9HavQP7T-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-6-X%E8%BB%B8%E5%B0%8D%E6%87%89%E7%9A%84%E6%AC%84%E4%BD%8D%E6%98%AFyear.png) 先建立 **Year 比例尺（ X軸 ）**，因為 X軸 對應到的欄位是資料中的 year，請在欄位輸入 year。 [![9_圖表介紹-7-類型請選擇linear.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/x2sSqHIgoaKii8gG-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-7-%E9%A1%9E%E5%9E%8B%E8%AB%8B%E9%81%B8%E6%93%87linear.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/x2sSqHIgoaKii8gG-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-7-%E9%A1%9E%E5%9E%8B%E8%AB%8B%E9%81%B8%E6%93%87linear.png) 類型選擇 linear。 [![9_圖表介紹-8-設定刻度距離.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/Dpcc0y4qJrXPt6Or-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-8-%E8%A8%AD%E5%AE%9A%E5%88%BB%E5%BA%A6%E8%B7%9D%E9%9B%A2.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/Dpcc0y4qJrXPt6Or-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-8-%E8%A8%AD%E5%AE%9A%E5%88%BB%E5%BA%A6%E8%B7%9D%E9%9B%A2.png) 以這份資料來說， X軸 的 1 個刻度表示 1 年即可，所以 **刻度間距** 請設定為 1。 開啟 **優化數據範圍**，開啟後圖表繪製時會適度調整留白增加易讀性，可根據情況自行調整。 [![9_圖表介紹-9-Y軸-value-設定欄位.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/hPhPml0B5a6QIBaZ-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-9-Y%E8%BB%B8-value-%E8%A8%AD%E5%AE%9A%E6%AC%84%E4%BD%8D.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/hPhPml0B5a6QIBaZ-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-9-Y%E8%BB%B8-value-%E8%A8%AD%E5%AE%9A%E6%AC%84%E4%BD%8D.png) 再來新增 **value 比例尺（Y軸）**，作法同 X軸，因為是對應資料中的 value 因此欄位填上 value；類型一樣是 linear。 [![9_圖表介紹-10-刻度.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/oGnMvhTO2txRkSuB-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-10-%E5%88%BB%E5%BA%A6.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/oGnMvhTO2txRkSuB-9_%E5%9C%96%E8%A1%A8%E4%BB%8B%E7%B4%B9-10-%E5%88%BB%E5%BA%A6.png) 刻度在這次範例中一樣以 1 為單位即可，並開啟 優化數據範圍。 另外因為資料中的 **value** 值已經知道最小至最大的範圍，所以可以直接設定 最小值 與 最大值。 接著是設定圖表中最重要圖表本身**（圖 Geom）**，構成 **基礎折線圖** 的元素有二，分別是點與線，點跟線需要分開進行繪製。 [![圖表-設定1.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/y5Kh9EgnSqUc19CC-%E5%9C%96%E8%A1%A8-%E8%A8%AD%E5%AE%9A1.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/y5Kh9EgnSqUc19CC-%E5%9C%96%E8%A1%A8-%E8%A8%AD%E5%AE%9A1.png) 首先先來繪製線的部分。請點選 新增 Geom。 [![圖表-設定3.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/nmMjB33cnFLlXfbU-%E5%9C%96%E8%A1%A8-%E8%A8%AD%E5%AE%9A3.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/nmMjB33cnFLlXfbU-%E5%9C%96%E8%A1%A8-%E8%A8%AD%E5%AE%9A3.png) 欄位請填上 **year\*value**，類型選擇 **線圖**，此設定是指以線條的方式，依據資料中 year 對應的 value 去繪製出線條。 [![圖表-設定4.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/SsvTVCzObSHeuRCp-%E5%9C%96%E8%A1%A8-%E8%A8%AD%E5%AE%9A4.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/SsvTVCzObSHeuRCp-%E5%9C%96%E8%A1%A8-%E8%A8%AD%E5%AE%9A4.png) 設定 **Margin Ratio** 值為 1。這樣 **線條部分** 就被繪製好囉！ 接著是繪製點的部分。 接下來示範一些範本應用的例子。 - ##### **示範－卡片範本** - 情境： 已經取得一份用戶資料的清單，將發送給名單內的所有用戶一張卡片，這張卡片的圖片就是用戶本人的頭像，標題是用戶的暱稱，內文是固定的文字「我愛 GOSU BAR！」，並且有2個說話類型的按鈕，其中 按鈕2 的內容要透過外部代入文字資料。 從以上需求中可以得知 **用戶頭像、用戶暱稱、按鈕2的內容** 這三個資料需要經由外部導入取得，我們可以建立三個 **輸入參數** 分別對應這三個要導入的資料。大多數情境會以一個參數對應一個外部資料的方式取得外部資料，會比較好理解與維護。 **輸入參數** 本身是由 **key、中文名稱、預設值** 所組成，其中 **key** 的值只能以 **英文+數字** 命名。 在圖像編輯器中若要取得外部傳入 **輸入參數** 的資料，請以 **${prop.KEYNAME}** 的方式取得。 [![7_示範卡片教學.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/j2EGAoM7saaaUxQB-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/j2EGAoM7saaaUxQB-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8.png) 理解上述概念後，就來開始新增 **輸入參數** 吧！ [![7_示範卡片教學-1.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/MIJVEkRnubGBtAKo-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-1.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/MIJVEkRnubGBtAKo-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-1.png) 首先先建立提供給 按鈕2 使用的參數，為了方便未來管理維護，參數 **key** 直接命名為 **btn2。 [![7_示範卡片教學-2.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/Av9Qx32mkTOsp8At-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-2.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/Av9Qx32mkTOsp8At-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-2.png)** 中文名稱命名為 按鈕2 。 [![7_示範卡片教學-3.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/aQiyFH08gedHKr2z-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-3.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/aQiyFH08gedHKr2z-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-3.png) 參數預設值因為只是示範，故隨意命名即可（示意圖中命名為「我是 **btn2** 的預設值」），實際應用時則依照使用情境給予最適合的預設值。 [![7_示範卡片教學-4.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/dKcZhCTHCfJ06GcA-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-4.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/dKcZhCTHCfJ06GcA-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-4.png) 新增完成的 輸入參數會顯示於此。若要更改名稱或是預設值，可以點選 筆的小圖示 進行編輯。 [![7_示範卡片教學-5.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/ewanrHTQ4jhc2WIa-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-5.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/ewanrHTQ4jhc2WIa-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-5.png) 以同樣方式再另外建立 **key** 為 **picture** 與 **key** 為 **name** 的 輸入參數，分別對應 用戶頭像 與 用戶暱稱。 註1： 用戶頭像的預設值一般來說就是要作為預設頭像使用，因此需要輸入的是預設圖片的網址。網址可以透過一些上傳圖片的服務取得，記得網址須對外公開才能讀取到圖片唷。 註2： 做完任何改動後，請記得養成儲存的好習慣！ [![7_示範卡片教學-6-2.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/vRB88N6DI0BrVgsz-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-6-2.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/vRB88N6DI0BrVgsz-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-6-2.png) 接著回到 編輯 ，開始設定卡片範本的內容吧！ [![7_示範卡片教學-9座標系.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/9U8xIH6p2tR8U6BX-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-9%E5%BA%A7%E6%A8%99%E7%B3%BB.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/9U8xIH6p2tR8U6BX-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-9%E5%BA%A7%E6%A8%99%E7%B3%BB.png) 在 **GOSU BAR** 的圖層中都是以 直角座標系 的方式決定圖層內容的位置。 [![7_示範卡片教學-7.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/UGpEk1ttKtL0qpED-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-7.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/UGpEk1ttKtL0qpED-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-7.png) 先點選小工具的圖片，準備建立圖片圖層來存放用戶頭像。 [![7_示範卡片教學-8-新增圖層.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/u5USaXUZ8RC8j9GV-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-8-%E6%96%B0%E5%A2%9E%E5%9C%96%E5%B1%A4.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/u5USaXUZ8RC8j9GV-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-8-%E6%96%B0%E5%A2%9E%E5%9C%96%E5%B1%A4.png) 透過拖拉方式建立出一個圖片圖層，可以看到在右側範本結構的圖層中多出了「圖片圖層1」。 [![7_示範卡片教學-10圖層結構.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/V4Ked3w2U90fZvAu-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-10%E5%9C%96%E5%B1%A4%E7%B5%90%E6%A7%8B.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/V4Ked3w2U90fZvAu-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-10%E5%9C%96%E5%B1%A4%E7%B5%90%E6%A7%8B.png) 點選「圖片圖層1」，這時右邊的範本結構變成圖層結構，包含：圖層、圖片、基本屬性、邊框、陰影。 [![7_示範卡片教學-10-2.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/V7YVPLVk7xkEdh2g-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-10-2.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/V7YVPLVk7xkEdh2g-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-10-2.png) 展開圖片（紅色框選處），可以上傳本地圖片檔案、使用公開的圖片網址，或是直接設定 **輸入參數** 接收外部傳入的資料內容。也可以設定圖片圖層的裁切方式（填滿、符合大小、擴展、置中、並列）。 [![7_示範卡片教學-12-圖片網址代入輸入參數.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/ePmqE7MFoeW2SZpm-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-12-%E5%9C%96%E7%89%87%E7%B6%B2%E5%9D%80%E4%BB%A3%E5%85%A5%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/ePmqE7MFoeW2SZpm-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-12-%E5%9C%96%E7%89%87%E7%B6%B2%E5%9D%80%E4%BB%A3%E5%85%A5%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8.png) 請點選框選處的「撰寫一小段程式碼」，因為範例目的是讓卡片的圖是收到卡片的用戶頭像，所以圖片網址要使用 **輸入參數** **${prop.picture}**，才能透過這個參數接收外部傳入的用戶頭像。 [![7_示範卡片教學-13-輸入參數.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/VDSOHMX0XWFYZmQ0-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-13-%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/VDSOHMX0XWFYZmQ0-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-13-%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8.png) 在展開的介面中輸入「**${prop.picture}**」，輸入完畢後點選外圍空白處離開輸入介面。 [![7_示範卡片教學-13-輸入參數2.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/v0l0jFUmGEE4lzek-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-13-%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B82.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/v0l0jFUmGEE4lzek-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-13-%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B82.png) 凡是有使用程式碼或使用 **輸入參數**，設定欄位就會變成紅色框選處的樣子。 [![7_示範卡片教學-11基本屬性更改寬高.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/ddgC2p4Fn0OMUoxe-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-11%E5%9F%BA%E6%9C%AC%E5%B1%AC%E6%80%A7%E6%9B%B4%E6%94%B9%E5%AF%AC%E9%AB%98.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/ddgC2p4Fn0OMUoxe-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-11%E5%9F%BA%E6%9C%AC%E5%B1%AC%E6%80%A7%E6%9B%B4%E6%94%B9%E5%AF%AC%E9%AB%98.png) 基本屬性：可以設定圖層的座標位置、寬度、高度、旋轉角度、背景色、不透明度。 先將圖片填滿圖層範圍，可以使用移動工具直接拖曳圖片的位置與尺寸，或是直接輸入參數值進行設定。 為了將建立的 圖片圖層１ 填滿整個範圍，請將X、Y軸座標設為0，寬度450，高度300。 [![7_示範卡片教學-10-3.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/mGTg84xTIdzxKUQc-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-10-3.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/mGTg84xTIdzxKUQc-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-10-3.png) 邊框：可以設定邊框樣式（實線、虛線）、樣式寬度、顏色。此範例不需要進行設定。 [![7_示範卡片教學-10-4.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/ACLWBOzQeVWWc7tP-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-10-4.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/ACLWBOzQeVWWc7tP-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-10-4.png) 陰影：可以設定X、Y軸的偏移量、模糊、顏色。此範例不需要進行設定。 [![7_示範卡片教學-14-卡片標題.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/Ri3zveZFhEdGRQ6R-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-14-%E5%8D%A1%E7%89%87%E6%A8%99%E9%A1%8C.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/Ri3zveZFhEdGRQ6R-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-14-%E5%8D%A1%E7%89%87%E6%A8%99%E9%A1%8C.png) 再來是設定卡片標題。 點選畫面空白處切回範本結構並選擇卡片，標題內容一樣使用 **輸入參數** 接收外部的資料。 [![7_示範卡片教學-15-卡片標題.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/yXMajVPYf4enenkA-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-15-%E5%8D%A1%E7%89%87%E6%A8%99%E9%A1%8C.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/yXMajVPYf4enenkA-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-15-%E5%8D%A1%E7%89%87%E6%A8%99%E9%A1%8C.png)輸入「**${prop.name}**」。 [![7_示範卡片教學-16.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/Gv09J6uAyt53u1Ne-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-16.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/Gv09J6uAyt53u1Ne-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-16.png) 透過即時預覽可以發現 **輸入參數** 的標題內容，變成 **輸入參數 name** 當初設定的預設值了！ （示意圖中設定的預設值為「用戶暱稱預設值」） [![7_示範卡片教學-17.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/cEht2BXixUl9g8S7-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-17.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/cEht2BXixUl9g8S7-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-17.png) 內文直接設定為「我愛 GOSU BAR！」，一樣透過即時預覽可以看出內容變化。 [![7_示範卡片教學-18.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/af0wVZyXmKhMHFQk-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-18.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/af0wVZyXmKhMHFQk-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-18.png) 設定替代文字，當用戶收到這則範本訊息時，會出現的替代文字內容。 （範例中輸入「用戶專屬卡片！」） [![7_示範卡片教學-19-儲存格是.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/1VFGU4euRN1u4CLF-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-19-%E5%84%B2%E5%AD%98%E6%A0%BC%E6%98%AF.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/1VFGU4euRN1u4CLF-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-19-%E5%84%B2%E5%AD%98%E6%A0%BC%E6%98%AF.png) 由於圖片並不需要保留透明度，所以儲存格式選擇 **jpg** 格式儲存。 [![7_示範卡片教學-20-btn1.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/v9hHdEevm9592hn0-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-20-btn1.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/v9hHdEevm9592hn0-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-20-btn1.png) 按鈕1 的設定因為在練習，直接使用預設值即可。 [![7_示範卡片教學-20-btn2.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/84kVu7Bgg3dvLU19-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-20-btn2.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/84kVu7Bgg3dvLU19-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-20-btn2.png) 按鈕2 要使用 **輸入參數 btn2** 接收外部傳入的資料。 [![7_示範卡片教學-21.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/gDA4k4ipuuHMD9uL-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-21.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/gDA4k4ipuuHMD9uL-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-21.png) 在按鈕文字以及訊息內容中都輸入「**${prop.btn2}**」。 [![7_示範卡片教學-22.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/A5rceJfmSpJRiTHC-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-22.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/A5rceJfmSpJRiTHC-7_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-22.png) 設定好即時預覽就會出現當初設定的預設值囉。記得做完設定後要儲存唷！ 以上是此應用情境在 圖像編輯器 需要做的部分，剩下的就是要在 流程編輯器 中透過 for 迴圈的方式，將取得的用戶資料一筆一筆的代入至此範本卡片，這樣經由 for 迴圈發送出去的範本卡片內容，就會是每一位用戶自己的資料了！ - ##### **示範－海報範本** - 情境： 針對特定活動或是節日發送用戶專屬的海報形式賀卡，訊息包含一張背景圖，圖中預留位置可以放入用戶頭像，海報下方有按鈕可以開啟活動相關的介紹網站。 從情境可以得知，用戶頭像需要透過 **輸入參數** 從外部傳入資料，至於按鈕的網址根據需求可以自行決定要以彈性、外部傳入資料的方式，或是非彈性直接輸入固定的網址。在這一次練習中就只建立用戶頭像的 **輸入參數** 即可。 [![8_示範卡片教學-1-海報.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/yMUF0SMHFM4ez7WC-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-1-%E6%B5%B7%E5%A0%B1.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/yMUF0SMHFM4ez7WC-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-1-%E6%B5%B7%E5%A0%B1.png) 進入剛建立好的海報範本。 [![8_示範卡片教學-1-海報高度不調整.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/6yn7fmFKXgHSFohN-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-1-%E6%B5%B7%E5%A0%B1%E9%AB%98%E5%BA%A6%E4%B8%8D%E8%AA%BF%E6%95%B4.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/6yn7fmFKXgHSFohN-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-1-%E6%B5%B7%E5%A0%B1%E9%AB%98%E5%BA%A6%E4%B8%8D%E8%AA%BF%E6%95%B4.png) 海報的尺寸寬度不可更改固定1040（px），高度可根據需求進行調整。在此練習高度維持預設值即可。 [![8_示範卡片教學-2-資源.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/1yE0eiCxFrIkS6ys-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-2-%E8%B3%87%E6%BA%90.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/1yE0eiCxFrIkS6ys-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-2-%E8%B3%87%E6%BA%90.png) 先點開資源建立 **輸入參數 picture**。 [![8_示範卡片教學-2-建立圖片圖層並上傳賀卡背景圖.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/ZxagiKZHZVQXbcj5-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-2-%E5%BB%BA%E7%AB%8B%E5%9C%96%E7%89%87%E5%9C%96%E5%B1%A4%E4%B8%A6%E4%B8%8A%E5%82%B3%E8%B3%80%E5%8D%A1%E8%83%8C%E6%99%AF%E5%9C%96.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/ZxagiKZHZVQXbcj5-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-2-%E5%BB%BA%E7%AB%8B%E5%9C%96%E7%89%87%E5%9C%96%E5%B1%A4%E4%B8%A6%E4%B8%8A%E5%82%B3%E8%B3%80%E5%8D%A1%E8%83%8C%E6%99%AF%E5%9C%96.png) 切回編輯，以拖拉方式建立一個圖片圖層，在圖片網址上傳賀卡背景圖。 [![8_示範卡片教學-3-填滿海報範圍.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/0R8oEB0In1n3WeUP-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-3-%E5%A1%AB%E6%BB%BF%E6%B5%B7%E5%A0%B1%E7%AF%84%E5%9C%8D.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/0R8oEB0In1n3WeUP-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-3-%E5%A1%AB%E6%BB%BF%E6%B5%B7%E5%A0%B1%E7%AF%84%E5%9C%8D.png) 將圖層填滿整張海報範圍，直接在基本屬性中設定參數，X、Y座標皆為0，寬度、高度皆為1040，圖層尺寸就會填滿整張海報囉。 [![8_示範卡片教學-4-建立圖層for用戶頭像.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/U0GdhCqf5SYFIdsN-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-4-%E5%BB%BA%E7%AB%8B%E5%9C%96%E5%B1%A4for%E7%94%A8%E6%88%B6%E9%A0%AD%E5%83%8F.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/U0GdhCqf5SYFIdsN-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-4-%E5%BB%BA%E7%AB%8B%E5%9C%96%E5%B1%A4for%E7%94%A8%E6%88%B6%E9%A0%AD%E5%83%8F.png) 再建立一個圖片圖層，這個圖層會使用 **輸入參數 picture** 來接收外部傳入的用戶頭像。 [![8_示範卡片教學-5-圖層順序調整後，用戶頭像被遮蔽.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/me2Ccj5L5qqPCoTA-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-5-%E5%9C%96%E5%B1%A4%E9%A0%86%E5%BA%8F%E8%AA%BF%E6%95%B4%E5%BE%8C%EF%BC%8C%E7%94%A8%E6%88%B6%E9%A0%AD%E5%83%8F%E8%A2%AB%E9%81%AE%E8%94%BD.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/me2Ccj5L5qqPCoTA-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-5-%E5%9C%96%E5%B1%A4%E9%A0%86%E5%BA%8F%E8%AA%BF%E6%95%B4%E5%BE%8C%EF%BC%8C%E7%94%A8%E6%88%B6%E9%A0%AD%E5%83%8F%E8%A2%AB%E9%81%AE%E8%94%BD.png) 用戶頭像應該要放在背景圖底下（後面）才不會遮住背景圖，但當我們將圖層移動順序後會發現，用戶頭像的圖層整個被覆蓋住。 [![8_示範卡片教學-6-點選背景圖圖層，點開背景調整顏色。.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/UdFdY9QHCpcLKhN2-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-6-%E9%BB%9E%E9%81%B8%E8%83%8C%E6%99%AF%E5%9C%96%E5%9C%96%E5%B1%A4%EF%BC%8C%E9%BB%9E%E9%96%8B%E8%83%8C%E6%99%AF%E8%AA%BF%E6%95%B4%E9%A1%8F%E8%89%B2%E3%80%82.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/UdFdY9QHCpcLKhN2-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-6-%E9%BB%9E%E9%81%B8%E8%83%8C%E6%99%AF%E5%9C%96%E5%9C%96%E5%B1%A4%EF%BC%8C%E9%BB%9E%E9%96%8B%E8%83%8C%E6%99%AF%E8%AA%BF%E6%95%B4%E9%A1%8F%E8%89%B2%E3%80%82.png) 這是因為背景圖的圖層沒有調整背景顏色的設定，點選背景圖的圖層，並在基本設定中點開背景調整顏色。 [![8_示範卡片教學-6-調整透明度為0.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/ayOybZcEUlbDJubV-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-6-%E8%AA%BF%E6%95%B4%E9%80%8F%E6%98%8E%E5%BA%A6%E7%82%BA0.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/ayOybZcEUlbDJubV-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-6-%E8%AA%BF%E6%95%B4%E9%80%8F%E6%98%8E%E5%BA%A6%E7%82%BA0.png) 調整透明度為0，記得按下確定進行更改。 [![8_示範卡片教學-7-調整後用戶頭像不再被遮蔽.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/QvWq2qp3qfVBT4rT-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-7-%E8%AA%BF%E6%95%B4%E5%BE%8C%E7%94%A8%E6%88%B6%E9%A0%AD%E5%83%8F%E4%B8%8D%E5%86%8D%E8%A2%AB%E9%81%AE%E8%94%BD.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/QvWq2qp3qfVBT4rT-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-7-%E8%AA%BF%E6%95%B4%E5%BE%8C%E7%94%A8%E6%88%B6%E9%A0%AD%E5%83%8F%E4%B8%8D%E5%86%8D%E8%A2%AB%E9%81%AE%E8%94%BD.png) 背景圖層的背景變為透明後，原本圖片預留透明的範圍就露出來囉！ [![8_示範卡片教學-8-使用輸入參數取代用戶頭像資料.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/abENT522ujhVjxYJ-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-8-%E4%BD%BF%E7%94%A8%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E5%8F%96%E4%BB%A3%E7%94%A8%E6%88%B6%E9%A0%AD%E5%83%8F%E8%B3%87%E6%96%99.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/abENT522ujhVjxYJ-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-8-%E4%BD%BF%E7%94%A8%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E5%8F%96%E4%BB%A3%E7%94%A8%E6%88%B6%E9%A0%AD%E5%83%8F%E8%B3%87%E6%96%99.png) [![8_示範卡片教學-9-輸入參數的key值.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/3eSD7vyYicOh8HuL-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-9-%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E7%9A%84key%E5%80%BC.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/3eSD7vyYicOh8HuL-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-9-%E8%BC%B8%E5%85%A5%E5%8F%83%E6%95%B8%E7%9A%84key%E5%80%BC.png) 在來回到用戶圖層進行設定，點選框選處更改圖片網址，輸入 **${prop.picture}** 以接收外部傳入的資料。 [![8_示範卡片教學-11-建立文字圖層.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/zaHXXuZOb13jmm6E-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-11-%E5%BB%BA%E7%AB%8B%E6%96%87%E5%AD%97%E5%9C%96%E5%B1%A4.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/zaHXXuZOb13jmm6E-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-11-%E5%BB%BA%E7%AB%8B%E6%96%87%E5%AD%97%E5%9C%96%E5%B1%A4.png) 目前還缺少一個按鈕，請使用文字工具建立一個文字圖層。 [![8_示範卡片教學-12-文字圖層調整內容.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/SV7Bo6Vg9Mt4Xihd-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-12-%E6%96%87%E5%AD%97%E5%9C%96%E5%B1%A4%E8%AA%BF%E6%95%B4%E5%85%A7%E5%AE%B9.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/SV7Bo6Vg9Mt4Xihd-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-12-%E6%96%87%E5%AD%97%E5%9C%96%E5%B1%A4%E8%AA%BF%E6%95%B4%E5%85%A7%E5%AE%B9.png) 先將文字圖層的外觀進行調整，讓它看起來更像一個按鈕。 首先先設定按鈕名稱，命名為「活動參加辦法」，粗細設定為「粗體」，並對水平對齊與垂直對齊都設定為「置中」。 [![8_示範卡片教學-13-改變底色.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/lxs8gkO7Ya4MzXah-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-13-%E6%94%B9%E8%AE%8A%E5%BA%95%E8%89%B2.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/lxs8gkO7Ya4MzXah-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-13-%E6%94%B9%E8%AE%8A%E5%BA%95%E8%89%B2.png) 在基本設定中更改背景顏色（底色）。 [![8_示範卡片教學-14-點擊行為設定.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/UqnzWHwbMPGuGoni-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-14-%E9%BB%9E%E6%93%8A%E8%A1%8C%E7%82%BA%E8%A8%AD%E5%AE%9A.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/UqnzWHwbMPGuGoni-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-14-%E9%BB%9E%E6%93%8A%E8%A1%8C%E7%82%BA%E8%A8%AD%E5%AE%9A.png) 在點擊行為中設定為連結，並輸入連結網址。因為是練習在此就輸入 **GOSU BAR 官網（[https://www.gosu.bar/home](https://www.gosu.bar/home)）**。 [![8_示範卡片教學-15-邊框設定.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/oQEMmtl1kSHBRMrc-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-15-%E9%82%8A%E6%A1%86%E8%A8%AD%E5%AE%9A.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/oQEMmtl1kSHBRMrc-8_%E7%A4%BA%E7%AF%84%E5%8D%A1%E7%89%87%E6%95%99%E5%AD%B8-15-%E9%82%8A%E6%A1%86%E8%A8%AD%E5%AE%9A.png) 邊框也進行調整，樣式選擇「實線」，寬度設定「20」，設定邊框「顏色」，讓文字區塊更像一個按鈕。 設定完成後記得儲存範本。 以上是這個應用情境在 圖像編輯器 中範本要進行的設定，而在 流程編輯器 中則是使用 for 迴圈的方式，將要發送訊息的用戶頭像資料一筆一筆分別傳入範本，這樣每一比發送的範本訊息內容就會是用戶的頭像囉！ # 優惠券 如果有要發送贈品或是中獎訊息的需求，使用優惠券系統是一個不錯的選項。 [![0_介面.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/intmM7UTzhAMBLuu-0_%E4%BB%8B%E9%9D%A2.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/intmM7UTzhAMBLuu-0_%E4%BB%8B%E9%9D%A2.png)初次進入優惠券介面會是這個樣子。 [![1_建立優惠券.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/cqixD6p0P9MG9Jzx-1_%E5%BB%BA%E7%AB%8B%E5%84%AA%E6%83%A0%E5%88%B8.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/cqixD6p0P9MG9Jzx-1_%E5%BB%BA%E7%AB%8B%E5%84%AA%E6%83%A0%E5%88%B8.png) 點選建立優惠券按鈕來新建優惠券。 [![2_建立介面.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/0ln0ZMpRRUvU5KUl-2_%E5%BB%BA%E7%AB%8B%E4%BB%8B%E9%9D%A2.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/0ln0ZMpRRUvU5KUl-2_%E5%BB%BA%E7%AB%8B%E4%BB%8B%E9%9D%A2.png) 進入到優惠券的設定介面。 介面的右邊是收到優惠券訊息的預覽畫面。 [![3_上傳圖片.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/9jocmT6wbufGePSA-3_%E4%B8%8A%E5%82%B3%E5%9C%96%E7%89%87.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/9jocmT6wbufGePSA-3_%E4%B8%8A%E5%82%B3%E5%9C%96%E7%89%87.png) 先來上傳優惠券的圖片吧！ [![4_優惠券類型.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/Txy5AZ2xYyx3Fk91-4_%E5%84%AA%E6%83%A0%E5%88%B8%E9%A1%9E%E5%9E%8B.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/Txy5AZ2xYyx3Fk91-4_%E5%84%AA%E6%83%A0%E5%88%B8%E9%A1%9E%E5%9E%8B.png) 根據使用需求選擇適合的優惠券類型，如果是當作中獎通知使用的訊息，優惠券類型可以選擇贈品。 [![5_優惠券標題.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/tyid4f4UD2NSobRh-5_%E5%84%AA%E6%83%A0%E5%88%B8%E6%A8%99%E9%A1%8C.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/tyid4f4UD2NSobRh-5_%E5%84%AA%E6%83%A0%E5%88%B8%E6%A8%99%E9%A1%8C.png) 設定優惠券標題文字，文字長度限13個字以內。 [![6_優惠券活動時間.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/hVHFooRKgJA6fPvN-6_%E5%84%AA%E6%83%A0%E5%88%B8%E6%B4%BB%E5%8B%95%E6%99%82%E9%96%93.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/hVHFooRKgJA6fPvN-6_%E5%84%AA%E6%83%A0%E5%88%B8%E6%B4%BB%E5%8B%95%E6%99%82%E9%96%93.png) 設定優惠券的開始與結束時間，若超過設定的時間，用戶將無法使用該優惠券。 [![7_優惠券使用說明.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/lYPvGT6C2LH48o6N-7_%E5%84%AA%E6%83%A0%E5%88%B8%E4%BD%BF%E7%94%A8%E8%AA%AA%E6%98%8E.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/lYPvGT6C2LH48o6N-7_%E5%84%AA%E6%83%A0%E5%88%B8%E4%BD%BF%E7%94%A8%E8%AA%AA%E6%98%8E.png) 設定優惠券使用說明敘述，例如： 使用限制。 清楚的說明規則才能有效避免爭議發生。 字數上限 255 字。 [![8_領取優惠券的關鍵字.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/rAC4cxPk5Ayj1W8L-8_%E9%A0%98%E5%8F%96%E5%84%AA%E6%83%A0%E5%88%B8%E7%9A%84%E9%97%9C%E9%8D%B5%E5%AD%97.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/rAC4cxPk5Ayj1W8L-8_%E9%A0%98%E5%8F%96%E5%84%AA%E6%83%A0%E5%88%B8%E7%9A%84%E9%97%9C%E9%8D%B5%E5%AD%97.png) 設定領取優惠券的關鍵字。 當優惠券建立好且對外公開後，可以透過該關鍵字觸發獲得此優惠券。 [![9_設定重複領取.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/LGUyrUBucFtrLOlX-9_%E8%A8%AD%E5%AE%9A%E9%87%8D%E8%A4%87%E9%A0%98%E5%8F%96.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/LGUyrUBucFtrLOlX-9_%E8%A8%AD%E5%AE%9A%E9%87%8D%E8%A4%87%E9%A0%98%E5%8F%96.png) 設定是否允許用戶重複領取優惠券。 選擇允許，每次領到的優惠券序號皆為不同序號；若不允許，每次領到的序號皆相同。 [![10_設定限制優惠券總數.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/AnkoxiO20cmgwF4P-10_%E8%A8%AD%E5%AE%9A%E9%99%90%E5%88%B6%E5%84%AA%E6%83%A0%E5%88%B8%E7%B8%BD%E6%95%B8.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/AnkoxiO20cmgwF4P-10_%E8%A8%AD%E5%AE%9A%E9%99%90%E5%88%B6%E5%84%AA%E6%83%A0%E5%88%B8%E7%B8%BD%E6%95%B8.png) 設定是否限制優惠券總數。 限制總數將無法透過群發訊息發送此優惠券，且當設定的數量發送完畢後，之後送出的優惠券會改用替代文字告知發送完畢。 [![11_允許優惠訊息可分享給好友.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/Ut6YL1zOUri0rfJ7-11_%E5%85%81%E8%A8%B1%E5%84%AA%E6%83%A0%E8%A8%8A%E6%81%AF%E5%8F%AF%E5%88%86%E4%BA%AB%E7%B5%A6%E5%A5%BD%E5%8F%8B.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/Ut6YL1zOUri0rfJ7-11_%E5%85%81%E8%A8%B1%E5%84%AA%E6%83%A0%E8%A8%8A%E6%81%AF%E5%8F%AF%E5%88%86%E4%BA%AB%E7%B5%A6%E5%A5%BD%E5%8F%8B.png) 設定是否允許優惠券訊息可分享給好友。 允許分享，優惠券可以分享給好友兌換，也可以設定分享給好友的文案，字數上限255字；反之，不允許分享就不可以分享給好友。 [![12_取得_使用優惠券貼上標籤.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/EBcSvDkYi2oaQV68-12_%E5%8F%96%E5%BE%97_%E4%BD%BF%E7%94%A8%E5%84%AA%E6%83%A0%E5%88%B8%E8%B2%BC%E4%B8%8A%E6%A8%99%E7%B1%A4.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/EBcSvDkYi2oaQV68-12_%E5%8F%96%E5%BE%97_%E4%BD%BF%E7%94%A8%E5%84%AA%E6%83%A0%E5%88%B8%E8%B2%BC%E4%B8%8A%E6%A8%99%E7%B1%A4.png) 設定取得優惠券以及使用優惠券時要貼上的標籤，可以根據需求貼上標籤來紀錄。 [![13_儲存優惠券.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/IxFox7PQtbgEfojI-13_%E5%84%B2%E5%AD%98%E5%84%AA%E6%83%A0%E5%88%B8.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/IxFox7PQtbgEfojI-13_%E5%84%B2%E5%AD%98%E5%84%AA%E6%83%A0%E5%88%B8.png) 優惠券設定完後記得按下 儲存優惠券，此時建立好的優惠券尚未公開，還不能使用。 [![14_若要立即使用優惠券_則選擇立即公開.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/RcNUhvpY7kIFSdwL-14_%E8%8B%A5%E8%A6%81%E7%AB%8B%E5%8D%B3%E4%BD%BF%E7%94%A8%E5%84%AA%E6%83%A0%E5%88%B8_%E5%89%87%E9%81%B8%E6%93%87%E7%AB%8B%E5%8D%B3%E5%85%AC%E9%96%8B.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/RcNUhvpY7kIFSdwL-14_%E8%8B%A5%E8%A6%81%E7%AB%8B%E5%8D%B3%E4%BD%BF%E7%94%A8%E5%84%AA%E6%83%A0%E5%88%B8_%E5%89%87%E9%81%B8%E6%93%87%E7%AB%8B%E5%8D%B3%E5%85%AC%E9%96%8B.png) 可以直接立即公開此優惠券，或是預約要公開使用的時間。 當優惠券公開後，優惠券將無法被刪除，且優惠券總數量限制、重複領取限制都無法再被修改。 [![15_建立優惠券QRcode_0.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/2X2sCuLTrNN9ua9q-15_%E5%BB%BA%E7%AB%8B%E5%84%AA%E6%83%A0%E5%88%B8QRcode_0.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/2X2sCuLTrNN9ua9q-15_%E5%BB%BA%E7%AB%8B%E5%84%AA%E6%83%A0%E5%88%B8QRcode_0.png) 當優惠券公開後選項有了改動，出現 統計報表 以及 QR Code。 [![15_建立優惠券QRcode.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/btFAw4nDri3K94xM-15_%E5%BB%BA%E7%AB%8B%E5%84%AA%E6%83%A0%E5%88%B8QRcode.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/btFAw4nDri3K94xM-15_%E5%BB%BA%E7%AB%8B%E5%84%AA%E6%83%A0%E5%88%B8QRcode.png) 選擇 QR Code，並輸入合適的額外資訊，按下產生。 [![15_建立優惠券QRcode_2.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/AL3Vy6PgAtAAezBG-15_%E5%BB%BA%E7%AB%8B%E5%84%AA%E6%83%A0%E5%88%B8QRcode_2.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/AL3Vy6PgAtAAezBG-15_%E5%BB%BA%E7%AB%8B%E5%84%AA%E6%83%A0%E5%88%B8QRcode_2.png) 會產出帶有設定額外資訊的 QR Code，掃描此QR Code也可以獲得此張優惠券。 [![16_統計報表.png](http://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/4lzuuJIatZX6EqaK-16_%E7%B5%B1%E8%A8%88%E5%A0%B1%E8%A1%A8.png)](http://book.gosu.bar/uploads/images/gallery/2020-02/4lzuuJIatZX6EqaK-16_%E7%B5%B1%E8%A8%88%E5%A0%B1%E8%A1%A8.png) 選擇統計報表可以進到統計頁面查看相關的統計資訊。 發送媒介的圓餅圖可以點選要顯示的內容進行切換。 最下方可以下載總表。 # 關鍵字管理 在 GOSU BAR 中可以透過建立關鍵字來定義索引特定文字內容時需要的詞彙。 簡單的說，關鍵字就是單個或複數相同含意的文字集合，而這個集合在流程編輯器中可以作為被判斷的內容，因此可以藉由建立關鍵字來避開一些希望被忽略掉的文字集合，或是單純的建立關鍵字當作同義詞集合來使用。 ##### **介面** [![0_介面.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/LHXZ8lD2uz9JqBxN-0_%E4%BB%8B%E9%9D%A2.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/LHXZ8lD2uz9JqBxN-0_%E4%BB%8B%E9%9D%A2.png) 初次進入關鍵字管理的樣子。 點選按鈕 **新增關鍵字分類**。 [![1_新增關鍵字-2.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/OTE2wMZYJlYSXJIT-1_%E6%96%B0%E5%A2%9E%E9%97%9C%E9%8D%B5%E5%AD%97-2.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/OTE2wMZYJlYSXJIT-1_%E6%96%B0%E5%A2%9E%E9%97%9C%E9%8D%B5%E5%AD%97-2.png) 設定關鍵字分類的名稱，並按下 **確定** 建立。 [![1_新增關鍵字-3.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/jz8eAB9hteETFh9R-1_%E6%96%B0%E5%A2%9E%E9%97%9C%E9%8D%B5%E5%AD%97-3.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/jz8eAB9hteETFh9R-1_%E6%96%B0%E5%A2%9E%E9%97%9C%E9%8D%B5%E5%AD%97-3.png) 建立好關鍵字分類後就會多出一個群組它就像是一個資料夾，透過資料夾來分類管理關鍵字，這樣未來的維護也會較有效率。 註：在流程決策點中的關鍵字比對，是比對整個關鍵字分類的內容。 [![1_新增關鍵字-5.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/lAke5EhFK8i6yvTF-1_%E6%96%B0%E5%A2%9E%E9%97%9C%E9%8D%B5%E5%AD%97-5.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/lAke5EhFK8i6yvTF-1_%E6%96%B0%E5%A2%9E%E9%97%9C%E9%8D%B5%E5%AD%97-5.png) 建立完關鍵字的分類，還需要設定關鍵字以及對應的同義詞，請點選 **新增關鍵字** 來新增。 [![1_新增關鍵字-6.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/XYkVMfikXEBMKZ45-1_%E6%96%B0%E5%A2%9E%E9%97%9C%E9%8D%B5%E5%AD%97-6.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/XYkVMfikXEBMKZ45-1_%E6%96%B0%E5%A2%9E%E9%97%9C%E9%8D%B5%E5%AD%97-6.png) 設定關鍵字名稱。 [![1_新增關鍵字-4-1.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/3VnmsV4vaRJFMgi6-1_%E6%96%B0%E5%A2%9E%E9%97%9C%E9%8D%B5%E5%AD%97-4-1.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/3VnmsV4vaRJFMgi6-1_%E6%96%B0%E5%A2%9E%E9%97%9C%E9%8D%B5%E5%AD%97-4-1.png) 建立完關鍵字後，再來要編輯這個關鍵字的同意詞，同義詞可以多組詞彙或文字內容。 [![1_新增關鍵字-7-1.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/g0oAh3KpeigEdwpr-1_%E6%96%B0%E5%A2%9E%E9%97%9C%E9%8D%B5%E5%AD%97-7-1.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/g0oAh3KpeigEdwpr-1_%E6%96%B0%E5%A2%9E%E9%97%9C%E9%8D%B5%E5%AD%97-7-1.png) 設定完同意詞，按下勾勾儲存。 註：以此為例，之後透過決策點判斷這一組關鍵字分類時，無論是輸入 **管理人、 管理** 或是 **管管** 都會判定符合關鍵字。 [![1_新增關鍵字-11.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/vbK2UTBO5HmcOwv6-1_%E6%96%B0%E5%A2%9E%E9%97%9C%E9%8D%B5%E5%AD%97-11.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/vbK2UTBO5HmcOwv6-1_%E6%96%B0%E5%A2%9E%E9%97%9C%E9%8D%B5%E5%AD%97-11.png) 若我們在關鍵字分類中建立了許多關鍵字，當需要快速查詢關鍵字時，可以透過 **搜尋關鍵字** 快速的篩選出目標。 註：搜尋會同時比對關鍵字與同義詞相符合者。 # 篩選功能 ### 教學篇 ##### 最初進入篩選功能的介面 ![](https://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/gIW2pWfmqcUSjJgE-image-1582014200639.png) ##### 點擊 建立第一個篩選條件 ![](https://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/mRdzGTe3L3oZECyi-image-1582014535323.png) ##### 新增完成後將再右側看到可以建立篩選條件區塊 ![](https://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/3lFP4Ljd04C2xjbC-image-1582014309197.png) ##### 選擇您的篩選條件 ![](https://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/TSx1qkmAGw2FKtKD-image-1582014407974.png) ##### 條件選擇後可以使用預覽篩選結果來檢查是否正確篩選 ![](https://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/hq0sB5d2ijUWUM78-image-1582014740640.png) ##### 確認後就可以儲存篩選條件 ![](https://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/hyiia3AY8Ovnz7Em-image-1582014928526.png) ##### 使用篩選功能 => 進入好友清單選擇您的篩選條件 => 按下確定即可 ![](https://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/51UBwQyjjk4CKVsx-image-1582020344698.png) ### 實戰篇 #### 問題一： ##### 篩選屬性 ex: 我要性別為 "男" 還要 電子信箱有資料 篩選功能 ![](https://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/NblS586YuTb6WUFG-image-1582020255912.png) #### 問題二： ##### 標籤篩選 ex: 我要選擇有 "喜歡吃甜食" 標籤 或著 有"喜歡吃鹹食" 標籤 篩選功能 ![](https://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/Flv6CJh90EEtqRFg-image-1582027106160.png) # 圖文選單 **圖文選單** 可以提供給 **LINE** 的聊天機器人使用。 尺寸固定為 2 種尺寸，分別是 **2500 \* 1686** 或 **2500 \* 843**（單位**px**）。 選單上可以建立多組按鈕區塊，根據需求自行決定按鈕區塊的位置與尺寸，每個按鈕區塊可以設定不同的行為。 行為共有 3 種類型，分別是：**文字、網址、回傳資料**，當用戶點選按鈕區塊時就會觸發設定的行為。 - - **文字**： 是指用戶點選時會幫用戶說一句話，通常會搭配 流程編輯器 定義的文字指令，讓用戶只需在圖文選單上點選就可以直接下達指令，省去用戶手動輸入指令的困擾。 - **網址**： 是指要導向的網頁位置，用戶點選會直接開啟瀏覽器瀏覽網址的內容。 - **回傳資料(Postback)**： 圖文選單的按鈕區塊若選擇此種類型，當使用者點選該區塊將會觸發 **起始點 - Postback 事件。** 共有 **回傳內容** 與 **文字內容** 兩個部分可以設定，其中 **回傳內容** 為**必填**欄位。 當觸發 **Postback 事件** 後，會將此回傳內容發送至所有的 **起始點 - Postback 事件**，因此可以做為相對隱私的資料夾帶方式使用。 **文字內容** 為選填，若有輸入**文字內容**，觸發區塊按鈕時使用者本人會說出該內容，但需要注意此文字訊息並非說話的文字訊息，所以並無法觸發 **起始點 - 接收文字 事件**。 ##### **介面** [![0_介面.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/CUYLWYrHGRNGNpTS-0_%E4%BB%8B%E9%9D%A2.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/CUYLWYrHGRNGNpTS-0_%E4%BB%8B%E9%9D%A2.png) 初次進入圖文選單的畫面。 [![1_選擇機器人.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/yY2afPo3WIIJx58M-1_%E9%81%B8%E6%93%87%E6%A9%9F%E5%99%A8%E4%BA%BA.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/yY2afPo3WIIJx58M-1_%E9%81%B8%E6%93%87%E6%A9%9F%E5%99%A8%E4%BA%BA.png) 先選擇圖文選單要建立的機器人。 [![2_新增圖文選單.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/b93LUAM5gNsu4pcj-2_%E6%96%B0%E5%A2%9E%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/b93LUAM5gNsu4pcj-2_%E6%96%B0%E5%A2%9E%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE.png) 選擇好機器人後，按下 **新增圖文選單**。 [![3_圖文選單_設定名稱.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/e6sqqvn87ST7C5sP-3_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E8%A8%AD%E5%AE%9A%E5%90%8D%E7%A8%B1.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/e6sqqvn87ST7C5sP-3_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E8%A8%AD%E5%AE%9A%E5%90%8D%E7%A8%B1.png) 進到建立選單的介面。 [![3_圖文選單_設定名稱.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/eoUrkjUKFzD03jnm-3_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E8%A8%AD%E5%AE%9A%E5%90%8D%E7%A8%B1.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/eoUrkjUKFzD03jnm-3_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E8%A8%AD%E5%AE%9A%E5%90%8D%E7%A8%B1.png) 選單名稱是指在 **GOSU BAR** 後台中顯示的名稱，用戶並不會看到此名稱。 命名建議容易辨識好理解，將來若選單數量較多會比較好管理維護。 [![3_圖文選單_選擇尺寸.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/HTCkUNDCRrw787Km-3_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E9%81%B8%E6%93%87%E5%B0%BA%E5%AF%B8.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/HTCkUNDCRrw787Km-3_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E9%81%B8%E6%93%87%E5%B0%BA%E5%AF%B8.png) 選擇選單的尺寸，僅有 **2** 種尺寸可以選擇，分別是 **2500 \* 1686** 或 **2500 \* 843**（單位px）。 [![4_圖文選單_設定選單提示文字.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/nMTToji1NCHhy4b8-4_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E8%A8%AD%E5%AE%9A%E9%81%B8%E5%96%AE%E6%8F%90%E7%A4%BA%E6%96%87%E5%AD%97.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/nMTToji1NCHhy4b8-4_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E8%A8%AD%E5%AE%9A%E9%81%B8%E5%96%AE%E6%8F%90%E7%A4%BA%E6%96%87%E5%AD%97.png) 選單提示是指當用戶以手機使用機器人時，介面底部顯示的提示文字，適合的名稱有助於引導使用者使用選單。 [![5_圖文選單_設定選單是否預設展開.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/Bvr0kqVALab9tLOq-5_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E8%A8%AD%E5%AE%9A%E9%81%B8%E5%96%AE%E6%98%AF%E5%90%A6%E9%A0%90%E8%A8%AD%E5%B1%95%E9%96%8B.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/Bvr0kqVALab9tLOq-5_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E8%A8%AD%E5%AE%9A%E9%81%B8%E5%96%AE%E6%98%AF%E5%90%A6%E9%A0%90%E8%A8%AD%E5%B1%95%E9%96%8B.png) 設定是否要 預設展開 選單，若勾選啟用，則使用者開起機器人時選單會自動展開顯示；反之，不會展開顯示。 [![6_圖文選單_上傳選單圖.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/HBqUvkkLzkmKupwC-6_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E4%B8%8A%E5%82%B3%E9%81%B8%E5%96%AE%E5%9C%96.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/HBqUvkkLzkmKupwC-6_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E4%B8%8A%E5%82%B3%E9%81%B8%E5%96%AE%E5%9C%96.png) 根據需求自行上傳需要的圖片作為底圖，圖片尺寸要符合選擇的尺寸，且**圖片檔案大小必須小於 1MB**。 [![座標２.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/crh9HgbTFfnLnsmh-%E5%BA%A7%E6%A8%99%EF%BC%92.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/crh9HgbTFfnLnsmh-%E5%BA%A7%E6%A8%99%EF%BC%92.png) 按鈕區塊預設劃分成6等分，可以根據需求新增、刪減。 按鈕區塊的位置是以直角座標系進行設定，以上圖 2500 \* 1686 （px）的尺寸為例，圖文選單左上角的座標為（0,0），右下角座標為（2500,1686），X軸向右，Y軸向下。 設定 按鈕區塊 的方法，除了直接透過座標計算位置來設定，也可以直接點選 按鈕區塊 拖拉調整位置跟尺寸。 [![7_圖文選單_設定按鈕區塊.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/qwCEjzK4xc7DNVl0-7_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E8%A8%AD%E5%AE%9A%E6%8C%89%E9%88%95%E5%8D%80%E5%A1%8A.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/qwCEjzK4xc7DNVl0-7_%E5%9C%96%E6%96%87%E9%81%B8%E5%96%AE_%E8%A8%AD%E5%AE%9A%E6%8C%89%E9%88%95%E5%8D%80%E5%A1%8A.png) 以上圖為例，選單有兩個按鈕區塊。 區塊1 為文字，用戶點選後會幫用戶說一句話「GOSU BAR 真不錯！」。 區塊2 為網址，用戶點選後會開啟瀏覽器至 Google 搜尋 。 [![8_選單建立完成.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/4lJ7DfsncMYksdRk-8_%E9%81%B8%E5%96%AE%E5%BB%BA%E7%AB%8B%E5%AE%8C%E6%88%90.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/4lJ7DfsncMYksdRk-8_%E9%81%B8%E5%96%AE%E5%BB%BA%E7%AB%8B%E5%AE%8C%E6%88%90.png) 選單建立完成就會顯示在圖文選單清單中。 [![9_選單建立副本.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/bQIqxdNRb8BbFYdz-9_%E9%81%B8%E5%96%AE%E5%BB%BA%E7%AB%8B%E5%89%AF%E6%9C%AC.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/bQIqxdNRb8BbFYdz-9_%E9%81%B8%E5%96%AE%E5%BB%BA%E7%AB%8B%E5%89%AF%E6%9C%AC.png) 有時可能需要將圖文選單複製給其他機器人使用，或是想要複製副本修改內容另作他用，這時候可以按下建立副本。 [![10_選單建立副本-2.png](http://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/E3KXPqq9QimLaxBb-10_%E9%81%B8%E5%96%AE%E5%BB%BA%E7%AB%8B%E5%89%AF%E6%9C%AC-2.png)](http://book.gosu.bar/uploads/images/gallery/2020-03/E3KXPqq9QimLaxBb-10_%E9%81%B8%E5%96%AE%E5%BB%BA%E7%AB%8B%E5%89%AF%E6%9C%AC-2.png) 建立副本的介面，基本上與建立選單相同，差別在於多了機器人來源可以選擇，可以維持在原本的機器人建立副本，也可以建立副本給其他機器人使用。 # 創造你的聊天機器人 # 建立 LINE@ 聊天機器人 我們將在 GOSU BAR 中透過 [Messaging API](https://developers.line.biz/zh-hant/services/messaging-api/ "了解 Messaging API") 來製作 LINE@ 聊天機器人 首先我們需要先了解 [LINE@ 方案](http://at-blog.line.me/tw/archives/LINEOA2.0.html "了解 LINE@ 價格方案") 大致上分為**主動發送訊息的 Push API** 以及**被動回覆訊息的 Reply API** 兩種 ##### [![line_api_type.png](https://book.gosu.bar/uploads/images/gallery/2020-02/scaled-1680-/ikrqf3wrErBoMuG7-line_api_type.png)](https://book.gosu.bar/uploads/images/gallery/2020-02/ikrqf3wrErBoMuG7-line_api_type.png) ##### ##### Push API： 可隨時發送訊息給 LINE@ 的好友，會衍生出對應費用。 計算方式： 1\. 針對一個好友發送一次訊息組，則為發送一次訊息 2\. 針對一個群組或聊天室發送一次訊息組，若群組或聊天室成員數為 N，則為發送 N 次訊息 **※** 免費方案每月有 500 次額度 **※** 一個訊息組最多可以包含五則文字、圖片、卡片、海報等訊息 ##### ##### Reply API： 免費，當 LINE@ 收到好友主動詢問服務時，於 **30** 秒內有一次回覆訊息組的機會。 **※** 使用時機：與 LINE@ 好友、好友對 LINE@ 發送訊息、好友點擊訊息上的按鈕等 **※** 一個訊息組最多可以包含五則文字、圖片、卡片、海報等訊息 #### 透過 GOSU BAR 一點都不複雜 透過 GOSU BAR ，你除了可以選擇是否啟用 Push API 之外 GOSU BAR 將自動以最佳的方式進行訊息傳送，也就是當可以使用免費 Reply API 時，GOSU BAR 將自動切換至 Reply API，否則才切換以 Push API 發送訊息 那麼接下來我們要開始建立 LINE@ 聊天機器人囉！ 首先進入 [GOSU BAR 機器人管理](https://www.gosu.bar/app/bot) ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/P1TuH8I1vKRLX81o-image-1575822407960.png) 選定社群平台並點擊按鈕 ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/KETkTndxDsSfs87l-image-1575822490459.png) 按照教學進行五階段的操作 ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/SkX004GU6P9w8ziV-image-1575822697521.png) 若你尚未使用過 [LINE Developers](https://developers.line.biz/console/ "LINE 開發者管理介面")，首次登入將會進到以下頁面進行資料填寫與信箱認證 ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/daz9ZetwhJOMnKNS-image-1575822918955.png) 以下為操作過程的參考畫面，畫面中填寫的資料為假資料，請自行填寫實際資料 ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/bV8MK4thTVli87ei-image-1575823755196.png) 設定 Webhook 時，最容易遇到的問題為 LINE Developers 後台的狀況 ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/MdHjIrjl6x9UxYLv-image-1575823963837.png) 只要確定 Webhook URL 沒錯即可，當點擊 Verify 時出現 ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/xXtRvwwtCkHpBtcL-image-1575824522537.png) 訊息則不須理會 同時重新整理頁面並確保 ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/bhYxPbJwJaGLStaY-image-1575824592184.png)是啟用狀態 若重新整理後發現狀態變回關閉，請再點擊啟用並等待數秒後重新整理並檢查是否成功 **※** 此過程可能需要嘗試數次才成功 於 GOSU BAR 平台中建立聊天機器人成功，如下圖： ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/Za28Rj3cph4XlA6y-image-1575824926686.png) 接下來我們將進行以下步驟來嘗試功能是否正常 1\. 與 LINE@ 成為好友，並對 LINE@ 發送文字或貼圖，接著來到 [GOSU BAR 1 : 1 私訊](https://www.gosu.bar/app/private-message "GOSU BAR 1 : 1 私訊功能頁面") 頁面確認 GOSU BAR 是否正確收到訊息 ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/z1ybM7opdhil4LfF-image-1575825556004.png) ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/MTA5sHb1ugnWzgDu-image-1575825603757.png) 完成以上操作無誤，代表訊息接收正常，若發現 1 : 1 私訊頁面中沒有收到訊息時，請先嘗試重新整理，若還是沒有收到訊息請檢查以下幾個設定： - - Channel ID 填寫正確 - Channel secret 填寫正確 - Webhook URL 設定正確 - Use webhook 確定啟用 2\. 使用 1 : 1 私訊發送訊息並確認 LINE 是否收到透過 GOSU BAR 平台發送的訊息 ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/HH9UeWGYv4DBNuK1-image-1575826444325.png)![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/KhoII3SDS6zf1XmG-image-1575826412191.png) 完成以上操作無誤，代表訊息發送正常，若發現 LINE 沒有收到訊息時，請檢查以下設定： - - Channel access token (long-lived) 填寫正確 完成以上操作後你就擁有 LINE@ 聊天機器人囉！ # 建立 Facebook 聊天機器人 我們將在 GOSU BAR 透過 [Messenger 平台](https://developers.facebook.com/docs/messenger-platform) 的 API 來建立 Facebook 粉絲專頁聊天機器人 首先我們要了解一下 Facebook 的平台政策與特性，Facebook 的推播政策除了訊息訂閱、訊息標籤、廣告等主動行為外，要遵守平台的 24 小時互動政策，也就是當使用者主動與粉絲專頁的 Messager 詢問服務時，粉專就有 24 小時的時間可以持續與使用者訊息來往，就聊天機器人場景而言，此政策相對於 LINE@ 的 Reply API 是靈活許多。 此外，Facebook 本身是一個具有擴散特性的平台，更可以透過以下幾種機制引發使用者與粉專進行互動： - ##### 粉專貼文留言回覆、私訊回覆 此情境廣泛被應用於行銷、導購場景，當使用者對粉絲專頁的貼文留言時，將獲得回應一次該留言的機會，同時還可以再以 Messager 訊息引導互動的機會。[![test.png](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/ryaSkP0UcYhgF04F-test.png)](https://book.gosu.bar/uploads/images/gallery/2019-12/ryaSkP0UcYhgF04F-test.png) - ##### m.me 連結 此每一個粉絲專頁都會有自己專屬的 m.me 連結，格式如：[https://m.me/ShareCourse](https://m.me/ShareCourse "m.me 範例連結，以 ShareCourse 學聯網為例")，透過此連結可以在使用者點擊時直接引導進入粉專 Messager 中，若將 m.me 連結轉換為 QR Code 還可以應用於線下場合。 此外還可以帶入特定資訊直接讓使用者進入特定的互動流程，範例 [https://m.me/xxxTESTxxx?ref=buy\_item\_321](https://m.me/xxxTESTxxx?ref=buy_item_321 "m.me 夾帶資訊範例連結") - ##### 透過 Customer Chat Plugin 讓使用者進入 Messager 對話 Messenger 體驗直接整合在網站中。讓與企業互動的顧客隨時能得到在 Messenger 中所提供的個人化、多媒體體驗。 [![透過 Customer Chat Plugin (beta) 讓使用者進入 Messager 對話](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/WGOOKVQSV3CyUv8m-23423329_322601184884475_7886446887677460480_n.png)](https://book.gosu.bar/uploads/images/gallery/2019-12/WGOOKVQSV3CyUv8m-23423329_322601184884475_7886446887677460480_n.png) 在初步介紹 Facebook 後，將帶大家來進行 GOSU BAR 平台上的粉絲專頁權限授權，授權 GOSU BAR 能夠透過 API 對粉絲專頁與 Messager 操作與處理。 首先進入 GOSU BAR 平台的機器人管理 ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/CRU7eAe1fHbu99bU-image-1576842613940.png) 建立聊天機器人，平台選擇為 Facebook 並按下 『+ 開始新增機器人』按鈕，此時，若你沒有登入 Facebook，頁面會跳到 ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/kDnaSTrbU9BqPtpw-image-1576842814224.png) 若已經登入則會直接跳到授權頁面 ##### 建議將全部粉絲專頁授權，以免既有已授權的粉絲專頁遭取消而無法使用。 [![Ed6Ds1xLhvk1iLTZzkJ-image-1576842857551.png](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/EqKDxUCDzE9yUX9k-Ed6Ds1xLhvk1iLTZzkJ-image-1576842857551.png)](https://book.gosu.bar/uploads/images/gallery/2019-12/EqKDxUCDzE9yUX9k-Ed6Ds1xLhvk1iLTZzkJ-image-1576842857551.png)![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/H5rw8ZUaCXO9FgQd-image-1576843465602.png) ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/cW4WyzksQgQ7cvCG-image-1576844624821.png)![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/3Rw9nNgkq9qXcKMt-image-1576844633724.png) ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/Syu3xATxm0clMMHW-image-1576844645034.png) ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/3dBqPaV32lqodlUS-image-1576844653663.png) ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/LwzF0PpaPQGHq1Sc-image-1576844662794.png) 到這邊我們就擁有一個 Facebook 聊天機器人囉！ #### 確認授權是否有效可以點到機器人的進階管理的『聊天機器人憑證設定』 如下圖，則代表授權有效中～ ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/jXNau5LayftxjD7g-image-1576843695586.png) # LINE Login 設定教學 透過 LINE Login 的幫助，我能夠做到在網頁中知道，正在瀏覽網頁的使用者的 LINE 身份為何。 首先我們進到 GOSU BAR 機器人進階管理中的 LINE LOGIN 設定，可以點擊初次設定教學開始進行設定唷！ ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/ZX6IDzO9h1INoX6R-image-1576845265135.png) 總共有四個階段 ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/dh9NBnfnO5TFGBXe-image-1576845806401.png) 當你設定完成後，請注意確實將 LINE Login 從 Developing ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/8Gn7IidCjiWIAWi9-image-1576845959616.png) 切換成 Published，當切換成功這個 LINE Login 回從只對管理者、開發者開放的狀態，變成對所有人都開放 ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/SAdAgw0SX0g4gwdK-image-1576845997698.png) 此外需確認是否有把 Linked OA 對應到你的 LINE 官方帳號，這樣 LINE Login 時才有辦法直接引導使用者與 LINE 官方帳號成為好友 ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/DiakLqOCcW94kZHh-image-1576846065186.png) Callback URL 確實設定為: https://api.gosu.bar/oauth/line/logged ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/mPixMXuFA2HdjscG-image-1576846255131.png) GOSU BAR 安全性白名單設定 ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/PT6oaQtKiqHYZan3-image-1576846522432.png) # Facebook Messager 選單設定 ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/bX2sKHNfh7RHkGaS-image-1576846709364.png) 接下來要教大家怎麼做到選單設定，首先進到 Facebook 機器人的進階設定，點擊左下角功能選單按鈕 ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/wDd2u2xMmrFjnlTH-image-1576846831753.png) 點擊後將會看到設定介面 ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/9WuE3vaRirzrgbNg-image-1576846878602.png) 緊接著我們開始進行選單的設定，選單中有三種項目可以新增，分別為，POSTBACK、連結、資料夾 - 若要點擊後直接開啟網頁連結請選擇『連結』 - 若要製作階層式的功能選單請選擇『資料夾』 - 若要點擊後觸發對話流程請選擇『POSTBACK』 POSTBACK 設定方式如下 ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/XJfkEtAxERzqtsrT-image-1576847106644.png) 設定完成後，就可以在 Messager 中看到結果囉～ ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/Q9D02P0Cu0DLzeTs-image-1576847390144.png) 那麼當使用者點擊了『功能導覽』後要怎麼接續服務流程呢？ 請看以下流程範例： ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/oxCqZ3gSsc3PA30Z-image-1576847564537.png) ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/uflYret17AtDkhH2-image-1576847597885.png) 那麼最後我們會達到這樣的結果 ![](https://book.gosu.bar/uploads/images/gallery/2019-12/scaled-1680-/Elvy4A8elu91NSUt-image-1576847669551.png) # #GOSU BAR 進階 & 應用案例教學 # 初中階教學頁網連結 ## **\#初階課程清單** 1. 實作教學工作坊｜LINE 官方帳號入門篇： [https://u.gosu.bar/manual/line](https://u.gosu.bar/manual/line) 2. 實作教學工作坊｜Facebook 入門篇篇：[http://bit.ly/2nk0czJ](http://bit.ly/2nk0czJ) 3. 功能介紹與教學基礎篇 2021：[https://u.gosu.bar/ay\_gosubar\_intro](https://u.gosu.bar/ay_gosubar_intro) ## **\#中階課程清單** 1. 中階實戰課程教學手冊 [https://bit.ly/2T9JL](https://bit.ly/2T9JL9) ## **[\#新手指南](https://www.anyong.com.tw/stories/19295)** ## **新手教學** ![](https://picture-original.fevercdn.com/page-feversocial-202184-56ef5db4-10a3-417c-8c94-84015d2dfa48.png) **有效率的學會 GOSU BAR 基本功能** - [**Chatbot小學堂｜GOSU BAR流程編輯器介紹**](https://www.anyong.com.tw/stories/19405) - **[Chatbot 小學堂｜如何匯入應用市集](https://www.anyong.com.tw/stories/20125)** - **[Chatbot 小學堂｜建立歡迎訊息](https://www.anyong.com.tw/stories/20228)** - **[Chatbot 小學堂｜新增自動回覆](https://www.anyong.com.tw/stories/20373)** - **[Chatbot 小學堂｜FB 貼文私訊、留言回覆](https://www.anyong.com.tw/stories/20974)** - **[Chatbot 小學堂｜掃描QR code 即時互動](https://www.anyong.com.tw/stories/20976)** - **[Chatbot 小學堂｜建立自動貼標籤](https://www.anyong.com.tw/stories/20978)** - [**Chatbot 小學堂｜建立LINE群發分眾推播**](https://www.anyong.com.tw/stories/20977) - [**Chatbot 小學堂｜新增隨機回覆**](https://www.anyong.com.tw/stories/20993) ## **▶30天內學會系列** **從註冊開始一步步學會 GOSU BAR** 1. [**30天內學會｜歡迎敲敲線上技術支援**](https://www.anyong.com.tw/stories/21722) 2. **[30天內學會｜組織與帳號是什麼？](https://www.anyong.com.tw/stories/21728)** 3. **[30天內學會｜GOSU BAR 的標籤](https://www.anyong.com.tw/stories/21885)** 4. **[30天內學會｜屬性，跟標籤差在哪？](https://www.anyong.com.tw/stories/21893)** 5. **[30天內學會｜建立群發訊息](https://www.anyong.com.tw/stories/22013)** 6. **[30天內學會｜用篩選功能做精準行銷](https://www.anyong.com.tw/stories/22088)** 7. **[30天內學會｜建立 m.me 連結教學](https://www.anyong.com.tw/stories/21938)** 8. **[30天內學會｜如何觸發關鍵字](https://www.anyong.com.tw/stories/21963)** 9. **[30天內學會｜建立 LINE 官方帳號圖文選單](https://www.anyong.com.tw/stories/22099)** 10. [**30天內學會｜GOSU BAR 圖像編輯器介紹**](https://www.anyong.com.tw/stories/22477) 11. [**30天內學會｜GOSU BAR 圖像編輯器應用：建立海報與卡片**](https://www.anyong.com.tw/stories/22476) 12. [**30天內學會｜常見語法與延伸應用**](https://www.anyong.com.tw/stories/22479) ## ▶ 進階應用 ![](https://picture-original.fevercdn.com/page-feversocial-202184-3bb38890-b9df-4c53-ae61-b9a6b48c2a46.png) **夢想中的 Chatbot 應用都在這！** ![](https://picture-original.fevercdn.com/page-feversocial-202184-359dece3-1d6a-4fd3-a728-617c51ec245e.png) **難度用星等區分，挑戰用腦沒有極限** - [**問卷調查：肌膚檢測（製作難度：★ ★）**](https://feversocial.com/p/17861) - [**問卷調查：****口紅市調（製作難度：★ ★）**](https://feversocial.com/p/18726) - [**心理測驗：****內心特質測驗（難度：★ ★）**](https://feversocial.com/p/18371) - [**問卷調查、貼標籤、m.me開啟對話：GOSU 端午節社群企劃大全（難度：★ ★ ★）**](https://feversocial.com/p/19120)** ** - [**文字與圖片合成：製作新年賀卡（****難度：★ ★ ★ ★）**](https://feversocial.com/p/17625) # 進階教學網頁連結 & 應用案例 \#進階課程清單 1. 程式篇：[https://u.gosu.bar/manual\_programming](https://u.gosu.bar/manual_programming) 2. 圖像編輯器教學：[https://u.gosu.bar/IEtutorial](https://u.gosu.bar/IEtutorial) 3. GOSU BAR 常用指令、函數與屬性： [https://u.gosu.bar/gosufunction](https://u.gosu.bar/gosufunction) \# 應用案例 1. LIFF 帶參數轉對應網址：[ http://bit.ly/2ZvoTdK](http://bit.ly/2ZvoTdK) 2. LINE Account Link 串接 1. LINE Account Link 介紹：[https://bit.ly/2U9VqVW](https://bit.ly/2U9VqVW) 2. LINE Account Linke X GOSU 說明文件：[http://bit.ly/2nchSgU](http://bit.ly/2nchSgU) 3. GOSU Sample Code：[https://lihi1.com/zwQR6](https://lihi1.com/zwQR6) 3. m.me使用教學：[http://bit.ly/2BqrBDu](http://bit.ly/2BqrBDu) 4. Google Sheet 寫入資料範例 [https://bit.ly/3wJu2vc](https://bit.ly/3wJu2vc) 5. 天氣 API 教學[ https://hackmd.io/C6AN-JM1TWSMETv\_BwePXg](https://hackmd.io/C6AN-JM1TWSMETv_BwePXg) 6. 透過流程編輯器或圖像編輯器產生 QR Code [https://hackmd.io/@EJay/SyxzbwD0S](https://hackmd.io/@EJay/SyxzbwD0S) # GOSU 其他線上資源 \#其他線上資源 1. 公司官網：[https://www.anyong.com.tw](https://www.anyong.com.tw/) 2. GOSU BAR 後台：[https://www.gosu.bar](https://www.gosu.bar/) 3. FB 粉絲專頁：[https://u.gosu.bar/FBFP](https://www.facebook.com/GOSUBAR/) 4. 創作者社團：[ https://u.gosu.bar/fbgroup](https://u.gosu.bar/fbgroup) 5. LINE 官方帳號 - 案例應用 ：[https://u.gosu.bar/LINEservice/line](https://u.gosu.bar/LINEservice/line) 6. Medium 網路專欄：[ https://u.gosu.bar/gosubarmedium/line](https://u.gosu.bar/gosubarmedium/line) 7. GOSU Book 圖書館 [http://book.gosu.bar/](http://book.gosu.bar/) # 流程編輯器節點介紹 # 起始點 ### 節點樣式 ![](https://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/9bg9qvdoQtiYU6M0-image-1584087385390.png) ![](https://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/buQwBW2oeKa9qYnW-image-1584087198476.png) ##### 使用情境 用於各個事件最一開始的觸發節點 ### 節點介紹 #### 自訂事件(開放對外API) ##### 情境一 - 勾選動回應，用於透過 GOSU 發送訊息給使用者 --- **範例1: 勾選自動回應、不勾選檢查登入狀態，發送固定訊息給固定使用者** **預先了解事項：** 1\. 進階功能開啟 ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/TcRTU6WuT2NlWkvg-image-1585742678519.png) 2\. 啟用機器人 ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/4cSv60Zhdyn0GUyY-image-1585743715199.png) 3\. 如何查詢使用者id GOSUBAR後台 > 左上方漢堡選單 > 好友清單 > 找到您需要發送的使用者id ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/8nGpN4lSMfTEGCbR-image-1587708205105.png) **流程總覽圖** ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/mH2QLceY5qiDeUH4-image-1585733338602.png) **起始點內容 ( /number1 )** ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/8gaq6ymmabwE2mJl-image-1585733639759.png) **發送訊息內容(多個發送對象使用,逗號分隔)** ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/MQZY15K3F3MFfdj7-image-1585743385273.png) --- **範例2: 勾選自動回應、勾選檢查登入狀態，發送固定訊息給觸發的使用者。** **預先了解事項：** 1. 進行 LINE Login 綁定 GOSUBAR後台 > 左上角漢堡選單 > 設定 > 機器人管理 > 選擇您的機器人 > 初次設定 >照著流程即可完成設定 ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/cfPJW4rtjbEBNFtg-image-1585744693492.png) 2\. 啟用機器人 **![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/4cSv60Zhdyn0GUyY-image-1585743715199.png)** **流程總覽圖** ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/P76rDecvh9dYuccC-image-1585744813350.png) **起始點內容 ( /number2 )** ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/HdK5cBJVr9VdIQyO-image-1585744910089.png) **發送訊息內容** ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/oEZaUjYTJKDPTZoO-image-1585744940673.png) --- **範例3: 勾選自動回應、勾選檢查登入狀態，將額外資訊夾帶於 GET 中，將挾帶的資訊發送訊息給觸發的使用者。** **預先了解事項：** **1. 啟用機器人 ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/4cSv60Zhdyn0GUyY-image-1585743715199.png)** 2. 如何資訊夾帶於 GET 創建完成起始點(自訂事件) > 將資料帶於GET如下圖 ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/j0mZjgxAibg369BH-image-1586157986843.png) 3\. 進行 LINE Login 綁定 GOSUBAR後台 > 左上角漢堡選單 > 設定 > 機器人管理 > 選擇您的機器人 > 初次設定 >照著流程即可完成設定 ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/cfPJW4rtjbEBNFtg-image-1585744693492.png) **流程總覽圖** ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/MnG8XFtWl3lTUWH4-image-1586158186515.png) **起始點內容 ( /number3 )** ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/HFOxQ1u7JQeNb4fe-image-1586160294785.png) **發送訊息內容** ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/VO2qdDGe0wMj8HJl-image-1586158435236.png) ##### **情境二 - 不勾選自動回應，用於讀取 GOSU 中的資訊** --- **範例4: 不勾選自動回應，讀取機器人屬性回傳給前端** **預先了解事項：** 1. 進階功能開啟 ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/TcRTU6WuT2NlWkvg-image-1585742678519.png) 2\. 啟用機器人 ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/4cSv60Zhdyn0GUyY-image-1585743715199.png) 3\. 進行 LINE Login 綁定 GOSUBAR後台 > 左上角漢堡選單 > 設定 > 機器人管理 > 選擇您的機器人 > 初次設定 >照著流程即可完成設定 ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/cfPJW4rtjbEBNFtg-image-1585744693492.png) **流程總覽圖** ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/Wb2ombn08Sb4ntRT-image-1586158948289.png) **起始點內容 ( /number4 )** ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/5VeBHwHTlHE849Ji-image-1586160518239.png) **讀取屬性節點** ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/PbHMgSbupy8jjs3P-image-1586160613639.png) **回應請求** ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/ufTvntiFPPIC4TiM-image-1587546709338.png) --- **範例5: 不勾選自動回應，勾選檢查登入狀態，回傳使用者資訊給前端。** **預先了解事項：** 1. 進階功能開啟 **![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/TcRTU6WuT2NlWkvg-image-1585742678519.png)** 2. 啟用機器人 **![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/4cSv60Zhdyn0GUyY-image-1585743715199.png)** **流程總覽圖** ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/oh3uaddnAcHLWwBh-image-1586158902165.png) **起始點內容 ( /number5 )** ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/0P5glv03KBtPgiGe-image-1587546868694.png) **回應請求內容** ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/kaYPh1J40yzxAZwe-image-1587551525636.png) --- ##### 白名單網域說明 白名單 意指特別容許某些來源進入。 將值得信任的網域加到白名單中，他們就可以輕鬆避開各種系統和網路安全平台過濾器。 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/33qrxxAnKZPFeGDt-image-1592468094536.png) 註：新增至單一起始點，僅僅只有此起始點擁有此白名單 若希望此網域都可以加入到白名單 **左上角漢堡選單 ＞ 設定 ＞ 機器人管理 ＞ 選擇您希望添加網域的機器人** ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/NMva8fM0tJ3P3KYi-image-1592468867022.png) ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/JSPrD7LRxT6dVBwd-image-1592469085317.png) --- #### 加入好友、成為粉絲 **使用者成為好友、成為FB粉絲觸發此事件** 範例：招呼語以及給予圖文選單 ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/rAdsZUBvGXgSPXx1-image-1586518677084.png) --- #### 封鎖好友 (LINE 限定) **使用者封鎖機器人時觸發此事件** **註：使用者觸發封鎖好友之後無法與使用者互動的操作，例如：發送訊息、收回圖文選單、....等等** 範例：封鎖時貼上標籤(用於判別封鎖的使用者) ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/fwmESRWiRwo5wNeW-image-1587540965504.png) --- #### 加入群組、聊天室 (LINE 限定) **機器人加入群組、聊天室時會觸發此事件** --- #### 離開群組、聊天室 (LINE 限定) **機器人離開群組、聊天室時會觸發此事件** --- #### 成功鏈結帳號 (LINE 限定) **003 - LINE Account Link 串接** 1. 說明文件 [http://bit.ly/2nchSgU](http://bit.ly/2nchSgU) 2. Sample Code：http://[bit.ly/2pABeN](http://bit.ly/2pABeND) --- #### Postback 事件(接收回傳的資訊) **圖文選單創建時可選擇此選項** ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/XfiC4xLjVtCUiYyc-image-1587637937238.png) **文字內容：使用者點擊按鈕時會看到的內容** **回傳資料：後台資訊（使用者看不到）** 範例： ![](https://book.gosu.bar/uploads/images/gallery/2020-05/scaled-1680-/ZZVM98uhbz9Lx0CB-image-1589440406526.png)![](https://book.gosu.bar/uploads/images/gallery/2020-05/scaled-1680-/Md0PPLEEwSNDJnei-image-1589445638735.png) --- #### 接收到任意訊息 **任何訊息都會觸發此事件** 範例：系統更新公告 ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/ezOu1FucjeS1qVNq-image-1587374140149.png) --- #### 接收到文字訊息 **接收文字會觸發此事件** 範例： 與使用者文字互動 ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/74OE1NaXwaCoiZ8x-image-1587548456243.png) --- #### 接收到圖片 **接收圖片會觸發此事件** --- #### 接收到影片 **接收影片會觸發此事件** --- #### 接收到聲音 **接收聲音檔會觸發此事件** --- #### 接收到位置資訊 **接收位置資訊會觸發此事件** ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/5q3fwKlLX1wWm91Z-image-1587640861105.png) 完整內容：[https://lihi1.cc/1EN7j](https://lihi1.cc/1EN7j) --- #### 小編在粉絲專頁發文 (FaceBook 限定) **小編在粉絲專頁發文時會觸發此事件** --- #### 小編編輯粉絲專頁的文章 (FaceBook 限定) **小編編輯粉絲專頁的文章時會觸發此事件** --- #### 小編刪除粉絲專頁上的貼文 (FaceBook 限定) **小編刪除粉絲專頁上的貼文會觸發此事件** --- #### 使用者在粉絲專頁發文 (FaceBook 限定) **使用者在粉絲專業發文時會觸發此事件** --- #### 使用者編輯粉絲專頁上的貼文 (FaceBook 限定) **使用者編輯粉絲專頁上的貼文時會觸發此事件** --- #### 使用者刪除粉絲專頁上的貼文 (FaceBook 限定) **使用者刪除粉絲專頁上的貼文時會觸發此事件** --- #### 粉絲專頁收到讚 (FaceBook 限定) ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/Xs5V7G0FpEVeFmF0-image-1587644999763.png) **註：觸發時抓不到使用者資料 (from.profile)** --- #### 粉絲專頁的讚被收回 (FaceBook 限定) ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/eswPAW1mUBrf2Fqt-image-1587645151540.png) **註：觸發時抓不到使用者資料 (from.profile)** --- #### 新增評論 (FaceBook 限定) ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/BKQYWVtOKCEMOnAd-image-1587644337019.png) --- #### 刪除評論 (FaceBook 限定) ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/SdVNSNtyJS2u72HF-image-1587644488427.png) --- #### 使用者回應文章 (FaceBook 限定) ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/VWTGHwuoMZOWFmKn-image-1587641444920.png) **註：以粉絲專業身分留言不會觸發此項目** --- #### 使用者刪除回應 (FaceBook 限定) ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/BOk7BW7EA0DWNblv-image-1587641635044.png) --- #### 使用者對某則貼文按讚或心情 (FaceBook 限定) **使用者對某則貼文按讚或心情時觸發此事件** ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/IMYyjUjwJMDjWdPV-image-1587645566979.png) --- #### 使用者編輯某則貼文的按讚或心情 (FaceBook 限定) **使用者編輯某則貼文的按讚或心情時觸發此事件** --- #### 使用者收回某則貼文的按讚或心情 (FaceBook 限定) **使用者收回某則貼文的按讚或心情時觸發此事件** --- #### 群組有新成員 (LINE 限定) --- #### 群組成員退出 (LINE 限定) --- #### 當使用者使用優惠券 (LINE 限定) **註：觸發此事件需先新增優惠券 ( 左上角漢堡選單 > 優惠券 )** --- #### 當使用者收到優惠券 (LINE 限定) **註：觸發此事件需先新增優惠券 ( 左上角漢堡選單 > 優惠券 )** --- #### m.me 連結 (FaceBook 限定) [![m_me教學.png](https://book.gosu.bar/uploads/images/gallery/2020-03/scaled-1680-/7zX2hatsYRZ4fQZC-m_me%E6%95%99%E5%AD%B8.png)](https://book.gosu.bar/uploads/images/gallery/2020-03/7zX2hatsYRZ4fQZC-m_me%E6%95%99%E5%AD%B8.png) --- #### 成功兌換獎品 使用此功能需要申請 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/GoZuNdSMkGReqxpP-image-1591869811326.png) --- #### 當訊息未被處理時 常用於告知使用者此服務有什麼功能 例如：當使用者隨意輸入一串文字沒觸發任何流程時，跳出功能表讓使用者查看。 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/KxjGjYPvRWvprt22-image-1591869994854.png) ##### 觸發方法 當觸發流程編輯器的起始點後續流程都沒有碰到 **"標示為已處理"** 就會運行此功能 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/R9YMxqKSWKspxJvd-image-1591874101916.png) # 決策點 ### 節點樣式 ### ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/wNReKqc82CA8lzqK-image-1587715414013.png)![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/FmAvcy1uMkBeeweK-image-1587715429445.png)![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/2qO0yJUcjljul3Hx-image-1587715464103.png) ##### 使用情境 用於決策各式條件的節點，只要條件成立(true)就會往後續流程運作。 ### 節點介紹 - 條件名稱 ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/sKd0tJfqhv1kOiAZ-image-1587975513783.png) **用於與其他共同開發者溝通時使用 (方便團隊溝通)** ### 節點介紹 - 條件類型 #### 文字比對 文字完全符合才會進入後續流程 ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/g0K9cyU556pYAjjQ-image-1587976364998.png) #### 關鍵字比對 註：需先至**關鍵字管理**新增關鍵字，左上角漢堡選單 > 設定 > 關鍵字管理 ![](https://book.gosu.bar/uploads/images/gallery/2020-04/scaled-1680-/oVsDCOkgIzPfXCu8-image-1588043359370.png) #### 檢測標籤 註：需先至**標籤管理**新增標籤，左上角漢堡選單 > 設定 > 標籤管理 ![](https://book.gosu.bar/uploads/images/gallery/2020-05/scaled-1680-/CCU5Pz0s91tASAif-image-1589190162383.png) #### 檢測屬性 註：可以至**屬性管理**新增更多屬性，左上角 > 設定 > 屬性管理 ![](https://book.gosu.bar/uploads/images/gallery/2020-05/scaled-1680-/Cqojy4WJe7NVe7bS-image-1589190420868.png) #### 程式碼 若程式碼執行結果為 true，執行後續流程 ![](https://book.gosu.bar/uploads/images/gallery/2020-05/scaled-1680-/OYR5jTk5l6eaxImr-image-1589190856322.png) #### 篩選好友編號 註：可至好友清單查看使用者id，如下圖 ![](https://book.gosu.bar/uploads/images/gallery/2020-05/scaled-1680-/GRgoYa00WQOLb3oc-image-1589193178009.png) --- 編號若符合執行後續流程 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/dLkPlhgSl7nYXHTf-image-1591859962240.png) #### 篩選好友類型 ![](https://book.gosu.bar/uploads/images/gallery/2020-05/scaled-1680-/vri5Mv1uWFUps6vJ-image-1589193397282.png) #### 篩選平台 ![](https://book.gosu.bar/uploads/images/gallery/2020-05/scaled-1680-/C37mz1n1cxuiStSY-image-1589193422748.png) #### 篩選機器人 註：需先至**機器人管理**新增機器人，左上角漢堡選單 > 設定 > 機器人管理 ![](https://book.gosu.bar/uploads/images/gallery/2020-05/scaled-1680-/SGvgmmAi4g8yFLox-image-1589193485134.png) #### 篩選 Facebook 文章 使用須知 1\. 機器人管理新增Facebook機器人（左上角漢堡選單 > 設定 > 機器人管理） 2. 粉絲專頁已有文章（若找不到，請點擊更新貼文） ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/9SuFpVSqD9y7T9Bm-image-1591860301841.png) 常用用於配合起始點(使用者回應文章 FB)，來針對使用者回應哪一則文章，接續後續流程。 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/R0ItOgz9JbrYzlWp-image-1591861016679.png) #### 比對 Facebook 文章 HashTag 文章中若 HashTag 內容相同 若與判斷一致，執行後續流程。 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/m0sDiaHaZgrB3X6V-image-1591860872067.png) #### 檢測是否可以兌換 (暫不開放) 若需要此功能需申請，若您可以兌換(兌換活動可設置條件) 則執行後續流程 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/MSTKfea1kB11WzdR-image-1591862660022.png) #### 語意分析 若需要此功能需申請，與關鍵字雷˙同，但額外多了容錯率。 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/CkbgN4SXRKuMp5iW-image-1591867255551.png) #### 其他情況 註:若執行到必定觸發後續流程，都將此條件類型放置最後，如下圖。 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/eNJy1t6GVYm7BqeC-image-1591867383316.png) ### 進階介紹 - 多選模式 與 擇一模式 #### 功能前置條件 1\. 進階模式需要開啟 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/bpEEuyQeWy3QCg8i-image-1591867819130.png) 2\. 決策點內，需要兩個條件以上 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/0VQR0D3eIagXNcFP-image-1591867856667.png) #### 擇一模式 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/44JeF9donOQRppU0-image-1591868584606.png) #### 多選模式 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/OR8ENm4dWJ0aMHBO-image-1591869039713.png) # 發送訊息 ### 節點樣式 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/skpawe8N1T4mtdgo-image-1591884394726.png) ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/xZPO4K45wgZr1Uia-image-1591884405211.png) #### 文字 將您輸入的文字內容呈現給使用者，可將程式化內容印出。 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/CEjZolDWSUEkpLrm-image-1591884808223.png) #### 圖片 ##### 上傳圖片（可程式化） ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/X4h8Krq0WyO77gq0-image-1591885381877.png) ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/4tQxPdUlW7tnAzb1-image-1591885460401.png) ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/XLz4Q2PcsWo3wNtY-image-1591885482039.png) ##### 從範本中挑選（可程式化，可設定多個圖層） 圖像編輯器 > 新增圖片 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/LO36wczkDA6tdziv-image-1591885834594.png) ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/wwi0oulHj1z17GI1-image-1591932036473.png) #### 卡片 卡片可以進行疊加，一組卡片疊加上限10張 卡片LINE最多4個按鈕，Facebook最多3個按鈕 建立新卡片 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/veLMSEFyTcFSObwr-image-1591949991699.png) 從範本中挑選 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/vHke6Jhe8bkF6ZJn-image-1591952056180.png) #### 海報 建立新海報 從範本中挑選 #### 聲音 錄音 上傳檔案 #### 影片 錄影 上傳檔案 #### 優惠券 ### 進階介紹 - 進階功能說明 # 設定屬性 # 讀取屬性 # 圖文選單 # 隨機 # 兌換 #### 節點樣式 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/5XJI8JVPXeHr4W0R-image-1591179804750.png) ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/gHaCphbysV8UKH3Y-image-1591179786486.png) 註:此功能為進階模式 #### 使用兌換節點功能預先完成工作 1\. 新增獎項 2\. 新增領取獎項條件 #### 新增獎項 ##### 進入獎品管理 ( 左上角漢堡選單 > 獎品管理 ) ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/IEe6vPMPnLqoihwP-image-1591180391859.png) ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/k7ZUSISXsRly0UJu-image-1591180512204.png) ##### 新增獎品 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/z9elVErDVZfntWLl-image-1591181419420.png) ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/wQTDSX82vLRi1lQw-image-1591181496122.png) ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/jaYRba7DmjzWMzMN-image-1591181551303.png) ##### 建立序號 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/CH4kClly2mk0bbgM-image-1591181751486.png) ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/4gHy2oAMkTib7cxn-image-1591181842157.png) ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/aMpDn09YSL0lLc6O-image-1591269263370.png) #### 新增領取獎項條件 ##### 進入兌換活動 ( 左上角漢堡選單 > 兌換活動 ) ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/IEe6vPMPnLqoihwP-image-1591180391859.png) ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/J9JtSHxsKHMrQ1TN-image-1591182340448.png) ##### 新增兌換活動 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/cdKgdTSVAtWnDKl7-image-1591182553473.png) ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/IGmphsuTPhjcyZS4-image-1591182675641.png) ##### 新增兌換辦法 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/acOnN63jHgHFW9Do-image-1591182916931.png) ##### 兌換設定值 範例: 1\. 活動期間長達1個月 2\. 活動內每人只能參加一次 3\. 一週，只有週一至週五可領取 註: 一個活動可以多種兌換辦法，例如: 每人可以抽一次，分享再額外多抽一次 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/2IJsR7SJTfnZEhVs-image-1591184099459.png) ##### 將設定完成點擊下方儲存即可 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/4YyzhsNtJwtNHKGP-image-1591269925553.png) #### 將領取方式建立置流程編輯器 ##### 進入左上角漢堡選單 > 流程編輯每日對 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/qiWtWTb1c0TrtfoP-image-1591264358324.png) ##### 流程範例圖 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/BFM5uJz6e481HlZM-image-1591268031492.png) ##### 起始點 首先先拖曳出**起始點**設定為**收到文字** ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/Tjn7y5BvyqPZq5HL-image-1591267327480.png) ##### 決策點 (文字判別) 接著拖曳出**決策點**判別**比對文字**是否正確 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/ntPKQZo17AkdVwJO-image-1591267546276.png) ##### 決策點(是否可以兌換) 文字判別接著判別使用者是否已有兌換過獎品 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/kcNbLRYNcSjH1wbR-image-1591268052173.png) ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/ruLpo0SoXOsfuIQg-image-1591268066653.png) ##### 當進入可抽獎選項時，使用兌換節點 ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/w2clYgwEUUP8oooa-image-1591268129133.png) ##### 兌換功能回傳值參考表 ( tmp.exchange )
中獎已領完獎品條件不符合
``` {

"profileId": 345,

"exchangeId": 358,

"methodId": 429,

"ticketId": 1024,

"ticketCodeId": 815,

"code": "布娃娃"

} ``` 		``` {

"statusCode": 409,

"message": "獎品已經被換完"

} ``` 		``` {

"message": "條件不符合",

"rules": [

{

"id": 26,

"sunday": true,

"monday": true,

"tuesday": true,

"wednesday": true,

"thursday": false,

"friday": false,

"saturday": true,

"result": false,

"reason": "活動時間為 Sun、Mon、Tue、Wed、Thu、Fri、Sat"

}

]

} ```
##### 發送訊息 **中獎通知 : 您的獎項為:${(tmp.exchange.code || '未中獎')}** ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/GlyRGWvQPT3p1N5H-image-1591268722974.png) **系統繁忙請稍後** ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/zqNQox9pvL13eKRd-image-1591268764480.png) **已抽過獎** ![](https://book.gosu.bar/uploads/images/gallery/2020-06/scaled-1680-/da3hTTAW6WV4EBr9-image-1591268791482.png)