Android應用程式開發：逢甲美食導覽

(1)

報告題名：

Android 應用程式開發：逢甲美食導覽

Building An Android App with A

Virtual Gourmet Tour Guide at Feng Chia

作者：劉俊顯、楊天輔系級：資訊工程學系四年級學號：D9970525、D9929529 開課老師：黃溪春老師課程名稱：專題研究開課系所：資訊工程學系開課學年：102 學年度第 2 學期

(2)

I 逢甲大學學生報告 ePaper(2014 年)

摘要

近年來，智慧型手機的蓬勃發展，手機應用程式也隨之興盛，而軟體又以日常應用或者娛樂等應用程式為居多。而 Google 在 2008 年正式宣佈 Android（安卓）手機平台，並公開所有原始碼後，Android 儼然成為手機第一個完整的開放開發平台。在手機已是人手必備的趨勢下，智慧型手機相關的應用，將會如同個人電腦上般多元發展。有鑑於此，我們利用了 Android 手機作為開發平台，結合 GPS 與 Google Map 的行動定位技術，實作一個逢甲夜市美食導覽的 Android Application，幫助想要找到美食的人給以準確的地點或店家資訊，或是推薦人氣美食給使用者，並且導航目的地路線給使用者，此時智慧型手機將可發揮其便利性。然而，本 Application 依據使用者的要求可以進一步傳遞參數到 Google Map 伺服器達成雲端運算並回傳規劃路徑之結果，更能將使用者所喜好的美食記錄在清單之中，並可將清單上傳至伺服器達成雲端儲存。除了良好的使用者導覽平台外，本 Application 也設有店家平台，提供商家異動美食資料，讓使用者能夠及時掌握美食資訊，達成商家與使用者的互動，促進逢甲商圈的美食發展。

(3)

II 逢甲大學學生報告 ePaper(2014 年)

In the recent years, subsequent to the rapid growth of the smartphone market, smartphone applications are becoming more and more popular. Application categories such as entertainment, daily-life widgets, games, and especially gourmets are the most popular ones. In 2008, Google introduced its mobile phone platform, Android, whose source codes are disclosed, leading to becoming the first development platform with complete open source. Mobile phones have become a necessity to mankind. Under such irreversible trend, smartphone applications will be further developed to bring to even more scenarios, similar to the development of PC software whose applications become diversified.

In view of this trend, we choose a mobile phone running Android, and utilize the Android application development platform, which provides resources such as GPS and Google Map APIs. We design an intelligent gourmet recommendation application, which assists users to find restaurants or vendors and gives their exact locations as well as detailed information. The application is also capable of recommending the popular gourmet and navigating the users to the restaurants or vendors; smartphones brings convenience to people in such scenario. Moreover, the application can send our user inputs to the Google Map servers and retrieve the result of route planning by cloud computing. The users can store their favorite food list to the cloud storages.

In addition to being a gourmet-navigation platform for consumers, the application is also a platform for gourmet-service providers, who are allowed to modify gourmet information, so that consumers obtain the latest, up-to-date

information. With such feature, interaction between the user and the gourmet-service providers is created, and it brings Feng Chia night market to a whole new level.

(4)

III 逢甲大學學生報告 ePaper(2014 年)

第一章緒論 ... 1

1.1 研究背景與動機 ... 1 1.2 研究目的 ... 3 1.3 研究目標 ... 3 1.4 目前其他美食 Apps ... 4 1.5 逢甲美食導覽的優勢 ... 6 1.6 時程規劃及工作分配 ... 8 1.7 本論文結構 ... 9

第二章開發環境及工具介紹 ... 10

2.1 Android 介紹 ... 10 2.1.1 Android 歷史簡介 ... 10 2.1.2 Android 系統介紹及優點 ... 11 2.1.3 Android 發展與應用 ... 13 2.2 開發工具 ... 16

第三章系統分析 ... 18

3.1 系統分析 ... 18 3.1.1 系統架構 ... 18 3.1.2 系統功能描述... 20 3.2 系統資料庫規劃 ... 21 3.2.1 手機端資料庫 – SQLite ... 22

(5)

IV 逢甲大學學生報告 ePaper(2014 年)

第四章系統設計 ... 36

4.1 使用者案例圖 (Use Case Diagram) ... 36

4.2 系統類別圖 (Class Diagram) ... 42 4.3 系統循序圖 (Sequence Diagram) ... 50

第五章人機介面與系統評估 ... 64

5.1 手機端人機介面 ... 64 5.1.1 系統首頁 ... 65 5.1.2 系統目錄 ... 68 5.1.3 美食天堂 ... 73 5.1.4 美食推薦 ... 78 5.1.5 我的最愛 ... 80 5.1.6 會員中心 ... 81 5.1.7 系統資訊 ... 92 5.2 店家網頁版人機介面 ... 98 5.3 系統評估 ... 105 5.3.1 系統優點 ... 105 5.3.2 系統缺點 ... 105

第六章結論與心得 ... 107

6.1 遭遇問題與解決方式 ... 107 6.2 結論 ... 107 6.3 未來展望 ... 108 6.4 心得 ... 109

參考文獻 ...111

(6)

V 逢甲大學學生報告 ePaper(2014 年)

圖目錄

圖 1.1 智慧型手機現有狀況 ... 2 圖 1.4.1 食在方便使用介面 ... 4 圖 1.4.1.A 食在方便 QR code ... 4 圖 1.4.2 電視美食使用介面 ... 5 圖 1.4.2.A 電視美食 QR code ... 5 圖 1.5 逢甲美食導覽使用介面 ... 6 圖 2.1.A Android 系統架構圖 ... 11 圖 2.1.3.A 2010 Android 市場市佔率 ... 13 圖 2.1.3.B Android 系統更新時間點 ... 14 圖 3.1.1 系統架構圖 ... 18 圖 3.1.2 使用者案例圖 ... 20 圖 3.2.1.A 手機端實體關聯圖 ... 22 圖 3.2.1.B 手機端資料庫綱要圖 ... 23 圖 3.2.2.A Server 端實體關聯圖 ... 29 圖 3.2.2.B 伺服器資料庫綱要圖 ... 30 圖 4.1.A 搜尋美食使用者案例圖 ... 36 圖 4.1.B 美食資訊使用者案例圖 ... 37 圖 4.1.C 美食天堂使用者案例圖 ... 38 圖 4.1.D 美食推薦使用者案例圖 ... 39 圖 4.1.E 我的最愛使用者案例圖 ... 39 圖 4.1.F 會員中心使用者案例圖 ... 40 圖 4.1.G 會員登入使用者案例圖 ... 40 圖 4.1.H 系統資訊使用者案例圖 ... 41 圖 3.3.2.A 美食搜尋類別圖 ... 43 圖 3.3.2.B 美食天堂類別圖 ... 44 圖 3.3.2.C 美食推薦類別圖 ... 45 圖 3.3.2.D 我的最愛類別圖 ... 46 圖 3.3.2.E 會員中心類別圖 ... 47 圖 3.3.2.F 系統資訊類別圖 ... 49

(7)

VI 逢甲大學學生報告 ePaper(2014 年) 圖 3.3.3.B 美食天堂循序圖 ... 51 圖 3.3.3.C 美食推薦循序圖 ... 52 圖 3.3.3.D 我的最愛循序圖 ... 53 圖 3.3.3.E 會員中心循序圖 ... 54 圖 3.3.3.F 系統資訊循序圖 ... 56 圖 3.3.3.G 網頁首頁循序圖 ... 58 圖 3.3.3.H 網頁新增美食循序圖 ... 59 圖 3.3.3.I 網頁刪除美食循序圖 ... 60 圖 3.3.3.J 網頁修改美食循序圖 ... 61 圖 3.3.3.K 網頁修改店家資訊循序圖 ... 62 圖 3.3.3.L 網頁修改密碼循序圖 ... 63 圖 4.1 逢甲美食導覽首頁 ... 64 圖 5.1.1.A 系統首頁 ... 65 圖 5.1.2.C 地圖導覽頁面 ... 69 圖 5.1.2.D 店家位置 ... 70 圖 5.1.2.E 線上關鍵字搜尋 ... 71 圖 5.1.2.F 重新定位介面 ... 72 圖 5.1.2.E 偵測更新介面 ... 72 圖 5.1.3.A 美食天堂 ... 73 圖 5.1.3.B 店家介面 ... 73 圖 5.1.3.C 撥打電話 ... 74 圖 5.1.3.D 地圖檢視 ... 74 圖 5.1.3.E 瀏覽美食 ... 74 圖 5.1.3.F 美食種類 ... 75 圖 4.1.3.G 內容目錄 ... 76 圖 5.1.3.H 檢視店家位置 ... 76 圖 5.1.3.I 直接導行 ... 77 圖 5.1.3.J 加入最愛 ... 77 圖 5.1.3.K 移除最愛 ... 78 圖 5.1.4.A 美食推薦 ... 79 圖 5.1.4.B 美食推薦選單 ... 79

