雲端儲存服務之群組討論系統

全文

(1)國立臺灣師範大學資訊工程研究所碩士論文指導教授：葉耀明. 博士. 整合雲端儲存服務之群組討論系統 Discussion System combined Cloud Storage Service over Android smart phones. 研究生：中華民國. 葉哲維 102. 撰年. 6 月.

(2) 摘要. 整合雲端儲存服務之群組討論系統葉哲維根據國際數據資訊台灣手機產業調查季報顯示，在 2012 年台灣手機市場的總數量約為 186 萬支，其中智慧型手機出占了 133 萬支，占了總量的 7 成左右。由此可見，智慧型手機的使用是越來越普及的。雲端服務是一種透過網際網路的運算方式。藉由此種方式，使用者可以將共享的資源檔案與訊息提供給電腦或其他裝置分享，因此雲端服務使的生活越來越便利。本研究結合了手機與雲端的特性並且設計了一個整合系統，包含了討論平台以及編輯平台。討論平台的設計是在 Android 智慧手機上開發的，本研究利用 socket的技術來達到文字訊息的傳送與接收，另外系統提供使用者拍照上傳之後，會將照片上傳到 Dropbox 雲端儲存服務。編輯平台的設計是在網頁上進行操作，其使用的技術為 HTML 語言、PHP、JavaScript 等。本研究讓使用者分成兩階段來使用系統。第一階段，使用者透過討論平台彼此討論資訊並且可以透過拍攝照片上傳至雲端服務中。第二階段，使用者透過編輯平台，將第一階段所上傳的資料加以編輯彙整，如此便可以讓使用者共同合作完成一份電子書，如此一來便可提供一種新的學習管道。. 關鍵字：Android、socket、Dropbox、電子書. i.

(3) ABSTRACT. Discussion System combined Cloud Storage Service over Android smart phones Jhe-Wei,Yeh According tothe quarterly report of Taiwan's cell phone industry from International Data Corporation, in 2012 the total number of Taiwan's mobile phone market is about 1.86 million,which accounted for a smartphone out of 1.33 million, accounting for about 7 percent of the total.Thus,the use of smart phones are becoming increasingly popular.Cloud service is a way of computing through the Internet.By this way,users can share files and information resources provided to computer or other device,so the cloud service makes life more convenient. This study combines the features of the mobile phone and the cloud and designed an integrated system that includes discussion platform and editing platform.In the study,it uses Android OS to develop discussion system,and uses socket technology to complete the message communication.The operation of editing platform is on web page,andituses HTML language , PHP , JavaScript , etc. This study is divided into two phases to allow users to use the system. The first phase,the users can discuss with other through discussion platform and take a picture and then upload the data(discussion logs and photos) to the cloud service. The second phase,the users can get the data from the first phase by useing editing platform,so the users can edit the data,so this will allow users to work together to complete a e-book, so that providing a new learning way for us. Keywords：Android、socket、Dropbox、E-book. ii.

(4) 誌謝首先感謝指導教授葉耀銘老師兩年來的悉心指導，在修課上給予了許多專業且豐富的知識，讓學生具備了專業的能力，而且在論文的指導方面也給予了許多指導與建議，循循善誘的方式，讓學生可以清晰的了解論文研究方向，最後順利將論文完成。另外，這兩年來參與了老師的國科會計畫，讓學生有機會與業界的人、事、物接觸討論，並且獲得許多寶貴的實務經驗。感謝葉耀明教授、陳永昇教授、楊明正教授，能夠在百忙之中抽空前來擔任口試委員，並且不厭其煩的指正缺漏，提出良好的建議，讓本論文更加完整。感謝實驗室同學書銘、皓中、志忠、文寬、隘同、雨曄、禮衛、昱賢，於就讀研究所期間，共同的討論研究、一同的遊玩也培養了良好的感情，讓實驗室的氣氛活潑愉悅，讓研究期間能增添許多生活趣事；也感謝學長姐，芝華、瀧濱、永倫、惠迪、孝倫、慶瑞、冠緯、明憲帶領，還有感謝學弟妹，聖如、馨民、名甫、念學、清晏、奐均在計畫上面的協助，讓我可以擁有更多時間來完成論文研究，我很高興能夠是 XML 實驗室的一份子，更高興能和大家一起分享研究的喜悅和困難。最後感謝我的父母以及家人，讓我能在求學途中能夠無衣食之憂，專心於學業上。感謝在我求學過程中指導我的師長、與我相遇的學長、同學與朋友，因為有你們的關懷與陪伴才有今天的我。僅將此論文獻給所有照顧我以及支持我的家人、師長與朋友，誠心地感謝所有的人。. iii.

(5) 目錄附圖目錄程式碼目錄附圖目錄. vi vii ix. 第1章 1.1. 緒論 ................................................................................................................. 1 研究背景......................................................................................................... 1. 1.2 1.3. 研究動機與目的 ............................................................................................ 2 論文架構......................................................................................................... 3. 第2章 2.1. 文獻探討......................................................................................................... 4 Android 作業系統 ......................................................................................... 4 2.1.1 2.1.2. Android 系統架構 ............................................................................. 4 Android 四大組件 ............................................................................. 6. 2.2 2.3. Java socket .................................................................................................. 8 Dropbox 雲端儲存服務................................................................................. 9. 2.4 第3章. XML DOM......................................................................................................... 12 系統規劃....................................................................................................... 14. 3.1 3.2. 系統架構....................................................................................................... 14 討論子系統實作 .......................................................................................... 18 3.2.1 3.2.2. Socket Server 端系統實作.............................................................. 18 Socket Client 系統功能實作 .......................................................... 20. 3.2.3 設定分組數量功能實作 ................................................................. 41 3.3 編輯子系統實作 .......................................................................................... 45. 第4章 4.1. 3.3.1 3.3.2. 登入頁面實作 .................................................................................. 45 編輯頁面實作 .................................................................................. 47. 3.3.3 3.3.4. 預覽頁面實作 .................................................................................. 51 存檔頁面實作 .................................................................................. 52. 3.3.5 瀏覽電子書頁面實作 ..................................................................... 54 系統開發與說明 .......................................................................................... 59 系統開發環境 .............................................................................................. 59 4.1.1 系統使用者案例圖(Use Case Diagram) .................................... 59. 4.1.2 系統循序圖(Sequence Diagram) ................................................ 62 4.2 系統介面呈現 .............................................................................................. 65 4.2.1 4.2.2 第5章 5.1. 討論子系統介面.............................................................................. 65 編輯子系統介面.............................................................................. 74. 結論與未來發展 .......................................................................................... 79 結論 ............................................................................................................... 79 iv.

(6) 5.2 未來發展....................................................................................................... 80 參考著作 ........................................................................................................................... 81. v.

(7) 附圖目錄圖 1.1 雲端運算概觀圖 ..................................................................................................... 2 圖 2.1Android 系統架構圖 ................................................................................................ 5 圖 2.2 主從式網路架構圖 ................................................................................................. 8 圖 2.3Client-Server 架構運作流程圖 ............................................................................... 9 圖 2.4Dropbox 的電腦軟體版 ..........................................................................................11 圖 2.5Dropbox 的網頁版 ................................................................................................. 12 圖 2.6 以節點樹表示 DOM 的資料結構 ....................................................................... 13 圖 3.1 系統架構圖 ............................................................................................................ 14 圖 3.2 討論子系統架構圖 ............................................................................................... 15 圖 3.3 討論子系統-系統方塊圖(system block diagram) .............................................. 16 圖 3.4 編輯子系統架構圖 ............................................................................................... 17 圖 3.5 編輯子系統-系統方塊圖...................................................................................... 17 圖 3.6 申請 dropbox appp .............................................................................................. 26 圖 3.7XML DOM 結構圖 ............................................................................................... 53 圖 4.1 討論子系統使用者案例圖(學生)........................................................................ 60 圖 4.2 討論子系統使用者案例圖(老師)........................................................................ 61 圖 4.3 編輯子系統使用者案例圖(學生)........................................................................ 61 圖 4.4 編輯子系統使用者案例圖(老師)........................................................................ 62 圖 4.5 討論子系統循序圖 ............................................................................................... 63 圖 4.6 Dropbox 拍照功能循序圖.................................................................................... 64 圖 4.7 Dropbox 記錄上傳功能循序圖 ........................................................................... 64 圖 4.8 編輯子系統循序圖 ............................................................................................... 65 圖 4.9 設定分組的登入頁面 ........................................................................................... 65 圖 4.10 設定分組頁面...................................................................................................... 66 圖 4.11 輸入正確格式的數字 ......................................................................................... 66 圖 4.12 顯示分組成功...................................................................................................... 66 圖 4.13 輸入錯誤格式的數字 ......................................................................................... 67 圖 4.14 提示使用者錯誤資訊 ......................................................................................... 67 圖 4.15 討論系統登入畫面 ............................................................................................. 68 圖 4.16 選擇討論區組別畫面以及討論區畫面 ............................................................ 68 圖 4.17 利用畫廊顯示使用者上傳的照片 .................................................................... 69 圖 4.18 服務尚未啟動和成功發送訊息 ........................................................................ 70 圖 4.19 第一次登入需要輸入帳號密碼 ........................................................................ 71 圖 4.20 詢問是否授權存取 Dropbox 和 Dropbox 上傳功能....................................... 72 圖 4.21 拍照存檔和上傳結果 ......................................................................................... 72 圖 4.22 對話存檔和對話紀錄上傳結果 ........................................................................ 73 圖 4.23 目前圖片資訊以及刷新之後的結果 ................................................................ 73 vi.

