臺灣博碩士論文加值系統

English |FB 專頁 |Mobile

免費會員登入| 註冊

功能切換導覽列

(44.200.171.156) 您好！臺灣時間：2023/03/27 10:04

字體大小：

:::

詳目顯示

第 1 筆 / 共 1 筆

/1頁

論文基本資料
摘要
外文摘要
目次
參考文獻
紙本論文
QR Code

本論文永久網址:

研究生:

許瀚升

研究生(外文):

Han-Sheng Hsu

論文名稱:

行動雲端辦公室App設計

論文名稱(外文):

Design of Portable Cloud Business Applications

指導教授:

鄭子韋、孫天佑

指導教授(外文):

Tzuwei Cheng、Tien-Yu Sun

學位類別:

碩士

校院名稱:

中原大學

系所名稱:

應用數學研究所

學門:

數學及統計學門

學類:

數學學類

論文種類:

學術論文

論文出版年:

2014

畢業學年度:

102

語文別:

中文

論文頁數:

中文關鍵詞:

jQuery、jQuery Mobile、JavaScript、關鍵字：Mobile手機Web網頁應用程式、PhoneGap、HTML5

外文關鍵詞:

jQuery and jQuery Mobile、JavaScript、PhoneGap、HTML5、Keywords:mobile web application

相關次數:

被引用:0
點閱:283
評分:
下載:0
書目收藏:1

隨著智慧型手機的普及，智慧型手機攜帶起來又比筆記型電腦容易方便許多，導致人手一機的情況增加，所以行動智慧的科技應用已經成為不容忽視的趨勢。從平板電腦與智慧型手機的熱賣，帶動正在急速擴張的軟體應用市場的商機，而軟體應用型態已經從傳統的Client–Server或是Web轉移到行動裝置之上。所以當雲端與行動裝置應用程式受越來越多人的歡迎，透過雲端、或手機、平板電腦等設備隨時存取、分享資源，Mobile手機Web網頁應用程式就成了一個重要的議題了。

建立了行動雲端辦公室App，就不用侷限於人必須在電腦前面才能收發開會通知，當主管、員工外出洽公、開會時亦可以利用空檔時間也能用在發公告甚至於工作指派以及工作回報上，這樣便更能善用時間，使得公司工作的效率提升。所以在本研究中將以Parse為後台，並以HTML5和JavaScript為介面，使用PhoneGap、jQuery與jQuery Mobile建立跨平台的Mobile手機Web網頁應用程式。

As smart phones are more and more widespread, and smart phones are easier to carry than notebooks, almost everyone has a smart phone available for use. Consequently, new innovations on become increasingly visible. The sky rocketing sales of tablet PCs and smart phones are greatly expanding the opportunities of the application software market. As cloud services and smart phones are more and more popular, how we can accessing and sharing resources on the cloud through the use of mobile phones and web applications become important issues.

By developing a cloud based business application, people could no longer need to stay in front of their computers in order to read the meeting requests. When managers and workers are out of office, they can still use their spare time to read announcements or job assignments easily. In this way, we can make good use of our time and improve our work efficiency. In this report, we will explore how to use Parse as our backend, and to use HTML5 and JavaScript to construct interfaces, building a cross platform mobile web application based on PhoneGap, jQuery and jQuery Mobile.

摘要 I

Abstract II

目錄 III

圖目錄 VI

表目錄 XIII

第一章緒論--------------------------------------------1

1.1 研究目的與動機--------------------------------------1

第二章近年來行動裝置程式開發趨勢--------------------------2

2.1 HTML5-------------------------------------------------2

2.1.1 HTML5的頁面結構---------------------------------------2

2.1.2 HTML5的基本語法規則-----------------------------------5

2.1.3 CSS的基本語法-----------------------------------------6

2.1.4 JavaScript的基本語法----------------------------------9

2.2 jQuery與jQuery Mobile-------------------------------13

2.2.1 在JavaScript程式使用jQuery--------------------------13

2.2.2 jQuery基本程式架構-----------------------------------14

2.2.3 jQuery 選擇器----------------------------------------14

2.2.4 jQuery的事件處理-------------------------------------16

2.2.5 jQuery Mobile的基礎----------------------------------17

2.2.6 jQuery Mobile基本ListView清單------------------------20

2.3 Parse(parse.com)的雲端服務--------------------------22

2.3.1 Parse 基本說明---------------------------------------22

2.3.2 Parse 創建App與登入----------------------------------23

2.3.3 Parse角色(Role)介紹----------------------------------25