(8)

VII 逢甲大學學生報告 ePaper(2014 年) 圖 5.1.4.C 尚未相關推薦 ... 80 圖 5.1.5 我的最愛 ... 80 圖 5.1.6.A 會員中心 ... 82 圖 5.1.6.B 會員註冊 ... 83 圖 5.1.6.C 註冊成功 ... 84 圖 5.1.6.D 會員登入 ... 85 圖 5.1.6.E 修改會員資料 ... 86 圖 5.1.6.F 修改會員資料成功 ... 87 圖 5.1.6.G 捨棄店家 ... 87 圖 5.1.6.H 新增美食 ... 88 圖 5.1.6.I 瀏覽美食 ... 89 圖 5.1.6.J 修改美食 ... 89 圖 5.1.6.K 刪除美食 ... 90 圖 5.1.6.L 會員登出 ... 91 圖 5.1.7.A 系統資訊 ... 92 圖 5.1.7.B 檢查更新 ... 93 圖 5.1.7.C 更新資料 ... 93 圖 5.1.7.D 備份我的最愛 ... 94 圖 5.1.7.E 取得我的最愛 ... 95 圖 5.1.7.F 清除搜尋紀錄 ... 96 圖 5.1.7.G 重置資料庫 ... 97 圖 5.2.A 首頁頁面 ... 98 圖 5.2.B 註冊店家會員頁面 ... 98 圖 5.2.C 登入店家會員頁面 ... 99 圖 5.2.D 新增美食頁面 ... 100 圖 5.2.E 修改美食頁面 ... 101 圖 5.2.F 刪除美食頁面 ... 102 圖 5.2.G 修改會員密碼頁面 ... 103 圖 4.2.1.H 修改店家資訊頁面 ... 104 圖 4.2.1.I 登出會員頁面 ... 104

(9)

VIII 逢甲大學學生報告 ePaper(2014 年)

表目錄

表 1.1 智慧型手機作業系統統計表 ... 1 表 1.5 逢甲美食導覽 App 與其他 App 比較 ... 7 表 1.6.1 時程規劃表 ... 8 表 1.6.2 工作分配表 ... 8 表 3.2.1.A member 會員資料表 / 手機端 ... 24 表 3.2.1.B store 店家資料表 /手機端 ... 25 表 3.2.1.C food 美食資料表 /手機端 ... 26 表 3.2.1.D food_type 美食種類資料表 /手機端 ... 27 表 3.2.1.E favorite 我的最愛資料表 /手機端 ... 27 表 3.2.1.F historySearch 歷史搜尋資料表 /手機端 ... 28 表 3.2.1.G system 系統資料表 /手機端 ... 28

表 3.2.2.A member 會員資料表 / server 端 ... 31

表 3.2.2.B favorite 我的最愛資料表 / server 端 ... 32

表 3.2.2.C store 店家資料表 / server 端 ... 33

表 3.2.2.D food 美食資料表 / server 端 ... 34

表 3.2.2.E food_type 美食種類資料表 /server 端 ... 34

表 5.1.1 系統首頁 UI 元件 ... 65

表 5.1.2.A 系統目錄 UI 元件 ... 68

(10)

1 逢甲大學學生報告 ePaper(2014 年)

第一章緒論

本章節介紹研究背景與動機、研究目的、研究目標、目前其他美食的 Apps、時程規劃與本論文的結構。

1.1 研究背景與動機

網路資訊發達、科技日新月異、智慧型手機也開始普及化，傳統的附帶按鍵的手機也越來越少，智慧型手機開創了這個世代的趨勢。表 1.1 智慧型手機作業系統統計表如表 1.1 ，據 IDC 的報告顯示，Android 系統該季出貨量依然保持領先， 2013 年第二季出貨量為 187.4 百萬台，較去年同期成長 73.5%，市佔率已升至 79.3%。市場研究公司 IDC 發表 2013 年第二季全球智慧型手機報告，全球智慧

(11)

2 逢甲大學學生報告 ePaper(2014 年) 在全球智慧型手機市場的佔比接近 80% ，是市場中最大的贏家，iOS 的市佔則相對下滑。圖 1.1 智慧型手機現有狀況如圖 1.1，本次調查顯示有超過 7 成（70.8%）的民眾擁有智慧型手機，其中有 61.8%的民眾擁有一隻，而 9.0%則擁有兩隻以上；另外有近 3 成（29.2%）的民眾目前仍沒有購買智慧型手機，顯示台灣智慧型手機的使用已相當普及。有鑑於此，智慧型手機在市場上已經成為普及化了，進而可知手機似乎成為時下民眾不可或缺的「日常工具」且又以 Android 為市場主流，在進而發展的利用手機來解決有時候人們無法決定有那些美食可以享用，常常為了食物而困擾，所以我們決定要開發出美食導覽，透過 App 來告知使用者哪裡會有自己喜愛的美食，或者透過商家推薦來獲取資訊，我們將搭配 Google 的 API 與 Eclipse 的 Java 平台，實作美食導覽的 Apps。

(12)

1.2 研究目的

開放性的平台讓任何手機製造商都能免費使用 Android 系統，而 Android 也和 Google 上的服務整合(Application Programming Interface , API)，由於 Android 是個既開放又先進的平台，可以支援各種先進的手機介面、繪圖及 3D 處理能力。除了使用多種 Java 的套件來開發之外，還有提供 Google 的應用程式介面，搭配智慧型手機的觸控式螢幕和重力感測器等硬體設備的支援，強大的軟體套件與硬體設備，讓程式設計者開發出多樣化的應用程式，也為使用者帶來更人性化、更方便的應用程式，所以我們藉由專題來瞭解及研究 Android 平台以及 Google 強大的團隊開發的資源，讓我們認識了 Android 的開發方法和相關 API 之應用，進而也能提升我們對程式軟體開發流程更為了解。

1.3 研究目標

本系統使用 Android 平台來開發，整合透過逢甲夜市委員會提供的夜市觀光手冊資料，以及 Google 提供的開放資源(Source Code)：Google Map V2、Google Place API、Google Directions API，提供使用者與店家管理者一個美食互動平台，使用者也可以透過本系統的「線上地圖搜尋」來獲取地圖位置使資訊。讓使用者除了離線使用美食導覽外，也可以線上搜尋其他店家、地標、大眾交通工具等位置與導航，展現出本系統的便利性。

(13)

4 逢甲大學學生報告 ePaper(2014 年) (1) 食在方便 優點：美食不限制地區、資料量龐大缺點：使用者無法備份還原自己收藏的食物。如圖 1.4.1 「食在方便」資料包括網路推薦、各大電視推薦，這個 App 不同的是，「逢甲美食導覽」可以備份使用者的喜愛的食物到雲端，達到備份還原的功能，方便日後存取。下圖 1.4.1.A 為食在方便的二維碼。圖 1.4.1 食在方便使用介面圖 1.4.1.A 食在方便 QR code

(14)

5 逢甲大學學生報告 ePaper(2014 年) (2) 電視美食 優點：分類清楚、方便搜尋、Facebook(社群網站)打卡。缺點：使用者無法備份還原自己收藏的食物。如圖 1.4.2，「電視美食」主要特色是食品都是經過電視推薦的且方便閱讀，使用介面較為親切，但是導航功能就沒那麼出色，也無法將喜愛的食物備份置雲端。下圖 1.4.2.A 為電視美食的二維碼。圖 1.4.2 電視美食使用介面圖 1.4.2.A 電視美食 QR code

(15)

6 逢甲大學學生報告 ePaper(2014 年) 本系統：逢甲美食導覽優點：分類清楚、方便搜尋、可備份還原已我的最愛。缺點：使用者無法備份還原自己收藏的食物。如圖 1.5，「逢甲美食導覽」主要特色為在人機介面上利用簡單的介面來讓使用者使用軟體能夠容易上手，主要功能為「美食搜尋」、「美食推薦」、「我的最愛」、「地圖導覽」…。但缺點是尚未開發 Facebook(社群網站)的打卡數參考、評論。圖 1.5 逢甲美食導覽使用介面

(16)

7 逢甲大學學生報告 ePaper(2014 年) 表 1.5 逢甲美食導覽 App 與其他 App 比較 逢甲美食導覽 食在方便 電視美食 地區限制 O X X 美食搜尋 O O O 蒐藏美食 O O O 備份蒐藏美食 O X X 還原蒐藏美食 O X X 地圖路徑規劃 O O X 街景服務 X O X Facebook 打卡 X X O 記錄去過店家 X X O 上傳照片 X O X 美食評論 X O O 如表 1.5 所示，「逢甲美食導覽」的最大優勢為可以備份與還原已經蒐藏好的美食，即為「我的最愛」。由於「逢甲美食導覽」還是個雛型系統，部分功能尚在建構中，例如：街景服務、Facebook 打卡、上傳照片與美食評論，都是日後的未來展望與發展空間。

(17)

