崑 山 科 技 大 學

資 訊 傳 播 系

學 生 專 題 製 作 報 告

營養食譜 APP

The Nutrition Recipe Application

指導教授： 陳淵琮 教授

專題組員： 林佳陵 學號： 4010C030

林惠姿 4010C055

朱亞萱 4010C056

中華民國 105 年 04 月

I

營養食譜 APP

朱亞萱 林佳陵 林惠姿

崑山科技大學資訊傳播系

摘要

本專題主要將營養食譜應用於行動裝置上之研究。由於平板電腦與智慧型手

機等行動裝置普及化，越來越多人習慣透過智慧型裝置使用應用軟體，除了智慧

型裝置內建的程式之外，下載其他應用軟體也成為現今的主流；近年來由於食安

問題不斷發生，所以人們逐漸自我把關食安問題，但由於市面上各類食譜書籍眾

多，且每一本都有特定主題，讓使用者需要查閱很多食譜。因此本專題針對行動

裝置去設計出針對身體成長時期營養及近年來熱門減肥食譜的應用程式，APP製

作方式採用 HTML、CSS、PHP 設計網頁，並透過 AJAX 技術開發與資料庫互動機

制，改善使用者經驗；在手機 APP 方面，本專題使用 Apache Cordova 進行 APP

開發，資料內容部分同時採用 AJAX 技術讀取資料庫資料。所有食譜都有與營養

師合作並標示每道的營養標示，讓此食譜內容提升其信度與效度；而使用者可隨

時隨地輕鬆透過 APP 快速地查閱使用，同時 APP也可讓使用者分享自己私房菜互

相交流。本專題解決查詢營養食譜時需要查閱多本食譜之困擾，並透過行動裝置

的特性可讓使用者可以不受空間限制的自由應用。

關鍵詞：手機、營養食譜、行動應用程式、Cordova

II

The Nutrition Recipe Application

Chu,Ya-Hsuan Lin,Chia-Ling Lin,Hui-Zi

Department of Information and Communication

Kun-Shan University

ABSTRACT

The work is focus on the nutrition recipe to mobile device.

To download applications, besides the built-in programs, onto mobile device such

as tablet computer, smartphone is becoming more and more popular for the modern life.

In recent years people confront the food security one after another every single

day. It is coercive that people have keep their eyes on food safety themselves gradually.

There are as many as recipe books on the bookshelves in every bookstore with specific

topics for us to reference with.

We try to develop a popular application of losing weight according to long-term

nutrition for body system to grow up using mobile device. The coding techniques of

HTML, CSS, PHP website design were employed to build up this application. We using

the interaction mechanisms of AJAX development technique and Database System to

improve the user experience. The Apache Cordova has been deployed for application

development in mobile phone application. In data of content, meanwhile, the AJAX

technique was applied to fetch data from database.

All recipes is collaborated with nutritionists and clearly labeled every nutrition

ingredient of each dishes which can promote the reliability and effectiveness. Users

freely to look up those recipes via application as they wish. Users can share their own

dishes via the application. This work can not only sort out the troublesome of inquiring

many recipe books while investigating nutrition recipe books but also allowing users to

look up these recipe books via the characteristics of mobile device without limitation

of space.

Keywords: mobile phone, nutrition recipe, mobile application, Apache Cordova

III

目 錄

中文摘要............................................................ I

英文摘要........................................................... II

目錄.............................................................. III

圖目錄............................................................. V

表目錄.............................................................VI

一、緒論............................................................ 1

1.1 專題動機.................................................... 1

1.2 專題目的.................................................... 1

1.3 專題背景.................................................... 2

1.4 專題範圍.................................................... 2

1.5 專題限制.................................................... 2

二、文獻探討 ....................................................... 3

2.1 食安問題與人體健康.......................................... 3

2.2 傳統書籍與行動裝置 ......................................... 3

2.3 關於 HTML ................................................. 4

2.4 關於 JavaScript、PHP、CSS ................................... 5

2.5 關於 JQuery ................................................. 7

2.6 關於 Ajax ................................................... 8

2.7 關於 Maria DB ............................................... 8

2.8 關於 Apache ................................................. 9

2.9 關於 Ubuntu ................................................. 9

2.10 關於 Cordova ............................................... 10

2.11 關於 Adobe Premiere ........................................ 11

三、專題實作程序與方法 ............................................ 12

3.1 專題製作方法與工具 ........................................ 12

3.2 專題系統架構 .............................................. 12

IV

3.3 支援專題資訊技術、設備與需求軟體 .......................... 15

四、專題成果 ...................................................... 16

4.1 網頁 ..................................................... 16

4.2 APP ...................................................... 19

4.3 人力分配表 ............................................... 21

4.4 甘特圖 ................................................... 21

五、結論........................................................... 22

六、參考文獻 ...................................................... 23

V

圖 目 錄

圖 2.1 HTML 的 Logo ………………………………………….………………………….………..

圖 2.2 CSS、JavaScript 與 PHP 的 Logo ……………………………………….….………

