第四章 雛型系統設計與建置
第三節 雛形系統建置與畫面呈現
國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
83
表 4-13：移動式設備所用之服務網址 URL 路徑 HTTP
請求方法 /product/:id GET /product/:id.json GET /product/:id POST /user_activity/:user_id.json GET
資料來源：本研究整理
第三節 雛形系統建置與畫面呈現
後端伺服器需先建置完成，還有標籤內需有編碼資料，移動式設備才能掃描 標籤再透過網路聯繫後端伺服器取得資料，此節介紹的順序分別為後端伺服器、
標籤，和移動式設備程式，以下分述。
壹、後端伺服器
後端系統伺服器部屬，需要 ONS 和網頁伺服器，本研究先在實體主機上安 裝 Ubuntu 12.04 Server，為了避免安裝多種應用軟體，軟體間會互相衝突造成整 個作業系統無法運作，以及管理上的便利性，再安裝完 Ubuntu 後另外安裝虛擬 機器軟體 LXC(Linux Container)，用 LXC 虛擬兩台主機分別為 ictBind 和
ictMainServer；ictBind 虛擬主機安裝 BIND DNS 軟體，作為 ONS 伺服器使用，
ictMainServer 虛擬主機安裝資料庫和架設網站伺服器之相關軟體，軟體部屬示意 圖如圖 4-10 所示。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
84
圖 4-10：後端伺服器軟體部屬 資料來源：本研究整理
貳、ONS上的資料部屬
後端伺服器軟體安裝好後，首先這個部分介紹 ONS 的設定；在虛擬機器
ictBind 中安裝好 BIND 後，/etc 目錄下會多出一個 bind 目錄(/etc/bind/)，裡面有 兩個檔案需要設定，分別為 name.config.local 和本研究新增的資料檔案 db.gid.id，
設定完成後 ictBind 就能作為 ONS 伺服器運作，以下分述：
裡面有兩個區塊 zone 和 key 如圖 4-11 所示，zone 表示這台主機所管理的域 名，在其後接的引號中 gid.id.onsepc.com 就是這台主機管理的域名，ictBind 將管 理這個域名下各種的域名解析；接著說明 zone 區塊裡面的參數，第一個 type 為
master 表示這台主機是管理這個域名的主機，第二個是 file 定義解析這個域名的 資料檔案在主機中的位置(/etc/bind/db.gid.id)，最後是 allow-update 如字面上意思 為允許透過網路的方式更新資料檔案，將伺服設定成具有 DDNS 功能，在
Ubuntu
LXC
ictBind
ictMainServer
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
85
allow-update 區塊中有 key 參數，表示需要有 key 才能夠對 db.gid.id 這個資料檔 案進行更新，所使用的 key 名稱叫做 web。
key 區塊定義鑰匙的詳細資訊，引號中為鑰匙名稱 web，第一個參數
alogorithm 為定義產生鑰匙的演算法，第二個參數 secret 後面引號中的字串就是 鑰匙。
圖 4-11：檔案 name.config.local 設定畫面 資料來源：本研究整理
接著介紹 db.gid.id 資料檔案如圖 4-12 所示，圖中 0.0 即代表
0.0.0614141.gid.id.onsepc.com 域名，並以 NAPTR 記錄表示該域名所對應之服務，
若收到解析 0.0.0614141.gid.id.onsepc.com 的請求時，伺服器會把相對應的 NAPTR 記錄全部回覆。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
86
以 0.0 的 NAPTR 記錄為例，圖 4-12 顯示在使用者掃描商品上的標籤後，並 用 FQDN 向 ONS 請求解析時，本研究中的 ONS 會回傳五種記錄資料，第一種 服務欄位顯示為 html，程式可以利用這個記錄向網頁伺服器請求網頁；第二種服 務欄位顯示為 json，程式可以用這個記錄向網頁伺服器請求 JSON 格式的資料；
第三種服務欄位顯示為 purchase，程式可透過此網址傳送商品購買資訊；第四種 服務欄位顯示為 activity，程式利用這個欄位更新使用者活動資訊；最後第五種 服務欄位顯示為 film+id，可以得到該商品所對應的文物底片 ID；若有其他與基 金商品編碼相關的服務，亦可以增加 ONS 記錄的方式讓 ONS 可以解析。
圖 4-12：檔案 db.gid.id 設定畫面 資料來源：本研究整理
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
87
參、標籤管理系統
標籤管理系統，用以管理標籤編碼和基金商品資料，還有將基金商品編碼與 服務對應的資料，新增至 ONS 或從 ONS 中刪除。每個管理畫面如設計部分所述，
皆有資料增刪改查的功能，針對不同功能畫面會有些微改變。管理基金商品分類 部分，首先是管理主分類如圖 4-13 所示，參考故宮精品網站的主分類鍵入資料，
資料表左側#符號下面一排數字，為各個分類在系統中的編號，點擊生活風格的 Open Sub-Category 按鈕開啟該主分類下的子分類清單。
圖 4-13：管理主分類畫面 資料來源：本研究整理
子分類管理畫面如圖 4-14 所示，此圖範例為點擊生活風格主分類的 Open SubCategory 按鈕後所開啟的畫面。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
88
圖 4-14：管理子分類畫面 資料來源：本研究整理
管理產品分類畫面如圖 4-15 所示，每個子分類下會有許多產品分類，圖中 為新增在子分類生活擺飾中的產品分類，點擊景泰藍小鬧鐘的 Open
Spec-Category 按鈕開啟該產品分類下的規格分類清單。
圖 4-15：管理產品分類畫面 資料來源：本研究整理
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
89
參考故宮精品網站的景泰藍小鬧鐘規格，輸入系統的資訊如圖 4-16 所示，#
下面的數字為各個規格的編號，另外可透過這個畫面管理規格資料。
圖 4-16：管理產品規格畫面 資料來源：本研究整理
最後是管理實體產品的畫面如圖 4-17 所示，新增完主分類、子分類、產品 分類，和規格分類等資料後，就可以用各個規格分類新增實體產品記錄，圖 4-17 為在景泰藍小鬧鐘不同規格分類中各新增一個實體產品記錄後的畫面，如同系統 設計時編碼部分所描述的，系統會根據主分類、子分類、產品分類，和規格分類 的號碼，重複使用次數的號碼，最後在加上實體產品的序列號碼，產生每個實體 產品獨一無二的 EPC 編碼(Code 欄位中所示)。
每個實體產品資料的最右邊有兩個按鈕(Add ONS Record 和 Delete ONS Record)，點擊 Add ONS Record 按鈕系統會呼叫 Shell Script 檔案(ddns_update.sh)，
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
90
將該實體產品的 EPC 編碼和所對應的服務，以 DDNS 的方式新增至 ONS 伺服器，
點擊 Add ONS Record 按鈕系統會呼叫另一個 Shell Script 檔案(ddns_delete.sh)，
將 ONS 伺服器中該實體商品所對應服務等資料刪除。
圖 4-17：管理實體產品編碼畫面 資料來源：本研究整理
肆、Shell Script
標籤管理系統部分提到利用 Shell Script 將 EPC 編碼與對應的服務對 ONS 伺服器操作新增與刪除，這裡要描述的是幕後進行這兩樣工作的 Shell Script 檔 案 ddns_update.sh(圖 4-18)和 ddns_delete.sh(圖 4-19)。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
91
圖 4-18：Shell Script 檔案 ddns_update.sh 資料來源：本研究整理
這兩個 Shell Script 程式內記錄 ONS 的 IP 位址和更新 ONS 用的加密鑰匙檔 案位置，當標籤管理系統呼叫 Shell Script 時會將參數(EPC 編碼轉換成的 FQDN，
和其所對應的服務)傳給 Shell Script，Shell Script 再將這些參數加上系統指令，
輸出成 tmp.txt 檔案，最後用 nsupdate 指令附帶加密鑰匙檔案位置和 tmp.txt 檔案 等參數，更新 ONS 伺服器的記錄。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
92
圖 4-19：Shell Script 檔案 ddns_delete.sh 資料來源：本研究整理
伍、標籤
接著是標籤，要在標籤內寫入本研究設計的 EPC 編碼，本研究用 Nexus7 的 NFC 來操作標籤讀與寫的動作；參考 Roland[2012]製作 Android 系統程式，操作 NFC 讀與寫的投影片，修改成本研究所需之程式，NFC 將資料寫入標籤的畫面 如圖 4-20 所示。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
93
圖 4-20：標籤編碼資料寫入 資料來源：本研究整理
在圖 4-20 的畫面中，左圖輸入 EPC 編碼(urn:epc:id:gid:0614141.3.0)後，點 擊 Write to NFC Tag 按鈕後，畫面顯示變成如右圖的等待畫面，等待標籤接觸
Nexus7 的 NFC 裝置，當標籤與 NFC 裝置接觸後會進行資料寫入，寫入完成會 再回到左圖畫面所示。為確保程式正確執行，且有把資料寫入標籤中，本研究另 外下載第三方 NFC 讀取軟體如圖 4-21 所示，右圖為讀取到 NFC 標籤的資訊。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
94
圖 4-21：第三方 NFC 讀取程式 資料來源：本研究整理
陸、移動設備上的程式
後端系統與標籤都建置完成後，最後的部分就是移動設備上的程式，移動設 備程式的畫面如圖 4-22 所示；圖中 A 為 Nexus7 待機畫面，當使用者掃描基金 商品標籤時(B)，程式啟動並改變程式使用者介面(C)，緊接著開啟基金商品對應 的網頁(D)。
圖 4-23 為介紹基金商品和與其對應的文物介紹網頁，如系統設計中基金商 品介紹網頁設計所示，雖然分為左圖和右圖，不過這兩張圖是在同一個網頁中，
觸控移動裝置上下捲動網頁，可以看到景泰藍小鬧鐘(透白色)商品介紹與規格說 明(左圖)，還有基金商品所衍伸自清乾隆粉彩開光花鳥雙連瓶的文物典藏圖片與 說明(右圖)。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
95
圖 4-22：移動設備程式畫面 1 資料來源：本研究整理
圖 4-23：基金商品與典藏說明 資料來源：本研究整理 掃描標籤
A
B C D
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
96
圖 4-23 右圖除了有清乾隆粉彩開光花鳥雙連瓶的文物典藏圖片與說明之外，
在典藏說明的下方有清乾隆粉彩開光花鳥雙連瓶文物的相關數位資源，點擊這些 按鈕分別可以開啟相對應的數位資源網頁(典藏精選陶瓷、搏泥幻化-中國歷代陶 瓷，和明清琺瑯工藝)如圖 4-24 所示。
圖 4-24：連接相關數位資源 資料來源：本研究整理
典藏精選 陶瓷 搏泥幻化-中國歷代陶瓷 明清琺瑯工藝
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
97
程式使用者介面改變後會有三個按鈕，分別點擊會進入不同畫面如圖 4-25 所示，分別是購買商品、活動清單，和程式原始畫面(點離開按鈕後的畫面)。
圖 4-25：移動設備程式畫面 2 資料來源：本研究整理
若使用者不點擊離開按鈕，程式每十秒會向後端伺服器要活動清單資料(如 圖 4-26 所示)，若活動清單資料有更新，會在活動按鈕上的括號中顯示未讀訊息 的數量。
購買商品 活動 離開
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
98
圖 4-26：程式請求活動清單 資料來源：本研究整理
點擊購買商品按鈕後畫面如圖 4-27 左圖所示，程式等待使用者掃描基金商 品的標籤；掃描基金商品標籤後畫面如右圖所示，會將基金商品的名稱列在清單 之中，最後使用者點擊購買商品按鈕送出購買資訊。
‧ 國
立 政 治 大 學
‧
Na tiona
l Ch engchi University
99
圖 4-27：購買商品畫面 資料來源：本研究整理
使用者點擊活動按鈕，進入活動清單畫面，這個畫面會將系統推播的活動列 出來供使用者查閱，圖 4-28 顯示為建議使用者再去掃描景泰藍小鬧鐘(薄水色)
使用者點擊活動按鈕，進入活動清單畫面，這個畫面會將系統推播的活動列 出來供使用者查閱，圖 4-28 顯示為建議使用者再去掃描景泰藍小鬧鐘(薄水色)