(8) 圖 4.24 編輯系統登入頁面 ............................................................................................. 74 圖 4.25 編輯系統-學生頁面 ............................................................................................ 75 圖 4.26 編輯系統-老師頁面 ............................................................................................ 75 圖 4.27 預覽頁面顯示結果 ............................................................................................. 76 圖 4.28 顯示存檔結果...................................................................................................... 76 圖 4.29 電子書的首頁...................................................................................................... 77 圖 4.30 利用拖曳的功能來打開下一頁面 .................................................................... 77 圖 4.31 點選任一方格後，放大顯示其內容 ................................................................ 78. vii.

(9) 程式碼目錄程式碼 3.1 建立 socket 的 portnumber........................................................................... 18 程式碼 3.2server 監聽是否有請求發出......................................................................... 18 程式碼 3.3 加入新的使用者到 socket 之中 .................................................................. 18 程式碼 3.4 廣播訊息至其他用戶端............................................................................... 20 程式碼 3.5 傳遞參數至 getallgroup.php 網頁並接收回傳結果.................................. 21 程式碼 3.6 接收請求，並對資料庫進行連線，取得資料庫分組數目 .................... 22 程式碼 3.7 使用者選擇任一討論群組進行連線 .......................................................... 23 程式碼 3.8MainAvtivity 接受所傳遞參數，判斷使用者與哪一個 portnumber 建立連線................................................................................................................................ 23 程式碼 3.9 與 server 連線並且接收來自 server 轉送的訊息 ..................................... 24 程式碼 3.10 送訊息給其他用戶端 ................................................................................. 25 程式碼 3.11 設定程式所用到的 key 以及 secret .......................................................... 27 程式碼 3.12 啟動拍照功能 ............................................................................................. 28 程式碼 3.13 上傳照片至 dropbox 雲端空間中............................................................. 30 程式碼 3.14 取得照片的網址 ......................................................................................... 31 程式碼 3.15 使用 json 的方式傳遞資料........................................................................ 32 程式碼 3.16 資料上傳到資料庫 ..................................................................................... 33 程式碼 3.17 對話紀錄檔上傳 ......................................................................................... 34 程式碼 3.18 取得圖片後顯示在畫面上 ........................................................................ 37 程式碼 3.19getwebsite.php 傳遞參數至網頁並接收回傳結果 ................................... 38 程式碼 3.20 接收參數並對資料庫連線取得照片網址 ............................................... 39 程式碼 3.21 利用 bitmap 方式處理外部圖片 ............................................................... 40 程式碼 3.22 存檔功能...................................................................................................... 41 程式碼 3.23Setgrouplogin.html 提供使用者登入介面 ................................................ 42 程式碼 3.24check.php 判斷帳號密碼是否正確............................................................ 43 程式碼 3.25Setgroup.php 設定分組數目 ....................................................................... 44 程式碼 3.26loginpage.html 登入介面 ............................................................................ 47 程式碼 3.27showlog.php 編輯界面並顯示對話內容與圖片 ...................................... 51 程式碼 3.28preview.php 以預覽頁面的方式顯示個人編輯結果 ............................... 52 程式碼 3.29 利用 php 編寫 XML DOM 結構 ............................................................... 54 程式碼 3.30ebook.php 會整使用者編輯結果並以電子書的方式呈現...................... 58. viii.

(10) 附表目錄表 4.1 討論子系統開發環境 ........................................................................................... 59 表 4.2 編輯子系統開發環境 ........................................................................................... 59. ix.

(11) 第1章緒論 1.1 研究背景隨著智慧型手機的發展蓬勃，許多以往只能在桌上型電腦處理的事情漸漸的轉移到智慧型手機來處理，更隨著 Wi-Fi 與 3G 網路的使用，以及透過與雲端服務的結合，幾乎是一機在手，世界跟著走，這也使得人們的生活也跟著越來越方便。雲端服務[1][2]是一種透過網際網路的運算方式，藉由此種方式，使用者可以將共享的資源檔案與訊息提供給電腦或其他裝置分享。由於雲端的出現，使用者不需要瞭解雲端中基礎設備的細節，即可享受其服務。雲端服務模式有三種： . 軟體即服務(Software as a Service，SaaS)：提供使用者各種軟體應用，例如 Google、Yahoo 信箱、Google 搜尋引擎、YouTube 影音服務、Facebook 社群等等。. . 平台即服務(Platform as a Service，PaaS)：建立平台提供運算或解決方案，主要是提供給一般服務業者將應用程式放在平台代為管理，此種方式可以降低成本和管理費用，例如 Google 的 App Engine、yahoo 的 application platform、微軟的 windows Azure 和 Amazon 的 AWS(Amazon web service) 等等都是 PaaS 的類型。. . 基礎設施即服務(Infrastructure as a Service，IaaS)：用來提供硬體設施和網路頻寬給服務業者使用，像是 Amazon 的 EC2 服務，臺灣也有此類服 1.

(12) 務如中華電信的 Hicloud。. 圖 1.1 雲端運算概觀圖. 1.2 研究動機與目的由於雲端的便利性，本研究提出在智慧型手機上開發與雲端儲存服務結合的群組討論系統。以往的討論模式可能只侷限在一個地方且大家面對面的討論相關資料，而討論內容需等到大家將文獻資料整理好之後才能進行討論，若能透過線上討論方式便可不拘限於時間的限制，如果再加上智慧型手機搭配 Wi-Fi 和 3G 的上網功能便可以隨時隨地進入討論系統與其他人進行討論，並且可以透過拍照方式，將實地採訪所看到的資訊拍照下來便可以即時提供大家來討論。. 2.

(13) 討論過程中所使用得資料可以透過雲端的儲存服務上傳到 Dropbox 管理，如此可避免內容不見也可以提供往後參考這些討論內容，便可以快速獲得相關資訊。另外藉由這些大量資訊，提供一個編輯平台讓使用者來編輯彙整，進而整理出較為完善的資料表示方式，例如電子書的呈現方式，使得這些資料可以供更多人參閱，如此便可以提供給大家另一個學習的管道。. 1.3 論文架構本論文一共分為五個章節，各章節內容描述如下: 第一章緒論介紹研究背景和研究動機與目的與論文架構第二章文獻探討介紹本文系統會使用到的相關技術，包含 Android 作業系統、java socket 技術、Dropbox 雲端服務、XML DOM 等第三章系統規劃介紹本文系統架構，以及如何實作第四章系統開發與設計介紹本文系統的開發介面以及系統的操作方式第五章結論與未來發展介紹本系統的結論並且進一步討論未來可以發展或者改善的空間與方向。 3.

(14) 第2章文獻探討 2.1 Android 作業系統 Android[3][4][5]的發展要追溯到 2007 年 11 月 5 日，是由 Google 與其他電信營運商、軟體開發商、商業公司、半導體公司、手機製造商所組成的手機開發聯盟共同研發的操作系統，第一台搭載 android 系統的手機名為 T-Mobile G1（HTC Dream）。 Android 是基於 Linux 平台的免費手機作業系統，其特點如下： . 整合網頁瀏覽器：所謂的瀏覽器指的就是主要、常用的應用程式， Android 內建的瀏覽器便是採用 WebKit 排版引擎來開發的。. . 豐富的開發環境：提供完善的程式開發環境，透過 eclipse 環境，開發人員可以使用裝置模擬器（Emulator）、除錯工具、以及查看程式型所佔用的記憶體大小、效能等評估功能。. . 多媒體支援能力：支援多種音訊、靜態/動態視訊格式，像是 MPEG-4、 H.264、MP3、AAC、AMR、JPG、PNG、GIF 等。. . 硬體支援能力：相機、GPS、電子羅盤及三軸加速器. . 具備關聯式資料庫：SQLite. 2.1.1. Android 系統架構. Android 組成的架構分為五大部份：應用程式(Applications)、應用程式框架. 4.

