長榮大學資訊工程學系專案實作成果報告

※※※※※※※※※※※※※※※※※※※※※※※※※※

※ ※

※ 健康身體 DIY ※

※ ※

※※※※※※※※※※※※※※※※※※※※※※※※※※

專 案 編 號 ： CJCU－CSIE－PRJ－2014－14

執 行 期 間 ： 102 年 02 月 01 日至 103 年 10 月 31 日

專 案 成 員 ： 陳重光、廖思翰、陳信學、陳宏穎、鄭志強

指 導 老 師 ： 蔡尚恩老師

中 華 民 國 103 年 10 月 31 日

1

長榮大學資訊工程學系專案實作

健康身體 DIY

Healthy Body DIY

專 案 編 號 ： CJCU－CSIE－PRJ－2014－14

執 行 期 間 ： 102 年 02 月 01 日至 103 年 10 月 31 日

專 案 成 員 ： 陳重光、廖思翰、陳信學、陳宏穎、鄭志強

指 導 老 師 ： 蔡尚恩老師

中文摘要

本專題名稱為健康身體 DIY，為一個結

合手機端、Web 端與資料庫端，以健康管理

為方向的專題。手機端以 Android 系統與

eclipse 為開發工具，Web 端使用 PHP 和

HTML5 語法撰寫，而資料庫端以 MySQL 為

主體架構。在本專題手機端內建有鬧鐘提醒、

健康知識電子書、心情記錄、飲食紀錄與歷

史紀錄查詢，手機端透過資料庫與 Web 端同

步，達到使用者皆能在雙平台輸入與查詢的

功效。Web 端採用日曆的方式，呈現使用者

過去所記錄的飲食資料與運動狀況，並以圖

條的方式來呈現，讓使用者能夠一目了然的

看出攝取與消耗的熱量。

關鍵詞：Android APP、Database、HTML5、

健康管理、飲食紀錄

Abstract

The project’s name is Healthy Body DIY.

The APP includes Mobile, Web client and

Database. The topic of project is health

management. The developer tools in Mobile is

Google Android system and Eclipse. In Web

client is PHP and HTML5. Database uses

MySQL syntax. There are Alarm clock, Diet

record, E-books, Mood record, Search history

record in our APP. The APP and Web client are

dual-platform synchronization by database,

which can achieve input and inquiry. The Web

client with the calendar express the record of

eating habits and exercise status information

from past to present. And the Web client show

the information by bar chart. The users easily

understand their absorbency and the consuming

of calories.

Keywords： Android APP、Database、HTML5、

Health Management、Diet record

計畫緣由與目的

現今的社會人人都有一隻智慧型手機，

而靠它幾乎任何事都能達成，讓許多人趨向

庸懶，而缺乏運動致使身形也逐漸走樣，使

身體健康逐漸亮紅燈。為了讓想減肥或維持

身體健康的人能準確掌控自身變化，所以我

們藉由這個專題來實現這個目標。

現代的飲食水準跟以往相比可以說是相

差十萬八千里，選擇越來越多樣化，食品的

熱量卻也在這多樣化的選擇中漸漸累積，而

我們卻不自知。健康身體 DIY，我們希望用

它來幫助使用者了解自我的身體指數，如：

身體質量指數(BMI)、基礎代謝率(BMR)，通

過使用者輸入食物攝取以及運動消耗的記錄

，可以視覺化的知道攝取及消耗的比例。

我們也考慮到了行動裝置的普及，多數

人又大多是外食居多，所以我們的專案實作

了兩個平台，在行動裝置以 APP 進行操作，

讓使用者能隨時隨地在攝取食物或運動消耗

2

後都能及時紀錄自己的所消耗或攝取的熱量

。健康身體 DIY APP 也能做到提醒功能，運

用鬧鐘提醒使用者用餐後記得紀錄用餐熱量，

我們相信持續的記錄能更快達到控制體重的

目的。在這資訊爆炸的時代，我們希望使用

