GOSU BAR 案例分享

以案例分享介紹 GOSU BAR 各種應用

防疫口罩大作戰

前情提要

因 武漢肺炎疫情、口罩實名制 等重大事件,當衛福部將口罩庫存數量以 open data  的方式開放後,掀起了一場口罩黑客松的熱潮,口‍罩供‍需資‍訊平‍台 中可以看到,許多貢獻者在數個小時後製作出各式各樣的應用,在這些貢獻者的努力下,透過科技與 open data 彌平了資訊落差。

健保特約機構口罩剩餘數量明細清單

透過 GOSU BAR 擁抱 open data 製作出你的口罩庫存查詢聊天機器人

短時間的設定,你也可以做出自己的聊天機器人,話不多說,先來看看成果吧!

 

製作教學

aDJ6iWovhpqMUSWJ-image-1581327806752.png

製作完成的流程如上圖,首先我們先建立兩個起始點,分別是收到文字、加入好友。

設定一個決策點,區分引導類型的文字:

7v9Bg8DFh9JJTUHe-image-1581327980193.png

當觸發引導文字或成為好友時,提供使用者引導對話:

         aMY1SyEt5v5fwO5C-image-1581328047501.png  w6FjJoNZEXloEHxL-image-1581328236054.png

 

當使用者輸入其他資訊時,要到 opendata 中 健保特約機構口罩剩餘數量明細清單 抓取最新資料並篩選後提供卡片

首先使用 執行API 節點抓取 CSV 資料, URL: https://data.nhi.gov.tw/resource/mask/maskdata.csv,型態: CSV

pXvNfrO2eHPZdJOF-image-1581328424017.png

為了使用者體驗,當 open data 在維修、更新等情況資料無法讀取時,我們要給我使用者文字訊息回饋:

oNjDIKc1CBHzPgdQ-image-1581328626234.png

當讀取成功時,我們要透過 執行程式碼節點 完成資料整理以及篩選:

teT2zFVNF1X8TfOP-image-1581328896350.png

// 複製專區


let content = (record.content || "").trim();

tmp.data = tmp.data.slice(1).map(row => {
    return {
      code: row[0],
      name: row[1],
      address: row[2],
      phone: row[3],
      adultMaskCount: row[4],
      childMaskCount: row[5],
      updatedAt: row[6]
    }
}).filter(d => {
    return d.name.includes(content)|| d.address.includes(content)
}).sort((a, b) => {
    return parseInt(b.adultMaskCount)- parseInt(a.adultMaskCount);
}).slice(0, 10);

tmp.i = -1;

 

當資料整理篩選完畢後,我們接下來就要透過流程迴圈方式:

YgiuVElwdL61dNUl-image-1581329137432.png

先透過 執行程式碼 來做迴圈的前處理:

GVNbMWuTKUbbV6Z7-image-1581329712792.png

// 複製專區


tmp.i ++;

tmp.card = tmp.data[tmp.i];


接著透過決策點控制迴圈:

m5NS22VmZzx5az6r-image-1581331880705.png1v2yutKd4OMhUGeT-image-1581332026019.png

當找不到相關的資訊:

vXA91fj1sAc6neK1-image-1581332128236.png

產生卡片方式

n4EOrMHUNVUJWyO0-image-1581332339184.png

p72Hugugidm1fsdE-image-1581332375676.png

// 複製專區


// 標題
${tmp.card.name}

// 內容
口罩數量狀況:
成人 ${tmp.card.adultMaskCount} 個\t 兒童 ${tmp.card.childMaskCount} 個
地址: ${tmp.card.address}
資料更新: ${tmp.card.updatedAt}

// 按鈕 1 - 連結 - 致電詢問
tel://${tmp.card.phone}

// 按鈕 2 - 連結 - Google Map
https://www.google.com.tw/maps/place/${tmp.card.address}

// 按鈕 3 - 說話 - 更新資訊
${tmp.card.name}


 

完成流程之後就可以擁有一個自己的口罩庫存查詢聊天機器人了!

 

簡易問答

前情提要

開發者製作機器人時往往會推出心理測驗、優惠券、節慶活動、......等等,會希望使用者參與並將個人基本資訊以及愛好作為回饋也方便分類客群。