8 逢甲大學學生報告 ePaper(2014 年) 表 1.6.1 時程規劃表時間工作 2012 9 月 10 月 11 月 12 月 2013 1 月 2 月 3 月 4 月 5 月 6 月 7 月 8 月 9 月 10 月 11 月開發工具認識系統分析與計撰寫功能與測試整合報告撰寫如表 1.6.1，為本系統開發的時程規劃表，因為第一次開發專案以及撰寫大量的程式，因為我們都沒有在二年級選上系統分析與設計還有資料庫這兩門專業科目，所以在分析上花了很多時間，也花了很多時間在於程式問題的研究。從如何架構網站，到網站與 Android 實機的溝通，再到網頁跟 MySQL 資料庫的溝通。最主要花的時間是在 Android 上 API 的研究。表 1.6.2 工作分配表組員工作分配系統分析與設計資料庫設計與維護 Android 程式設計 PHP 程式設計書面資料編輯劉俊顯 ◎ ◎ ◎ ◎ 楊天輔 ◎ ◎ ◎ ◎ 如表 1.6.2 所示，以上為我們工作分配的項目。

(18)

1.7 本論文結構

本論文分成六個章節，一個附錄及一個參考資料。第一章介紹研究背景與動機、研究目的。第二章介紹開發平台的背景，包含 Android 的簡介、Android 的優勢與本系統所使用的工具。第三章是本系統的系統分析與設計，用文字敘述，敘述本系統的概念是架構圖與主要功能，主要功能有：美食天堂、美食推薦、我的最愛、會員中心、快速搜尋。也介紹主要功能所對應的使用者案例圖(Use case diagram)、類別圖(Class Diagram)、循序圖(Sequence Diagram)。再來是資料庫的實體關聯(ER-model)、綱要圖(schema)。第四章將介紹本系統的功能，包括美食天堂、美食推薦、我的最愛、會員中心、地圖搜尋等細項介紹。以圖片呈現各細節畫面；我們將用文字敘述及概念圖來說明如何實作，而不是用程式碼來呈現。第五章因為模擬器測試 Google Map 效果不佳，所以我們實體手機來呈現系統人機介面，附上實機圖片，並評估細部問題。第六章我們將本專題做一個總結，淺談學習過程、心得與未來展望，最後附錄及參考文獻。

(19)

第二章開發環境及工具介紹

本章將介紹 Android 系統的大概簡介以及專題使用的工具的簡介。

2.1 Android 介紹

2.1.1 Android 歷史簡介

大概分 3 個階段: 1.成立:

2003 年 10 月，有「Android 之父」之稱的安迪·魯賓（Andy Rubin）在美國加利福尼亞州帕洛阿爾托建立了 Android 科技公司。談到建立 Android 科技公司的原因，魯賓說：「聰明的移動設備能更好的意識到用戶的愛好和要求。」儘管 Android 科技公司的創始人和員工過去都具有各自的科技成就，但是 Android 科技公司的經營只顯露出它在智慧型手機軟體的方面。

2.Google 的收購及發展：

2005 年 8 月 17 日，Google 收購了 Android 科技公司，Android 科技公司成為 Google 旗下的一部分。

在 Google，魯賓領導著一個負責開發基於 Linux 核心移動作業系統的團隊，這個開發項目便是 Android 作業系統。Google 的合作平台為 Android 提供了廣闊的市場，Google 給予各大硬體製造商、軟體開發商一個靈活可靠的系統升級承諾，並保證將給予它們最新版本的作業系統。 3.成立開放手持設備聯盟： 2007 年 11 月 5 日，在 Google 的領導下，成立開放手持設備聯盟（Open Handset Alliance），開放手持設備聯盟的建立目的是為了創建一個更加開放自由的移動電話環境。而在開放手持設備聯盟創建的同一日，聯盟對外展示了他們的第一個產品：一部搭載了以 Linux 2.6 為核心基礎的 Android 作業系統的智慧

(20)

型手機。2008 年 12 月 9 日，新一批成員加入開放手持設備聯盟，包括 ARM、華為、索尼等公司。

同時，一個負責持續發展 Android 作業系統的開源代碼項目成立了 AOSP （Android Open Source Project）。除了開放手持設備聯盟之外，Android 還擁有全球各地開發者組成的開源社區來專門負責開發 Android 應用程式和第三方 Android 作業系統來延長和擴展 Android 的功能和效能。

2.1.2 Android 系統介紹及優點

圖 2.1.A Android 系統架構圖從圖 2.1.A 中可以看出，Android 系統架構為四層結構，從上層到下層分別是應用程序層、應用程序框架層、系統運行庫層以及 Linux 內核層，分別介紹如下：

(21)

12 逢甲大學學生報告 ePaper(2014 年) 1、應用程序層(Application) Android 平台不僅僅是操作系統，也包含了許多應用程序，諸如 SMS 短信客戶端程序、電話撥號程序、圖片瀏覽器、Web 瀏覽器等應用程序。這些應用程序都是用 Java 語言編寫的，並且這些應用程序都是可以被開發人員開發的其他應用程序所替換，這點不同於其他手機操作系統固化在系統內部的系統軟件，更加靈活和個性化。

2、應用程序框架層(Application & Framework)

應用程序框架層是我們從事 Android 開發的基礎，很多核心應用程序也是通過這一層來實現其核心功能的，該層簡化了組件的重用，開發人員可以直接使用其提供的組件來進行快速的應用程序開發，也可以通過繼承而實現個性化的拓展。 3、系統運行庫層(Libraries) 從圖中可以看出，系統運行庫層可以分成兩部分，分別是系統庫和 Android 運行時，分別介紹如下： A、系統庫：系統庫是應用程序框架的支撐，是連接應用程序框架層與 Linux 內核層的重要紐帶。

B、Android 運行時： Android 應用程序時採用 Java 語言編寫，程序在 Android 運行時中執行，其運行時分為核心庫和 Dalvik 虛擬機兩部分。

4、Linux 內核層

Android 是基於 Linux2.6 內核，其核心系統服務如安全性、內存管理、進程管理、網路協議以及驅動模型都依賴於 Linux 內核。

(22)

13 逢甲大學學生報告 ePaper(2014 年) Android 優點由 Google 開發的系統，對於 Google 本身的服務整合的相當好。相當適合有在使用 Google 各項服務的人。因此有許多家廠商開發 Android 的手機，選擇性就會多很多，從低階到高階都有。多個廠商為了增加自己的銷售成績，會加上許多自己本身的軟體或介面，EX：HTC SENSE。軟體支援相當多。

2.1.3 Android 發展與應用

圖 2.1.3.A 2010 Android 市場市佔率

(23)

圖 2.1.3.B Android 系統更新時間點

如圖 2.1.3.B，可知 Android 每年會有兩次重大的版本更新。

Android 開發的軟體開發套件－Android SDK(Android Software Development)，提供必要的 API 與開發工具，使用 Java 語言為主體，在 Android 平台上開發應用軟體，目前提供的功能如下： 1. 應用程式架構 在應用程式架構具備多種不同的基礎軟體元件，在開發應用程式時，直接呼叫這些元件來使用，以節省開發應用程式的時間。 2. Dalvik 虛擬機器 Android 平台上使用的虛擬機器，雖然是用 Java 語言來開發，但是並非標準的 Java 虛擬機器(Java Virtual Machine)。

3. 整合瀏覽器

整合瀏覽器是 Android 內建的瀏覽器，配合 Android 手機的功能，瀏覽網頁達到更好的效果，例如：局部性的縮放網頁、觸控式操作等效果。

(24)

15 逢甲大學學生報告 ePaper(2014 年) 4. 最佳化的繪圖能力 在程式會用到的繪圖功能分為 2D 與 3D 兩個方面， Android 分別都有提供特有的支援繪圖功能的開發。 5. SQLite 資料庫 SQLite 是開放性原始碼的資料庫，輕量性方面的設計結構是它最大的特色，很適合在手機上使用。 6. 多媒體的支援能力 在 Android 帄台上支援多種不同的多媒體格式，例如：MPEG4、H.264、 MP3、AAC、AMR、JPG、PNG、GIF 等格式。 7. Bluetooth、EDGE、3G 及 Wi-Fi 在開發 Android 手機應用程式時，能支援的通訊硬體設備。 8. 其他手機硬體設備 開發 Android 應用程式，除了有提許多軟體上的函示庫讓開發者使用之外，另外還有許多手機硬體設備的支援，如：Camera 相機功能、GPS 衛星定位、電子羅盤、加速度感測裝備等等，讓開發者輕鬆地開發出豐富的 Android 應用程式。

(25)

1. Eclipse

Eclipse 是著名的跨平台開源整合式開發環境（IDE）。最初主要用來 Java 語言開發，目前亦有人透過外掛模組使其作為 Android、C++、Python、 PHP 等其他語言的開發工具。

2. Java Development Kit (JDK)

