中華大學資訊工程學系

22  Download (0)

Full text

(1)

1

中華大學資訊工程學系

專題期末報告

天天動運動規劃系統 Daily Exercise

組員: B09802144 鄭耿宇 B09802024 彭聖佑 B09802135 水牧樵 B09802030 謝佑劼 J10102006 任禹錫

指導教授:歐陽雯老師

專題編號: PRJ2012-CSIE-10108 執行時間:102 年 1 月 至 102 年 6 月

(2)

2

目錄

壹、 摘要... 4

貳、 使用相關技術探討... 4

一、 Android... 4

二、 Eclipse... 4

三、 PHP... 4

四、 JavaScript... 5

五、 CSS... 5

六、 APPSERV... 5

參、 背景及目的... 6

肆、 專題研究步驟與實作... 6

一. 網頁端介紹... 6

1. 網頁端流程圖: ... 7

2. 網頁端使用者或管理者登入機制 ... 8

3. 網頁端開始規劃 ... 8

4. 查看本周規畫完成度 ... 10

5. 顯示歷程 ... 10

二. 手機端... 11

1. 手機端流程圖 ... 12

2. 使用者登入機制 ... 13

3. 選擇規畫頁面 ... 14

4. 主要內容 ... 14

5. 今日規劃查詢頁面 ... 15

6. 歷史紀錄查詢頁面 ... 16

伍、 進度與分工... 20

陸、 遇到問題... 20

柒、 結論... 21

捌、 感謝... 21

玖、 參考文獻與網站... 22

(3)

3

圖目錄

圖 4-1 網頁端流程圖 ... 7

圖 4-2 網頁端會員登入示意圖 ... 8

圖 4-3 網頁端新增規畫流程圖 ... 9

圖 4-4 網頁端刪除規畫流程圖 ... 9

圖 4-5 網頁端查看本周規畫流程圖 ... 10

圖 4-6 網頁端顯示歷程流程圖 ... 11

圖 4-7 手機端流程圖 ... 12

圖 4-8 手機端使用者登入機制 ... 13

圖 4-9 手機端登入畫面 ... 13

圖 4-10 手機端選擇規畫頁面 ... 14

圖 4-11 手機端主要內容流程圖 ... 14

圖 4-12 手機端主要內容頁面 ... 15

圖 4-13 手機端今日規畫頁面 ... 15

圖 4-14 手機端歷史紀錄查詢頁面 ... 16

圖 4-15 手機端執行規畫頁面 ... 17

圖 4-15 手機端結算頁面 ... 18

圖 4-16 系統架構圖 ... 19

(4)

4

壹、 摘要

近年來智慧型手機慢慢開始普及,其中又以安卓(Android)擁有非常大的親和力 以及開放式開發平台,而受到大多數群眾推崇,因此具有廣大的市場佔有率。

隨著安卓(Android)的壯大,現在越來越多人在這領域中作探討與研究,因此我 們專題決定以安卓(Android)應用程式設計作為題目,並且深入了解其開發原理與 架構。

本專題中,在多數的安卓(Android)程式類型中,我們選擇以GPS技術作為應用,

進而設計一套與運動規畫相關之系統。

貳、 使用相關技術探討

一、 Android

Android 是以 Linux 為基礎的半開放原始碼的作業系統,由 google 和開 放手持設備聯盟持續開發,並主要在移動設備上運作,例如:智慧型手機、

平板電腦。

Google 透過官方網路上的商店平台 Google Play,讓開發者上傳自己研製 的應用程式也讓使用者可以透過這個平台下載需要的程式,而這樣便形成了 良性的循環,越來越多的開發者與使用者投入了 android 的擁抱。

二、 Eclipse

是著名跨平台的開源碼 IDE,最初主要是用作 Java 語言的程式開發,目 前也有人透過外掛的方法,使其擴充為 C++、Python 語言的發開工具。

其實 Eclipse 本身只是一個平台,因為眾多外掛的支持讓 Eclipse 具有廣 大的支援性,其中也支援本論文的 android 開發研究,許多 android 開發者 與大部分市面上的書籍皆選擇 Eclipse