製作教學

q55PSrLPteOLFL57-image-1589535398221.png

製作如上圖流程,先建立一個起始點,內容設定為收到文字

後續連接一個決策點用於文字比對,當作引導文字:

CgHqVNJz9QrHm6FD-image-1589539703421.png

再將使用者個人資料讀取出來確定,讓使用者自行確認是否已填寫:

註:如果您希望的屬性並找不到就需要新增,左上角漢堡選單 > 設定 > 屬性管理 新增希望的屬性

cqKn4E64aDTOe6zU-image-1589540535966.png

再來需要呈現給使用者可以自行確認:

41ALxGOCNlgFa5A2-image-1589540794771.png

卡片設定值:

Z3KEDSD1AknhfPHF-image-1589540816340.png

點擊按鈕(開始填寫姓名),之後告知使用者可以開始輸入姓名:

TLvFYNFSXlnXTHre-image-1589540935079.png

此時需要等待使用者輸入姓名,新增一個起始點設定如下:
註:若看不到額外事件選項,就表示忘記開啟 進階功能,右上角勾選即可

Z59W9k8UV6HczVPf-image-1589541182008.png

當使用者輸入完成之後,接續將使用者輸入的內容儲存至屬性內:

zCc1TQwOORsuHG9q-image-1589541264363.png

儲存屬性完成後,再次讓使用者確認資料是否正確:

WqtCEvIEfZ9kPvmm-image-1589541752692.png

卡片設定值:( ${record.content} )

DqlO1Fsmldx4TzFm-image-1589541924962.png

根據使用者點擊選項來做處理,點擊 資料正確 按鈕要告知使用者成功填寫:

WLoa8ZfsyThu7AMv-image-1589542056298.png

若使用者點擊 重新輸入 按鈕,要將屬性清空後回到重新填寫處:

aSPkCVrXQZlzEhUW-image-1589542094057.png

註:若遇到虛線,所有已讀取屬性、變數都會遺失,所以要再次讀取屬性

q55PSrLPteOLFL57-image-1589535398221.png

圖文選單抽換方式

抽換觸發使用者的選單

教學範例:

VozNr7kESCpDcYlg-image-1589801437118.png

圖文選單設定值:

965pNPulAfa5FS4q-image-1589801512851.png


全部使用者統一抽換選單

註: 需要統一抽換使用者,先將所有流程的圖文選單修改為新版圖文選單,再進行統一抽換。

教學範例:

frFbs3qusM0xnxLc-image-1589800670756.png

圖文選單設定值:*

W9ncSFx3IYhcdAEi-image-1589800728269.png


抽換特定使用者的選單

註:進階功能需開啟

pLNpKaSzgbI5umuE-image-1589802341984.png

教學範例:

fB0GPb5FRHORUwbv-image-1589880734451.png

如何查詢編號,好友清單 > 篩選使用者:

8nGpN4lSMfTEGCbR-image-1587708205105.png

圖文選單設定值:

xyFkV1GL2ZUgP0kw-image-1589880553275.png


教學範例:

H183hwsnbIGIpTd3-image-1589803238072.png

查詢對象節點設定值:

leYSpdV6rK2HGCHM-image-1589803202125.png

圖文選單設定值:${tmp.profiles.map(i=>id)}

jQPEZ49wKvNgwYXj-image-1589802949421.png

發送訊息節點設定值:

總數:${tmp.profiles.map(i=>id).length}

編號:${tmp.profiles.map(i=>id)}

ppp2HGAxd6OhSb3A-image-1589803065815.png


教學範例:

yOjJwbXblujTqOaM-image-1589802817329.png

查詢對象節點設定值:

g5fJk1hHEOSbspSe-image-1589802879753.png

圖文選單設定值:${tmp.profiles.map(i=>id)}

jQPEZ49wKvNgwYXj-image-1589802949421.png

發送訊息節點設定值:

總數:${tmp.profiles.map(i=>id).length}

編號:${tmp.profiles.map(i=>id)}

ppp2HGAxd6OhSb3A-image-1589803065815.png

抽獎券應用(優惠券+兌換功能)

情境

1. 加入好友時使用者會領到一張抽獎券
2. 活動期間內就算封鎖再加入好友,也只會拿到相同一張的抽獎券