者在使用健康身體 DIY APP 也能獲得更多有

關健康管理的資訊，所以我們設置了健康電

子書的閱讀區塊，擁有正確的健康資訊，搭

配確實的記錄，一定能 DIY 一個健康的身體!

二、開發環境:

A. Eclipse 最初是由 IBM 公司開發，是著

名的跨平台的自由整合式開發環境有眾

多外掛程式的支援，使得 Eclipse 擁有

較佳的靈活性。

B. Java Development Kit (JDK)是 Sun 公

司的軟體開發工具包。自從 Java 推出

以來，已經成為使用最廣泛的 Java SDK

（Software Development Kit）。

C. Android Development Tools (ADT)是

Eclipse 開發 Android 應用程式的擴充

套件，提供許多 Android 專案與工具的

整體支援，例如：Android 手機模擬器，

有助於除錯和開發 Android 應用程

式。

D. Android SDK[1]是軟體開發工具包，提

供開發 Android 必要的 API 與開發工

具，使用 Java 語言為主體來開發在

Android 平台上開發應用軟體。

E. Apache 起初由伊利諾大學的國家超級

電腦應用中心開發，由於其跨平台和安

全性被廣泛使用，是最流行的 Web 伺

服器端軟體之一，不斷的發展和加強之

後，擁有牢靠可信的美譽讓現在全球超

過半數的網站中使用。

F. XAMPP是一個使用MySQL資料庫的架

站軟體，支援 PHP、JSP 等程式語言，也

包含常見的 Mercury Mail、FileZilla FTP

和 phpMyAdmin 等，以方便管理網站的

內容。

G. Dreamweaver 是一個強調以視覺化的方

式來編輯網頁的軟體，強大的多媒體網

頁設計功能與其它繪圖、文書排版軟體

的結合，是設計網頁非常好用的工具。

H. HTML5 廣義論及 HTML5 時，實際指的是

包括 HTML、CSS和 JavaScript 在內的一

套技術組合。

三、實作內容

我們開發了一個跨平台的健康軟體，而

此軟體分為 APP 與 Web 端

3.1 APP端包含下列功能：

A. 手機端第一個功能為健康鬧鐘設置提醒

，我們預先設有五種類型的鬧鐘提醒

[2,3]，分別為：喝水提醒、飲食輸入提

醒、限菸提醒、睡眠時間提醒、每日散

步提醒等等以及自訂功能，如圖1所示，

點擊鬧鐘圖示後可進入設定畫面，畫面

中將出現建議時間設定建議，用以提醒

使用者哪個時間點，做該項提醒功能會

提升其身體健康，而使用者經自行評估

後可設定想要在幾分鐘後被提醒該事項；

而自訂功能可供使用者輸入該項提醒名

稱也可以讓使用者自行決定要幾分鐘後

被提醒，如圖 2所示。

3

圖 1. 鬧鐘設定

圖 2.自訂鬧鐘設定

B. 手機端的第二個功能為飲食紀錄功能，

藉由連到網路與 Web 端同步輸入，以避

免造成重複輸入，並可以及時知道當日

所記錄的情況，如圖 3所示。

圖 3.連結網頁記錄面頁

C. 手機端的第三個功能為健康資訊電子書

閱讀，我們將提供九本電子書供使用者

閱讀，其內包含：BMI 標準、天天五蔬

果、每天所需熱量、喝水有訣竅、減肥

大原則、膳食纖維、關於基礎代謝率、

關於減肥你不能不知道、關於運動等，

這些書籍將帶給使用者在維持健康身體

時所需的知識，並在這期間可以掌握好

自己的方法是否正確。如圖 4 所示，圖

5為電子書展開。

4

圖 4.電子書

圖 5. 電子書展開畫面

D. 手機端第四功能為心情記錄，如圖 6 所

示，在減重或在維持健康身體的期間一

定會有許多的成果或者挫折，此功能可