為主要開發工具。

Android 開發者可以透過 install new software 功能,連接

http://dl-ssl.google.com/android/eclipse/來取得 android 的開發工 具。

三、 PHP

PHP 是一種在電腦上執行的腳本語言,主要用途是在於處理動態網頁,也 包含了命令列執行介面(command line interface),或者產生圖形使用者介 面(GUI)程式。PHP 的應用範圍相當廣泛,尤其是在網頁程式的開發上,一

(5)

5

般來說 PHP 大多在伺服器端執行,透過執行 PHP 的程式碼來產生網頁提供 瀏覽器讀取,此外也可以用來開發命令列腳本程式和使用者端的 GUI 應用程 式。PHP 可以在許多的不同種的伺服器、作業系統、平台上執行,也可以和 許多資料庫系統結合,且 PHP 可以在多數的伺服器和作業系統上執行。官方 組織 PHP Group 提供了完整的程式原始碼,允許使用者修改、編譯、擴充來 使用,而且使用 PHP 完全是免費的。

四、 JavaScript

JavaScript 最初是由網景 (Netscape) 所開發,最早的名字是 LiveScript,

主要的功能是讓 HTML 的靜態網頁,變身為動態網頁,強化與客戶端的互動 功能。

JavaScript 是物件式 (object-based) 語言,作用於客戶端 (client) 瀏覽器,比 Java、C++ 簡化很多,適合缺乏程式經驗的學習者入手,它的最 大優點就是容易學習。

五、 CSS

Style Sheets 是 W3C 組織於 1996 年公佈的 Csacading Style Sheets Level 1 (CSS1) 所發展出來的,中文翻譯名稱多譯為『網際排版』。Style Sheets 是一群體定義的集合,能夠讓網頁製作者自行定義文件中編排的方式,例如 文字字體、字距、行距、大小等。讓段落文字在瀏覽器中能有更整齊、美觀 的形式表現出來。而在 IE4.0 及 Netscape4.0 以後的版本都有支援這種排版 的方式。

六、 APPSERV

APPSERV 是一個非常方便建立伺服器的工具,當中包含了 SQL 及 PHP。

它可以在網頁上編輯欄位中輸入指令或是上傳 SQL 檔案來建立資料庫,我 們利用一台電腦當作伺服器,用來存放客戶端上傳的資料,並且利用 PHP 語 言來研究及撰寫網頁,來處理檔案上傳和接收資料。

(6)

6

參、 背景及目的

對於現代的人來說,資訊產業非常發達,智慧型手機的使用已經非常普及化,

功能也越來越多,且開發環境是開放式的,大家可以設計自己的應用程式並且發 布在 Google Play 上面,所以市面上的 Android 應用程式非常的繁多。

本專題的構想在於,觀察現在繁忙的生活步調中,人們普遍缺乏主動運動的意 識,因此,我們決定設計一款與運動規畫相關的應用程式。

然而,現在市面上的運動相關 APP(Application 簡稱),對於具有規畫運動方 面功能的卻寥寥無幾,因此,我們打算藉由利用設計一網頁來做運動的規畫,然 後由手機端設計的程式來完成規畫的運動。

本專題中,主要分成兩大區塊,分為網頁端與手機端;網頁端主要功能是在於 幫助使用者規畫運動計畫,然後存入資料庫;手機端會取出使用者規畫的運動計 畫,然後顯示相關資訊,完成後回傳資料庫,最後再由網頁端統計完成資訊。

肆、 專題研究步驟與實作

一. 網頁端介紹

網頁端部分,主要是要讓使用者可以用有自己的帳號密碼並登入,以確保隱私 作用;登入後可以開始規劃運動計畫,並且可以刪除不需要的運動計畫;完成運 動計畫後,使用者也可以查看這筆運動計畫的詳細資訊。下面開始詳細介紹研究 與實作過程。