圖 2.3 JQuery的 Logo ……………………………………………….……………….…………….

圖 2.4 Maria DB 的 Logo.................................................................................

圖 2.5 Apache的 Logo ...................................................................................

圖 2.6 Ubuntu的 Logo ...................................................................................

圖 2.7 Cordova的 Logo...................................................................................

圖 2.8 Premiere 的 Logo.................................................................................

圖 3.1 研究架構圖………………………………………………………………………….…………..

圖 3.2 研究流程圖 ……………………………………..……………………………………………..

圖 3.3 網頁架構圖(訪客)………………………………….……………………………………….

圖 3.4 網頁架構圖(會員)……………………………………………………….………………….

圖 3.5 網頁架構圖(管理員)……………………………………………………………………….

圖 4.1 網頁首頁……………………………………………………………………………………..…..

圖 4.2 老年期食譜第一道………………………………………………………….…….……..….

圖 4.3 成年人食譜側標………………………………………………………………….…………..

圖 4.4 食譜內容頁…………………………………………………………………………..…….……

圖 4.5 APP 介紹…………………………………………………………………….…………...…….…

圖 4.6 營養師介紹…………………………….………………………………….…………………....

圖 4.7 分享區頁面…………………………………………………………….………….………..…..

圖 4.8 顯示頁……………………………………………….…………………..……….…………….…

圖 4.9 APP 首頁…………………………………………….……………………..……….………….…

圖 4.10 青少年圖示內容……………………………….……………………….……….………….…

圖 4.11 食譜內容頁……………………………………….……………………..……….………..……

圖 4.12 側標……………………………………………….….……………………..……….…………..…

圖 4.13 登入進分享區…………………………………………….……………..……….………….…

4

5

7

8

9

10

10

11

12

13

14

14

15

16

16

17

17

18

18

19

19

19

20

20

20

20

VI

表 目 錄

表 2.1 食安問題與傷害…………………………….…………………….………………….……...

表 2.2 傳統書籍與行動裝置的比較…………………………………………….…..….…….

表 2.3 HTML 的優缺點………..…………………………………..……….……………………….

表 2.4 JavaScript 的基本特點.........................................................................

表 2.5 JavaScript 的語言特性…………………………………………………………….……….

表 2.6 PHP 的優點………………………………………..…………….………….…………….……

表 2.7 CSS 的優點……………………………………………….………………………….……

表 2.8 CSS 的使用方式………………………………………………………………………………

表 2.9 JavaScript 缺點與 JQuery 優點相比…………………………………………………

表 2.10 AJAX 優點……………………………………………………………………….……………..

表 2.11 MariaDB 與 MySQL 差異……………………………….………………….………….

表 2.12 Apache 特色……………………………………………………………………….………….

表 2.13 Ubuntu 特色……………………………………………………………………….…………..

表 2.14 Cordova 的關鍵點…………………………………………………………..….………….

表 3.1 資源技術 ……………………………………………………………………………….………..

表 4.1 人力分配表…………………………………….……………………….…….…….…………..

表 4.2 甘特圖……………………………………………………………..…….……………….……….

3

4

4

5

5

6

6

7

7

8

8

9

10

10

15

21

21

1

一、 緒論

1.1 專題動機

在這個平板電腦與智慧型手機等行動裝置普及化的社會中，越來越

多人習慣透過智慧型裝置使用簡訊軟體、下載行動優惠券、上網打卡、

瀏覽電子書、看 YouTube影片等，而智慧行動裝置普及率不斷升高，更

帶動了應用軟體的經濟發展。根據資策會 FIND調查，智慧型裝置應用

多元化，可分為基本通訊及服務應用兩部份，在基本通訊行為中主要包

含撥打/接聽電話及傳送付費簡訊，使用比例為 79.5% 及 23.3%；在行

動服務應用方面，前三項關鍵應用依序為「瀏覽網頁/看新聞

（20.4%）」、「即時通訊聊天/通話（17.4%）」、「玩遊戲（16.5%）」[1]。

由此可知除了智慧型裝置內建的程式之外，下載其他應用軟體也成為主

流。

根據天下雜誌的統計，臺灣從 2007年的瘦肉精事件開始，食安問

題接連環爆，2008年的三聚氰胺、2009年的戴奧辛、2011 年的塑化劑

等[2]，讓民眾陷入恐慌，且產生各種疑慮與不安，逐漸地不相信外

食，動手做才覺得安心。

而由於市面上有多項的食譜書籍，每一本都有特定的一個主題，像

是素食食譜、甜點食譜、電鍋食譜、兒童食譜、早午餐食譜等，各項食

譜均分散於各本書，如果使用者要查閱，須購買好幾種書籍才能找到自

己所需，導致使用者查閱起來變得不方便；從網路搜尋，可找到幾項網

站食譜，康健食譜網[3]主要是針對器官營養所設計、日日煮食譜網[4]

主要是針對一般大眾食譜所設計、全聯好菜食譜[5]主要是針對季節與

節慶所設計等，各個網站都有屬於自己的主題。