2.3.4 將資料寫入Parse後台---------------------------------26

2.3.5 Parse ACL權限----------------------------------------27

2.3.6 Parse的Client端編輯---------------------------------30

2.4 PhoneGap 跨平台程式開發------------------------------32

2.4.1 PhoneGap的基礎---------------------------------------32

2.4.2 建立PhoneGap的Android專案---------------------------34

2.4.3將Mobile網頁應用程式包裝-----------------------------36

第三章系統設計----------------------------------------38

3.1 介面設計---------------------------------------------38

3.1.1 Fluidui網頁模擬UI介面-------------------------------38

3.1.2 使用Photoshop設計界面-------------------------------40

3.2 操作考量------------------------------------------43

3.3 系統架構------------------------------------------44

第四章系統環境展示----------------------------------48

4.1 公告系統------------------------------------------48

第五章未來展望--------------------------------------60

參考文獻-------------------------------------------------61

圖目錄

圖2-1 使用<!DOCTYPE html>宣告HTML版本------------------------------3

圖2-2 使用HTML5的語意與結構標籤------------------------------------4

圖2-3 HTML5標籤程式碼範本-------------------------------------------5

圖2-4 HTML5標籤執行範本---------------------------------------------5

圖2-5 標籤屬性值不加引號-------------------------------------------5

圖2-6 屬性沒有屬性值只需名稱---------------------------------------5

圖2-7 CSS的基本語法-------------------------------------------------6

圖2-8 <p>標籤的CSS樣式---------------------------------------------6

圖2-9 局部套用的CSS------------------------------------------------6

圖2-10 內嵌在網頁的CSS樣式-----------------------------------------6

圖2-11 外部連接語法範例--------------------------------------------7

圖2-12 CSS樣式套用在HTML上之語法----------------------------------7

圖2-13 CSS樣式套用在HTML上之比照----------------------------------7

圖2-14 JavaScript插入標籤範例--------------------------------------9

圖2-15 呼叫外部.js檔案---------------------------------------------9

圖2-16 輸出的HTML標籤內容------------------------------------------9

圖2-17 宣告變數的種類---------------------------------------------10

圖2-18物件字面值--------------------------------------------------10

圖2-19 建構函數---------------------------------------------------11

圖2-20 物件方法(配合建構函數)-------------------------------------11

圖2-21 建立自定物件-----------------------------------------------11

圖2-22 建構函數搭配自訂物件執行-----------------------------------12

圖2-23 按鈕搭配JavaScript語法使用--------------------------------12

圖2-24 使用外部jQuery函數庫--------------------------------------13

圖2-25 jQuery基本程式架構-----------------------------------------14

圖2-26 jQuery串聯方法---------------------------------------------14

圖2-27 jQuery選擇器部分程式碼-------------------------------------15

圖2-28 jQuery指定不同元素的色彩-----------------------------------15

圖2-29 jQuery事件處理執行結果-------------------------------------16

圖2-30 jQuery事件處理部分程式碼-----------------------------------17

圖2-31 標題區塊的巡覽工具列---------------------------------------19

圖2-32 內容區塊的巡覽工具列---------------------------------------19

圖2-33 註腳區塊的巡覽工具列---------------------------------------19

圖2-34 靜態清單---------------------------------------------------20

圖2-35 建立清單標題列---------------------------------------------20

圖2-36 動態清單部分程式碼-----------------------------------------21

圖2-37 動態清單部分程式碼執行-------------------------------------21

圖2-38 Parse API Requests-----------------------------------------22

圖2-39 App的Application keys-------------------------------------23

圖2-40 Parse 創造App登入帳號-------------------------------------23

圖2-41 Parse 首要且必要指令---------------------------------------23

圖2-42 Parse的登入指令--------------------------------------------24

圖2-43 查詢當前登入使用者-----------------------------------------24

圖2-44 登入App----------------------------------------------------24

圖2-45 Parse的Role(角色)------------------------------------------25

圖2-46 Role的View Relations---------------------------------------25

圖2-47 set指令與語法範例-------------------------------------------26

圖2-48 將資料寫入Parse後台----------------------------------------26

圖2-49 Parse的ACL指令---------------------------------------------27

圖2-50 ACL指令範例-------------------------------------------------27

圖2-51 ACL設定公開讀取與寫入---------------------------------------28

圖2-52 ACL設定User或Role讀寫-------------------------------------28

圖2-53 使用按鈕設定ACL--------------------------------------------29

圖2-54 Parse資料庫ACL設定內容------------------------------------29