Java Development Kit (JDK) 是 Sun 公司針對 Java 開發人員發行的免費軟體開發套件(SDK，Software development kit)。自從 Java 推出以來， JDK 已經成為使用最廣泛的 Java SDK。

3. Android Development Tools (ADT)

Android Development Tools 是 Eclipse 開發 Android 應用程式的擴充套件，提供許多 Android 專案與工具的整體支援，有助於除錯和開發 Android 應用程式。

4. Android SDK

Android SDk Tool 軟件開發工具包（software development kit）。被軟件開發工程師用於為特定的軟件包、軟件框架、硬件平台、操作系統等建立應用軟件的開發工具的集合，是 Android 專屬的軟件開發工具包。

5. Apache

Apache HTTP Server（簡稱 Apache）是 Apache 軟體基金會的一個開放原始碼的網頁伺服器，可以在大多數電腦作業系統中執行，由於其跨平台和

(26)

17 逢甲大學學生報告 ePaper(2014 年) 安全性。被廣泛使用，是最流行的 Web 伺服器端軟體之一。 6. PHP PHP（全稱：PHP：Hypertext Preprocessor，及「PHP：超文字預處理器」）是一種開源的通用電腦指令碼語言，尤其適用於網路開發並可嵌入 HTML 中使用。PHP 的應用範圍相當廣泛，尤其是在網頁程式的開發上。一般來說 PHP 大多執行在網頁伺服器上，透過執行 PHP 程式碼來產生使用者瀏覽的網頁。 7. MySQL MySQL 在過去由於效能高、成本低、可靠性好，已經成為最流行的開源資料庫，因此被廣泛地應用在 Internet 上的中小型網站中。隨著 MySQL 的不斷成熟，它也逐漸用於更多大規模網站和應用，如 Google 和 Facebook 等網站。非常流行的開源軟體組合 LAMP 中的「M」指的就是 MySQL。 8. Appserv

(27)

第三章系統分析

本章將介紹我們系統的分析以及資料庫的規劃。

3.1 系統分析

3.1.1 系統架構

圖 3.1.1 系統架構圖如圖 3.1.1，由於我們系統需要遠端伺服器來存取資料，所以我們系統可以分為手機端與電腦端。在手機端中，使用者分為一般使用者與店家，一般使用者可以透過手機內的逢甲美食導覽 App 來操作內部功能，若功能(如：會員中心)

(28)

必須連線至遠端的 Server，逢甲美食導覽 App 則會先連接到「溝通平台」，再傳遞資料到 Server。結構如上圖，藍色箭頭為逢甲美食導覽 App 向 Server 提出請求或發送訊息，橘色箭頭則是 Server 的回覆；在電腦端中，店家若想要新增、異動美食資料可以透過手機來進行作業，若資料量龐大，店家也可以透過電腦來連接 Web 來作業，如此一來會省下許多時間。以下介紹各部分的功能： (1) 逢甲美食導覽 App 為系統架構主要的子系統，使用者可以執行此子系統功能，如：「美食天堂」、「美食推薦」、「我的最愛」、「會員中心」、「系統資訊」、「美食搜尋」等…。系統透過 PHP 傳遞參數到遠端的 Server。當遠端 Server 有資料回覆時，會利用 PHP 將資料轉換成 JSON 再傳遞 JSON 資料至逢甲美食導覽 App。 (2) 手機資料庫 儲存逢甲美食導覽 App 所需要的資料，是 Android 的資料庫。 (3) 溝通平台

包含 php 與 JSON，作為 Android、PC Web 與 Server 之間的溝通橋樑。

JSON（JavaScript Object Notation）是一種輕量級的資料交換語言，以文字為基礎，且易於讓人閱讀。儘管 JSON 是 Javascript 的一個子集，但 JSON 是獨立於語言的文字格式，並且採用了類似於 C 語言家族的一些習慣。 (4) 美食伺服器 遠端的主機用來處理 Android、PC Web 的訊息、整合資料。 (5) 伺服器資料庫 儲存美食伺服器所需要的資料、相關參數和紀錄。

(29)

3.1.2 系統功能描述

圖 3.1.2 使用者案例圖如圖 3.1.2，當使用者進入本系統時，可以直接進行美食搜尋或者進入選單頁面。本系統提供的功能如下，詳細的細部功能會在第四章做介紹： (1) 美食天堂 使用者在目錄清單介面，點選美食天堂，右邊視窗呈現美食天堂頁面。 (2) 美食推薦 使用者在目錄清單介面，點選美食天堂，右邊視窗呈現美食推薦頁面。 (3) 我的最愛 使用者在目錄清單介面，點選美食天堂，右邊視窗呈現我的最愛頁面。 (4) 會員中心 使用者在目錄清單介面，點選美食天堂，右邊視窗呈現會員中心頁面。 (5) 系統資訊

(30)

21 逢甲大學學生報告 ePaper(2014 年) 使用者在目錄清單介面，點選美食天堂，右邊視窗呈現系統資訊頁面。 (6) 美食搜尋 使用者在首頁介面、目錄清單介面，可以進行美食搜尋，搜尋結果轉跳搜尋結果頁面。 (7) 我的位置 使用者在目錄清單介面，點選我的位置的 Menu 圖示，更新現在所在地址。

3.2 系統資料庫規劃

本節介紹逢甲美食導覽系統的資料庫規劃，因為本系統有提供蒐藏的食物 (我的最愛)可以進行備份與還原的功能，所以我們在遠端架設美食伺服器資料庫，另外在手機端建立資料庫以方便使用者不需要透過網路來作業(離線)。系統資料庫分為兩部分介紹： 1. 伺服器端資料庫：在遠端伺服器當中儲存所有會員資料(member)、店家資料 (store)、美食資訊(food)、會員備份的蒐藏美食資料(favorite)、美食種類(food_type)等。 2. 手機端資料庫：在手機中儲存登入在裝置的會員資料(member)；從伺服器下載的美食資料(food)、店家資料(store)；收藏的美食資料(favorite)、美食種類(food_type)、系統資訊(system)、搜尋歷史紀錄(history_search) 等。

(31)

3.2.1 手機端資料庫 – SQLite

資料庫實體關係圖 (ER Model)

圖 3.2.1.A 手機端實體關聯圖有關手機端的實體關聯圖(如圖 3.2.1.A)，關係為：每個會員若身分為店家管理者都可以創立、修改、刪除店家資料；店家可以新增、刪除、修改美食；美食可以加入到我的最愛，也可以從我的最愛移除；任何會員，都可以備份或儲存 1 m 1 1 n n n n n 1 1 1 n n m m 1 1 member 1 1 store Create Modify _Delete 1 1 favorite Backup Restore food Create Modify Delete Add Delete food_type Assort s _{historySearch} System

(32)

我的最愛到伺服器。

資料庫綱要 (Database schema)

member

Account Pwd Gender Birthday IsAdmin Store_id favorite historysearch

store

Id Name Tel Address Longitude Latitude Info food

Id Name Price Rating

food_type Id Name System

Version Updated_at

Food_id Add_time Key Search_time

圖 3.2.1.B 手機端資料庫綱要圖

如圖 3.2.1.B，為手機端的關聯式資料庫綱要圖。當使用者註冊會員時輸入一些會員基本資料記錄在 member 資料表中，若使用者為店家身分，member 資料表中的 Store_id 則會關聯到 store 的資料表的 Id 欄位；或者，當店家會員登入時，系統資料庫會從 member 資料表中的 Store_id 去關聯到 store 資料表的 Id 欄位，以獲取其他店家的資訊。當使用者需要查閱美食的種類或所屬店家時，系統資料庫會從 food 資料表中的 Id 欄位去關聯 food_type 資料表中的 Id 或 store 資料表中的 Id，來達成目的。當使用者要從我的最愛查閱美食時，系統會從 favorite 中的 Food_id 欄位去關聯到 food 資料表的 Id 欄位，以獲取美食的相關資訊。

(33)

資料表說明

(1) member 會員資料表 member 會員資料表(如表 3.2.1.A)主要是記錄使用者的登入資訊，若使用者從裝置登出時，資料表將會重置(reset)，即刪除所有資料列。表 3.2.1.A member 會員資料表 / 手機端序號 欄位名稱 中文名稱 資料型態 NULL 備註

1 Account 會員帳號 varchar(16) 否 PRIMARY KEY

2 Pwd 會員密碼 varchar(32) 否 3 Gender 性別 varchar(1) 否 4 Birthday 生日 date 否 5 IsAdmin 是否為店家 varchar(1) 否 6 Store_id 店家編號 varchar(4) 否以下為欄位介紹： 1. 「帳號」：會員登入的依據。 2. 「密碼」：會員登入的依據。 3. 「性別」、「生日」：除了是要記錄使用者的性別與生日外，最大的目的是希望未來實作美食族群統計─整合不同年齡層與性別所偏愛的美食，方便使用者了解。 4. 「是否為店家」：記錄這個會員的身分是否為店家管理者。 5. 「店家編號」：也是店家 ID，為任意 4 碼，會員店家編號不得重複。若「是否為店家」欄位記錄為否，則店家編號預設 0000。