(15) (Application Framework) 、函式庫 (Libraries) 、 Android 執行作業環境 (Android Runtime)與 Linux 核心(Linux Kernel)，其架構圖如圖 2-1， . 應用層：應用程式，以 Java 來當作編成語言。. . 中介軟體：分為兩層，上層為應用程式框架，下層為函式庫及虛擬機器。. . 操作系統：Linux 核心主要用來做系統資源管理包括安全、記憶體管理、運作管理、網路堆疊等。. 圖 2.1Android 系統架構圖 Android 具下面兩個優點： . 高開放性系統：由於 Android 是基於 Linux 平台去開發的所以也具備了 Linux 的特性，而其特性便是高開放性的系統碼。. . 跨平台和移植性：Android 的應用程式是透過用 java 語言來編程的，而 java 本身的特性便是高度的可移植性，因此可以讓 Android 在不同的平台下也能執行。 5.

(16) 2.1.2. Android 四大組件. 1.機動程式（Activity）：是應用程式提供給使用者的互動介面，且通常一個 activity 不一定只有一個使用介面，每一個 activity 都是由系統理的 activity stack 來做管理。Activity 狀態有下列四種： . 活動(Active)：使用者開啟應用程式或 activity 後，代表運行中的狀態。且在同一時間點只能有一個 activity 處於活動或者運行（Running）狀態，其餘的 activity 可能為暫停、停止或者回收、未啟動的狀態中。. . 暫停(Pause)：是指此 activity 暫時變暗下來（半透明），退到背景畫面的狀態。例如玩遊戲玩到一半，電話來了，便會將遊戲介面變暗並退到背景畫面。而新出的介面蓋住了原本的 activity 畫面，且當在暫停狀態下時，使用者暫時無法與原本的介面互動。. . 停止(Stopped)：此狀態代表目前有其他的 activity 正在執行，且這個 activity 已經被其他 activity 的介面完全的蓋住，不被使用者看到，所以此畫面是完全被隱藏起來的，且也不再更新畫面。. . 已回收或未啟動（Dead）：此狀態是 activity 尚未被啟動、已經被手動關閉或者是已經被系統自動回收的狀態。當記憶體不足時，系統會優先將回收其他 Activity 或 Service/Intent Receiver 無關的行程，其次便會將進入 pause 或者 stopped 狀態的 activity 回收。. 2.廣播接收器(Broadcast Receivers) 6.

(17) 應用程式可以透過使用廣播接收器對外部事件進行過濾，只留下感興趣的外部事件進行接受並且回應相關的資訊。廣播接收器並沒有介面，它是透過啟動一個 activity 來回應所接受到的事件，並且通知使用者引起注意，像是來電的振動、新訊息到來的播放音效或者是未讀的簡訊的閃燈等等。 3.服務程式（Services）是一個沒有使用者介面的且在後台運行的組件，會長時間的一直運行直到被關閉。一個組件可以與服務程式綁定與之互動(IPC)，例如播放音樂、下載資料。服務程式有兩種狀態啟動的(started)和綁定的(bound)，在啟動的狀態下的服務程式會在後台運行，即使啟動它的 activity 已經被銷毀了。通常此狀態下的服務程式執行單一任務且不會回傳結果給 activity。像是下載資料，當資料下載完成時，服務程序應該要終止自身的運行。而 bound 狀態的服務程序，則可以透過端口發送請求、獲取回傳結果。 4.資料內容提供(Content Providers) 可以將一個應用程式的指定資料提供給另一個應用程式使用，達到資料共享的目的，像是聯絡人的資訊，不同的應用程式開啟都可以共同去存取相關資訊。 Content Providers 是一個特殊的資料儲存型態，使用者可以透過它所提供的標準介面方便存取資料，像是 query、insert 和 update 等，當開發人員要使用 Content Providers 之前必須先在 AndroidManifest.xml 中進行權限宣告，方可使用。. 7.

(18) 2.2 Java socket 在主從式(client-server)的網路架構中，不同的伺服程式使用不同的埠號(port number)，同時在伺服器中執行。伺服器會一直監聽(listen)自己的埠號，若有客戶端(client)送出請求，則服務端(server)的服務程式會對此請求做出回應，如圖 2.2 所示:. 1.發出服務請求 2.接收請求 3.處理. server. 5.接收結果. 4.回應請求. 圖 2.2 主從式網路架構圖當服務端收到客戶端的請求後，服務端便會建立一個新的 socket[7][8]物件，透過這個物件便可以與客戶端進行連線，並且傳遞資料。Socket 是網路與程式間互相溝通的最低階介面，要把資料傳送到網路，必須藉由 socket 的幫忙，才能完成。而 java 便提供了 Serversocket 與 Socket 的類別，可以將客戶端的電腦連接到伺服器，並可以從伺服器端傳送資料給客戶。Java socket 的主從式架構運作流程圖如圖 2.3 所示。Server 端先建立一個特定的埠號，然後呼叫 accept()函式，用來監聽 client 的請求。當 client 端有發出連線請求時，server 端的 accept()便會接受請求，並建立一個 socket 與 client 端進行連線，client 與 server 便透過此連線進行資料的傳輸，直到雙方都關閉此 socket 為止。. 8.

(19) seversocket. 發出連線請求. accept(). Socket. Socket request. read. respond. read. Close(). Close(). server端. client端. 圖 2.3Client-Server 架構運作流程圖. 2.3 Dropbox 雲端儲存服務 Dropbox 是由 Dropbox 公司所開發的線上儲存服務，可以透過雲端儲存來達成網路上的檔案同步，使用者不只可以儲存自己的檔案也可以透過共享檔案與資料夾與其他人一起來使用達到異地創作的概念。其初始版本為 2008 年 9 月所釋出的，目前最新穩定版本為 2.2.2。 Dropbox 的操作常容易，使用者只需透過 Dropbox 桌面應用軟體如圖 2.4，將欲上傳的檔案移到目標資料夾，檔案便會自動同步到雲端上，以及該使用者的任何裝有 Dropbox 軟體的設備上，像是其他台電腦、手機、平板等等。而且也可以透過網頁瀏覽器線上存取檔案如圖 2.5，非常的快速方便。 9.

(20) Dropbox 有下面幾個功能： . 檔案儲存及同步（File synchronize）：使用者可以存放種檔案類型及大小的檔案。在使用者的任何安裝 Dropbox 軟體的設備上，當偵測到使用者有新增檔案或者檔案內容更新的動作時便會自動同步，且在離線狀態下還是可以使用本機端的 Dropbox 內資料夾的檔案，當有網路連線時，便會自動同步。Dropbox 具有續傳的功能，且只會傳送檔案有變動的部份而不是整個檔案更新，且使用者也可以自己設定上傳/下載的速率，減少頻寬消耗。. . 檔案共享( File Sharing )：Dropbox 安裝完成後會自動提供一個叫做 public 的檔案資料夾，在這個資料夾內的檔案，可以透過連結公開給其他人，此共享資料夾允許多人協同使用一組的檔，另外一個 photo 的資料夾可以用來存放相簿檔。. . 線上備份（Online Backup）：Dropbox 提供自動備份檔案的功能、反刪除（Undelete）檔案及資料夾，Dropbox 提供免費的使用者 30 天內可以將刪除的檔案就回來，而付費的使用者則可以無限期的回復誤刪除檔案。. . 網頁存取（Web Access）：不只是安裝 Dropbox 軟體才可以使用，使用者也可以自由的在網頁介面操作個人的 Dropbox，其操作方式與在電腦上的使用 Dropbox 一般。. . 安全及隱私（Safe & Privacy）：每個共享資料夾可以設定權限，只有被. 10.

(21) 邀請的人才可以看到共享資料夾，Dropbox 的資料傳輸方式採用 SSL 通訊協定具有加密功能，且存放在雲端上的檔案都經過 AES-256 的加密方式，必須透過個人的帳號密碼才能存取，且使用者想要公開的檔案或資料夾的連結網址是透過隨機產生的，無法透過瀏覽或者透過搜尋的方式來找到。 . 跨平台的使用：在支援得作業系統部份，Dropbox 可以在 Windows 和 Mac OS 下安裝使用，並且支援 Linux 系統。. 圖 2.4Dropbox 的電腦軟體版. 11.

(22) 圖 2.5Dropbox 的網頁版. 2.4 XML DOM DOM[10][11]全名為「Data Object Model」，是一個與平台和語言無關的介面，它可以讓 program 和 scripts 動態得存取以及修改文件得內容、文件的結構和文件元素。 DOM 節點的定義為 XML 文件中的每一個成分都是一個節點，其規定如下 . 整個文件是一個文件節點. . 每個 XML 標籤是一個元素節點. . 包含在 XML 元素中的文本是文本節點. . 每一個 XML 屬性是一個屬性節點透過 XML parser 載入 XML 文件到緩存區中，載入檔案時便可以透過 DOM. 進行檢索和處理。DOM 得資料結構是採用樹狀結構來表示，這種樹狀結構被稱. 12.