供使用者輸入當時心情記錄，可以隨時

記錄著自己的心路歷程。

圖 6.心情記錄

E. 手機端的第五功能為歷史紀錄查詢，可

供使用者查詢已經記錄的資料，由於輸

入的時候我們分成了吃與動兩個部分，

理所當然的我們在查詢功能時也做了兩

個部分，一個是關於飲食的歷史記錄，

另一個則是關於運動的記錄，查詢後使

用者將可以清楚的知道自己的飲食狀況

及運動狀況是否需要做改善。

3.2 Web端則包含下列功能：

A. 申請帳號的頁面會讓使用者輸入個人資

料，如圖 7所示。

5

圖 7.個人資料

在個人資料面頁中，可以創建使用者帳

號密碼以及個人身體資訊，就由輸入身

高、體重系統會自動為你算出 BMI [4]，

而基礎代謝率 BMR[5]也可以由使用者輸

入的性別、體重、年齡算出並且顯示在

個人資料面頁上，可以一目了然你的身

體狀況。因為身體數值在經過時間的推

移是需要做更新的，所以個人資料擁有

編輯的功能，能夠隨時獲得自己最新的

身體數值，幫助自己了解身體資訊進而

控制飲食及運動。

圖 8.空白月曆圖

在創建好個人帳號及資料後，就可以開

始記錄每一日的飲食及運動了!首先進

入的頁面是記錄面頁的首頁，如圖 8 所

示。預設值是以月曆[6]做為顯示，也可

以依使用者喜愛調整成周或日顯示，如

圖 9所示。

圖 9.月曆顯示設定

B. 使用者的攝取與消耗紀錄面頁分為：浮

動視窗簡易輸入、詳細食物列表輸入。

在記錄首頁中可以點選月曆中的日期，

會先由浮動視窗作為簡易輸入，簡易輸

入的用意是:現在很多食品在外包裝上

都有食物的營養標示，藉由這些資訊你

能更快的直接在簡易視窗中直接輸入食

物熱量，如圖 10示。

簡易輸入浮動框中我們設計的一個自動

判斷輸入時間的功能，可以依照使用者

現在輸入的時間預設用餐時段，減少輸

入的步驟，如圖 11所示。

6

圖 10.簡易輸入

圖 11.簡易輸入

詳細食物列表的用意是當如果不知道食

物熱量是多少時可以分類查詢，如圖 12

所示我們可藉由食品的分類能夠快速的

找尋。在現代食物多樣化的影響，要在

食物數量詳細分類之下跟如何讓使用者

容易查找必需要找到一個平衡點，所以

在食物的分類標籤上，我們採用基礎的

六大類外加一些較難歸類的食品作為分

類的依據。

圖 12.詳細記錄頁面

在詳細食物分類面頁記錄時點選各選項

食物時會即時顯示食物名稱，所點選食

物的熱量會以累加做總和即時顯示，提

供使用者確認。如圖 13所示。

在記錄面頁可以切換到運動分類，上方

的表格可以分別計算食物攝取及運動各

多少熱量，如圖 14所示。

7

圖 13. 使用者選項之熱量相加

圖 14.切換到運動分類

C. 歷史記錄查詢採用月曆型式，使用者輸

入完食物攝取或運動消耗後，會以色條

方式顯示在當日的月曆格中，食物攝取

用紅色顯示；運動消耗用綠色顯示，搭

配各自數值顯示，更能迅速了解攝取與

消耗的熱量比較如圖 15 所示，圖 16 為

放大圖。

圖 15.消耗及攝取

圖 16.攝取與消耗分別以紅色、綠色顯示

在網頁設計中，我們一直想發方法如何

讓使用者知道自己當日的攝取及消耗是

否達到正常比例，所以我們嘗詴用 HTML5

meter Element圖條的方式顯示[7]，而

圖表分為三個區塊，黃色為基礎代謝率，

綠色為運動消耗，紅色為食物攝取，如

