ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。...
Transcript of ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。...
![Page 1: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/1.jpg)
1
ElderFunPack
銀髮遊樂通
隊伍名稱:Innovation Daddy
曾敏傑
![Page 2: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/2.jpg)
2
目錄
壹、 主題說明 ................................................................................................................ 3
貳、 系統功能 ................................................................................................................ 4
參、 創新特色 ............................................................................................................. 23
肆、 技術說明 ............................................................................................................. 24
伍、 Open Data & API 使用說明 ......................................................................... 25
陸、 預期成果與效益 ................................................................................................ 28
![Page 3: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/3.jpg)
3
壹、 主題說明
有多久沒有幫長輩父母規劃行程了呢?而人要活就是要動,參
加活動或是出外走走是銀髮族非常開心與主要的休閒項目,
ElderFunPack 區隔出「行前規劃」與「行中支援」的情境,結合
Open Data 與 ChatBot 來改善使用者的體驗。
行前規劃可分為「蒐集資料」、「建立行程」與「分享討論」,並
進一步將行程內容定義為「景點」與「活動」,搭配上銀髮族外出時
必須要考量的相關資訊,例如:天氣、空氣品質、景點資訊(照
片、評價)、交通資訊與親善設施等,讓使用者可以輕鬆的完成樂活
行程規劃。行中支援指的是在旅途中,如何讓銀髮族更自在的旅
遊,例如可帶出周遭的銀髮親善設施或臨時備案,讓大家在途中更
輕鬆安心。
行前規劃
蒐集資料 如何蒐集「景點」與「活動」安排行程?
建立行程 用對話來建立行程?
分享討論
如何分享給長輩簡單易懂的行程?
出發前預覽路線景色動畫?
行中支援
備案 行程中的景點臨時取消,臨時備案?
親善設施 行程景點中鄰近的廁所、警局與醫院?
![Page 4: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/4.jpg)
4
貳、 系統功能
目前功能可以分為 ChatBot 版與 RWD(Responsive Web Design)版,
ChatBot 主要是透過對話方式來完成規劃行程,避免複雜的 APP 操
作,讓銀髮族也能輕鬆上手。
ChatBot RWD
功能 行前規劃
探索景點
探索活動
建立行程
挑選景點
挑選活動
發佈行程
檢視自訂行程
建立備案
檢視套裝行程
檢視行程簡報
行中支援
銀髮親善地點
臨時備案
動腦遊戲
系統功能分別如下:挑選景點、挑選活動、發佈行程、建立備案、
檢視自訂行程、檢視套裝行程、檢視行程簡報。
功能清單如下:
功能項目 功能說明
挑選景點 依照自動定位、手動定位、關鍵字來瀏覽景點
![Page 5: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/5.jpg)
5
功能項目 功能說明
檢視景點基本資料
挑選景點
挑選活動
依照縣市別來帶出相關活動資訊
顯示活動基本資料
挑選活動
建立行程 將挑選好的景點與活動發布為行程
建立備案 在既有行程下建立備案景點/活動
檢視自訂行程
行程包含景點與活動。
行程清單
檢視官方行程
直接查詢與檢視套裝行程
介接新北市政府行程資料
( http://data.ntpc.gov.tw/od/data/api/DC6F9D55-A41A-
4435-B416-593F2EBC6751?$format=json )
依上述 Open Data 為基礎進行加值後帶出行程
以下分別就 ChatBot 版(Facebook Messenger)與 RWD 版來說明。
![Page 6: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/6.jpg)
6
探索活動:ChatBot 版本
1.歡迎說明。 2.開始對話,輸入「活
動」、「城市」,例如:1(新
北)。
3.輸入活動「類別」,例
如:15(其他),ChatBot 回
覆探索到的活動結果。
4. 點選其中一個活動的
「活動地點」,ChatBot 回覆
該活動的地點。
5.點選「加入地點」,將該
活動地點加於行程中。
![Page 7: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/7.jpg)
7
探索景點:ChatBot 版本
1.輸入「景點」,ChatBot 回
覆輸入地標,例如:輸入新
北市鶯歌 。
2.ChatBot 探索地標週遭景
點。
3.挑選欲加入行程的景點,
例如點選「曼杜瓦鶯歌
店」,加入景點。
![Page 8: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/8.jpg)
8
建立行程:ChatBot 版本
1.輸入「建立行程」。 2.ChatBot 詢問相關「行程
名稱」、「行程備註」、「行程
日期」。
3.ChatBot 依據先前加入的
活動與景點資料建立行程,
發佈成功,點擊詳細行程。
4.詳細行程中帶出行程當日
天氣資料。
5.往下滑,帶出行程景點,
點擊 TRANSIT 可顯示動畫。
6.播放景點間路線動畫。
![Page 9: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/9.jpg)
9
播放簡報:ChatBot 版本
1.點擊紅色 PLAY 播放簡
報。
2.進入簡報。 3.往右滑動顯示景點基本資
料,包含該地旅遊日天氣。
4. 往下滑,景點照片與評
論詳細資料。
5.接續往右滑顯示景點間的
地圖。
6.最後有所有移動的行程資
訊。
![Page 10: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/10.jpg)
10
銀髮親善:ChatBot 版本
1.輸入「銀髮親善」。 2.選擇地點。 3.選擇或輸入所在地點。
4.ChatBot 回覆該地鄰近的
廁所。
5.鄰近的警局。 6.鄰近的醫院。
![Page 11: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/11.jpg)
11
臨時備案:ChatBot 版本
1.輸入「備案」。 2.選擇地點。 3.選擇或輸入所在地點。
4.ChatBot 回覆該地鄰近的
備案景點。
5.點擊地圖即可帶景點所
在。
![Page 12: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/12.jpg)
12
動腦遊戲:ChatBot 版本
1.輸入「動腦遊戲」,打發
行程中的等待時間。
2.點擊圖可以放大,猜猜看
有幾種動物。
![Page 13: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/13.jpg)
13
挑選景點:(以下皆為 RWD 版,以 Desktop 的版面來說明)
1.挑選欲前往的景點,按下 Add
2.也可按下「天氣」,檢視未來一週天氣
![Page 14: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/14.jpg)
14
挑選活動
1.挑選欲參加的活動,按下 Detail
2.系統帶出該活動相關資訊,包含活動地點,點選 Add。
![Page 15: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/15.jpg)
15
發佈行程
1.輸入行程名稱、備註、日期,按下 Publish
2.系統發佈該行程於預覽行程中。
![Page 16: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/16.jpg)
16
檢視行程
1.行程中包含該日的天氣資訊、提示資訊、景點、景點間交通預覽路徑。
![Page 17: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/17.jpg)
17
2.預覽路徑以動畫方式播放,可調整播放速度。
![Page 18: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/18.jpg)
18
檢視行程簡報
1. 按下 PLAY 鍵即可播放簡報。
2.簡報一景點介紹,包含地址、景點名稱、天氣、降雨機率、溫度、紫外
線與空氣品質資訊,讓銀髮族出遊先做好準備。
![Page 19: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/19.jpg)
19
3. 景點往下滑,可以檢視多個圖片與評論
4. 簡報提供景點間交通地圖
![Page 20: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/20.jpg)
20
5.景點二
6.簡報最後提供彙總資訊
![Page 21: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/21.jpg)
21
建立備案
1.每個景點可以手動或自動挑選備案景點,手動挑選如下,每個景點也有
氣象資訊。
2.自動挑選,系統依據原景點為中心,自動挑選鄰近評價最高的景點。
![Page 22: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/22.jpg)
22
比較行程
1.勾選將要比較的行程
2.可檢視與比較行程間的景點、天氣、距離、交通時間與交通費用,選擇適
當的行程。
![Page 23: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/23.jpg)
23
參、 創新特色
1. 用 Bot 透過對話來規劃與建立行程。
2. 結合「景點」與「活動」成為行程。
3. 用播放動畫的方式來預覽行程路線景色。
4. 帶出行程地點中鄰近的廁所、警察局與醫療產業資訊。
5. 帶出地點的天氣(降雨機率、溫度、紫外線、空氣品質)資訊。
6. 將行程轉換成各種裝置瀏覽器可播放的簡報,分享給同行的長
輩、家人與旅伴。(免除另外下載或操作複雜 APP 的困擾)
7. 依現有行程建立備案,並可推薦備選景點。
8. 比較行程間的天氣、距離、時間與交通費用。
![Page 24: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/24.jpg)
24
肆、 技術說明
使用者端可透過行動裝置來存取 Web 服務,透過自動定位/手動定位
/輸入關鍵字來規劃與分享行程。
Client 使用各種裝置的瀏覽器存取「ElderFunPack」服務。
Server 採用的 Web Framework:Microsoft ASP.NET MVC。
Web 設計方式:RWD (Responsive Web Design)。
ChatBot:採用 Microsoft Bot Framework。
![Page 25: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/25.jpg)
25
伍、 Open Data & API 使用說明
本作品提供的 Open Data API 如下。
API 名稱 資料來源 說明 網址
氣象與空
氣指標
中央氣象局、
環保署
可帶出未來一週的天氣預
報、空氣品質指標(AQI),
免除跟不同機關介接的困
擾。
https://elderfunpack.
azurewebsites.net/La
b/QueryWeather
全國警察
局
行政院內政部 全國警察局(含分駐所、派
出所)的名稱、地址、電
話、座標(同時提供常用的
EPSG3826、EPSG4326
的座標規範),節省轉換座
標的不便。
https://elderfunpack.
azurewebsites.net/AP
I/PoliceStation
全國醫院 衛福部 全國醫院名稱、地址、電
話、座標。
https://elderfunpack.
azurewebsites.net/AP
I/ElderHospital
![Page 26: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/26.jpg)
26
另外摘要本案使用的 Open Data。
Institution Name of dataset Link of dataset
文化部活動資訊
音樂表演、戲
劇、舞蹈、親
子、展覽、講
座、電影、獨立
音樂、綜藝、其
他、演唱會
https://cloud.culture.tw/frontsite/trans/Sea
rchShowAction.do?method=doFindTypeJ
&category=5
新北市政府資料
開放平台
新北市觀光景點
http://data.ntpc.gov.tw/od/data/api/8167D
8E3-1C57-4C29-8C49-
7A7CEEA2832F?$format=json
新北市餐飲業者
http://data.ntpc.gov.tw/od/data/api/D9219
E21-A743-4F98-A361-
1FFBE8424D73?$format=json
新北市旅館民宿
http://data.ntpc.gov.tw/od/data/api/F21D4
BB9-E8F8-47D7-94AD-
D4FBC09CBBBA?$format=json
交通部氣象局
鄉鎮一週預報天
氣
https://opendata.cwb.gov.tw/api/v1/rest/d
atastore/F-D0047-091
行政院環保署 空氣品質
https://opendata.epa.gov.tw/webapi/api/re
st/datastore/355000000I-
000259?sort=SiteName&offset=0&limit=
1000
衛福部國民健康
署
醫院 http://data.gov.tw/node/30622
![Page 27: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/27.jpg)
27
Institution Name of dataset Link of dataset
內政部 警察局 https://data.gov.tw/dataset/5958
Places API https://developers.google.com/places
/?hl=zh-tw
MAP API https://developers.google.com/maps/
?hl=zh-tw
Routing API https://developers.google.com/maps/
documentation/directions/?hl=zh-tw
![Page 28: ElderFunPack 銀髮遊樂通 - bhuntr.com...6 探索活動:ChatBot版本 1.歡迎說明。 2.開始對話,輸入「活 動」、「城市」,例如:1(新 北)。 3.輸入活動「類別」,例](https://reader035.fdocuments.net/reader035/viewer/2022081607/5ee23c25ad6a402d666ccc8e/html5/thumbnails/28.jpg)
28
陸、 預期成果與效益
1. 客製行程:行程包含「景點」與「活動」,方便使用者整合規
劃,輕鬆建立行程。
2. 預覽行程:預覽天氣、路線與景色動畫,降低銀髮族對行程的
天氣風險、地點陌生感與不熟悉性。
3. 管理比較:自動/手動建立備案,比較行程間的天氣、距離、時
間與交通費用。
4. 互動分享:可用 ChatBot/RWD 與服務互動,行程自動轉成
Web 簡報,快速分享給家人旅伴,方便不熟悉 APP 操作的長輩
閱覽。
5. 行中支援:可用 ChatBot 快速帶出行中鄰近的廁所、警局、醫
院與臨時備案,方便長者使用,多一份準備讓大家更安心。
預覽行程 管理比較 分享行程