經由以上三點，本專題欲針對行動裝置去設計出針對身體成長時期

營養的應用程式，讓使用者可以在何處何地的環境下，輕便與快速的使

用。

1.2 專題目的

一、飲食是最直接影響人體健康[6]的重要因素，在人的生活中吃東西

是一件沒辦法被任何事情所取代的事，本專題製作營養食譜應用程

式，希望使用者能夠在自己料理之餘，也能兼顧到身體所需要的營

養。

二、本專題製作此營養食譜應用程式，主要目的是希望能讓使用者不用

購買很多本的營養食譜書就能夠取得關於兒童、青少年、老年人以

及減肥所需要營養的整合食譜。

三、本專題製作之行動應用程式主要設定對象為想學做菜的使用者

2

[7]，這樣的使用對象是會自行在家料理且對身體健康營養較為注

重的使用族群，本專題利用這樣的心思去開拓這個使用族群。

1.3 專題背景

據資策會調查發現，臺灣持有智慧型手機，在 2014 年上半年已高

達 58.7%，到 2014下半年也爬升到 65.4%[8]，依目前數據來看，會逐

漸越來越普及化，加上近幾年來發現到大多人屬於外食主義者，在外食

天數達到四天以上就被定義「外食族」[9]，因為工作的繁忙沒有空閒

時間可以自己動手煮料理，但如果有時間想自己動手料理時，卻也因為

市面上的食譜書相當多元化，無法迅速找到自己想要的資訊，讓許多人

越來越偏向外食，但外食沒辦法百分百的保證他的安全性，而且長期下

來會有營養不足的現象，導致現在有很多疾病逐漸有年輕化的現象。

1.4 專題範圍

在本專題裡，將營養食譜 APP 裡分成三個階段，分別是兒童、青少

年、老年以及減肥，並針對各階段所缺乏的營養去做整合，像兒童是成

長期，青少年是針對青春期的，而老年期會遇到骨質流失的問題，本專

題食譜裡的食材我們採用平價且易取得的。使用 APP方面，本專題可以

在 Android 和 IOS運作，手機、平板皆可使用。

1.5 專題限制

我們的對象是針對想學做菜的人，食譜偏向家庭式的，任何想學做

菜的人能輕易上手，而且食譜裡的食材不易取得且昂貴的並沒有列入考

量，食譜是符合一般大眾，其內容無法滿足每位的需求。

3

二、 文獻探討

2.1 食安問題與人體健康

在近幾年以來，人類的生活不斷被食安問題所圍繞著，由於這些東西直接

傷害的是我們人體，所以現在越來越多人開始注重健康，以下列出食安問題與

傷害人體健康(見表 2.1)。

表 2.1 食安問題與傷害

年份 食安事件 傷害

2007年 瘦肉精

人類大量食用瘦肉精含量超過標準值的食品，

可能會立即出現噁心、頭暈、肌肉顫抖、心悸、

血壓上升等中毒症狀。[10]

2008年 三聚氰胺 長期攝取可能造成生殖能力損害、膀胱或腎結

石、膀胱癌。[11]

2009年 戴奧辛

出現的生理症狀包括免疫功能下降、腎功能下

降、牙齒發育受阻；嚴重則會有氯痤瘡及癌症。

[12]

2011年 塑化劑

造成生殖率降低、流產、天生缺陷、異常的精子

數、睪丸損害，還會引發惡性腫瘤或造成畸形

兒。[13]

2.2 傳統書籍與行動裝置

以傳統書籍與行動裝置來進行比較，傳統書籍優勢的地方可以讓人體會

到親近的感覺，實際拿著書能讓人有著小確幸感，這不是行動裝置能夠替代的

幸福感，但傳統書籍還是有劣勢的地方，例如不方便攜帶、偏靜態無法長期吸

引讀者注意力或者缺乏趣味性、無法收納好因為大量時比較占空間等，那相對

的現在屬於科技時代，越來越多人使用智慧型手機，生活周遭的商品逐漸也轉

變成科技化，例如傳統書籍漸漸轉變成電子書、地圖也能直接使用手機為你規

劃路線等，，因為攜帶方便而且也不占空間，隨時可以拿起來滑開裡頭就有自

己需要的東西，行動裝置的特點是可以隨時隨地存取獲得各種資訊[14]，並不

會受到任何限制，那隨著時代的更替，人對於科技方面需求更多也期望能更便

利，以下是針對傳統書籍與行動裝置的優劣勢比較。

對於傳統書籍與行動裝置的比較(見表 2.2)，對於傳統書籍收納地方需要

比較大的空間，而且因為較為厚重無法隨身攜帶在身邊，相反的行動裝置因為

輕薄且能隨時隨地帶在身邊，資料也能儲存在裡頭，並不會有收納這方面的問

題，整體來看行動裝置比傳統書籍來的有更多優勢。

4

表 2.2 傳統書籍與行動裝置的比較

傳統書籍 行動裝置

攜帶性 無法隨時攜帶 隨時攜帶

空間性 大 小