(23) 為節點樹。因此便可以透過根節點去尋訪其他節點，並且可以修改或刪除節點內容。圖 2.6 為一節點樹範例: 根元素子. 父元素. 元素. 屬性. 元素. 元素. 本文. 本文. 同級. 本文. 圖 2.6 以節點樹表示 DOM 的資料結構 DOM 訪問節點的方式是透過一套標準的「屬性」和「方法」來定義的。屬性通常表示「某事物是什麼」的方式來表示，例如節點名稱為<book>。而方法則是表示「對某事物做什麼」來使用，例如增加一個<title>新節點。. 13.

(24) 第3章系統規劃本研究規劃了一個雲端儲存服務之群組討論系統，學生可以透過使用此系統到各地區進行實地考察並與其他學生進行線上討論，且透過雲端服務的功能，將資料(探訪照片、討論內容)上傳後便可以將資料分享給其他學生使用，之後學生可以透過此系統進行資料編輯。此系統再將各個學生所編輯的結果彙整，變成一本線上電子書分享給大家觀看閱讀，進而豐富學生的見聞。. 3.1 系統架構本系統的架構是由兩個子系統結合而成的，一為在 android 系統的手機上開發的「討論子系統」，另一個模組則是在網頁上開發的「編輯子系統」，其系統架構圖如圖 3.1 所示。. 討論子系統 server. client. Database. Texting. Discussion Manager. Gallery. User info Website Configuration. Upload Dropbox Configuration. 討論系統. 編輯子系統 server. client. Database. Frame Editor. Ebook Manager. Layout Editor Save XML file. User info Website. Dropbox. Ebook Display. 圖 3.1 系統架構圖 14.

(25) 討論子系統: 討論子系統的對話傳送使用了 socket 傳輸的技術，利用 java 所提供的 socket 函式來建立其系統基本的框架，此框架下用戶端可以發送訊息到 server 端，並透過 server 廣播訊息給其他用戶端，以此達到互相通訊的功能。本系統也整合目前的雲端服務 Dropbox 所提供的 API 範例，讓系統具備上傳資料到雲端服務的空間中的功能。此外，建立一個本地端的資料庫，用來存放使用者上傳照片的網址以及存放分組數目，此分組數目透過特地使用者(老師)輸入。其討論系統架構圖如圖 3.2 所示:. 寫入群組數目. 本地資料庫. Web interface 特定使用者(老師). 取得分組數目上傳照片網址一般使用者功能. 使用者發送訊息. 發送訊息拍照. Socket connect. 討論記錄存檔 Android phone. 伺服器廣播訊息至其他使用者. Android phone. Socket server 對話紀錄上傳到雲端服務. 取得照片網址. 拍照上傳至 Dropbox服務. Dropbox. 圖 3.2 討論子系統架構圖. 15.

(26) 從資料庫下載分組數目. 進入系統. 顯示可供選擇的討論區塊. 輸入姓名. Connect Dropbox. 發送訊息. 對話訊息存檔. 討論區主畫面. 重新顯示圖片. Dropbox 認證授權. 拍照上傳. 訊息上傳. 圖 3.3 討論子系統-系統方塊圖(system block diagram) 編輯子系統: 編輯子系統介面是用網頁開發的方式來完成，其系統可分成 client 端及 server 端。 1.Client 端:使用者登入網頁後，使用其網頁所提供的相關服務。 2.Server 端:使用者接收到 client 端的要求後將判斷其身分類別，檢查無誤之後，根據使用者的組別回傳其相關的資料並顯示到 webview 中提供使用者編輯。編輯子系統架構圖如圖 3.4 所示:. 16.

(27) 本地資料庫. 使用者 Check acount. Send data. Request Webview Respond result Server 取. 存. 顯示對話紀錄. 雲. 顯示圖片. 資. 端料. 編輯資料預覽個人編輯結果. Dropbox. 上傳個人編輯結果顯示Html5電子書. 圖 3.4 編輯子系統架構圖. 連結資料庫，判斷使用者資訊. 從資料庫下載照片網址; 下載對話紀錄預覽編輯結果. 登入頁面. 顯示編輯頁面. 編輯電子書頁面內容編輯結果存檔. 瀏覽共同編輯電子書. 圖 3.5 編輯子系統-系統方塊圖. 17.