圖 17所示。基礎代謝率會從個人資料面

頁所輸入的數值算出基礎代謝率(BMR)

顯示在下方，攝取及消耗的數值則會抓

取當日的數值以比例方式顯示。

8

圖 17.當日攝取&消耗熱量條↑

D. 相關健康網站之連結，提供 APP 上電子

書的來源網站，若使用者有興趣可點擊

觀看。在網路上有這麼多資料來源，是

需要經過篩選確認其正確性的，我們希

望使用者能夠接收到正確的健康資訊，

然而了解正確的健康知識，才能瘦得健

康，擁有健康的身體。

四、結論與未來展望

4.1 結論:

網路上健康管理部分的網站非常的多，

但是在功能多樣化的副作用下，紀錄飲食的

步驟變得相當繁瑣，這會導致使用者持續使

用的意願降低。我們希望能夠讓使用者在使

用這個專案能得到完整的資訊，並且能夠持

續的使用，所以我們想以圖形視覺化的量表

讓使用達到一目了然攝取及消耗的比例。因

此在設置視覺化量表的部分。

APP 透過設置鬧鐘提醒的方式，讓使用

者能夠確實的記錄飲食，和健康資訊電子書

中提供豐富的健康資訊，配合有規律的運動、

喝水、睡眠來達到減肥強身的目標，在心情

記錄寫下過程中的點點滴滴，讓使用者在未

來能夠與他人分享經驗與回憶。

4.2 APP端未來展望:

A. 希望在未來能夠新增 FB 帳號登入，使瘦

身成果和心得能一鍵分享至 FB 貼文的功

能，增進社群之間的互動，並透過同儕間

的鼓勵與刺激進而達到更良好的效果。

B. 增加掃描食物上條碼的功能，來快速取得

食物卡路里的資訊，減少手動輸入帶來的

不便與錯誤。

4.3 WEB端未來展望:

A. 紀錄頁面優化。對輸入記錄的步驟以及外

觀做更直覺化的設計。

B. 結合社群網站登入分享功能，達到多方使

用者互動體驗。

C. 視覺化量表應用在不同資料上，例如:

可以選取整月的攝取與消耗比例……

等。

五、參考文獻

[1] Android SDK語法 (擷取自 20141020)

http://developer.android.com/index

.html.

[2] Android AlarmManager ( 擷 取 自

20141015)

http://www.youtube.com/watch?v=R65

OmR-_rpA.

[3] Android MediaPlayer (擷取自 20141020)

http:/developer.android.com/refere

nce/android/media/MediaPlayer.html

[4] BMI計算 (擷取自 20140901)

http://www.scpo.nccu.edu.tw/show/p

art1/b/B2/bmi.html.

[5] BMR計算 (擷取自 20140901)

http://www.scpo.nccu.edu.tw/show/p

art1/b/B2/bmr.htm.

[6] FullCalendar (擷取自 20140910)

http://www.helloWeba.com/tag-FullC

alendar.html.

[7] HTML5 meter Element (擷取自 20140915)

http://css-tricks.com/html.

[8] 蓋索林(gasolin)，Google!Android 手

機應用程式設計入門，松崗資產管理，

2013.05.

[9] 孫宏明，Android 程式介面設計，基峯

資訊，2014.01.

http://developer.android.com/index.htmlhttp://developer.android.com/index.htmlhttp://www.youtube.com/watch?v=R65OmR-_rpAhttp://www.youtube.com/watch?v=R65OmR-_rpAhttp://developer.android.com/reference/android/media/MediaPlayer.htmlhttp://developer.android.com/reference/android/media/MediaPlayer.html

9

[10]鄧文淵，挑戰 PHP5/MySQL/程式設計樂

活學，基峯資訊，2011.09.

[11]洪維恩，Java7教學手冊-第五版，旗標

出版，2012.08.

[12]林安琪、于冠雲，網頁動感玩美必修技，

基峯資訊，2011.12.