圖2-55 ACL劃分後的權限--------------------------------------------30

圖2-56 Parse的Client端編輯方法-----------------------------------30

圖2-57 Parse的Client端編輯前範例----------------------------------31

圖2-58 Parse的Client端編輯後範例----------------------------------31

圖2-59 PhoneGap 跨平台程式開發-------------------------------------32

圖2-60 建立一個標準Web網頁----------------------------------------33

圖2-61 PhoneGap 包裝寫好的Web網頁---------------------------------33

圖2-62 透過PhoneGap API與行動裝置聯繫-----------------------------33

圖2-63 包裝成原生應用程式-----------------------------------------34

圖2-64 新增Android專案--------------------------------------------34

圖2-65 包裝成原生應用程式-----------------------------------------35

圖2-66 新增www目錄------------------------------------------------35

圖2-67 標準Web網頁範例--------------------------------------------36

圖2-68 選用Android模擬器------------------------------------------36

圖2-69 Android模擬器----------------------------------------------37

圖2-70 Mobile網頁應用程式------------------------------------------37

圖3-1 Fluidui網頁--------------------------------------------------38

圖3-2 Fluidui多樣的系統版本選擇------------------------------------38

圖3-3 使用Fluidui設計登入介面-------------------------------------39

圖3-4使用Fluidui設計登入後首頁介面-------------------------------39

圖3-5 使用Photoshop設計Logo--------------------------------------40

圖3-6 使用Photoshop透明度設計浮水印-------------------------------40

圖3-7 搭配事件處裡設計登入介面------------------------------------41

圖3-8 使用Photoshop設計首頁背景----------------------------------41

圖3-9 使用Photoshop設計首頁按鈕icons-----------------------------42

圖3-10 使用Photoshop設計內頁按鈕icons-----------------------------42

圖3-11設計工作指派內頁按鈕icons-----------------------------------43

圖3-12 易懂明瞭的icons--------------------------------------------43

圖3-13已建設的Classes---------------------------------------------44

圖3-14 Parse建立的Users-------------------------------------------45

圖3-15 Parse建立的Role與其名稱------------------------------------45

圖3-16 Parse的ACL-------------------------------------------------46

圖3-17 公告欄位---------------------------------------------------46

圖3-18 新增公告架構-----------------------------------------------47

圖3-19 編輯的權限資格---------------------------------------------47

圖4-1 IT登入------------------------------------------------------48

圖4-2 點選公告----------------------------------------------------48

圖4-3點選新增公告-------------------------------------------------49

圖4-4 新增公告內容填寫--------------------------------------------49

圖4-5提示視窗-----------------------------------------------------49

圖4-6 點選個人公告------------------------------------------------49

圖4-7 所有公告----------------------------------------------------50

圖4-8 公告內容----------------------------------------------------50

圖4-9 IT_Emp登入--------------------------------------------------50

圖4-10 IT_Emp點選行事曆-------------------------------------------50

圖4-11 點選行事曆日期---------------------------------------------51

圖4-12 個人行事曆介面---------------------------------------------51

圖4-13 資訊部員工的公告-------------------------------------------51

圖4-14 AC登入-----------------------------------------------------51

圖4-15 AC主管點選行事曆-------------------------------------------52

圖4-16 AC主管的行事曆---------------------------------------------52

圖4-17 會計部主管點選個人公告-------------------------------------52

圖4-18 會計部主管的公告-------------------------------------------52

圖4-19 Parse後台資料庫--------------------------------------------53

圖4-20 資訊部主管點選編輯公告-------------------------------------53

圖4-21 點選「系統環境展示資訊部」--------------------------------53

圖4-22 編輯公告介面-----------------------------------------------54

圖4-23 修改內容後點選「修改」-------------------------------------54

圖4-24 修改後提示視窗---------------------------------------------54

圖4-25 修改後公告內容---------------------------------------------54

圖4-26 Parse後台資料庫修改後資料----------------------------------55

圖4-27 老闆Hans登入-----------------------------------------------55

圖4-28 老闆點選公告-----------------------------------------------55

圖4-29 老闆點選新增公告-------------------------------------------56

圖4-30 老闆新增公告內容填寫---------------------------------------56

圖4-31 張貼成功提示-----------------------------------------------56

圖4-32 老闆的個人公告介面-----------------------------------------56

圖4-33 老闆張貼的公告內容-----------------------------------------57

圖4-34 資訊部主管登入---------------------------------------------57

圖4-35 IT的公告介面-----------------------------------------------57

圖4-36 IT的所有公告介面-------------------------------------------57

