第四章 系統建置
第四節 系統實作
國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
第四節 系統實作
系統實作分為網站端與行動應用端功能兩部分。網站端功能為加入、刪除、新增 自定義行程與自動規劃路線。行動應用端主要為查詢與變更行程、結合 Google Maps App 的自動交通規劃、景點資訊瀏覽。另外，行動應用端亦提供備註記事 與圖片整合功能，讓自由行旅遊需求服務一併整合至行動應用端。
一、網站端功能
網站實作行程表功能主要為加入、更動、刪除與新增自定義景點至行程表，並可 從行程表排序，直接查詢任兩景點間交通路徑，顯示於左方 Google Maps 地圖。
1. 加入行程：從景點列表拖曳景點至右方的行程表，加入景點。在行程表中可 上下拖曳景點變換順序（詳見圖 4-15）。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
2.
刪除行程：在安排行程的過程中，將欲刪除之景點從行程表中拖曳至下方灰 色區塊即可移除（詳見圖 4-16）。圖 4-16 刪除行程
3. 新增自定義行程：點擊景點列表右方「＋」按鈕，即跳出新增景點視窗，輸 入景點名稱與地址後完成新增。自定義景點將顯示於景點列表最上方，且為 特殊顏色，讓使用者更方便找尋（詳見圖 4-17、圖 4-18）。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 4-17 新增自定義行程
圖 4-18 新增自定義行程
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
4. 結合 Google Maps 自動路線規劃：將景點排序在右方行程表後，點擊任一 景點後左方的 Google Maps 會自動顯示此景點與下一個行程的交通路線，隨 著行程排序改變交通規劃亦會跟著變動（詳見圖 4-19）。
圖 4-19 結合 Google Maps 自動路線規劃
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
二、行動應用功能
行動應用端主要為即時查詢與變更行程，變更後的行程內容會自動與網站端 同步，並將行程自動連結 Google Maps App。行動應用端亦提供景點相關資訊瀏 覽、備註記事、圖片整合與基本設定功能。
1. 查詢行程：在網站端安排的行程內容會自動同步至行動應用端，當使用者需 要查詢時，只需打開 App 選擇欲瀏覽哪一天的行程（詳見圖 4-20），就能立 即查詢當天行程內容（詳見圖 4-21）。
圖 4-20 選擇查詢哪天的行程 圖 4-21 當天行程內容
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
2. 變更行程：使用者能夠即時更改行程內容，更改行程順序（詳見圖 4-22）或 是刪除行程（詳見圖 4-23），編輯完成後的行程會自動存至雲端資料庫，網 站端亦會同步變更。
圖 4-23 刪除行程 圖 4-22 變更行程
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
3. 結合 Google Maps App 自動交通路線規劃：點擊景點右方的地標圖示後，
App 會自動開啟 Google Maps App，並將景點地址一併傳送到 Google Maps App，自動出現查詢好的路線（詳見圖 4-24）。
圖 4-22 景點右方的地標圖示開啟 Google Maps App
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
4. 景點相關資訊瀏覽：點擊景點會跳轉至景點資訊頁面，此頁面是直接連結至 景點相關資訊或官方網站（詳見圖 4-25）。
圖 4-23 點擊景點跳轉至景點資訊頁面
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
5. 備註記事：於備註頁籤新增記事內容，例如：飯店地址、電話等文字資訊，
新增完成後會顯示於備註列表（詳見圖 4-26）。
圖 4-24 備註記事
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
6. 圖片整合：於圖片頁籤點擊右上方新增圖示，選擇欲加入的圖片後，即加入 至圖片頁籤（詳見圖 4-27）。
圖 4-25 加入圖片
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
7. 基本設定
：提供 App 帳號管理、隱私設定等功能（詳見圖 4-28）。圖 4-26 設定頁面