在設計網頁端的多種技術中,我們以 JavaScript 作為前端處哩,主要處理一 些版面的設計格式,還有一些簡單的運算;然後在一些要及時運算或者動態取得 資料的地方則是用 PHP 作為後端運算;設計版面字型或者表格格式之類的則是使 用 CSS 嵌入。取得資料庫資訊部分,則是以 PHP 作為介面與資料庫溝通,並且回 傳資料庫。資料庫部分使用的是 APPSERV,內含 MySQL、Apache 與 phpMyAdmin。

(7)

7

1. 網頁端流程圖:

圖 4-1 網頁端流程圖

(8)

8

2. 網頁端使用者或管理者登入機制

網頁端再使用者開啟的一開始便會要求使用者或者管理員登入,在 這邊我們使用的是的全域變數 Session

PHP 的 Session 提供給我們一個可以在多個頁面存取個別使用者連 線資料的機制。對於針對個別使用者,需要在多個頁面存取共用的資 料時,特別有用。如果,非由程式特別清除 Session 的話,個別使用 者的 Session 資料會在特定時間(由 php.ini 設定)內,被系統清除 掉。

圖 4-2 網頁端會員登入示意圖

3. 網頁端開始規劃

使用者選擇開始規畫後,可以選擇新增或刪除規劃

新增規畫:使用者可以由網頁欄位選擇未來一周規畫或者固定規畫 一個月,然後依照使用者想要規畫的內容可以輸入規畫日期、運動項 目、體重、想要規畫什麼,然後藉由 PHP 介面系統會幫你算出可能的 消耗,再上傳資料庫建立規畫。在規畫這步驟,必須要先把規畫的日 期轉換成秒數,以供接下來必須要取得某時間區內的規劃的依據;其 中使用 PHP 的 time()以及 date() 函數取得伺服器的日期與時間,並 格式化,代表的是從 1970 年 1 月 1 日(00:00:00 GMT)開始到現 在的時間,以秒為計算單位,必須加上

date_default_timezone_set("Asia/taipei")來定義時間區。

(9)

9

圖 4-3 網頁端新增規畫流程圖

刪除規劃:進入刪除規畫頁面,使用者可以看到未來七天之規畫,選 擇相對應規劃之編號,使用者便可以刪除規劃。因為是取得未來七日 規畫,所以必須要有一個 PHP 界面來利用先前使用 PHP 的 time()以及 date()函式存入資料庫的秒數推算出未來七天有哪些規畫,並且使其 顯示出來。

圖 4-4 網頁端刪除規畫流程圖

(10)

10

4. 查看本周規畫完成度

使用者選擇查看本周規畫完成度後,會顯示出這周規畫的詳細資料 與完成度,並且顯示進度條。因為需要擷取本周周一至周日的規畫,

所以也需要一個 PHP 界面來利用先前使用 time()以及 date()函式取得 的秒數推算出周一至周五的規畫。

推算演算法如下:

$today_sec = time() //今日的秒數

$today = date("D",$t) //今日星期幾

$one_day_sec = 86400 //一天的秒數

If($today = 星期 n) week_start = time()+(n-1)* $one_day_sec;

week_end = time()+7-(n-1)* $one_day_sec

圖 4-5 網頁端查看本周規畫流程圖

5. 顯示歷程

顯示歷程部分,是可以讓使用者觀看之前運動所經過的位置;點入 後使用者要先選擇觀看一周內、一個月內或所有時間點的規畫,這裡 也是應用 PHP 的 time()與 date()函式做應用取出時間點內的畫規,系 統會以下拉式選單列出選擇時間內的所有規畫,點選後可以顯示其運 動歷程。

(11)

11

圖 4-6 網頁端顯示歷程流程圖

二. 手機端

手機端部分,主要是要讓使用者用自己的帳號密碼登入,核對自己在網頁端所 規劃的內容來使用;登入後可以開始使用主程式,選擇或是查看今天的規劃內容 , 也可以查看所有過去歷史規劃,最主要可以使用此程式來開始運動規劃,可以根 據手機電力或需求選擇有即時地圖版本或是無地圖版本,下面開始詳細介紹研究 與實作過程。

