網頁

本研究物聯網的一環便是以網頁瀏覽數據資料，令使用者能方便監測邊坡狀 態，本研究以HTML 編寫網頁，使用 javascript 及 Google API 讀取 Google sheet 資料庫，並嘗試以動態圖表顯示歷時資料。本小節將詳細介紹架設網頁及網頁呈

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

圖 4.25 資料監測網頁(基本架構)

建立基本網頁格式後(如圖 4.25)，接著需要讓網頁能夠取用資料庫之數據，

使用JavaScript 可以將擷取資料庫中角度資料及最大最小值，然而在監測時資料 庫會不斷地更新資料，使用JavaScript 必須重新刷新網頁才能獲得更新後的數

據，除了費時外，也會占用不必要的網路資源，重新刷新網頁並非解決的方法。

為解決此問題，可使用Google AJAX 及 jQuery 來避免上述問題的發生。Google AJAX Libraries API 可以透過 Google 本身的主機提供 JavaScript 的函式庫，當網 站的使用者瀏覽到的不同網站是採用 Google 所提供的檔案，就不需要再重複下 載。由於接下來必須使用jQuery 函式庫送出 GET Request，如果是一般的使用者 必須先下載jQuery 函式庫，增加網頁讀取時間。如果網站採用 Google 所提供的 jQuery，則使用者第一次瀏覽到網站時，會下載並且 cache 在電腦內，當使用者 去到另一個網站也是使用到 Google 所提供的 jQuery，則不需要再重複下載，加 快網頁呈現速度。如要使用Google AJAX Libraries API 提供 jQuery 函式庫可以輸 入下列字串：

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js’></script>

由於本研究之資料庫是建立在Google 試算表之中，要存取其中的數據可以 透過Google Apps Script(GAS)指令碼進行讀取或寫入的工作，則建立可以讀取並 回傳試算表數據之指令碼，並將指令碼發布成網路應用程式，再用網頁對此應用 程式送出請求，即可在網頁上呈現試算表之數據，且不造成網路負擔。

圖 4.26 試算表 ID

首先取得試算表之ID(圖 4.26 紅色框線範圍)，並在 Google 雲端建立如圖 4.27 之指令碼(GAS)：

圖 4.27 取得試算表 X 角度之指令碼

程式碼內容為一函式對指定試算表進行讀寫，將取得之ID 帶入第二行程式 碼，選擇”工作表 1”。由於最新的數據會新增在試算表最後一列(如圖 4.23)，則 讀取之範圍為最後一列第三個元素，最後回傳該元素之值。

編寫完畢後，將此指令碼發布成網路應用程式，如圖 4.28：

圖 4.28 發布網路應用程式

取得網路應用程式之網址後即可在HTML 使用 jQuery 對其發出要求，此應用程

式便會回傳試算表最後一列之X 角度如圖 4.29，並每隔兩秒重新送出要求便可 讀取最新的數據，讀取後更改HTML 內的元素來顯示數據，顯示結果就會如圖 4.25。

圖 4.29 HTML 對網路應用程式發出要求

雖然網頁已能即時動態更新數據，但無法檢視過去之資料，本研究欲撰寫一 動態圖表於網頁中，可將歷時資料呈現並供使用者調閱，此部分需透過另一個函 式庫D3.js 來達成。

D3.js(Data-Driven Documents)是一套 JavaScrpit 函式庫，專門處理網頁的資料 視覺化，並支援SVG(向量式圖形)，透過 D3.js 與 SVG 能夠更有效率的在網頁上 存放圖形。D3 的官方網站提供了許多樣板，這些範例與樣板都是開源資源(Open Source)供世界各地的開發者分享或使用(圖 4.30)。

圖 4.30 D3 官方網站提供之範例(來源：https://github.com/d3/d3/wiki/Gallery)

本研究參考了Bo Ericsson 於 2015 年在 https://bl.ocks.org/中分享的範例(圖 4.31)。並針對本研究需求，將數據來源改寫成前述由網路應用程式取得之試算表 資料(圖 4.32)

圖 4.31 即時動態圖表範例(資料來源：Bo Ericsson，2015)

圖 4.32 資料監測網頁(含動態圖表)

可以觀察到動態圖表上方為接受到數據之長條圖，下方則是歷時數據曲線之

縮圖，藉由拖曳或縮放調整動態圖表下方之綠色範圍可以瀏覽過去3 分鐘之數

據，左右兩個動態圖表分別代表X,Y 方向之數據。

完成網頁HTML 編寫後，仍只能夠過本機之瀏覽器瀏覽，為了讓使用者能隨 時隨地經由網路監測，必須架設伺服器並購買IP 位置發布志工開網域，再將撰寫 好的HTML 上傳至伺服器，使用者才能透過網址瀏覽。本研究範圍僅包含開發整 套系統及探討其可行性，無長期維持營運網頁之考量，所以本研究採用替代方案 以節省開發成本，即透過現成之架站平台，由該平台提供網頁空間，使用者僅需 提供撰寫好之網頁並上傳，即可供其他人瀏覽，此方法稱為hosting。

提供hosting 服務的網站如 Google、Github 等等，本研究使用 Github 提供的 Github Page 作為網頁架設之平台。

圖 4.33 上傳 html 至 Github Page

圖 4.34 網頁發布之網址