(34)

25 逢甲大學學生報告 ePaper(2014 年) (2) store 店家資料表 store 店家資料表(如表 3.2.1.B)主要是記錄所有從遠端美食伺服器下載的全部店家資訊，讓系統不需要網路就可以為使用者進行導覽。表 3.2.1.B store 店家資料表 /手機端序號 欄位名稱 中文名稱 資料型態 NULL 備註

1 Id 店家編號 varchar(4) 否 Primary key 預設 0000 2 Name 店家名稱 varchar(16) 否 3 Tel 電話 varchar(16) 否 4 Address 地址 varchar 否 5 Longitude 經度 real 否 6 Latitude 緯度 real 否 7 Info 店家資訊 text 否以下為欄位介紹： 1. 「店家編號」：必須為 4 碼，店家會員登入的依據。 2. 「店家名稱」：記錄店家的名稱。 3. 「電話」：記錄店家的電話，方便使用者預定美食、加盟、外送等用途。 4. 「地址」：提供使用者店家位置。 5. 「經度」：提供資訊給 Google 地圖標記位置。 6. 「緯度」：提供資訊給 Google 地圖標記位置。 7. 「店家資訊」：張貼任何文字內容來說明店家資訊或者店家最新消息、最新優惠等。

(35)

26 逢甲大學學生報告 ePaper(2014 年) (3) food 美食資料表 food 美食資料表(如表 3.2.1.C)主要是記錄所有從遠端美食伺服器下載的全部美食資訊，讓系統不需要網路就可以為使用者進行導覽。表 3.2.1.C food 美食資料表 /手機端序號 欄位名稱 中文名稱 資料型態 NULL 備註

1 Id 食物編號 varchar(10) 否 Primary key Store_id+ Type + 000 2 Name 食物名稱 varchar(16) 否 3 Price 價格 int 否 4 Rating 推薦指數 varchar(1) 否以下為欄位介紹： 1. 「食物編號」：記錄美食的編號，方便存取資料。由店家資料表(表 3.2.2.B)中的「店家編號」與食物種類資料表(表 3.2.2.D)中的「種類編號」所組合而成的。 2. 「食物名稱」：記錄美食的名稱。 3. 「價格」：記錄美食價格。 4. 「推薦指數」：記錄美食推薦指數，為排列美食的依據。

(36)

27 逢甲大學學生報告 ePaper(2014 年) (4) food_type 美食種類資料表 food_type 美食種類資料表(如表 3.2.1.D)主要是記錄每個食物種類所對應的編號，讓系統可以依據美食編號來實作美食分類。表 3.2.1.D food_type 美食種類資料表 /手機端序號 欄位名稱 中文名稱 資料型態 NULL 備註

1 Id 種類編號 varchar(1) 否 PRIMARY KEY

2 Name 種類名稱 varchar(2) 否以下為欄位介紹： 1. 「種類編號」：記錄種類的編號，食編號。 2. 「種類名稱」：記錄美食種類的名稱。 (5) favorite 我的最愛資料表 favorite 我的最愛資料表(如表 3.2.1.E)主要是記錄使用者將喜愛的美食標記起來，被使用者標記的美食會存放到這個資料表中，若使用者想要備份我的最愛到遠端美食伺服器，也是從這個資料表獲取資料；當使用者從遠端取得曾經備份到美食伺服器的資料，取得的資料也將存到這個資料表中。表 3.2.1.E favorite 我的最愛資料表 /手機端序號 欄位名稱 中文名稱 資料型態 NULL 備註

1 Food_id 食物編號 varchar(10) 否 PRIMARY KEY

2 Add_time 加入時間 datetime 否

(37)

28 逢甲大學學生報告 ePaper(2014 年) 2. 「加入時間」：記錄加入蒐藏的時間，作為排列美食的依據。 (6) historySearch 歷史搜尋資料表 historySearch 歷史搜尋資料表(如表 3.2.1.F)主要是記錄使用者查詢美食時，所輸入的關鍵字，如此一來，下次使用者在次輸入類似的關鍵字時，系統會列出曾經搜尋過的關鍵字，讓使用者不再需要輸入完整的字彙。例如：使用者輸入美食的關鍵字為：「珍珠奶茶」，則下次使用者只要輸入「珍」，那麼「珍珠奶茶」就會再輸入欄位下方以清單的方式呈現出來，使用者只要點擊「珍珠奶茶」就可以完成輸入，進行搜尋。表 3.2.1.F historySearch 歷史搜尋資料表 /手機端序號 欄位名稱 中文名稱 資料型態 NULL 備註

1 Key 關鍵字 varchar(16) 否 Primary key

2 Search_time 搜尋時間 datetime 否如表 3.2.1.F，以下為欄位介紹： 1. 「關鍵字」：記錄使用者搜尋美食時所使用的字彙。 2. 「搜尋時間」：記錄搜尋的時間，為清單排序的依據。 (7) system 系統資料表 system 系統資料表(如表 3.2.1.G)主要是記錄系統的版本與系統最後更新的時間，以提供系統參考是否有新的資料或版本可以從遠端美食伺服器更新。表 3.2.1.G system 系統資料表 /手機端序號 欄位名稱 中文名稱 資料型態 NULL 備註

1 Version 版本 varchar(10) 否 Primary key

(38)

29 逢甲大學學生報告 ePaper(2014 年) 以下為欄位介紹： 1. 「版本」：記錄版本，做為日後比較版本依據。 2. 「更新時間」：記錄最後更新時間，做為判斷是否更新的依據。

3.2.2 伺服器端資料庫 – MySQL

資料庫實體關係圖 (ER Model)

圖 3.2.2.A Server 端實體關聯圖 1 m 1 1 n n n n n 1 1 1 n n m m 1 1 member 1 1 store Create Modify Delete 1 1 favorite Backup Restore food Create Modify Delete Add Delete food_type Assorts created_at updated_at online_tag created_at updated_at created_at updated_at Uid User_id

(39)

如圖 3.2.2.A 為 Server 端的資料庫實體關聯圖，Server 端實體之間的關係與手機端的實體之間的關係相同。不同的是，Server 端的 member、store、food、 favorite 實體內黑底白字的屬性是額外新增的，換句話說，在 Server 端的 member 實體中的屬性也包含手機端的 member 實體中的屬性，但反之不成立。手機端的 historySearch 與 system 實體從 Server 端中移除。

資料庫綱要 (Database schema)

member

Account Pwd Gender Birthday IsAdmin Store_id created_at updated_at OnlineTag favorite

store

Id Name Tel Address Longitude Latitude Info created_at updated_at food

Id Name Price Rating created_at updated_at food_type

Id Name

圖 3.2.2.B 伺服器資料庫綱要圖

如圖 3.2.2.B，為伺服器端的資料庫綱要圖。關聯方式與手機端的資料庫關聯雷同。比較不一樣的是，當 Server 接收到 Client 傳送要求備份的我的最愛時，

(40)

Server 會參考 member 資料表中的 Account 欄位來記錄 User_id，方便日後還原。

資料表欄位說明

(1) member 會員資料表

member 會員資料表(如表 3.2.2.A)主要是記錄所有逢甲美食導覽的會員資料，提供 client 端需要利用到會員資料的相關服務。

表 3.2.2.A member 會員資料表 / server 端

序號 欄位名稱 中文名稱 資料型態 NULL 備註

1 Account 會員帳號 varchar(16) 否 PRIMARY KEY

2 Pwd 會員密碼 varchar(32) 否 3 Gender 性別 varchar(1) 否 4 Birthday 生日 date 否 5 IsAdmin 是否為店家 varchar(1) 否 6 Store_id 會員店家編號 varchar(4) 否 7 created_at 建立時間 datetime 是 8 updated_at 更新時間 datetime 是 9 OnlineTag 線上代號 varchar(1) 否 0 以下為欄位介紹： 1. 「帳號」：會員登入的依據。 2. 「密碼」：會員登入的依據。 3. 「性別」、「生日」：除了是要記錄使用者的性別與生日外，最大的目的是希望未來實作美食族群統計─整合不同年齡層與性別所偏愛的美食，方便使用者了解。 4. 「是否為店家」：記錄這個會員的身分是否為店家管理者。 5. 「店家編號」：也是店家 ID，為任意 4 碼，會員店家編號不得重複。若「是否為店家」欄位記錄為否，則店家編號預設 0000。

(41)

32 逢甲大學學生報告 ePaper(2014 年) 是否更新。 7. 「更新時間」：記錄店家更新時間時間，讓逢甲美食導覽 App 可以判斷是否更新。 8. 「線上代號」：記錄會員是否上線。1 代表使用者在線上；0 則代表使用者已下線。是避免使用者同時在線上，造成類似「race condition」的結果。 (2) favorite 我的最愛資料表 favorite 我的最愛資料表(如表 3.2.2.A)主要是儲存手機端使用者的我的最愛資料表的備份，以提供日後使用者還原資料。表 3.2.2.B favorite 我的最愛資料表 / server 端序號 欄位名稱 中文名稱 資料型態 NULL 備註