(12)

12

1. 手機端流程圖

圖 4-7 手機端流程圖

(13)

13

2. 使用者登入機制

手機端使用跟網頁端一樣的帳號密碼,可讓用戶使用網頁端規劃的 的內容。

圖 4-8 手機端使用者登入機制

圖 4-9 手機端登入畫面

(14)

14

3. 選擇規畫頁面

當登入後便可查看今天共有幾筆規劃,並且選擇要執行的規劃。

圖 4-10 手機端選擇規畫頁面

4. 主要內容

在主要頁面中可以選擇此程式所有功能,可以詳細的察看今日選擇 的規劃內容,也可以根據使用需求選擇具有 GoogleMap 的執行模式,

或是簡潔明瞭且較省電力的座標模式,以及查看過去歷史規劃等等。

圖 4-11 手機端主要內容流程圖

(15)

15

圖 4-12 手機端主要內容頁面

5. 今日規劃查詢頁面

可以詳細的看到今日準備完成的規畫頁面。

圖 4-13 手機端今日規畫頁面

(16)

16

6. 歷史紀錄查詢頁面

可以查看過去所規劃的內容,讓使用者完全掌握所有規劃資訊。

圖 4-14 手機端歷史紀錄查詢頁面

(17)

17

7. 執行規劃頁面

執行規劃頁面分成了有地圖版本跟無地圖版本,功能上完全相同,

唯一的差異在於一個版本支援完整的 GPS 定位 GoogleMap,另一版本 則以省電為出發點,指顯示座標的精簡模式。

圖 4-15 手機端執行規畫頁面

a. 座標:此頁面將利用手機硬體本身的 GPS 以及 3G 網路或是 WiFi 無 線網路進行定位,平時只需要將手機 GPS 功能開啟就可以進行定 位,但若是再額外加上 3G 或是 WiFi 無線網路將可以更快速更準 確的定位使用者所在位置,將獲得的資訊轉換成經緯度讓使用者 了解到自己所在的位置,也同時將每秒的座標資訊上傳到伺服器,

日後便可用網頁端查看使用者在哪邊運動,運動了多遠等等資 訊。

b. 距離:利用 GPS 獲得的座標資訊來計算使用者目前運動的距離,若 使用者是以距離作為主要規劃時便即時了解到自己目前的運動 況。

c. 時間:當開始執行規劃時會開始計算運動時間,當想要暫停或重新 刷新時間時可以使用面板上的按鈕。

d. 熱量:即時的計算熱量,每秒更新使用者所消耗的熱量提供使用者 資訊。

e. 速率:計算每秒速率,提供資訊。

f. 型態:根據速率來判斷出使用者目前的運動狀況,每秒更新讓使用 者了解現在是跑步或是走路等等。

g. 步數:利用手機硬體的重力感應裝置及陀螺儀來計算使用者所移 動的步數。

(18)

18

h. 提醒:當目標達成時,會跳出提醒視窗及音效,若要直接離開規劃 便可按結束規劃按鈕。

8. 結算頁面

此頁面顯示時也同時將今日完成的資訊上傳,也將今日資訊詳細的 顯示給使用者查看。

圖 4-15 手機端結算頁面

(19)

19

三. 系統架構圖

結合手機端與網頁端後,詳細的結構流程圖如圖 4-16

圖 4-16 系統架構圖

(20)

20

伍、 進度與分工

收集資料 討論架構 網頁端製作 手機端製作 美化、影片製作 報告撰寫

鄭耿宇 ● ● ● ●

水牧樵 ● ● ● ●

彭聖佑 ● ● ● ●

謝佑劼 ● ● ● ●

任禹錫 ● ●

陸、 遇到問題

一開始用到最大問題是,android 版本不同會導致需要不同的方式去連線,像 是 android2.3 跟 4.0 的連線方式不一樣,若不將各版本一起考慮,會產生某些 版本無法連結資料庫的問題。