重量性 厚重 輕薄

2.3 關於 HTML

本專題以 HTML(見圖 2.1)作為網頁主程式語言，HTML全名為

HyperTextMarkup Language，是編寫網頁的標示語言，但它並不是一個程式

只是插在文件裡的 Code[14]，能夠在全世界透過 WWW迅速在各瀏覽器或平台

交流，可以控制字的大小或利用文字、影像、表格及影音等，不僅支援影

像，同樣也可以支援其他媒體影像，HTML配上 CSS就能搭配出各種不同的變

化，現今有許多網頁逐漸轉向用較新的 HTML5，如:Google，而 HTML5是由全

球資訊網協會（W3C）來完成標準制定[15]，整體來說，HTML5 是增加一些新

的元素，如:繪畫的<canvas>、影片標籤的<video>等，為了是能減少瀏覽器

對需要外掛程式的豐富性網路應用服務[16]，並希望可以提供更多網路的應

用。

圖 2.1 HTML 的 Logo

表 2.3 HTML 的優缺點[17][18]

優

點

1.技術門檻較低容易上手。

2.開發工具較多元化，工具軟體成本變低

3.能快速開發且快速結案。

4.開發一次能發布多種平台上。

5.影片播放、圖形呈現於瀏覽器，不需依賴 Plug-in就可以執行。

6.程式與美術能直接以 Code來寫，不需使用或購買 Flash 等其他

工具。

缺

點

1.尚未定案，如:SVG向量圖形，各瀏覽器所支援性不一。

2.普及性低，如:IE尚未完全支援，要到 IE9才有，但也僅支援

Vista以上的 Windows。

5

2.4 關於 JavaScript、PHP、CSS

在本專題使用到的 Web技術分別為 JavaScript、PHP、CSS(見圖 2.2)，這

個章節會介紹到 JavaScript的基本特點、語言特性、執行網頁的基本方式與

PHP 的特點以及關於使用 CSS 的優點、使用方式，詳細分析以及探討

JavaScript、PHP、CSS為最適合本專題適用的 Web技術。

圖 2.2 CSS、JavaScript 與 PHP的 Logo

2.4.1 JavaScript

JavaScript 是由網景公司的 Brendan Eich所設計而成的

[19]，是個跨平台、物件導向、輕小型的腳本語言[20]。作為獨立

語言並不實用，而是為了能簡單嵌入其他產品和應用程式（例如：

網頁瀏覽器）設計。則他若寄宿在主體環境時，可以與環境中的物

件相連，並以程式控制這些物件。

以下整理 JavaScript的基本特點、語言特性、網頁執行的基

本方式。

表 2.4 JavaScript 的基本特點[19]

JavaScript

基本特性

1.是一種解釋性程式語言

2.主要用來向 HTML頁面添加互動行為。

3.可以直接嵌入 HTML 頁面，但寫成單獨的 js檔案有利於

結構和行為的分離。

表 2.5 JavaScript 的語言特性[19]

JavaScript

語言特性

1. 大小楷有別(Case sensitve)：

英文標記的大小寫有差別，與 HTML標記不同。

2. 物件導向(Object-Oriented)：

是一種使用抽象化概念表達現實世界的程式設計模型。

3. 寬鬆型態(Loosely Typed)：

即說是變數的型態是可以隨時改變。

6

2.4.2 PHP[21]

全名為 Hypertext Preprocessor，即「超文字預處理器」，是

一種開源的通用電腦手稿語言。其適用於網路開發，且可嵌入 HTML

中使用。PHP的語法吸收了 C語言、Java和 Perl等流行電腦語言

的特點，易於一般程式設計師學習。

以下整理了 PHP的優點。

表 2.6 PHP的優點[22]

PHP

優

點

1.內嵌於 HTML

2. PHP 是 CGI

3. PHP 易學易用

4. PHP 網路資源豐富

5. Zend 噴射引擎

6. API 支援完整

7. OO 與 PEAR 架構相當好用

8. PHP 與 Apache 緊密結合

9. 支援 Session 與 Cookie

2.4.3 CSS

CSS全名為 Cascading Style Sheets。中文名解釋為樣式表，

又稱為串樣式列表，是一種用來結構化文件(如 HTML 文件或 XML應

用)添加樣式(字型、間距和顏色等)的電腦語言，由 W3C定義和維

護。[23]

以下表格整理了關於 CSS 的優點以及 CSS的使用方法。[24]

表 2.7 CSS的優點

CSS

優

點

1. 設定所有元件 (object) 的變化，包括文字、圖片、按鈕、視

窗等 。

2. 重新定義所有的 HTML 標記，以符合個別網站的需求。

3. 建立共同樣式指令，在不同的物件套用相同的樣式設定。

4. 製作個人化的的樣式設定檔案，以統一更新網站內的各網頁變

化。

7

表 2.8 CSS的使用方式

CSS

使

用

方

式

方法 詳解

標記加註式(in-line) 如果只有一個 HTML 標記需要設定樣

式，則可在該標記內，加上屬性