1 Uid 序號 int 否 PRIMARY KEY

Auto increment 2 User_id 會員帳號 varchar(16) 否 3 Food_id 食物編號 varchar(10) 否 4 Add_time 加入時間 datetime 否以下為欄位介紹： 1. 「序號」：流水號記錄序列筆數，當作是 Primary Key。 2. 「會員帳號」：記錄蒐藏的美食所屬會員。 3. 「食物編號」：記錄蒐藏美食的編號。 4. 「加入時間」：記錄使用者備份的蒐藏美食的時間，作排列美食的依據。

(42)

33 逢甲大學學生報告 ePaper(2014 年) (3) store 店家資料表資料表 store 店家資料表(如表 3.2.2.C)主要是記錄所有逢甲美食導覽的店家資料，提供手機端下載的資料。表 3.2.2.C store 店家資料表 / server 端序號 欄位名稱 中文名稱 資料型態 NULL 備註

1 Id 店家編號 varchar(4) 否 Primary key 預設 0000 2 Name 店家名稱 varchar(16) 否 3 Tel 電話 varchar(10) 否 4 Address 地址 text 否 5 Longitude 經度 double 否 6 Latitude 緯度 double 否 7 Info 店家資訊 text 否

8 created_at 建立時間 datetime 是預設 null

9 updated_at 更新時間 datetime 是預設 null

以下為欄位介紹： 1. 「店家編號」：必須為 4 碼，店家會員登入的依據。 2. 「店家名稱」：記錄店家的名稱。 3. 「電話」：記錄店家的電話，方便使用者預定美食、加盟、外送等用途。 4. 「地址」：提供使用者店家位置。 5. 「經度」：提供資訊給 Google 地圖標記位置。 6. 「緯度」：提供資訊給 Google 地圖標記位置。 7. 「店家資訊」：張貼任何文字內容來說明店家資訊或者店家最新消息、最新優惠等。

(43)

34 逢甲大學學生報告 ePaper(2014 年) (4) food 美食資料表資料表 food 美食資料表(如表 3.2.2.D)主要是記錄所有逢甲美食導覽的美食資料，提供手機端下載的資料。表 3.2.2.D food 美食資料表 / server 端序號 欄位名稱 中文名稱 資料型態 NULL 備註

1 Id 食物編號 varchar(10) 否 Primary key Store_id+ Type + 000

2 Type 食物種類 Varchar(1) 否

3 Name 食物名稱 varchar(16) 否

4 Price 價格 int 否

5 Rating 推薦指數 varchar(1) 否

6 created_at 建立時間 datetime 是預設 null 7 updated_at 更新時間 datetime 是預設 null

以下為欄位介紹： 1. 「食物編號」：記錄美食的編號，方便存取資料。由店家資料表(表 3.2.1.C)中的「店家編號」所組合而成的。 2. 「食物名稱」：記錄美食的名稱。 3. 「價格」：記錄美食價格。 4. 「推薦指數」：記錄美食推薦指數，為排列美食的依據。

表 3.2.2.E food_type 美食種類資料表 /server 端序號 欄位名稱 中文名稱 資料型態 NULL 備註

1 Id 種類編號 varchar(1) 否 PRIMARY KEY

2 Name 種類名稱 varchar(2) 否以下為欄位介紹：

(44)

(45)

第四章系統設計

本章將介紹我們系統的設計。

4.1 使用者案例圖 (Use Case Diagram)

以下為本系統使用者案例圖的介紹： 1. 美食搜尋 圖 4.1.A 搜尋美食使用者案例圖如圖 4.1.A 所示，使用者包括一般使用者與店家，使用者可以依照關鍵字搜尋的動作，來達成閱覽美食資訊的目的；使用者也可以依照線上搜尋的動作，來達成地圖檢視美食的目的。而關鍵字搜尋之後是依照條列式的清單顯示；線上搜尋則是把美食標記在地圖上。

(46)

37 逢甲大學學生報告 ePaper(2014 年) 2. 美食資訊 圖 4.1.B 美食資訊使用者案例圖如圖 4.1.B 所示，前往地圖、直接導行、加入最愛、移除最愛，都必須經由美食資訊來完成，而美食資訊的來源是透過讀取資料庫裡的資料。「前往地圖」：轉跳地圖畫面而非 Google Map 的應用程式，畫面將繪製路徑規劃的路線，提供使用者前往方向。

「直接導行」：轉跳至 Google Map 應用程式，利用 Google App 來導航。「加入最愛」：將美食蒐藏至我的最愛。

(47)

38 逢甲大學學生報告 ePaper(2014 年) 3. 美食天堂 圖 4.1.C 美食天堂使用者案例圖如圖 4.1.C 所示，美食資訊、店家資訊，可以透過「美食天堂」得到資訊。當使用者進行閱覽美食資訊的動作時，系統將讀取 SQLite DB 來獲取相關資料。其中，美食天堂包含分類顯示，將美食分類可以讓使用者迅速找到喜愛的食物，其中，使用者可以透過店家資訊來達成撥打電話或地圖顯示；分類顯示可以依照炸、烤、炒、滷、燻、煎、飲料、冰品、其他等分類。 4. 美食推薦

(48)

39 逢甲大學學生報告 ePaper(2014 年) 圖 4.1.D 美食推薦使用者案例圖如圖 4.1.D 所示，美食資訊也可以透過「美食推薦」得到資訊，並且可以將顯示的美食資訊做分類顯示，將美食分類方面使用者尋找。當使用者進行閱覽美食資訊的動作時，系統將讀取 SQLite DB 來獲取相關資料。 5. 我的最愛 圖 4.1.E 我的最愛使用者案例圖如圖 4.1.E 所示，美食資訊、店家資訊、食物種類，可以透過「美食天堂」得到資訊。當使用者進行閱覽美食資訊的動作時，系統將讀取 SQLite DB 來獲取相關資料。我的最愛也提供了分類顯示，將蒐藏食物做分類，方便查詢。

(49)

40 逢甲大學學生報告 ePaper(2014 年) 6. 會員中心 圖 4.1.F 會員中心使用者案例圖如圖 4.1.F 所示，會員註冊與會員登入都必須透過會員中心來進行動作。使用者登入會員後，可以進行修改會員資料或者會員登出；若會員身分為店家管理者，則可以再進行新增美食與瀏覽美食的動作，其中，刪除美食與修改美食可以從瀏覽美食動作。 7. 會員登入 圖 4.1.G 會員登入使用者案例圖

(50)

41 逢甲大學學生報告 ePaper(2014 年) 如圖 4.1.G 所示，使用者一旦觸發會員登入事件，必須從 Server 驗證登入的資訊，才有可能登入成功。 8. 系統資訊 圖 4.1.H 系統資訊使用者案例圖如圖 4.1.H 所示，使用者想要從 Server 端檢查更新、備份或取得我的最愛，都必須從系統資訊裡動作；若想要從 SQLite DB 清除搜尋美食記錄與重置(Reset) 系統資料庫，也需要從系統資訊裡作業。

(51)

4.2 系統類別圖 (Class Diagram)

1. 美食搜尋類別圖類別介紹： a. searchResult class：美食搜尋介面，為美食尋的主要類別。 b. Main class：首頁類別，幫忙美食搜尋界面傳遞搜尋參數。

c. Search class：為 Main class 內部類別，是關鍵字的自定義資料型態。 d. DBStoreHelper class：店家資料庫類別，在此身分為幫忙讀取店家資

料。

e. DBFoodHelper class：美食資料庫類別，在此身分為幫忙讀取美食資料。 f. SearchParser class：解析搜尋類別，幫忙搜尋類別整合美食與店家資

(52)

圖 3.3.2.A 美食搜尋類別圖

圖 3.3.2.A 為美食搜尋類別圖，每個使用者透過 Main 輸入關鍵字透過 onClick_Search()方法來傳遞關鍵字，Intent註 1

到 searchResult(美食搜尋介面) 的 searchFood()方法來進行搜尋美食，系統會利用 SearchParser 類別的 parser() 方法去 DBFoodHelper(美食資料庫)尋找相關美食，並將結果回傳給 searchResult 類別。 2. 美食天堂類別圖 (1) 類別介紹： a. FoodPlazaFragment class：美食天堂介面，為美食天堂主要類別。 b. DBFavoriteHelper class：我的最愛資料庫，提供美食天堂介面查詢美食是否存放在該資料庫內。 c. DBFoodHelper class：美食資料庫類別，在此身分為幫忙讀取美食資料。 d. DBStoreHelper class：店家資料庫類別，在此身分為幫忙讀取店家資料。 e. FoodParser class：食物解析類別，在此彙整我的最愛資料庫與美食資料庫的美食資料。 f. StoreParser class：店家解析類別，在此彙整店家資料庫的資料。 (2) 類別圖解說：圖 3.3.2.B 為美食天堂的類別圖，FoodPlazaFragment 類別為美食天堂介面，透過 onCreateView()方法呈現美食資料。DBFoodHelper、DBStoreHelper、 DBFavoriteHelper，這些資料庫提供呈現頁面所需的資料。FoodParser、 StoreParser 物件透過 parser()方法來剖析美食或店家的資料，幫資料作整理。