我們專題有使用 Google Map 的 API 套件,它可以使自己製作的程式使用 Google Map 系統,雖然說它算是開放式的套件供給大家任意使用,但是還是必須先跟 Google 申請,核准後才能自由使用,而起初我們並不了解這問題,所以在使用 套件上不斷的失敗,之後了解到需要申請後問題迎刃而解。

手機 GPS 的定位準確度不是非常高,所以在使用 Google Map 有時會產生所謂 的亂點,造成我們程式上判斷錯誤,造成錯誤的位移,錯誤的座標,錯誤的地圖 等等問題,因此我們估計人類跑步的極限約為 100 公尺/8 秒,1 秒約為 12.5 公 尺,設定了每秒位移超過 15 公尺的話該點為亂點不做紀錄,來解決這問題。

對於做網頁的部分,首先便會常常發現一個現象,也是寫網頁最麻煩的地方,

1月 2月 3月 4月 5月 6月 7月

初步設計討論 開始設計網頁、手機端 實作網頁端、手機端 開始計畫整合步驟 初步完成系統架構 陸續測試系統 除錯、修正、美化系統 最後美化完成、報告製作

(21)

21

便是網頁並不會告訴你你的程式碼哪裡有問題,你出了錯,便只會發現東西出不 來,但是卻不知道東西會核無法呈現,這時便是要靠長久寫下來的經驗來判斷與 猜測是哪裡出了問題;在來就是對於各種情況下,有時候必須需要讓 PHP 與 JAVASCRIPT 兩者的資料做溝通,這時候就會顯得非常的麻煩,因為兩者之間語 言不同,是不能直接做溝通的,必須要做一些特出的處理,所以常常會看到藉由 PHP 介面來成雙語言溝通的橋樑。

各種語言轉換問題,由於我們系統共使用了資料庫、PHP、JavaScript、CSS、

Java、Android 等,所以在各種語言或是語法溝通時,往往會遇到一些障礙,舉 例來說,PHP 在跟 JAVA 作資料溝通時,因為兩者對於變數的型態或編碼有所不 同,常常會看到傳遞資料卻無法正常直行的結果;那排除方法就是更努力的學習 各種語法、轉化型態、或者要想出可以符合雙方變數型態的程式碼撰寫方法來解 決它。

柒、 結論

在這次專題當中,我們不只學到了 Android 的程式設計與網頁端的連結,還讓 我學到一個團隊需要互相合作的組織性,過程當中常常遇到問題、程式出現 bug、

網路連結發生故障或者是設計上出現的糾紛,但我們最後都經由團體討論和經由 書籍和網路上的資料解決,整個專題完成雖然非常辛苦,但在最後總結的時候看 到整個設計非常的流暢真的是讓我們感到無比的光榮。

捌、 感謝

這一學期的專題實作終於到這裡告一段落了,真的很感謝我們的指導老師歐陽 雯老師在這一年的教導,不但給了我們專題的實作方向與想法,更是讓我們學習 到對於專案設計的觀念與態度,不斷的給予我們意見讓我們的專題能夠做得更好;

也謝謝老師在當我們在課業上忙碌或者其他狀況導致進度落後的時候給我們極 大的包容,並不斷提醒我們進度狀況,還有一些細瑣但讓人容易忽略的細節,讓 我們可以順順利利的做出成果!

(22)

22

玖、 參考文獻與網站

 Google Android SDK 開發範例大全 | 第三版 作者:余志龍 、 陳昱勛 、 鄭 名傑 、 陳小鳳

 學會 Android 應用開發的 18 堂關鍵基礎課程 | 作者:吳亞峰、索依娜

 Android4.X 手機/平板電腦程式設計入門、應用到精通 | 作者:孫宏明

 Dreamweaver CS5 & PHP 資料庫應用經典 | 作者:蔡國強

 網頁程式設計--HTML、JavaScript、CSS、XHTML、Ajax |作者: 陳惠貞

http://www.w3schools.com/

https://developers.google.com/maps/?hl=zh-TW

Figure

Updating...

References

Related subjects :