style="CSS 語法"，則可個別修訂樣式。

網頁內嵌式(embedded) 在 HTML 文件的 <head> </head> 之

間，以 <style> </style> 來定義共同

樣式，使整個網頁使用同一樣式。

外部設定式(external) 網站由許多網頁所組成，最好是可以統

一樣式，以免失去瀏覽的重點。 而每個

網頁均連結到同一個 .css 的純文字

檔，以設定整個網站的樣式有利修改。

2.5 關於 JQuery

JQuery是一套跨瀏覽器的 JavaScript 函式庫[25]，簡單來說是增強

JavaScript不足的地方[26]，比起 JavaScript 程式碼，JQuery 能讓程式碼

更為精簡化，且提供外掛模組、動畫效果及處理事件等，而現今有很多好用

插件，能夠製作功能強大動態網頁。

圖 2.3 JQuery 的 Logo

表 2.9 JavaScript 缺點與 JQuery優點相比[27]

JavaScript

缺點

1.安全問題:因為在客戶端執行，容易不明侵略。

2.渲染問題:在不同瀏覽器裡處理所顯示結果不同。

JQuery優點

1.最大好處是少量的代碼可優化。。

2.語法與 JavaScript 相比更為簡易。

3.消除 JavaScript 跨平台的兼容性問題。

4.有龐大的庫/函數。

5.有良好的文檔與幫助手冊。

6.具有支持 AJAX。

8

2.6 關於 Ajax

Ajax全名「Asynchronous JavaScript and XML」，中文解釋為非同步的

JavaScript與 XML技術，是一套綜合多項技術的瀏覽器端網頁開發技術

[28]，能透過在後台與服務器進行少量數據交換[29]，例如:微博、Google

地圖等，都是使用 Ajax的，是不需要重新整理頁面得到資訊，而是透過

JavaScript來與伺服器進行交換頁面資料的替換、更新網頁裡所有內容的技

術[30]，為的就是能改善使用者操作介面，提高整個的流暢度，減少伺服器

的負擔。

表 2.10 AJAX 優點[31]

AJAX

優點

1.能在不需更新頁面下維護資料。

2.不需任何插件，但需要用戶需允許 JavaScript上執行。

3.能使 Web應用程式迅速的回應及交互。

2.7 關於 Maria DB

Maria DB 是屬於 MySQL的一個分支，MySQL的連接器、程式庫及應用程

式都能在 Maria DB 的 API協定相容且能在底下運作[32]，將 MySQL封閉源

碼潛在風險，透過分支方法來避開風險，以下整理 Maria DB 與 MySQL差

異。

圖 2.4 Maria DB 的 Logo

表 2.11 MariaDB 與 MySQL差異[33]

MariaDB

與

MySQL

差異

1.MariaDB有開放發展藍圖的社群，MySQL發展封閉源碼的專

案。

2.多了 30 個人年以上的開發工作量。

3.更多功能。

4.更快。

5.更穩定。

6.安全問題更少。

9

2.8 關於 Apache

Apache全名為 Apache HTTP Server，是一個開放原始碼網頁伺服器

[34]，也屬於自由軟件之一且免費支援多種平台，硬體需求也較低，因為快

速簡單、可靠、性能穩定且能通過 API 擴充，，也能其跨平台和安全性，是

目前世界使用排行第一的伺服器軟體[35]，例如說，維基百科伺服器也是使

用 Apache的。

圖 2.5 Apache 的 Logo

表 2.12 Apache 特色[35][36]

Apache特色

1.Web 伺服器與用戶端瀏覽器彼此溝通就是透過(Hypertext Transfer

Protocol)HTTP。

2.具有簡單且強而有力基於文件的配置過程。

3.利用 Apache 模組支援 API，可自訂或開發模組內容。

4.提供完整原始碼，且允許自由使用及修改。

5.支援多種平台使用，包括:Unix、Linux、Windows等。

6.鼓勵使用者回饋新構想、Bug和 Patches(修補檔)。

7.支援資料庫管理 DBM驗證，能允許使用大量被驗證使用者密碼來保護頁

面，並不會使 Apache效能大幅下降。

8.沒有限制 URL重新導向及別名，供重新寫入用來解決 URL 處理問題。

9.支持設定日誌檔內容，伺服器允許自行建立自訂格式的日誌檔。

10.伺服器模組可在需要動態載入，能降低記憶體消耗，此類稱為動態共

用物件。

2.9 關於 Ubuntu

Ubuntu是 GNU/Linux發行版作業系統中的一種，將常用的開放原始碼軟

體包裝在裡面，目標於一般用戶提供最新同時又能相當穩定，以自由軟體建

構而成作業系統[37]，由於在 Linux 底下，全部軟件都是免費和自由的，所

以自然不會有盜版問題，且在安全方面不必憂慮，也不用擔心會有任何病毒

的侵略，防毒軟體也不需安裝加上界面方面也相當的美觀。

10

圖 2.6 Ubuntu 的 Logo

表 2.13 Ubuntu 特色[38]

