iBooks 端架構流程圖

先來談談我們的 iBooks 端系統運作流程，我們希望在一台機器當中我們可 以有兩本書，一本給輔導個案使用，一本給輔導社工使用。

輔導個案所使用的 iBooks 電子書，在無網路的狀況下，架構是這樣的：

圖 4.1 iBooks 端架構流程圖

我們希望輔導個案使用此系統可以很簡單，進入書本，瀏覽一下書本裡關於 此問卷的注意事項，開始做問卷，做完問卷後，widget 就會將使用者的答案存入 書本裡，正確來說，存入 localStorage 裡。

這裡要解開我們的第一個好奇，widget 之間能不能互相存取資料呢？如果我 們能夠將資料存進閱讀裝置的某個地方，也能夠從閱讀裝置中讀取這些資料，我 們就可以達到 widget 間的互相存取，所以我們要找到方法來做到這些事。

經過測試我們選用的方法是使用 localStorage 的技術來達到這個存取的效 果，一般 localStorage 的 javascript API 可以讓我們在瀏覽網頁的時候，將 一些資料儲存在 client 端，至於要怎麼儲存，儲存在哪裡，就交由瀏覽器來實 作。在 iBooks 當中的 widget 是支援 HTML5 的各樣標籤的，經過測試，各樣新穎 的與 HTML5 相關的 API 也可以使用，在此研究當中也證實了 localStorage 的可 使用，所以我們可以將使用者所回答的問卷答案儲存在 localStorage 當中，並 且儲存起來的資料，也可以讓別的 widget 來讀取使用。

在 widget 當中，localStorage 就像是一個共享空間，在 iBooks 電子書中任 何地方的 widget 都可以來存取這個空間的資料，我們可以用一個突來展示 widget 跟 localStorage 的關係：

圖 4.2 widget 與 localStorage 關係圖

localStorage 就像是一個資料池（data pool），在同一台機器上，可以讓不同的 widget 來讀取同一個區塊得資料。

所以這邊解開我們的第二個好奇，在 A 書中存入或產生的變數值，在 B 書中 經過測試的確是能夠讀取的，因為他們的 localStorage 是共通的，但這樣就要 小心，若今天有幾本不同作者寫的電子書，他們書裡的 widget 不小心，或根本 不知道，就用了相同變數名稱的 localStorage，就很有可能發生資料被覆蓋的問 題。

localStorage 的使用很容易，假如我們要儲存一筆資料，變數名稱叫做 name，

而值為 Tom 的話，我們可以這樣寫：

localStorage.name = ‘Tom’;

要讀取這資料也很容易，使用下面的方式讀取：

var name = localStorage.name;

但要注意的是，對於 localStorage 的型別，在 widget 當中常常會被辨認錯 誤，如果你今天期待 localStorage.age 這個值是個整數（Integer），當你讀取 它來使用的時候很有可能會被剖析為非整數的型別，而造成程式的錯誤，所以建 議，在讀取出任何 localStorage 的值之後，都要將它們轉型比較好，例如你需 要的是整數，就如下方寫法：

var age = parseInt(localStorage.age);

這樣，會是比較保險的辦法。

那麼，當我們今天處於可以使用網路的環境，我們當然希望這個系統可以好 好的利用網路，而不只是在本地端的資料處理與存取，因此我們構想了有網路環 境的架構，圖 4.1 表現出了此架構，而這個部分就屬於線上版本的範疇了，我們 在 4.3 當中，會繼續談談線上版本的部份。

讓我們現在的焦點繼續放在無網路的環境，在輔導社工所使用的 iBooks 電 子書，我們的架構如下：

圖 4.3 輔導社工專用 iBooks 電子書

也是很簡單直覺的概念，在輔導個案使用完輔導個案專用的 iBooks 電子書後，

輔導社工就可以從同一台機器上的輔導社工專用 iBooks 電子書來查看分析出來 的結果圖，並且給予輔導策略。

結果圖如圖 3.2 所見，結果圖與問卷題目的關係是這樣：每一個題目選擇”

非常不需要”得 1 分，”不需要”得 2 分，”需要”得 3 分，”非常需要”得 4 分，對每一個次級因素計算平均得分，若是 1.5 - 2.5 之間，結果圖相對應的區 塊呈現綠色，若是在 2.5 – 3.5 之間，呈現黃色，若是在 3.5 – 4 分之間呈現

紅色。如下圖表示：

圖 4.4 結果圖部分區塊

所以在輔導社工專用的 iBooks 電子書中，會有一個 widget 來負責處理分析 問卷答案，並計算產生結果的的工作。

所以我們來概略的表示一下，這兩本書的關係：

圖 4.5 兩本書架構