(53)

44 逢甲大學學生報告 ePaper(2014 年) 圖 3.3.2.B 美食天堂類別圖 3. 美食推薦類別圖 (1) 類別介紹： a. FoodRecFragment class：美食推薦介面，為美食推薦主要類別。 b. DBFavoriteHelper class：我的最愛資料庫，提供美食推薦介面查詢美食是否存放在該資料庫內。 c. DBFoodHelper class：美食資料庫類別，在此身分為幫忙讀取美食資料。 d. DBStoreHelper class：店家資料庫類別，在此身分為幫忙讀取店家資料。 e. FoodParser class：食物解析類別，在此彙整我的最愛資料庫與美食資料庫的美食資料。 (2) 類別圖解說圖 3.3.2.C 為美食推薦類別圖，FoodRecFragment 類別即為美食推薦平台，

(54)

45 逢甲大學學生報告 ePaper(2014 年) 透過 onCreateView()方法來呈現美食資料。DBFoodHelper、DBFavoriteHelper，這些資料庫提供一些呈現頁面所需的資料。FoodParser 物件透過 parser()方法來剖析美食資料，並整理出推薦指數大於 4 的資料，中間還需要 DBStoreHelper 類別來查詢所屬美食的店家，運用到資料庫關聯，關聯方式可參考本章第 2 節。圖 3.3.2.C 美食推薦類別圖 4. 我的最愛類別圖 (1) 類別介紹： a. FoodRecFragment class：我的最愛介面，為我的最愛主要類別。 b. DBFavoriteHelper class：我的最愛資料庫，提供我的最愛介面查詢美食是否存放在該資料庫內。 c. DBFoodHelper class：美食資料庫類別，在此身分為幫忙讀取美食資料。 d. DBStoreHelper class：店家資料庫類別，在此身分為幫忙讀取店家資料。

(55)

46 逢甲大學學生報告 ePaper(2014 年) 料庫的美食資料。 (2) 類別圖解說：圖 3.3.2.D 為我的最愛類別圖，FoodFavoriteFragment 類別即為我的最愛介面，透過 FavoritePraser 類別的 parser()方法去讀取 DBFavoriteHelper 我的最愛資料庫的資料，並加以剖析與整理，最後再回傳 List 到我的最愛介面而食物的店家是透過 DBStoreHelper 類別的 getStoreData()方法取得。圖 3.3.2.D 我的最愛類別圖

(56)

47 逢甲大學學生報告 ePaper(2014 年) 5. 會員中心類別圖 (1) 類別介紹： a. MemberCenterFragment class：會員中心介面，為會員中心主要類別。 b. DBMemberHelper class：會員中心資料庫，將登入成功的會員資料儲存在此資料庫。 c. MyMemberHlp class：會員幫手類別，提供會員中心介面的自定義資料型態。 d. UserFunctions class：使用者函式類別，與伺服器溝通的類別。圖 3.3.2.E 會員中心類別圖 (2) 類別圖解說：圖 3.3.2.E 為會員中心類別圖，MemberCenterFragment 類別即為會員中心

(57)

48 逢甲大學學生報告 ePaper(2014 年) 類別傳遞資訊到 php 達成會員註冊、會員登入、會員登出、修改會員資料…等目的，資料傳遞方式皆是先將資料轉換成 JSON 物件再經由 php 傳達到美食資料庫。若使用者透過 MemberCenterFragment 來登入會員，若登入成功，會員資料會透過再 DBMemberHelper 類別中的 addUser()方法來儲存會員資訊。若使用者進行會員登出作業，則會使用 DBMemberHelper 類別中的 resetTables()的方法來移除手機資料庫的會員資料，達成登出作業。 6. 系統資訊類別圖 (1) 類別介紹： a. InformationFragment class：系統資訊介面，為系統資訊主要類別。 b. DBFoodHelper class：美食資料庫，輔助系統儲存、修改、刪除美食。 c. DBStoreHelper class：店家資料庫，輔助系統儲存、修改、刪除店家。 d. DBMemberHelper class：會員資料庫，讓系統判斷是否有會員登入。 e. DBSystemHelper class：系統資料庫，儲存版本資訊、更新日期。 f. DBSearchHelper class：搜尋資料庫，記錄使用者輸入的搜尋關鍵字。 g. UserFunctions class：使用者函式，在此判斷使用者是否登入。 h. SystemFunctions class：系統函式，提供系統與遠端伺服器溝通的類別。 i. FavoriteFunctions class：我的最愛函式，提供系統與伺服器備份或還原。

j. JSONParser class：JSON 格式解析類別，將伺服器回傳的 JSON 格式解析成系統所需的資料。

(58)

圖 3.3.2.F 系統資訊類別圖

(2) 類別圖解說：

圖 3.3.2.F 為系統資訊類別圖，InformationFragment 為系統資訊介面圖， InformationFragment 類別中的主要方法有：

checkUpdate()：檢查更新，透過 SystemFunctions 類別的 checkNeedUpdate() 方法來向遠端伺服器提出檢查更新要求。 backupFavorite()：備份我的最愛，透過 FavoriteFunctions 類別的 backupFavorite()方法向遠端伺服器提出備份我的最愛的要求； restoreFavorite()：取得我的最愛、透過 FavoriteFunctions 類別的 restoreFavorite()方法向遠端伺服器提出備份我的最愛的要求； cleanHistorySearch()：清除搜尋資料，透過 DBSearchHelper 類別的 resetTable()方法來完成清除資料庫。 resetDatabase()：重置資料庫。重置資料庫必須要用到美食資料庫的物件： dbFoodHlp、店家資料庫的物件：dbStoreHlp、會員資料庫的物件：dbMemberHlp 與系統資料庫的物件：dbSystemHlp，利用這些物件使用 resetTable()方法來完成重置。

(59)

4.3 系統循序圖 (Sequence Diagram)

(1)

逢甲美食導覽循序圖

1. 美食搜尋循序圖圖 3.3.3.A 美食搜尋循序圖圖 3.3.3.A 為美食搜尋循序圖，當使用者在使用者介面上點擊「美食搜尋」的選項後，系統將轉入美食搜尋介面，讓使用者在框內輸入想搜尋的美食或在地圖上的框內輸入，若在搜尋美食的介面上搜尋的話，系統會將從手機資料庫搜尋美食，搜尋完畢後，系統會將轉跳至結果介面，並以清單方式呈現美食；若想要「線上搜尋」的話，就在地圖上搜尋，那系統會將關鍵字利用網路傳至 Server 資料庫搜尋，搜尋完畢後，系統會將搜尋的結果顯示到地圖上。

(60)

51 逢甲大學學生報告 ePaper(2014 年) 2. 美食天堂循序圖圖 3.3.3.B 美食天堂循序圖圖 3.3.3.B 為美食天堂循序圖，當使用者在使用者介面上點擊「美食天堂」的選項後，系統將轉入美食天堂介面，並將手機資料庫裡面的所有食物依種類分類，最後把美食排成條列式顯示在美食天堂介面。

(61)

圖 3.3.3.C 美食推薦循序圖

圖 3.3.3.C 為美食推薦循序圖，當使用者在使用者介面上點擊「美食推薦」的選項後，將由使用者介面轉入美食推薦介面，然後在手機資料庫尋找推薦指數大於 4 的美食，條列式地顯示在推薦美食的介面上。

(62)

53 逢甲大學學生報告 ePaper(2014 年) 4. 我的最愛循序圖圖 3.3.3.D 我的最愛循序圖圖 3.3.3.D 為美食天地循序圖，當使用者在使用者介面上點擊「我的最愛」的選項後，系統將轉入我的最愛介面後，查看手機料庫裡所有被標記為最愛的美食，再依清單式的顯示到我的最愛介面。

(63)

54 逢甲大學學生報告 ePaper(2014 年) 圖 3.3.3.E 會員中心循序圖圖 3.3.3.E 為會員中心循序圖，當使用者在使用者介面上點擊「會員中心」的選項後系統將轉入會員中心介面，若使用者尚未註冊，則點選「註冊」的按鈕，系統就轉入註冊畫面，要求使用者輸入帳號、密碼和一些會員資料，輸入完畢並經過系統將和資料庫驗證，若有錯誤或已經有人使用系統將轉回至註冊

(64)