Ubuntu特色

1.能安裝在任何地方，(ex.隨身硬碟)，桌面可隨手帶著走。

2.開機相當迅速。

3.軟體中心線上免費提供軟體，免費且合法安裝可透過內建網路商店購

買。

4.系統穩定且當機頻率低。

5.沒有任何限制，可自行發揮創意。。

2.10 關於 Cordova

Cordova 是 PhoneGap的代碼貢獻給了 Apache軟體基金會並在 1.4版發

布後，將名稱變更為 Apache Cordova，是一款開放原始碼的行動裝置開發框

架[39]，也是一個建立在 JavaScript 為基礎的，提供許多 JavaScript 的

API控制各種平台的硬體，搭配 HTML5+CSS 等相關 UI框架[40]，使得開發者

可以迅速開發 APP，目前支援系統有 iOS、Android、Windos Phone 等

[41]，說明著與各平台系統相容系相當高，且開發的過程中成本低，使用的

執行效率也不差，也能使 APP上架發佈於市場，以下整理出 Cordova的關鍵

點。

圖 2.7 Cordova 的 Logo

表 2.14 Cordova 的關鍵點[42]

Cordova的關鍵點

1.能運用 WebView 元件，並整合成瀏覽器的環境。

2.可將一系列相關資源包覆在網站應用程式資料夾中。

11

2.11 關於 Adobe Premiere

Adobe Premiere (見圖 2.8) 是一套用於圖像設計、影片編輯與網頁開

發，而且能支持高解析度，最高能支持到 10,240 x 8,192的螢幕解析度，可

使用 RGB 和 YUV 顏色模型，在聲音方面，能支持 VST 聲音外掛程式[43]，而

且也是一套專業的視訊編輯軟體，由於它能支持多方面的功能，跟其他剪輯軟

體相比，例如說威力導演、Movie Maker 比它們擁有更多相容性，介面跟操作

方式逐漸簡單更加親近人，平台也逐漸多元化，支援多樣化的格式，相對的相

容性比其他軟體會提高許多，能在眾多的視頻編輯功能，讓人有更多的空間及

創意可以自由發揮。

圖 2.8 Premiere的 Logo

12

三、 專題實作程序與方法

3.1 專題製作方法與工具

3.1.1 網站

本專題網頁主要是以 HTML 來撰寫架構，透過 JQuery 和 Ajax連

接至 PHP 做資料庫連結的部分，利用 css 和 Java Script 來美化，

會選擇用 HTML的優點主要是因為轉至方便，而透過 Ajax連接是 PHP

也可以進入到後台的部分。

3.1.2 APP

本專題 APP 主要是 cordova 進行轉至，選用 Cordova 的原因為

他是一個用 HTML、CSS、JavaScript 打造行動裝置 App 的開發平台

[44]，可直接將網頁轉至成 APP，並透過 JQuery和 Ajax連接伺服器

的 PHP 並連接至資料庫的部分。

3.2 專題系統架構

本專題的研究架構(見圖 3.1)是以營養食譜 APP來做為我們的題目，從

文獻探討，來討論出本專題的網站及 APP，其中網頁與 APP是經由資料庫做

為連接讀取齊資料，所有食譜皆與營養師做諮詢，並詢問營養師每道食譜的

營養成分與熱量，而在製作過程中的任何一個步驟都要進行測試並修改，最

後會呈現我們食譜網站及 APP。

圖 3.1 研究架構圖

13

本專題的研究流程(見圖 3.2)，首先訂定題目後，開始蒐集相關資料，

接著開始設計網站及 APP介面，確定好後進行裡面的內容及程式撰寫，每步

驟都會進行測試，在測試的過程中遇到問題會回頭進行修改，在最後會進行

整體的測試，本專題是以 Cordova的轉製是最主要的，因為要測試以及將

BUG處理到最好，需得花相當多時間轉製及測試。

圖 3.2 研究流程圖

14

專體裡的網站分了三種權限，分為訪客、會員及管理員，訪客

(見圖 3.3)能看到網站基本，如果想看分享區裡的詳細資料，就必須註冊會

員，會員(見圖 3.4)可以分享自己的私房菜或食譜，也可以刪除及修改自己

上傳的東西，管理員(見圖 3.5)簡單來說就管理整個網頁以及會員部分。

圖 3.3 網頁架構圖(訪客)

圖 3.4 網頁架構圖(會員)

15

圖 3.5 網頁架構圖(管理員)

3.3 支援專題資訊技術、設備與需求軟體

3.3.1 硬體

本專題在硬體方面選用了電腦、Android系統的手機、IOS系

統的手機來進行製作。

3.3.2 軟體

本專題軟體主要使用 Cordova、HTML等以下的資源技術(見表

3.1)

表 3.1 資源技術

網頁 伺服器架設 App

HTML Maria DB Cordova

CSS Apache

Java Script Ubuntu

PHP

JQuery

Ajax

16

四、 專題成果

4.1 網頁

本專題在網頁四個階段做展示，網頁首頁(見圖 4.1) ，點選使用者想觀