(28) 3.2 討論子系統實作 3.2.1. Socket Server 端系統實作. 根據 client-server 架構其 server socket 運作方式首先建立 server 的 portnumber，程式代碼如程式碼 3.1 所示: privatestaticintserversocketport = 100; privatestatic ServerSocket serverSocket; 程式碼 3.1 建立 socket 的 portnumber 由於本系統設定最多 10 個討論組別在運作，每個組別對應不同的 portnumber，因此 portnumber 的設定範圍從數字 100 到 109。接著透過 server 呼叫 accept()用來監聽是否有 client 發出連線請求，如果有使用者發出請求，則 server 便會建立對應的 socket 物件，並且接受請求以及處理接受訊息及廣播訊息的功能，程式代碼如程式碼 3.2、3.3 所示: publicstaticvoid waitgroup() { try { Socket socket = serverSocket.accept(); // 呼叫創造新的使用者 addNewPlayer(socket); } catch (IOException e) {} } 程式碼 3.2server 監聽是否有請求發出 publicstaticvoid addNewPlayer(final Socket socket) { // 以新的執行緒來執行 Thread t = newThread(new Runnable() { @Override publicvoid run() { try { // 增加新的使用者 players.add(socket); } 程式碼 3.3 加入新的使用者到 socket 之中 18.

(29) 當使用者連線後，server 換監聽是否 client 是否有發出對話訊息，如果 client 發出對話訊息，server 便把此 client 發出的訊息轉送給其他 client，如程式碼 3.4 所示。 BufferedReader br = newBufferedReader( new InputStreamReader(socket.getInputStream(),bm)); while (socket.isConnected()) { // 取得網路串流的訊息 String msg= br.readLine(); //判斷client是否斷線 socket.sendUrgentData(0xFF); // 廣播訊息給其它的客戶端 if(msg!=null){ System.out.println("有新訊息"+msg); castMsg(msg); } publicstaticvoid castMsg(String Msg){ // 創造socket陣列 Socket[] ps=new Socket[players.size()]; // 將各個player轉換成陣列存入ps players.toArray(ps); // 走訪ps中的每一個元素 for (Socket socket :ps ) { try { // 網路輸出串流 try { // 判斷client是否意外斷線 socket.sendUrgentData(0xFF); } catch (Exception e) { socket.close(); } BufferedWriter bw; bw = new BufferedWriter( new OutputStreamWriter(socket.getOutputStream(),bm)); // 寫入訊息到串流 19.

(30) if(Msg!=null){ bw.write(Msg+"\n"); // 立即發送 bw.flush(); } } catch (IOException e) { //socket.close(); } } 程式碼 3.4 廣播訊息至其他用戶端. 3.2.2. Socket Client 系統功能實作. 在連線到 server 之前使用者會向本地資料庫取得目前的分組數目，其方式是透過呼叫 DBConnector 類別實作 Json 的方式將 SQL 語法利用 Post 的方式傳送 getallgroup.php 再從網頁將語法送到資料庫並取得資料後回傳給 DBConnector 類別。當取得資料後，系統再根據回傳結果顯示目前可以進入的討論區組別，並等待使用者選擇。其程式代碼如下: try { String result = DBConnector.executeQuery( "SELECT * FROM `groupnumber`",1); JSONArray jsonArray = newJSONArray(result); groupnumber= new String [jsonArray.length()]; if(groupnumber.length!=0){//必須要有資料才進行解析 for(int i = 0; i < jsonArray.length(); i++) { JSONObject jsonData = jsonArray.getJSONObject(i); groupnumber[i]=jsonData.getString("number").toString(); a= Integer.parseInt(groupnumber[i]); } } } catch(Exception e) { 20.

(31) } if(whichquery==1){ try { System.out.println(query_string); HttpClient httpClient = newDefaultHttpClient(); HttpPost httpPost = newHttpPost("http://140.122.184.33/thesis/httpPostTest/getallgroup.php"); ArrayList<NameValuePair> params = new ArrayList<NameValuePair>(); params.add(new BasicNameValuePair("query_string", query_string)); httpPost.setEntity(new UrlEncodedFormEntity(params, HTTP.UTF_8)); HttpResponse httpResponse = httpClient.execute(httpPost); HttpEntity httpEntity = httpResponse.getEntity(); InputStream inputStream = httpEntity.getContent(); BufferedReader bufReader = newBufferedReader(new InputStreamReader(inputStream, "utf-8"), 8); StringBuilder builder = newStringBuilder(); String line = null; while((line = bufReader.readLine()) != null) { builder.append(line + "\n"); } inputStream.close(); result = builder.toString(); System.out.println("有結果"+result); } catch(Exception e) { Log.e("log_tag", e.toString()); } } return result; } 程式碼 3.5 傳遞參數至 getallgroup.php 網頁並接收回傳結果 <?php $database_dblink = "ntnuxml"; $username_dblink = "root"; $password_dblink = "1111"; 21.

(32) // 建立資料庫連線 $dblink = mysql_pconnect("localhost", $username_dblink, $password_dblink) or trigger_error(mysql_error(),E_USER_ERROR); mysql_query("SET NAMES utf8",$dblink); mysql_query("SET CHARACTER_SET_CLIENT=utf8",$dblink); mysql_query("SET CHARACTER_SET_RESULTS=utf8",$dblink); mysql_select_db($database_dblink, $dblink); header("Content-Type:text/html; charset=utf-8"); $query_rs = $_POST['query_string']; $rs = mysql_query($query_rs, $dblink) or die(mysql_error()); while ($row = mysql_fetch_assoc($rs)) { $output[] = $row ; } print(json_encode($output)); ?> 程式碼 3.6 接收請求，並對資料庫進行連線，取得資料庫分組數目. 當使用者選擇其中一個討論區組別後系統傳遞參數給 MainActivity，系統便會依據這些參數啟動對應的 server 並進行連線，連線確認後便可以開始進行傳送與接送訊息的功能。其程式實作如程式碼 3.7、3.8、3.9 所示: privateclass ButtonListener implements OnClickListener{ publicvoid onClick(View v){ switch(v.getId()){ case R.id.button1: intent = new Intent(); intent.setClass(MainView.this, MainActivity.class); Bundle bundle = newBundle(); bundle.putInt("portnumber", 100); Bundle namebundle = newBundle(); bundle.putString("name", name); intent.putExtras(bundle); intent.putExtras(namebundle); 22.

(33) startActivity(intent); break; case R.id.button2: intent = new Intent(); intent.setClass(MainView.this, MainActivity.class); bundle = new Bundle(); bundle.putInt("portnumber", 101); namebundle = new Bundle(); bundle.putString("name", name); intent.putExtras(bundle); intent.putExtras(namebundle); startActivity(intent); break; case R.id.button3: intent = new Intent(); intent.setClass(MainView.this, MainActivity.class); bundle = new Bundle(); bundle.putInt("portnumber", 102); namebundle = new Bundle(); bundle.putString("name", name); intent.putExtras(bundle); intent.putExtras(namebundle); startActivity(intent); break; 程式碼 3.7 使用者選擇任一討論群組進行連線 Bundle MainViewbundle =this.getIntent().getExtras(); getportnumber=MainViewbundle.getInt("portnumber"); Bundle NameViewbundle =this.getIntent().getExtras(); name=NameViewbundle.getString("name"); 程式碼 3.8MainAvtivity 接受所傳遞參數，判斷使用者與哪一個 portnumber 建立連線 try { InetAddress serverIp; serverIp = InetAddress.getByName("140.122.184.33");//server位置 int serverPort = getportnumber;//根據使用者傳送過來的portnumber clientSocket = new Socket(serverIp, serverPort);//server位置 // 取得網路訊息 clientSocket.sendUrgentData(0xFF); 23.

(34) BufferedReader br = newBufferedReader(new InputStreamReader( clientSocket.getInputStream())); // 當連線後 while (clientSocket.isConnected()) { // 取得網路訊息 tmp = br.readLine(); // clientSocket.sendUrgentData(0xFF); // 如果不是空訊息則 if(tmp!=null) // 顯示新的訊息 mHandler.post(updateText); } } catch (IOException e) { //Toast.makeText(getApplicationContext(), "連線失敗", Toast.LENGTH_LONG).show(); } 程式碼 3.9 與 server 連線並且接收來自 server 轉送的訊息當連線完成之後使用者便可以發送訊息給其他用戶端，其程式實作如程式碼 3.10 所示: button1.setOnClickListener(new Button.OnClickListener() { // 當按下按鈕的時候觸發以下的方法 publicvoid onClick(View v) { try { if(clientSocket.isConnected()){ try { // 取得網路輸出串流 bw = new BufferedWriter( newOutputStreamWriter(clientSocket.getOutputStream(),bm)); // 寫入訊息bw.write(EditText01.getText()+":"+EditText02.getText()+"\n"); // 立即發送 bw.flush(); } catch(Exception e){ 24.

(35) Toast.makeText(getApplicationContext(), "連線失敗，聊天室尚未啟動 ", Toast.LENGTH_LONG).show(); } // 送出文字後便將輸入訊息的文字方塊清空 EditText02.setText(""); } } catch (Exception e) { Toast.makeText(getApplicationContext(), "連線失敗，聊天室尚未啟動", Toast.LENGTH_LONG).show(); } } }); 程式碼 3.10 送訊息給其他用戶端. 3.2.2.1 Dropbox 功能實作此功能修改自 dropbox 官方所提供的 API 範例[9]並整合至本系統中。此功能的用處是在於當使用者在實地探訪時，可以將實地物件所拍攝，並將之上傳到系統所提供的 Dropbox 雲端空間中，提供其他使用者來觀看。另外當討論結束後，可以將討論內容存檔並上傳至 Dropbox 雲端空間中，提供給使用者日後來編輯彙整。在實作此功能之前必須先到 dropbox 官網，創建一個開發 app 並取得 app key 以及 app secret，本系統開發的 app 名稱為 xmlupload，如圖 3.6 所示:. 25.

(36) 圖 3.6 申請 dropbox appp 建置完畢之後須在程式碼內加入申請的 app key 以及 app secret 如下所示: publicclass DBRoulette extends Activity { privatestaticfinal String TAG = "DBRoulette"; /////////////////////////////////////////////////////////////////////////// // //. Yourapp-specific settings.. /////////////////////////////////////////////////////////////////////////// // Replace this with your app key and secret assigned by Dropbox. // Note that this is a really insecure way to do this, and you shouldn't // ship code which contains your key & secret in such an obvious way. // Obfuscation is good. finalstaticprivate String APP_KEY = "b1f40rjy2qmly8a"; finalstaticprivate String APP_SECRET = "ywi5iour3qwi4nl"; // If you'd like to change the access type to the full Dropbox instead of // an app folder, change this value. finalstaticprivate AccessType ACCESS_TYPE = AccessType.APP_FOLDER; /////////////////////////////////////////////////////////////////////////// // End app-specific settings. /////////////////////////////////////////////////////////////////////////// // You don't need to change these, leave them alone.. 26.

(37) finalstaticprivate String ACCOUNT_PREFS_NAME = "prefs"; finalstaticprivate String ACCESS_KEY_NAME = "ACCESS_KEY"; finalstaticprivate String ACCESS_SECRET_NAME = "ACCESS_SECRET"; 程式碼 3.11 設定程式所用到的 key 以及 secret. 拍照上傳:上傳的功能分成兩部分，一種為上傳「照片資料」至 dropbox 雲端，另一種為上傳「照片網址」至本地資料庫中。第一部分:上傳照片資料到 dropbox 雲端首先必須先啟動相機功能並預設一個照片名稱並且判斷該手機是否有相機功能。本系統利用時間函數來取得現在時刻用來當作照片的名稱，並且透過例外處理來判斷是否有相機功能，其實作代碼如程式碼 3.12 所示: Intent intent = newIntent(); // Picture from camera intent.setAction(MediaStore.ACTION_IMAGE_CAPTURE); // This is not the right way to do this, but for some reason, having // it store it in // MediaStore.Images.Media.EXTERNAL_CONTENT_URI isn't working right. Date date = newDate(); DateFormat df = newSimpleDateFormat("yyyy-MM-dd-kk-mm-ss"); String newPicFile = df.format(date) + ".jpg"; String outPath = "/sdcard/chatroom/img/" + newPicFile; File outFile = newFile(outPath); mCameraFileName = outFile.toString(); Uri outuri = Uri.fromFile(outFile); intent.putExtra(MediaStore.EXTRA_OUTPUT, outuri); Log.i(TAG, "Importing New Picture: " + mCameraFileName); try { 27.

(38) startActivityForResult(intent, NEW_PICTURE); } catch (ActivityNotFoundException e) { showToast("There doesn't seem to be a camera."); } 程式碼 3.12 啟動拍照功能拍完照片之後，系統會呼叫上傳函式並將照片上傳至指定的群組資料夾中，其程式實作如程式碼 3.13 所示: protected Boolean doInBackground(Void... params) { try { // By creating a request, we get a handle to the putFile operation, // so we can cancel it later if we want to FileInputStream fis = newFileInputStream(mFile); String path = mPath + mFile.getName(); mRequest = mApi.putFileOverwriteRequest(path, fis, mFile.length(), new ProgressListener() { @Override publiclong progressInterval() { // Update the progress bar every half-second or so return 500; } @Override publicvoid onProgress(long bytes, long total) { publishProgress(bytes); } }); if (mRequest != null) { mRequest.upload(); returntrue; } } catch (DropboxUnlinkedException e) { // This session wasn't authenticated properly or user unlinked mErrorMsg = "This app wasn't authenticated properly."; 28.

(39) } catch (DropboxFileSizeException e) { // File size too big to upload via the API mErrorMsg = "This file is too big to upload"; } catch (DropboxPartialFileException e) { // We canceled the operation mErrorMsg = "Upload canceled"; } catch (DropboxServerException e) { // Server-side exception. These are examples of what could happen, // but we don't do anything special with them here. if (e.error == DropboxServerException._401_UNAUTHORIZED) { // Unauthorized, so we should unlink them. You may want to // automatically log the user out in this case. } elseif (e.error == DropboxServerException._403_FORBIDDEN) { // Not allowed to access this } elseif (e.error == DropboxServerException._404_NOT_FOUND) { // path not found (or if it was the thumbnail, can't be // thumbnailed) } elseif (e.error == DropboxServerException._507_INSUFFICIENT_STORAGE) { // user is over quota } else { // Something else } // This gets the Dropbox error, translated into the user's language mErrorMsg = e.body.userError; if (mErrorMsg == null) { mErrorMsg = e.body.error; } } catch (DropboxIOException e) { // Happens all the time, probably want to retry automatically. mErrorMsg = "Network error. Try again."; } catch (DropboxParseException e) { // Probably due to Dropbox server restarting, should retry mErrorMsg = "Dropbox error. Try again."; } catch (DropboxException e) { // Unknown error mErrorMsg = "Unknown error. Try again."; } catch (FileNotFoundException e) { 29.

(40) } returnfalse; } 程式碼 3.13 上傳照片至 dropbox 雲端空間中第二部分:上傳照片網址到資料庫中為了讓討論畫面能夠顯示使用者所上傳的圖片，本系統須將使用者所拍攝的照片網址傳送到資料庫中，因此本系統使用 json 的方式來做資料傳遞。首先必須先從 dropbox 取得照片網址，為了讓系統可以直接存取該檔案，必須將網址中的 www 取代為 dl，此為 dropbox 官方所提供的方法。其取得照片的網址的程式實作如程式碼 3.14 所示: publicvoid getURL() { String shareAddress=null; try { Entry dirent = mApi.metadata(mPath, 1000, null, true, null); //取得該目錄下照片的網址 for (Entry ent : dirent.contents) { if (!ent.isDir) { shareLink = mApi.share(ent.path); shareAddress = getShareURL(shareLink.url).replaceFirst("https://www", "https://dl"); try { Thread t = newThread(new sendPostRunnable(group+","+shareAddress+","+mFile.getName()+","+name)); t.start(); } catch (Exception e) { } } } } catch (Exception e) {} } String getShareURL(String strURL) { URLConnection conn = null; 30.

(41) try { URL inputURL = newURL(strURL); conn = inputURL.openConnection(); } catch (MalformedURLException e) { // Log.d(TAG,"Please input a valid URL"); } catch (IOException ioe) { // Log.d(TAG,"Can not connect to the URL"); } return conn.getHeaderField("location"); } 程式碼 3.14 取得照片的網址取得照片網址之後便使用 json 格式的資料傳遞到 postTest_mysql.php 網頁，其實坐方式如程式碼 3.15: private String uriAPI = "http://140.122.184.33/thesis/httpPostTest/postTest_mysql.php"; private String sendPostDataToInternet(String strTxt) { /* 建立HTTP Post連線 */ HttpPost httpRequest = newHttpPost(uriAPI); /* * Post運作傳送變數必須用NameValuePair[]陣列儲存 */ List<NameValuePair> params = new ArrayList<NameValuePair>(); params.add(new BasicNameValuePair("data", strTxt)); try{ /* 發出HTTP request */ httpRequest.setEntity(new UrlEncodedFormEntity(params, HTTP.UTF_8)); /* 取得HTTP response */ HttpResponse httpResponse = newDefaultHttpClient() .execute(httpRequest); /* 若狀態碼為200 ok */ if (httpResponse.getStatusLine().getStatusCode() == 200) { 31.

(42) /* 取出回應字串 */ String strResult = EntityUtils.toString(httpResponse .getEntity()); // 回傳回應字串 return strResult; } } catch (Exception e) { e.printStackTrace(); } returnnull; } } 程式碼 3.15 使用 json 的方式傳遞資料將資料傳送到 postTest_mysql.php，該網頁的功能是將傳送來的資料上傳到資料庫，其實作方法如程式碼 3.16: <?php $database_dblink = "ntnuxml"; $username_dblink = "root"; $password_dblink = "1111"; // 建立資料庫連線 $dblink = mysql_pconnect("localhost", $username_dblink, $password_dblink) or trigger_error(mysql_error(),E_USER_ERROR); mysql_query("SET NAMES utf8",$dblink); mysql_query("SET CHARACTER_SET_CLIENT=utf8",$dblink); mysql_query("SET CHARACTER_SET_RESULTS=utf8",$dblink); mysql_select_db($database_dblink, $dblink); // 宣告utf-8的編碼 header("Content-Type:text/html; charset=utf-8"); // 接收POST/GET的資料 $data=@$_REQUEST['data']; // 如果有資料 if (strcmp(trim($data), "")!=0) {. $data_array=explode(',', $data); 32.

(43) //data_array[1]=圖片網址 //data_array[0]=使用者組別 //data_array[2]=圖片名稱 //data_array[3]=使用者名稱 $insertSQL="INSERT INTO dropboxwebsite (website,whichgroup,picturename,username) VALUES ('$data_array[1]','$data_array[0]','$data_array[2]','$data_array[3]')"; mysql_query($insertSQL, $dblink) or die(mysql_error()); } $sql = "ALTER IGNORE TABLE `dropboxwebsite` ADD UNIQUE INDEX(`website`);"; mysql_query($sql, $dblink) or die(mysql_error()); ?> 程式碼 3.16 資料上傳到資料庫 紀錄上傳當使用者按下上傳按鈕後，會將存檔好的對話紀錄檔上傳至該使用者的群組內，其實作方法如程式碼 3.17: //上傳紀錄檔 mfile = (Button)findViewById(R.id.fileupload); mfile.setOnClickListener(new OnClickListener() { publicvoid onClick(View v) { FileInputStream inputStream = null; Date date = newDate(); DateFormat df = newSimpleDateFormat("yyyy-MM-dd-kk-mm-ss"); try { File file = newFile("/sdcard/chatroom/chatlog.txt"); inputStream = new FileInputStream(file); Entry newEntry = mApi.putFile("/log/"+upgroup+"/"+df.format(date)+"_chatlog.txt", inputStream, file.length(), null, null); Toast.makeText(DBRoulette.this, "上傳成功", Toast.LENGTH_SHORT).show(); 33.

(44) Log.i("DbExampleLog", "The uploaded file's rev is: " + newEntry.rev); } catch (DropboxUnlinkedException e) { // User has unlinked, ask them to link again here. Log.e("DbExampleLog", "User has unlinked."); } catch (DropboxException e) { Log.e("DbExampleLog", "Something went wrong while uploading."); } catch (FileNotFoundException e) { Log.e("DbExampleLog", "File not found."); } finally { if (inputStream != null) { try { inputStream.close(); } catch (IOException e) {} } } } }); 程式碼 3.17 對話紀錄檔上傳. 3.2.2.2 顯示圖片功能實作本系統利用 gallery 方式來顯示使用者已經上傳過的相片，系統會從本地資料庫中選取該使用者的所在的討論組別之後，利用 json 的格式從資料庫中取得此群組的所有照片的相關資訊，例如網址以及照片上傳者的名稱，系統利用 android 所提供 bitmap 方式來處理圖片並顯示再螢幕上，讓使用者利用觸碰方式顯示照片相關資訊。其程式實作方法如程式碼 3.18 所示： //與資料庫取得圖片url Button showimg = (Button) findViewById(R.id.showImg); showimg.setOnClickListener(new Button.OnClickListener(){ publicvoid onClick(View v) { 34.

(45) try { String result = DBConnector.executeQuery( "SELECT `website` FROM `dropboxwebsite` where `whichgroup`="+upgroup,0); //SQL語法:資料表dropboxwebsite中根據組別取得website欄位的值 JSONArray jsonArray = newJSONArray(result); urlStrings= new String [jsonArray.length()]; if(urlStrings.length!=0){//要有資料才會執行 for(int i = 0; i < jsonArray.length(); i++) { JSONObject jsonData = jsonArray.getJSONObject(i); urlStrings[i]=jsonData.getString("website").replaceAll("\\\\", "").toString(); } galleryAdapter = new GalleryAdapter(gallery.getContext(),urlStrings); gallery.setAdapter(galleryAdapter); gallery.setOnItemClickListener(new OnItemClickListener(){ publicvoid onItemClick(AdapterView parent, View view, int position, long id) { Toast.makeText(MainActivity.this, "您選的是第"+(position+1)+"張圖"+ ","+"上傳者"+username[position], Toast.LENGTH_LONG).show(); } }); } } catch(Exception e) { // Log.e("log_tag", e.toString()); } } }); privateclass GalleryAdapter extends BaseAdapter{ private Context ctx; private GetWebImg imgCache; private String[] urlStrings; private Handler refreshAdapterHandler = new Handler(){ 35.

(46) @Override publicvoid handleMessage(Message msg) { // TODO Auto-generated method stub super.handleMessage(msg); notifyDataSetChanged(); } }; private GalleryAdapter(Context ctx,String[] urlStrings){ this.ctx = ctx; this.urlStrings = urlStrings; imgCache = new GetWebImg(ctx); } @Override publicint getCount() { // TODO Auto-generated method stub returnurlStrings.length; } @Override public Object getItem(int position) { // TODO Auto-generated method stub returnnull; } @Override publiclong getItemId(int position) { // TODO Auto-generated method stub return 0; } @Override public View getView(int position, View convertView, ViewGroup parent) { // TODO Auto-generated method stub ImageView imageView = newImageView(ctx); imageView.setBackgroundResource(android.R.color.holo_blue_bright); 36.

(47) String urlStr = urlStrings[position]; if(imgCache.IsCache(urlStr)){ imageView.setImageBitmap(imgCache.getImg(urlStr)); }else{ imageView.setImageResource(R.drawable.ic_launcher); imgCache.LoadUrlPic(urlStr, refreshAdapterHandler); } imageView.setLayoutParams(new Gallery.LayoutParams(150, 150)); imageView.setScaleType(ImageView.ScaleType.FIT_XY); return imageView; } } 程式碼 3.18 取得圖片後顯示在畫面上下列程式碼收到 executeQuery 傳進來的 sql 語法之後，將 sql 語法傳到本機端的 getwebsite.php 網頁再透過網頁向資料庫取得網址，其資料格式為 JSON，程式實作方法如程式碼 3.19、3.20 所示: publicclass DBConnector { publicstatic String executeQuery(String query_string,int a) { String result =null ; int whichquery =a; if(whichquery ==0){//取得網址相關參數 try { System.out.println(query_string); HttpClient httpClient = newDefaultHttpClient(); HttpPost httpPost = newHttpPost("http://140.122.184.33/thesis/httpPostTest/getwebsite.php"); ArrayList<NameValuePair> params = new ArrayList<NameValuePair>(); params.add(new BasicNameValuePair("query_string", query_string)); httpPost.setEntity(new UrlEncodedFormEntity(params, HTTP.UTF_8)); 37.

(48) HttpResponse httpResponse = httpClient.execute(httpPost); //view_account.setText(httpResponse.getStatusLine().toString()); HttpEntity httpEntity = httpResponse.getEntity(); InputStream inputStream = httpEntity.getContent(); BufferedReader bufReader = newBufferedReader(new InputStreamReader(inputStream, "utf-8"), 8); StringBuilder builder = newStringBuilder(); String line = null; while((line = bufReader.readLine()) != null) { builder.append(line + "\n"); } inputStream.close(); result = builder.toString(); System.out.println(result); } catch(Exception e) { Log.e("log_tag", e.toString()); } 程式碼 3.19getwebsite.php 傳遞參數至網頁並接收回傳結果 <?php $database_dblink = "ntnuxml"; $username_dblink = "root"; $password_dblink = "1111"; // 建立資料庫連線 $dblink = mysql_pconnect("localhost", $username_dblink, $password_dblink) or trigger_error(mysql_error(),E_USER_ERROR); mysql_query("SET NAMES utf8",$dblink); mysql_query("SET CHARACTER_SET_CLIENT=utf8",$dblink); mysql_query("SET CHARACTER_SET_RESULTS=utf8",$dblink); mysql_select_db($database_dblink, $dblink); header("Content-Type:text/html; charset=utf-8"); $query_rs = $_POST['query_string']; $data_array=explode('=', $query_rs ); $query_rs=$data_array[0]." = "."'".$data_array[1]."'"; $rs = mysql_query($query_rs, $dblink) or die(mysql_error()); while ($row = mysql_fetch_assoc($rs)) { 38.

(49) $output[] = $row ; } print(json_encode($output)); ?> 程式碼 3.20 接收參數並對資料庫連線取得照片網址取得網址之後系統會呼叫 GetWebImg 來將圖片網址轉換成 gallery 內的圖片，此轉換方法是利用 android 內 Bitmap 類別進行圖片的處理，因為 bitmap 不能直接處理外部 url 的圖片，所以系統會先進行下載的動作。其下載方式是將圖片轉換成串流存放到陣列之中，並取得該圖片的串流長度，最後在將陣列中的串流進行解碼的動作便可以獲得圖片影像，其程式實作如程碼 3.21 所示: Public synchronized Bitmap LoadUrlPic(Context c, String url) { URL imgUrl; Bitmap defaultImg = null; Bitmap webImg = null; Bitmap webImg_o = null; try { imgUrl = new URL(url); } catch (MalformedURLException e) { Log.d("MalformedURLException",e.toString()); return defaultImg;//抓不到網路圖時, 讀預設圖片 } try { HttpURLConnection httpURLConnection = (HttpURLConnection) imgUrl.openConnection(); httpURLConnection.setDoInput(true); httpURLConnection.setDoOutput(false); httpURLConnection.setUseCaches(false); httpURLConnection.connect(); InputStream inputStream = httpURLConnection.getInputStream(); int length = (int) httpURLConnection.getContentLength(); int tmpLength = 512; 39.

(50) int readLen = 0,desPos = 0; byte[] img = newbyte[length]; byte[] tmp = newbyte[tmpLength]; BitmapFactory.Options options = new BitmapFactory.Options();//設定壓縮倍率參數 options.inSampleSize = 10;//變成原圖的百分之一 if (length != -1) { while ((readLen = inputStream.read(tmp)) > 0) { System.arraycopy(tmp, 0, img, desPos, readLen); desPos += readLen; } webImg = BitmapFactory.decodeByteArray(img, 0, img.length, options); } httpURLConnection.disconnect(); } catch (IOException e) { Log.d("IOException",e.toString()); return defaultImg; //抓不到網路圖時, 讀預設圖片 } return webImg; } 程式碼 3.21 利用 bitmap 方式處理外部圖片. 3.2.2.3 對話紀錄存檔功能實作使用者可以先透過存檔功能將對話內容存在手機的 chatlog.txt 中之後再透過 dropbox 功能將對話紀錄檔上傳到 dropbox，其存檔的程式實作方法如程式碼 3.22 所示: //對話紀錄存檔功能 Button button2=(Button) findViewById(R.id.save); button2.setOnClickListener(new Button.OnClickListener() { // 當按下按鈕的時候觸發以下的方法 publicvoid onClick(View v) { try { 40.

(51) fw = new FileWriter("/sdcard/chatroom/chatlog.txt", false); bw = new BufferedWriter(fw); content =TextView01.getText().toString(); bw.write(content); bw.close(); fw.close(); Toast.makeText(getApplicationContext(), "存檔成功", Toast.LENGTH_SHORT).show(); } catch (Exception e) { System.out.println(e); } } }); } 程式碼 3.22 存檔功能. 3.2.3. 設定分組數量功能實作. 老師透過分組的方式讓學生進入討論系統中對應的組別，因此在學生選擇討論區組別之前，系統必須先從資料中取得分組的數目，再將資料傳回討論系統中。此功能是透過網頁編寫的方式來達成。其使用權限只開放給老師來做設定，因此必須提供一個登入介面來判斷使用者的身分，其程式實作方法如程式碼 3.23、3.24、 3.25 所示: <form id="form1" name="form1" method="post" action="check.php"> <p>設定討論區分組數目</p> <table width="487" border="1" align="center"> <tr> <td width="147" height="53">帳號</td> <td width="239" align="center" valign="center"> <input name="userid" type="text" id="userid" size="20" /> </td> </tr> 41.

(52) <tr> <td height="52">密碼</td> <td width="239" align="center" valign="center"> <input name="password" type="password" id="password" size="20" /> </td> </tr> </table> <p> <label> <input type="submit" name="button" id="button" value="送出" /> </label> </p> </form> 程式碼 3.23Setgrouplogin.html 提供使用者登入介面 <? $database_dblink = "ntnuxml"; $username_dblink = "root"; $password_dblink = "1111"; // 建立資料庫連線 $dblink = mysql_pconnect("localhost", $username_dblink, $password_dblink) or trigger_error(mysql_error(),E_USER_ERROR); mysql_query("SET NAMES utf8",$dblink); mysql_query("SET CHARACTER_SET_CLIENT=utf8",$dblink); mysql_query("SET CHARACTER_SET_RESULTS=utf8",$dblink); mysql_select_db($database_dblink, $dblink); header("Content-Type:text/html; charset=utf-8"); $id=$_POST["userid"]; $password=$_POST["password"]; $result = mysql_query("select Name from logincheck where ID='$id' && pwd ='$password' && career='Teacher' "); if($row = mysql_fetch_assoc($result)) { session_register('pass'); session_register('name'); $_SESSION['name']=$row['Name']; 42.

(53) $_SESSION['pass']="ok"; echo "<p><font color=\"#0000FF\"><strong>登入成功！</strong></font></p>"; echo "<a href=\"setgroup.php\">下一頁</a>"; } else{ header('Location: setgrouplogin.html'); } ?> 程式碼 3.24check.php 判斷帳號密碼是否正確 <? session_start();//啟動 session $database_dblink = "ntnuxml"; $username_dblink = "root"; $password_dblink = "1111"; // 建立資料庫連線 $dblink = mysql_pconnect("localhost", $username_dblink, $password_dblink) or trigger_error(mysql_error(),E_USER_ERROR); mysql_query("SET NAMES utf8",$dblink); mysql_query("SET CHARACTER_SET_CLIENT=utf8",$dblink); mysql_query("SET CHARACTER_SET_RESULTS=utf8",$dblink); mysql_select_db($database_dblink, $dblink); header("Content-Type:text/html; charset=utf-8"); $number = $_POST['number']; if($_SESSION['pass']=="ok"){ echo "登入身分:".$_SESSION['name']."<br>"; if($number!="" and $number<11 and $number >0){ $query_rs="UPDATE `groupnumber` SET `number` = '$number'"; mysql_query($query_rs, $dblink) or die(mysql_error()); echo "分組成功"."<br>"; echo "目前分組數目為:".$number ."<br>"; } else if($number!="" and $number >10 ) echo "超過範圍 10，請重新輸入"; else if($number!="" and $number<1 and gettype($number)==("integer")) echo "超過範圍 1，請重新輸入"; else if($number!="" and gettype($number)!=("integer")){ 43.

(54) echo "輸入錯誤的格式"; } else if($number ==""){ echo "欄位不可以為空"; } } else{//如果沒有驗證成功會重新前往登入頁面 header('Location: setgrouplogin.html'); } ?> <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"/> <title>設定分組數目頁面</title> </head> <body> <form name="form1" method="post" action="setgroup.php"> <? if($_SESSION['pass']=="ok"){ echo "<p>  </p><br>"; echo "請輸入分組數目:"; echo "<input name=\"number\" type=\"int\">"; echo "<input type=\"submit\" name=\"button\" id=\"button\" value=\"送出\">"; echo"(組別數目 1~10)<br>"; echo "<p> </p>"; echo "<p> </p>"; echo "<p> </p>"; echo "<p> </p>"; echo "<p> </p>"; echo "<p><a href=\"logout.php\">[ 登出 ]</a></p>"; } ?> </form> </body> </html> 程式碼 3.25Setgroup.php 設定分組數目 44.

(55) 3.3 編輯子系統實作本系統的目的在於讓使用者可以編輯由討論系統上傳得資料，透過編輯彙整之後，以 HTML5 電子書個方式來呈現。本系統的開發是透過網頁的建置來進行資料處理，其系統頁面可分成登入頁面、編輯頁面、預覽頁面、存檔頁面、瀏覽電子書頁面。. 3.3.1. 登入頁面實作. 此頁面的功能在於讓使用者的輸入個人帳號密碼，再透過與資料庫連結，取得使用者的姓名與學號，再將資料傳至編輯頁面。另外系統不設限該使用者只能進入單一組別，因此系統頁面會讓使用者透過勾選組別進入編輯頁面。登入頁面實作方法如程式碼 3.26 所示: <form id="form1" name="form1" method="post" action="logincheck.php"> <p>ntnuxml 討論資料系統</p> <table width="487" border="1" align="center"> <tr> <td width="147" height="53">帳號</td> <td width="239" align="center" valign="center"> <input name="userid" type="text" id="userid" size="20" /> </td> </tr> <tr> <td height="52">密碼</td> <td width="239" align="center" valign="center"> <input name="password" type="password" id="password" size="20" /> </td> </tr> <tr>. 45.

(56) <td height="52" colspan="2"><p>請勾選組別</p> <p> <label> <input type="radio" name="RadioGroup1" value="A" id="RadioGroup1_0" /> A</label <label> <input type="radio" name="RadioGroup1" value="B" id="RadioGroup1_1" /> B</label> <label> <input type="radio" name="RadioGroup1" value="C" id="RadioGroup1_2" /> C</label> <label> <input type="radio" name="RadioGroup1" value="D" id="RadioGroup1_3" /> D</label> <label> <input type="radio" name="RadioGroup1" value="E" id="RadioGroup1_4" /> E</label> <label> <input type="radio" name="RadioGroup1" value="F" id="RadioGroup1_5" /> A</label> <label> <input type="radio" name="RadioGroup1" value="G" id="RadioGroup1_6" /> G</label> <label> <input type="radio" name="RadioGroup1" value="H" id="RadioGroup1_7" /> H</label> <label> <input type="radio" name="RadioGroup1" value="I" id="RadioGroup1_8" /> I</label> <label> <input type="radio" name="RadioGroup1" value="J" id="RadioGroup1_9" /> J</label> <br /> </p></td> </tr> </table> <input type="submit" name="submit" id="submit" value="登入" />. 46.

(57) <p> </p> <p><a href="managerloginpage.php">管理者登入</a></p> </form>. 程式碼 3.26loginpage.html 登入介面. 3.3.2. 編輯頁面實作. 編輯頁面的功能是用來編輯電子書的其中一個頁面資訊，使用者可以從頁面看到對話紀錄內容以及實地拍攝的照片，因此使用者可以選取這些資料內容放置到編輯區塊中。當編輯完成之後，使用者可以透過按下預覽按鈕連接到預覽頁面觀看結果。另外使用者透過按下存檔按鈕之後，會將編輯結果存檔至 xml 檔案中，此 xml 檔案用來提供電子書頁面讀取編輯結果。其程式實作如程式碼 3.27 所示: <? session_start();?> <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"/> <title>NTNUXML 數位學習</title> <style> #faceul{ width:inherit; }#faceul li{ list-style-type:none; float:left; border:1px solid #b4b4b4; margin:10px 0 30px 10px; height:162px; width:160px; } #faceul li a{ display:block; height:162px; width:160px; 47.

(58) } #faceul img{ margin:5px 0 0 5px; border:none; height:150px; width:150px; } </style> </head> <body> <form method="post" name="form1" target="_blank" > <?php require_once('Connections/dbcn.php'); mysql_query("set names 'utf8'"); mysql_select_db("ntnuxml"); if($_SESSION['pass']=="ok"){ $group=$_SESSION['group']; echo "目前使用者是:".$_SESSION['name']."<br />"; echo "身分:".$_SESSION['career']."<br />"; //之後是否改成下載的方式存到本地 server 如此可以使用個人帳號上傳資料 $dir = "D:/yjwdropbox/Dropbox/Apps/xmlupload/log/".$group; if($_SESSION['career']=="Student"){ echo "編輯結果:<a href=\"ebook.php?group=".$group."\" target=\"_blank\">Ebook</a><br />"; //echo "編輯結果:<a href=\"ebook.php\" target=\"_blank\">Ebook</a><br />"; echo "<p><a href=\"logout.php?page=\"1\"\">[ 登出 ]</a></p>"; echo "<table width='100%' border='1'>\n"; echo "<tr>\n"; echo "<td width='50%' valign='top' scope='col' align='left' rowspan='2'>\n"; getDirList($dir); echo "</td>\n"; echo "<td width='50%' scope='col'>"."<div style=\"height:300px;overflow-x:hidden;overflow-y:auto;background-color:white;\">\ n"; echo "<ul id=\"faceul\">\n"; $query_rs = "SELECT * FROM `dropboxwebsite` WHERE whichgroup = '$group'"; 48.