預先操作

1. 新增獎品(獎品管理,建議建立測試用的獎品清單,方便檢測用
2. 新增兌換條件(兌換方式)
3. 新增標籤(已領取標籤、已抽過標籤)
4. 抽獎券(優惠券)

新增獎品(獎品管理)

Pvv2U7RrGEVtlKks-image-1591706289572.png

z9elVErDVZfntWLl-image-1591181419420.png

wQTDSX82vLRi1lQw-image-1591181496122.png

jaYRba7DmjzWMzMN-image-1591181551303.png

CH4kClly2mk0bbgM-image-1591181751486.png

4gHy2oAMkTib7cxn-image-1591181842157.png

1MWAVBgHBM4SSJZ6-image-1591707831085.png

註: 若獎品為 LinePoint 各種點數 就要個別建立獎品集(例:1P、3P、10P個別建立),還建議建立測試獎品集(領取後無法更改)

新增兌換條件

6ncYKP5sOHcjCZLv-image-1591706702810.png

新增兌換活動

cdKgdTSVAtWnDKl7-image-1591182553473.png

IGmphsuTPhjcyZS4-image-1591182675641.png

新增兌換辦法

acOnN63jHgHFW9Do-image-1591182916931.png

2IJsR7SJTfnZEhVs-image-1591184099459.png

yZbZ6rWcvmN3isS4-image-1591879426356.png

新增標籤

WF2eYpaPbSDpiUc2-image-1591706876984.png

新增兩個標籤,都要設定適用於使用者

MD9ZlQMW4WQSHoRH-image-1591875675265.png

 MjbcDOGvF0M5q9SE-image-1591875712804.png

優惠券

MqwnHnW9QK61yKga-image-1591706968459.png

新增優惠券

Fqvd2qhz6qnbxxKX-image-1591876225714.png

3h5dMHae2lRYYFC0-image-1591878037771.png

根據情境,每個使用者只能領取一張,所以要再取得抽獎券時貼上標籤

aYlpQW42zzMgACmp-image-1591878265925.png

流程圖

UAqoIukfANk56EKt-image-1591702354849.png

1. 加入好友時會執行的流程步驟

起始點(加入好友)

Kzc5QXVroE20LQl4-image-1591704595432.png

決策點(檢測標籤是否已領過抽獎券)

1jizQrc5yB7DPIOz-image-1591704744589.png

發送訊息(若已領過抽獎券進入條件1,告知使用者您已經領取過抽獎券)

p6NSXqOf1MPRBd79-image-1591879753000.png

發送訊息(若沒領取過就發送一張優惠券給使用者)

註:優惠券需要公開才能選取到

Hll9uyayJEY8jUSy-image-1591880330048.png

 

2. 使用優惠券時會執行的流程步驟

起始點(使用優惠券)

QgY2xy1fp0t4InNl-image-1591705134482.png

決策點(判別標籤,防止使用者重複領取到優惠券,重複抽取)

rUdB2wfzGM90E1H6-image-1591881977739.png

發送訊息(已抽過獎,告知使用者已抽過獎品)

hkFyVocQZn937f5D-image-1591881803769.png

當沒抽過獎執行後續流程,貼上標籤

OaZxsDUFkaYMo80C-image-1591881993881.png

進入隨機節點

07BW1HKd0EpGGAVs-image-1591882065297.png

兌換節點(分別1P、3P、10P)

DjGk0i5714uGcgVL-image-1591709216242.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、Sat"
}
]
}

將回傳資料進行整理

if(tmp.exchange.code != undefined){
    return tmp.text = "恭喜您獲得LinePoint N點"+"\n序號:"+tmp.exchange.code;
} return tmp.text = "未中獎";

NEyp16WoBQEAle4W-image-1591882233547.png

中獎發送通知給使用者

mx8oBARljW0VwZtC-image-1591882292003.png

沒中獎

SqLVeLZULT0MjKl3-image-1591882319387.png

GOSU BAR 應用貼士

提供各種 GOSU 應用的技巧與小範例

GOSU BAR 應用貼士

GOSU BAR 透過流程編輯器或圖像編輯器產生 QR Code

原文: https://hackmd.io/@EJay/SyxzbwD0S