看的時期內容即可看到此時期的第一道食譜(見圖 4.2)，其每個時期都有側

標讓使用者有多種選項 (見圖 4.3)，每道食譜皆有營養成分、熱量、準備食

材、步驟及影片(見圖 4.4)， APP介紹(見圖 4.5)則以 icon、APP的使用以

及簡單的文字介紹作為搭配；營養師介紹(見圖 4.6)為介紹與本專題合作的

營養師；分享區(見圖 4.7)則是要登入後才會呈現。

圖 4.1 網頁首頁

圖 4.2 老年期食譜第一道

17

圖 4.3 成年人食譜側標

圖 4.4 食譜內容頁

18

圖 4.5 APP 介紹

圖 4.6 營養師介紹

19

圖 4.7 分享區頁面

4.2 APP

本專題 APP 已匯入至 Android手機裡，使用者打開手機裡的程式，顯示

頁(見圖 4.8)、首頁(見圖 4.9)就可浮現，上面所呈現的四個圖示即代表四個階

段；點入其圖示就呈現出此階段的各食譜名稱及食譜完成圖(見圖 4.10)，圖片

點入可看到各食譜的內容(見圖 4.11)的部分，點選上方的側標列(見圖 4.12)可

在看其他時期的食譜，並可登入進入分享區(見圖 4.13)。

圖 4.8 顯示頁 圖 4.9 APP 首頁

20

圖 4.10 青少年圖示內容

圖 4.11 食譜內容頁

圖 4.12 側標 圖 4.13 登入進分享區

21

4.3 人力分配表

表 4.1 人力分配表

項目 朱亞萱 林佳陵 林惠姿

資料蒐集 V V V

文獻分析 V V V

網頁美工 V V V

網頁排版 V V

APP 排版 V

APP美工與製作 V

資料庫建置與連接 V V

整合測試 V V V

論文撰寫 V V V

4.4 甘特圖

表 4.2 甘特圖

22

五、 結論

本專題目的是為了想學做菜的使用者所製作出營養食譜應用程式，主要是希

望讓使用者不須購買多本營養食譜書籍就能獲取關於兒童、青少年、老年人及減

肥所需營養之整合食譜，使用對象是自行在家料理且對身體營養健康較為注重的

使用族群，本專題利用此心思來開拓這個使用族群。

在專題內容方面已做出四個時期(兒童、青少年、老年、減肥)，共 22道食

譜，每道食譜皆有與所合作的營養師做諮詢與討論，計算出每道料理所攝取的熱

量，再以圖表和影片作呈現，並建置於 PC 瀏覽器、Android、IOS 的系統上做使

用。

專題網頁製作方式採用 HTML、CSS、PHP設計，並透過 AJAX 技術開發與資料

庫互動機制，改善使用者經驗；在手機 APP 方面，本專題使用 Apache Cordova

進行 APP開發，資料內容部分同時採用 AJAX 技術讀取資料庫資料。

目前在手機方面，Android與 IOS系統都可以做使用，但 IOS 系統則需透過

該系統的電腦才能開發出 IOS所使用的 APP，這是主要的問題之一；而食譜部分

目前只提供 22道食譜，未來會希望以使用者需求來做新增。

23

六、 參考文獻

[1] 2013 IDEAS Week：FIND DAY創新講堂 準備好迎接行動世代了嗎？ FIND調

查：近 50%人口持有智慧型行動裝置！，取自：

http://www.iii.org.tw/Service/3_1_1_c.aspx?id=1163

[2] 陳貞樺，陳釗偉，“我們吃進什麼？１５大食安事件”，天下雜誌，2013年

08月，取自：

http://www.cw.com.tw/PicChannelPage/pic_article_cw52902.jsp

[3] 康健食譜，http://www.commonhealth.com.tw/recipe/index.action

[4] 日日煮食譜，http://www.daydaycook.com/

[5] 全聯好菜食譜，http://cook.pxmart.com.tw/themerecipe.aspx

[6] 孫如芬，“飲 食 保 健”，台北市河北京津同鄉會，取自：

http://www.hebei.org.tw/pages/?Ipg=1008&showPg=1032

[7] 吳佩玲，“口碑是使用「雲端食譜」創新服務的驅動誘因”，資策會研究，

2013年 8月，取自：http://www.teema.org.tw/upload/ciaupload/2014-

04.pdf

[8] 顏瑄、沈盈吟，“行動族群半年增加逾 100萬人、全臺滑世代破 1,432

萬”，財團法人資訊工業策進會，2014 年 12月 29日，取自：

http://www.iii.org.tw/m/News-more.aspx?id=1475

[9] 林珮萱，“餐餐都要四蔬三果五色， 但 98％國人不及格”，遠見雜誌，第

329期，2013 年 11月，取自：

http://store.gvm.com.tw/article_content_24304.html

[10] 維基百科：瘦肉精，取自：

https://zh.wikipedia.org/wiki/%E7%98%A6%E8%82%89%E7%B2%BE