圖4-37 會計部主管登入---------------------------------------------58

圖4-38 AC的公告介面-----------------------------------------------58

圖4-39 會計部主管登入---------------------------------------------58

圖4-40 Parse後台由老闆新增的公告資料------------------------------59

表目錄

表2-1 HTML標籤的共同屬性--------------------------------------------3

表2-2 <head>的子標籤------------------------------------------------3

表2-3 <body>的標籤內容----------------------------------------------4

表2-4 HTML5的語意與結構標籤-----------------------------------------4

表2-5 常用的CSS選擇器----------------------------------------------8

表2-6 CSS3新增的樣式屬性--------------------------------------------8

表2-7 變數基本資料型態--------------------------------------------10

表2-8 選擇器與CSS的關係-------------------------------------------15

表2-9 DOM元素的相關方法說明----------------------------------------16

表2-10 jQuery Mobile的data-role屬性值-----------------------------18

表2-11 jQuery Mobile中<div>標籤區段的說明--------------------------18

表3-1 Parse後台建設Classes----------------------------------------44

表3-2 View Relations連結關係對照-----------------------------------45

表3-3 公告需求欄位------------------------------------------------46

[1]Fluidui。取自https://www.fluidui.com/

[2]跨平台Android iPhone 程式開發作者陳會安 2013年出版

[3]Parse JavaScript SDK。
取自http://parse.com/docs/js/symbols/Parse.html

[4]HTML5專題報導。取自http://www.ceci.org.tw/book/97/web/142-151.pdf

[5]手機App程式設計方向。
取自http://www.itc.ntnu.edu.tw/download/column/1021205_App.pdf

[6]淺談雲端運算。取自http://www.nhu.edu.tw/~society/e-j/86/13.htm

[7]Adobe Photoshop。取自http://zh.wikipedia.org/zh-tw/Adobe_Photoshop

[8][開發工具]PhoneGap簡介。取自http://design2u.me/blog/628/development-tool-phonegap-introduction-2

[9]行動裝置及雲端應用興起，改變軟體開發生態。
取自http://msdn.microsoft.com/zh-tw/hh855143

[10] 雲端，是軟體開發的新藍海。
取自http://msdn.microsoft.com/zh-tw/hh855157

[11]Introduction of JavaScript。取自http://www.pt.ntu.edu.tw/
hmchai/PTcomputer/hJavaScript/JSintroduction.htm

[12]Parse雲端的服務。
取自http://www.ibm.com/developerworks/cn/java/j-parse/

[13]Parse。取自https://parse.com/

國圖紙本論文

推文
網路書籤
推薦
評分
引用網址
轉寄

top

相關論文
相關期刊
熱門點閱論文

1.	AJAX與WebSocket效能分析與比較
2.	網頁應用程式自動化系統：運用HTML5以及JavaScript的網頁應用程式於嵌入式裝置
3.	行動業務系統開發
4.	支援行動學習之課程服務與即時反饋系統 --以國小三年級自然科為例
5.	DroidCIA: 基於 HTML5 語法行動應用程式的惡意程式碼注入攻擊偵測
6.	數位內容技術之研究及其應用-以e-book , e-learning為例
7.	以Canvas和Html為基礎的網頁遊戲實作
8.	Accessible Web Page of Indian Tourist Spots
9.	SharePoint表單系統設計實作
10.	Parse及PhoneGap整合開發
11.	基於內容的ＨＴＭＬ5對網站的圖片庫

無相關期刊

1.	行動業務系統開發
2.	業務系統雲端解決方案
3.	網頁應用程式自動化系統：運用HTML5以及JavaScript的網頁應用程式於嵌入式裝置
4.	Parse及PhoneGap整合開發
5.	AJAX與WebSocket效能分析與比較
6.	SharePoint表單系統設計實作
7.	如何有效應用行動裝置於課堂即時發問的探討
8.	基於內容的ＨＴＭＬ5對網站的圖片庫
9.	家具賣場的APP設計與應用-以IKEA為例
10.	服飾業產品行銷平台之研製
11.	數位內容技術之研究及其應用-以e-book , e-learning為例
12.	微積分助教行動平台系統設計之研究
13.	偏差修正式模糊迴歸演算法
14.	探討心導管手術後導致肺癌、皮膚癌、乳癌、甲狀腺癌、大腸癌、中風之發生率
15.	以化學浴沉積法成長氧化亞銅摻雜鎳薄膜特性分析

簡易查詢 | 進階查詢 | 熱門排行 | 我的研究室