55 逢甲大學學生報告 ePaper(2014 年) 畫面，若無誤則送出使用者輸入的資料到伺服器資料庫，並系統將轉至會員中心介面，之後點選「登入會員」的按鈕，就可以點選輸入帳號密碼，把輸入的資料和伺服器資料庫比對，若比對成功跳至使用者畫面，但若比對失敗則顯示登入失敗並跳回會員中心介面請使用者重新輸入。假如成功登入的身分是「一般會員」的話，使用者畫面會顯示「修改會員資料」和「登出會員」兩個按鈕，若點選「修改會員資料」的按鈕，系統將把手機資料庫中會員資料載入並要求會員修改所要修改資料，之後再修改 Server 端資料庫會員資料，若修改成功則顯示修改成功之訊息，若失敗則顯示失敗之原因；若點選「會員登出」按鈕的話，系統將手機資料庫的會員資料刪除，若登出成功則顯示登出成功之訊息，但若登出失敗則顯示登出失敗之訊息。假如成功登入的身分是「店家」的話，使用者畫面除了會顯示「修改會員資料」和「登出會員」兩個按鈕，還會多「新增美食」和「瀏覽美食」兩個按鈕，若點選「修改會員資料」的按鈕，功能與「一般會員」一樣，但多了「捨棄店家」的選項，假設點擊「捨棄店家」按鈕並且按下確認按鈕，系統會把該會員的 IsAdmin 欄位值由「是」改成「否」，並將 Store_id 欄位值由該店所屬編號改成「0000」，最後將該店與所屬美食宜並刪除，因為關係欄位甚多，所以我一再提醒使用者。若修改成功則顯示修改成功之訊息，若失敗則顯示失敗之原因；若點選「會員登出」按鈕的話，系統先連置 Server 進行登出作業，成功後將手機資料庫的會員資料刪除，並顯示登出成功之訊息，但若登出失敗則顯示登出失敗之訊息；若點選「新增美食」的按鈕的話，系統將要求店家會員輸入新增美食的資料，系統將把資料載入之 Server 端資料庫，若新增成功則顯示新增成功之訊息，但若新增失敗則顯示新增失敗之原因；若點選「瀏覽美食」的按鈕的話，系統將載入 Server 端資料庫店家會員所有美食的資料，而提供「刪除美食」和「修改美食」兩項功能。

(65)

56 逢甲大學學生報告 ePaper(2014 年) 6. 系統資訊循序圖圖 3.3.3.F 系統資訊循序圖圖 3.3.3.F 為系統資訊循序圖，當使用者在使用者介面上點擊「系統資訊」的選項後，系統將轉入系統資訊介面，裡面有「檢查更新」、「備份我的最愛」、「取得我的最愛」、「清除搜尋紀錄」和「重置資料庫」選項。當使用者選擇「檢查更新」，手機系統將用最後更新時間與 Server 端的美食最後修改或最後上傳的時間比對，如果需要從 Server 端更新手機資料庫的資料，系統將跳出「是否更新」的視窗讓使用者選擇更新與否；若本系統為最新資料，則系統將跳出「本系統為最新版本」的信息。當使用者選擇「備份我的最愛」，若使用者尚未登入會員，系統將要求使用

(66)

57 逢甲大學學生報告 ePaper(2014 年) 者登入會員。登入後，手機系統會先要求把 Server 端的資料庫中「我的最愛」清除，再把手機資料庫中我的最愛載入至 Server 端的資料庫，若備份成功，則在手機端上顯示備份成功訊息；反之顯示錯誤訊息。當使用者選擇「取得我的最愛」，若使用者尚未登入會員，系統將要求使用者登入會員。登入後，手機系統會先把系統資料庫中「我的最愛」清除，再把 Server 端的資料庫中的「我的最愛」載入進手機端資料庫，若取得成功，則在手機端上顯示備份成功訊息；反之顯示錯誤訊息。當使用者選擇「清除搜尋紀錄」，系統將把手機資料庫中歷史紀錄清除，若成功清除，則在手機端上顯示清除成功訊息；反之顯示錯誤訊息。當使用者選擇「重置資料庫」，系統會跳出視窗來再次確認是否重置，若使用者確認，則系統將把手機資料庫中除了「我的最愛」其他全部資料清空，再把 Server 資料庫中除了「我的最愛」其他全部資料載入進手機資料庫，若清除後並且成功載入，則在手機端上顯示訊息；反之顯示錯誤訊息。

(67)

58 逢甲大學學生報告 ePaper(2014 年) (2) 店家網頁版循序圖 1. 網頁首頁循序圖圖 3.3.3.G 網頁首頁循序圖圖 3.3.3.G 為網頁首頁循序圖，當店家使用者在管理系統介面，頁面會直接顯示登入會員或新增店家會員，若店家使用者尚未註冊，則點選「新增店家會員」，系統就轉入註冊畫面，要求使用者輸入帳號、密碼和一些會員資料，輸入完畢並經過系統將和資料庫認證，若有錯誤或已經有人使用系統將轉回至註冊畫面，若無誤則送出使用者輸入的資料到伺服器資料庫，並系統將轉至系統管理首頁，之後就可以直接在頁面輸入帳號密碼，把輸入的資料和伺服器資料庫比對，若比對成功的話則跳至管理系統選單，但若比對失敗的話則顯示登入失敗並跳回

(68)

59 逢甲大學學生報告 ePaper(2014 年) 首頁店家請使用者重新輸入。 2. 網頁新增美食循序圖圖 3.3.3.H 網頁新增美食循序圖圖 3.3.3.H 為網頁新增美食循序圖，當店家使用者在管理系統介面的選單上點擊「新增美食」的選項後，系統將轉入新增美食頁面，然後要求店家使用者輸入美食資料，輸入完之後將輸入資料載入伺服器資料庫，若新增無誤的話則系統將顯示新增成功，若新增失敗的話則系統將顯示失敗之原因。

(69)

60 逢甲大學學生報告 ePaper(2014 年) 3. 網頁刪除美食循序圖圖 3.3.3.I 網頁刪除美食循序圖圖 3.3.3.I 為網頁刪除美食循序圖，當店家使用者在管理系統介面的選單上點擊「刪除美食」的選項後，系統將轉入刪除美食頁面，然後載入伺服器資料庫，並依條列式顯示店家所有美食，店家使用者選擇所要刪除的美食，則刪除伺服器資料庫此美食，若刪除無誤的話則系統將顯示新增成功，若刪除失敗的話則系統將顯示失敗之原因。

(70)

61 逢甲大學學生報告 ePaper(2014 年) 4. 網頁修改美食循序圖圖 3.3.3.J 網頁修改美食循序圖圖 3.3.3.J 為網頁修改美食循序圖，當店家使用者在管理系統介面的選單上點擊「修改美食」的選項後，系統將轉入修改美食頁面，然後把店家的美食依條列式顯示，再要求店家選擇所要改的美食，之後請店家輸入所需要修改的值，再把輸入的值上傳到伺服器資料庫加以修改，若修改無誤的話則系統將顯示修改成功，若新修改失敗的話則系統將顯示失敗之原因。

(71)

62 逢甲大學學生報告 ePaper(2014 年) 5. 網頁修改店家資訊循序圖圖 3.3.3.K 網頁修改店家資訊循序圖圖 3.3.3.K 為網頁修改店家資訊循序圖，當店家使用者在管理系統介面的選單上點擊「修改店家資訊」的選項後，系統將轉入修改店家資料頁面，然後顯示店家先前的資料，再請店家輸入所需要修改的資料，再把輸入的資料傳入伺服器資料庫加以修改，若修改無誤的話則系統將顯示修改成功，若新修改失敗的話則系統將顯示失敗之原因。

(72)

63 逢甲大學學生報告 ePaper(2014 年) 6. 網頁修改密碼循序圖圖 3.3.3.L 網頁修改密碼循序圖圖 3.3.3.L 為網頁修改店家密碼循序圖，當店家使用者在管理系統介面的選單上點擊「修改店家密碼」的選項後，系統將轉入修改店家密碼頁面，然後請店家輸入舊密碼與新密碼，再舊密碼與新密碼傳入伺服器資料庫比對，若修改無誤的話系統將舊密碼修改成新密碼，並且系統將顯示修改成功，若失敗的話則系統將顯示失敗之原因。

(73)

第五章人機介面與系統評估

本章節將介紹手機端的系統介面以及網路版的店家管理系統介面。

5.1 手機端人機介面

圖 4.1 逢甲美食導覽首頁逢甲美食導覽採用簡單的 UI 介面(如圖 4.1)，讓使用者操作起來方便。以下將介紹細部系統功能。

(74)

5.1.1 系統首頁

圖 5.1.1.A 系統首頁圖 5.1.1 為本系統的首頁介面，下表 5.1.1 為系統首頁的 UI 元件介紹。使用這可以點選快速搜尋列來輸入關鍵字進行美食搜尋，或者使用可也可以點選進入首頁圖示來進入系統選單。表 5.1.1 系統首頁 UI 元件欄位 UI 元件圖示 UI 元件名稱 (a) 快速搜尋 (b) 進入首頁

Android應用程式開發：逢甲美食導覽

報告題名：