[11] 維基百科：三聚氰胺，取自：

https://zh.wikipedia.org/wiki/%E4%B8%89%E8%81%9A%E6%B0%B0%E8%83%BA

[12] 維基百科：戴奧辛，取自：

https://zh.wikipedia.org/wiki/%E4%BA%8C%E5%99%81%E8%8B%B1

[13] 維基百科：塑化劑，取自：

https://zh.wikipedia.org/wiki/%E5%A1%91%E5%8C%96%E5%8A%91

[14] HTML教學導覽，取自: http://www.powmo.com/

[15] 維基百科:HTML，取自: https://zh.wikipedia.org/wiki/HTML

[16] 維基百科:HTML5，取自:https://zh.wikipedia.org/wiki/HTML5

[17] HTML5懶人包，取自:

http://www.uuu.com.tw/public/content/article/121001tips.htm

[18] HTML5 vs. Flash 優缺點比一比，2014 年 9月 8日，取自:

http://www.flyfreely.com.tw/mynews/mynews_view_tw/103

24

[19] 維基百科：JavaScript，取自：

https://zh.wikipedia.org/wiki/JavaScript

[20] Irvinfly，JavaScript 概觀，Mozilla Developer Network，2015年 3月

21日

[21] 維基百科：PHP，取自：https://zh.wikipedia.org/wiki/PHP

[22] PHP 的優點，Jollen 網路學院，2006 年 04月 11日，取自：

http://www.jollen.org/php/ebook/ch3.html

[23]【CSS】CSS總介紹，萌芽綜合天地，取自：

http://mnya.idv.tw/cc/word/067.html

[24] 柴惠敏，CSS 語法簡介， 2003年 02 月 10日，取自：

http://www.pt.ntu.edu.tw/hmchai/ptcomputer04/hcss/cssintroduction.

htm

[25] 維基百科：JQuery，取自：https://zh.wikipedia.org/wiki/JQuery

[26] [程式][JQuery]基本介紹 JQuery，讓你在開始之前，對這神兵利器先有個

概念!，2011 年 9月 27日，取自：

http://expect7.pixnet.net/blog/post/37789922-

%5B%E7%A8%8B%E5%BC%8F%5D%5Bjquery%5D-

%E5%9F%BA%E6%9C%AC%E4%BB%8B%E7%B4%B9jquery%EF%BC%8C%E8%AE%93%E4%BD

%A0%E5%9C%A8%E9%96%8B%E5%A7%8B%E4%B9%8B%E5%89%8D

[27] 原生 JavaScript 和 JQuery的優缺點，2012年 10月 11日，取自:

http://www.iteye.com/news/26230

[28] 維基百科：Ajax，取自：https://zh.wikipedia.org/wiki/AJAX

[29] AJAX介紹，取自: http://blog.xuite.net/oracle/misc/6525577-

AJAX%E4%BB%8B%E7%B4%B9

[30] Ajax 應用程式，取自: https://ihower.tw/rails4/ajax.html

[31] AJAX簡介，取自: http://www.w3school.com.cn/ajax/ajax_intro.asp

[32] 維基百科：MariaDB，取自：https://zh.wikipedia.org/wiki/MariaDB

[33] 毫無理由使用 MySQL：MariaDB、MySQL 創始者 Michael Widenius 的訪

談，2013年 5 月 14日，取自：http://www.openfoundry.org/tw/news/8974

[34] 維基百科：Apache HTTP 伺服器，取自:

https://zh.wikipedia.org/wiki/Apache_HTTP_Server

[35] apache（Web 服務器），取自:

http://baike.baidu.com/subview/28283/5418752.html

[36] Apache 伺服器，取自: http://epaper.gotop.com.tw/pdf/ACA011200.pdf

[37] 維基百科：Ubuntu，取自:https://zh.wikipedia.org/wiki/Ubuntu

[38] Ubuntu，取自: http://wiki.ubuntu-tw.org/index.php?title=Ubuntu

25

[39] Cordova簡介，2015年 6月 6日，取自：

http://davidchen1014.pixnet.net/blog/post/425896280-cordova-

%E7%B0%A1%E4%BB%8B

[40] [Cordova Hybrid APP] (二) 跨平台開發基礎認識，2014年 9月 25日，取

自：http://lawrencetech.blogspot.tw/2014/09/cordova-hybrid-

app.html

[41] 維基百科：Adobe PhoneGap(Cordova)，取自：

https://zh.wikipedia.org/wiki/Adobe_PhoneGap

[42] 開發跨平台(iOS/Android/Windows)的 APP - 談 Visual Studio 2015 整合

Apache Cordova 的原因，2015年 1 月 13日，取自:

http://adon988.logdown.com/posts/249660-visual-studio-2015-and-

apache-cordova

[43] 維基百科：Adobe Premiere Pro，取自：

https://zh.wikipedia.org/wiki/Adobe_Premiere_Pro

[44] VS2015 Cordova 初探，取自：http://blog.darkthread.net/post-2015-

07-22-vs2015-cordova.aspx