第四章 系統架構與實作
本章我們從實作面來看第三章提過的 VXPB,VTG,以及語音行事曆等三個 系統，探討其系統架構與軟體環境。第一節先對 VXPB 的系統作介紹，第二節 再針對 VTG 系統詳加描述，第三節則是介紹語音行事曆系統流程。
4.1 VXPB 系統流程架構
4-1.1 VXPB 系統架構
從 UML 的「使用案例觀點」來看，VXPB 系統的使用者有兩個，一個是
「網站設計者」，一個是「語音平台」。網站設計者可以製作語音專案和決定是 否要包裝檔案，製作語音專案包括製作對話目錄與對話節點等；而另外一個使 用者，語音平台，則是可以使用 VXPB 包裝好的檔案，這些語音網頁檔案跟語 音平台互相配合，就可以讓電話使用者打電話到語音網站了。圖 4-1 的使用案 例圖就是描述了上述的情景。
圖 4-1 VXPB 使用案例圖
在 VXPB 系統的內部結構中，有七個類別在相互合作，這七個類別分別 是 Page，Node，Leaf，Tree，ProjectManager， FileProcessor，VxmlEditor 等等。
以下我們將分別介紹每個類別：
1. Page 類別：
Page 類別在意義上是代表一個語音網頁的頁面，所以有很多變數來記載 這個語音網頁頁面的資訊，包括：
¾ PageName：記錄這個語音網頁在語音網站樹狀結構中的顯示名稱。
¾ Level：記錄這個語音網站在語音網站樹狀結構中的哪一層。
¾ Count：記錄這個語音網站在語音網站樹狀結構中所在那一層的第幾個 節點。
¾ All_Info：記錄這個語音網頁的歡迎訊息、提示訊息、選項內容、辨識
¾ PrjName：記錄這個語音網頁所隸屬的語音網站專案名稱)等。
Page 類別並沒有自己的函式，它的動作主要是靠繼承自 Page 類別的 Node 類別和 Leaf 類別來完成。
2. Node 類別：
Node 類別繼承自 Page 類別，所以屬於 Page 的一種，就意義上來說，Page 類別代表的是一個語音網頁的頁面，而 Node 類別則是語音網頁頁面的一種。
Node 類別代表的是一個語音網站樹狀結構中的「對話目錄」，內容包括了有關 於對話目錄的資訊與製作。由於 Node 類別繼承自 Page 類別，所以 Node 類別 也擁有 Page 類別的五個變數包括 PageName，Level，Count，All_Info，PrjName 等，除此之外，Node 類別還有自己的函式：
¾ ComposeData( )：這個函式的功能就是參考此類別的五個變數的內容，
將相關的資訊組合成一個「目錄頁面 XML 文件」。
3. Leaf 類別：
Leaf 類別和 Node 類別一樣，繼承自 Page 類別，所以也是屬於 Page 的一 種，就意義上來說，Page 類別代表的是一個語音網頁的頁面，而 Leaf 類別則 是語音網頁頁面的一種。Leaf 類別代表的是一個語音網站樹狀結構中的「對話 節點」，內容包括了有關於對話節點的資訊與製作。由於 Leaf 類別繼承自 Page 類別，所以 Leaf 類別也擁有 Page 類別的五個變數包括 PageName，Level，
Count，All_Info，PrjName 等，除此之外，Leaf 類別還有自己的函式：
¾ ProcessTable( )：這個函式的功能是呼叫語音產生器「VTG」，並要求讀 入一個 HTML 網頁表格檔案，然後生成一個對話節點的 VoiceXML 檔 案。
4. Tree 類別：
Tree 類別在 VXPB 中，代表的是語音網站裡的樹狀結構，所以 Tree 類別 必須記錄語音網站樹狀結構的相關資訊，並且管理這棵「語音網站結構樹」。 Tree 類別的變數有一個：
¾ PrjName：用來記錄這棵語音網站結構樹所隸屬的語音網站專案名稱。
Tree 類別管理語音網站結構樹的方式，就是對這個語音網頁專案的「樹狀 網站 XML 文件」做控管的動作。這些管理的動作就是 Tree 類別的函式，包括：
¾ MakeTree( )：負責為一個新增的語音網站專案建立一棵新的語音網站結
構樹，也就是新增一個樹狀網站 XML 文件的動作。
¾ AddNode( )：是將一個對話目錄，也就是一個 Node 類別新增到語音網
站結構樹裡面的動作。
¾ NewLeaf( )則是將一個對話節點，也就是一個 Leaf 類別新增到語音網站 結構樹裡。
5. ProjectManager 類別：
ProjectManager 類別在 VXPB 中，是扮演著指揮者的主程式角色，它的變 數有兩個：
¾ Path：記錄這個語音網站專案的檔案路徑。
¾ PrjName：記錄這個語音網頁專案的名稱。
而 ProjectManager 類別有三個函式，分別是
¾ LoadPrj( )，負責載入一個語音網站專案。
¾ NewPrj( )，負責新增一個語音網站專案。
¾ Wrap( )，當使用者將語音網站編輯完畢後，將這個語音網站的所有檔案
打包，但是打包的動作牽涉複雜，還需要 FileProcessor 類別與 VxmlEditor 類別來幫忙才行。
6. FileProcessor 類別：
FileProcessor 類別的角色是 VXPB 裡的檔案管理員，負責管理語音網站專 案裡的所有檔案，主要是和 ProjectManager 類別互相配合，當網站設計者要打 包語音網站的所有檔案時，會呼叫 FileProcessor 類別來幫忙。FileProcessor 類 別有兩個變數：
¾ Path：記錄語音網站專案的檔案路徑。
¾ PrjName：記錄這個語音網頁專案的名稱。
本類別還有兩個函式，分別是
¾ FindFiles( )：功能是讀入「樹狀網站 XML 文件」，找出這棵語音網站結 構樹中每個對話目錄的「目錄頁面 XML 文件」。
¾ GetInfo( )：功能是接續 FindFiles( )，將 FindFiles( )找到的所有目錄頁面
XML 文件的資訊從 XML 文件中抽離出來，然後呼叫 VxmlEditor 類別 來完成生成 VoiceXML 語音網頁的動作。
7. VxmlEditor 類別：
VxmlEditor 類別的功能主要是生成一個 VoiceXML 語音網頁檔案，本類別 有一個變數：
¾ All_Info：記錄由 FileProcessor 類別的 GetInfo 函式傳遞過來的關於一個 語音網頁的所有訊息。
VxmlEditor 類別的函式有兩個：
¾ GenGrammar( )：負責生成 VoiceXML 語音網頁文法敘述。
¾ ToVxml( )：是將 All_Info 變數與 GenGrammar 所產生的文法敘述組合，
生成一個 VoiceXML 語音檔案的函式。
圖 4-2 是 VXPB 系統的類別圖，在這個類別圖裡，我們可以看到 Node 和 Leaf 兩個類別都繼承 Page 類別，多個 Page 會對應到同一個 Tree 類別，而一個 ProjectManager 類別可以管理零到多個 Tree 類別，且 ProjectManager 類別與 FileProcessor 類別有關係，FileProcessor 類別與 VxmlEditor 類別有關係。就是 這些類別的相互合作，讓 VXPB 系統可以順利運行。
Leaf ProcessTable()
VxmlEditor AllInfo
GenGram mar() ToVxml()
FileProcessor Path PrjName FindFiles() GetInfo() Page
PageName Level Count All_Info PrjName
ProjectManager Path
PrjName LoadPrj() NewPrj() Wrap()
Tree PrjName
AddNode() MakeTree() NewLeaf() 1
1..*
1 1..*
1
0..*
1
0..*
Node ComposeData()
圖 4-2 VXPB 類別圖
VXPB 系統裡，有四個主要的動作，分別是新增專案、新增對話目錄、新 增對話節點、包裝檔案。以下介紹這四個主要動作的流程。
1. 新增專案
當網站設計者要新增一個專案時，ProjectManager 類別會產生一個對話目 錄，並且為這個對話目錄生成一個「目錄頁面 XML 文件」，接下來，
ProjectManager 類別會新增一棵語音網站結構樹，並且把剛剛生成的那個對話 目錄當成這棵樹的根節點，將這棵樹的「樹狀網站 XML 文件」產生出來。如 圖 4-3 的 VXPB「新增專案」循序圖所示，ProjectManager 類別會先產生一個 Node 實體物件，並且呼叫 Node 類別的 ComposeData 函式，將目錄頁面 XML 文件產生出來，接著 ProjectManager 類別再產生一個 Tree 實體物件，呼叫 Tree 類別的 MakeTree 函式將樹狀網站 XML 文件建構起來，並且以剛剛產生的 Node 實體物件當成這個 Tree 物件的根節點。
: ProjectManager : Node : Tree
ComposeData( )
<<create>>
<<create>>
MakeTree( )
圖 4-3 VXPB「新增專案」循序圖
2. 新增對話目錄
當網站設計者要新增一個對話目錄時，ProjectManager 類別會產生一個對
話目錄，並且為這個對話目錄生成一個「目錄頁面 XML 文件」，接下來，
ProjectManager 類別會將這一個對話目錄放到這個語音網站專案的語音網站結 構樹中。如圖 4-4 的 VXPB「新增對話目錄」循序圖所示，ProjectManager 類 別會先產生一個 Node 實體物件，並且呼叫 Node 類別的 ComposeData 函式，
將目錄頁面 XML 文件產生出來，接著 ProjectManager 會呼叫 Tree 類別的 AddNode 函式將這個新產生的 Node 實體物件加到同專案之 Tree 物件中。
: ProjectManager : Node : Tree
<<create>>
ComposeData( )
AddNode( )
圖 4-4 VXPB「新增對話目錄」循序圖
3. 新增對話節點
當網站設計者要新增一個對話節點時，ProjectManager 類別會產生一個對 話節點，並且將這個對話節點的內容生成一個 VoiceXML 語音網頁檔，接下來，
ProjectManager 類別會將這一個對話節點放到這個語音網站專案的語音網站結 構樹中。如圖 4-5 的 VXPB「新增對話節點」循序圖所示，ProjectManager 類 別會先產生一個 Leaf 實體物件，並且呼叫 Leaf 類別的 ProcessTable 函式，將 這個對話節點的 VoiceXML 語音網頁檔產生出來，接著 ProjectManager 會呼叫 Tree 類別的 NewLeaf 函式將這個新產生的 Leaf 實體物件加到同專案之 Tree 物
件中。
: ProjectManager : Leaf : Tree
<<create>>
ProcessTable( )
NewLeaf( )
圖 4-5 VXPB「新增對話節點」循序圖
4. 包裝檔案
當網站設計者已經編輯完一個語音網站，想要包裝檔案時，ProjectManager 類別會先找出所有的對話目錄檔案，並且將這些對話目錄的內容生成一個個的 VoiceXML 語音網頁檔，然後，再將這個專案的所有 VoiceXML 語音網頁檔收 集起來，讓網站設計者下載。如圖 4-6 的 VXPB「包裝檔案」循序圖所示，
ProjectManager 類別會呼叫 FilePeocessor 類別的 FindFiles 函式，將這個語音網 站專案的所有對話目錄找到，FilePeocessor 類別接著會呼叫本身的 GetInfo 函 式將這些對話目錄的內容從目錄頁面 XML 文件抓取出來，然後將這些資訊丟 給 VxmlEditor 類別的 ToVxml 函式去生成 VoiceXML 語音網頁檔案，在 ToVxml 函式運作的途中，會呼叫同一類別的 GenGrammae 函式來生成 VoiceXML 頁面 中的文法敘述，如此便可順利的產生所有的 VoiceXML 語音檔案，讓網站設計 者可以下載回去並放在語音平台中使用。
: ProjectManager : FileProcessor : VxmlEditor
FindFiles( )
GetInfo( )
ToVxml( )
GenGrammar( )
圖 4-6 VXPB「包裝檔案」循序圖
4.1.2 VXPB 軟體環境介紹
我們將 VXPB 系統各操作介面的版面設計分為三個區域，分別稱為：左 方頁面、上方頁面、主要頁面，如圖 4-7 所示。
圖 4-7 VXPB 軟體頁面示意圖
VXPB 系統的軟體起始畫面如圖 4-8 所示，剛開始，我們要新增一個專案，
所以在上方頁面的畫面上點選『New Project』連結，然後在主要頁面上點選『開 始』，進入如圖 4-9 的新增專案畫面。
左 方 頁 面
上方頁面 主要頁面
圖 4-8 VXPB 系統首頁畫面
在圖 4-9 的新增專案畫面中，是新增專案的第一個步驟與第二個步驟，需 填入頁面名稱、頁面選項數目、辨識詞數目，以及當使用者輸入的語音無法被 ASR 辨識出來時的提示訊息。這裡的頁面名稱代表的就是新增出來的這個專案 的名稱，在這個範例中，我們填入的專案名稱是「BookStore」，選項數目是 5，
辨識詞數目是 2。這些資訊填妥之後，按下『下一步』。
接下來可以看到圖 4-10 的畫面，在這第三個步驟中，我們要填入的資料 有：歡迎訊息、選項內容。由於在上一個步驟中，我們填入的選項數目是 5，
所以在這一步當中，會出現 5 個空的選項空格。在這個範例中我們填入的歡迎 訊息為：「歡迎光臨 OKOK 網路書店」，選項內容有：「查詢新書」、「查詢暢銷 書」、「查詢特價書」、「查詢推薦書」、「查詢書籍排行榜」等五個。資訊填妥之 後，按下『下一步』。
開始
New Project
圖 4-9 VXPB 系統『新增專案』畫面 1
圖 4-10 VXPB 系統『新增專案』畫面 2
下一步
※頁面名稱
※選項數目
※辨識詞數目
※語句無法正確辨 識之提示訊息
下一步
※歡迎訊息
※選項有哪些 的提示訊息
現在來到新增專案的第四個步驟了。如圖 4-11 所示，這個步驟要填入每 一個選項的每一個辨識詞，由於在第一個步驟時，我們決定了這個 BookStore 專案每個選項有 2 種辨識詞，所以在這個畫面中，可以看到每個選項都有 2 個 空格可以填入選項辨識詞內容。資訊填妥之後，再按下『下一步』。
圖 4-11 VXPB 系統『新增專案』畫面 3
然後，這個專案就已經新增完成了。重新整理左方頁面就可以看到這個語 音網站的樹狀結構，如圖 4-12 所示，這棵結構樹的根節點即為專案名稱
「BookStore」，根節點下有五個子節點，這五個子節點就是剛才新增專案時所 編輯的五個選項。然後點選根節點，在主要頁面上就可以看到這個根節點的「目 錄頁面 XML 文件」。現在，專案已經新增成功了，接下來，可以繼續編輯這一 個語音網站的其他細節部分了。
※每個選項有 哪些辨識詞
下一步
圖 4-12 VXPB 系統『新增專案』完成畫面
接著，我們來新增一個對話目錄，如圖 4-13 所示，以滑鼠點選左方頁面 中「查詢書籍排行榜」，然後在主要頁面中，我們可以看到系統告訴網站設計 者這個節點目前並沒有任何內容，要將這個節點編輯成對話目錄或者是對話節 點，在此我們選擇「新增對話目錄」，然後按下確定按鈕。
然後會看到如圖 4-14 的畫面，在這個畫面裡，我們要編輯對話目錄的第 一個步驟與第二個步驟。我們可以看到畫面上顯示這個對話目錄的頁面名稱，
就是剛剛在樹狀結構中點選的「查詢書籍排行榜」。接著要填入所需的資訊，
在這個範例中，我們填入頁面選項數目為 2、辨識詞數目也是 2，然後網站設 計者亦可修改提示訊息，修改完後按『下一步』。
語音網站之 樹狀結構
圖 4-13 VXPB 系統選擇『新增對話目錄』
圖 4-14 VXPB 系統『新增對話目錄』畫面 1
接下來，是新增對話目錄的第三個步驟，要填入歡迎訊息與選項內容。如 圖 4-15，填入的歡迎訊息是：歡迎查詢書籍排行榜。選項有：查詢文學類、查
按下某一 個節點
選擇新增類別
確定
下一步
※選項數目
※辨識詞數目
※語句無法正確辨 識之提示訊息
圖 4-15 VXPB 系統『新增對話目錄』畫面 2
然後到了新增對話目錄的第四個步驟，如圖 4-16 所示，要填入每個選項 所能容忍的辨識詞內容，填好後再按下『下一步』。
※歡迎訊息
※提示選項有 哪些的訊息
※每個選項有 哪些辨識詞
下一步
下一步
現在，新增對話目錄的動作就完成了，按下左方頁面的重新整理連結，即 可看到語音網站的樹狀結構有所改變，原本的「查詢書籍排行榜」節點，變成 了一個「對話目錄」，這個節點下多了兩個子節點：查詢文學類與查詢非文學 類。現在按下「查詢書籍排行榜」節點，在主要頁面會出現這個節點的「目錄 頁面 XML 文件」，如圖 4-17 所示。
圖 4-17 VXPB 系統『新增對話目錄』完成畫面
接下來，我們來新增一個對話節點。在樹狀結構的「查詢非文學類」節點 上按一下，在主要頁面就會出現系統的詢問訊息，詢問網站設計者要將這個節 點編輯成哪一種節點。在此我們選擇「新增對話節點」，然後按下『確定』按 鈕。
新的對話目錄
重新整理
圖 4-18 VXPB 系統選擇『新增對話節點』
接下來，就開始製作語音節點了，如圖 4-19 所示，輸入這個語音節點所 要使用的本地端網頁表格位址，並且填入這個表格的所屬種類，填完後按下『確 定』按鈕。
選擇新增類別
確定
確定
表格種類 表格位址
接著會出現一個畫面如圖 4-20 所示，告訴網站設計者這個表格有哪些查 詢方式，並讓網站設計者填入必須的提示訊息，填完後按下『確定』按鈕。這 樣，就完成了新增對話節點的動作了，新增成功後會出現圖 4-21 的畫面表示新 增成功。
圖 4-20 VXPB 系統『新增對話節點』畫面 2
編輯提示訊息
成功產生對話 節點
確定
現在按下這個對話節點「查詢非文學類」，在主要頁面會出現這個對話節 點的 VoiceXML 檔案內容，如圖 4-22 所示，可以看到這個對話節點的內容。
圖 4-22 VXPB 系統『新增對話節點』完成畫面 2
當我們一次編輯不完一個語音網站專案時，可以下次再繼續編輯。當要繼 續編輯的時候，只要按下上方頁面的「Load Project」，如圖 4-23 所示，在主要 頁面上，就會列出目前有哪些專案，網站設計者可以自行點選一個專案，然後 按下左方頁面的重新整理，即可在左方頁面看到這個選取的專案的語音網站結 構樹(如圖 4-24 所示)，然後，就可以繼續做編輯語音網站的動作了。
選取對話節點
圖 4-23 VXPB 系統『載入專案』畫面
圖 4-24 VXPB 系統『載入專案』成功畫面
當網站設計者編輯完一個語音網站時，可以選擇左方頁面的『編輯結束』
連結，VXPB 系統就會將這個語音網站打包壓縮成一個 ZIP 檔案，讓網站設計 者下載。畫面如圖 4-25 所示，當網站設計者按下『編輯結束』後，主要頁面上 會顯示「已成功生成 vxml files」的訊息，這時按一下「zip 檔下載」的連結，
即可下載檔案。
選擇 BookStore 專案
載入專案成功
圖 4-25 VXPB 結束編輯語音網站畫面
4.2 VTG 系統流程架構
4-2.1 VTG 系統架構
從 UML 的「使用案例觀點」來看，VTG 系統的使用者有兩個，一個是「網 站設計者」，一個是「語音平台」。網站設計者可以上傳網頁表格檔、分析表格、
將表格轉換成 VoiceXML 格式，而另外一個使用者，語音平台，則是可以使用 VTG 系統生成的 VoiceXML 語音網頁表格檔案，這些語音網頁表格檔案跟語音 平台互相配合，就可以讓電話使用者打電話到語音網站了。圖 4-26 的使用案例 圖就是描述了上述的情景。
按下編輯結束
語音平台 分析表格
轉換成vxml格式 上傳網頁表格檔 網頁設計者
圖 4-26 VTG 使用案例圖
在 VTG 系統的內部結構中，有三個類別在相互合作，這三個類別分別是 MainClass，ParseTable，GenVxml 等等。以下我們將分別介紹每個類別：
1. MainClass 類別：
MainClass 類別在 VTG 中，是扮演著指揮者的主程式角色，另外兩個類別 ParseTable 與 GenVxml，都要聽令於 MainClass。它的變數有一個：
¾ FileName：用來記錄這個語音網頁的檔名。
而 MainClass 類別的函式也只有一個：
¾ FileUpload( )：負責執掌上傳 HTML 表格網頁檔案的動作。
2. ParseTable 類別：
ParseTable 類別在意義上，是處理表格網頁的第一步：分析表格。一個 HTML 網頁表格根據使用者填入的類別經過 ParseTable 類別的分析後，就會生 成該種類型表格的「表格索引 XML 文件」與「閱讀次序 XML 文件」，這兩個 文件對於之後產生 VoiceXML 格式的網頁表格，可是非常重要的關鍵。
ParseTable 類別的變數有：
¾ FileName：用來記錄這個語音網頁的檔名。
¾ Type：用來記錄這個表格是屬於六大類型中，哪一種類型的網頁表格。
¾ C_Layer：用來記錄這個表格的行標題有幾列。
¾ R_Layer：用來記錄這個表格的列標題有幾行。
而 ParseTable 類別的函式有兩個，分別是
¾ Write_Index( )：負責生成「表格索引 XML 文件」。
¾ Write_TitleSeq( )：負責生成「閱讀次序 XML 文件」。
3. GenVxml 類別：
GenVxml 類別在 VTG 系統裡的主要功能是根據「表格索引 XML 文件」
與「閱讀次序 XML 文件」，將 VoiceXML 格式的網頁表格產生出來。此類別的 變數有兩個：
¾ C_Layer：用來記錄這個表格的行標題有幾列。
¾ R_Layer：用來記錄這個表格的列標題有幾行。
GenVxml 類別可以根據「表格索引 XML 文件」與「閱讀次序 XML 文件」， 將六種 HTML 網頁表格轉成 VoiceXML 格式，所需的動作甚多，所以它的函式 很多，總共有八個：
¾ GetData( )：得到「表格索引 XML 文件」裡的資訊。
¾ GetCol( )：得到「閱讀次序 XML 文件」中，「唸某一行」時候的內容。
¾ GetRow( )：得到「閱讀次序 XML 文件」中，「唸某一列」時候的內容。
¾ GettheText( )：輸入一個「儲存格座標名稱」，會輸出此座標名稱對應的
儲存格內容
¾ GetTitle( )：得到「閱讀次序 XML 文件」中所有的標題。
¾ GetAll( )：得到「閱讀次序 XML 文件」中，「唸全部資訊」時候的內容。
¾ GetAns( )：根據表格屬於哪種類型，彙整其所需之閱讀模式的資訊，在
這個函式中，會視需要呼叫前面提過之 GetCol、GetRow、GetTitle、GetAll 等函式。
¾ OutputV( )：根據本類別裡的所有資訊，組成一個 VoiceXML 網頁表格 檔案。
圖 4-27 是 VTG 系統的類別圖，在這個類別圖裡，我們可以看到這三個類 別息息相關，MainClass 類別會指揮 ParseTable 類別與 GenVxml 類別行動，並 且 ParseTable 類別與 GenVxml 類別之間也有合作的關係。就是靠這些類別的相 互合作，讓 VTG 系統可以順利的將 HTML 網頁表格轉換成 VoiceXML 格式來 讓語音平台使用。
ParseTable FileName Type C_Layer R_Layer
Write_Index() Write_TitleSeq()
MainClass FileName FileUpload()
GenVxml C_Layer R_Layer GetData() GetCol() GetRow() GettheText() GetTitle() GetAll() GetAns() OutputV()
關於 HTML 網頁表格轉換成 VoiceXML 格式的流程，則如圖 4-28 的 VTG 的循序圖所示。MainClass 類別會呼叫本身的 FileUpload 函式，將使用者想要 轉換成語音網頁格式的網頁表格檔上傳至 VTG 系統，然後 MainClass 類別呼叫 ParseTable 類別的 Write_Index 函式，將此 HTML 網頁表格的「表格索引 XML 文件」 產生出來，然後 ParseTable 類別接收到 MainClass 的指示動起來後，會 呼叫本身的 Write_titleSeq 函式，產生此網頁表格之「閱讀次序 XML 文件」，
接著 MainClass 再度下達命令，呼叫 GenVxml 類別之 GetCol、GetRow、
GetTitle、GetAll 等函式，要 GenVxml 要生成 HTML 網頁表格之 VoiceXML 格 式，所以 GenVxml 類別呼叫自己內部之 GetData、GettheText、GetAns 來開始 做轉換成 VoiceXML 格式的前置工作，後來再呼叫 OutputV 函式將 VoiceXML 格式的網頁表格檔案產生出來。
: MainClass : ParseTable : GenVxml
FileUpload( )
Write_Index( )
Write_TitleSeq( )
GetCol( ) , GetRow( ),
GetTitle( ) , GetAll( ) GetData( ), GettheText( ) , GetAns( )
OutputV( )
圖 4-28 VTG 循序圖
4.2.2 VTG 軟體環境介紹
VTG 系統的軟體起始畫面如圖 4-29 所示。現在我們要將一個 HTML 表格 網頁轉換成 VoiceXML 格式，在第一個步驟中，要填入 HTML 表格檔案本地端 位址，並且選取這個表格是屬於六大類型中的哪一個類型，如圖 4-30 的範例所 示是選取「行列型」表格。若表格是屬於跨行型、跨列型、跨行跨列型這三個 類型時，還需填入標題的層數，這是因為表格標題有跨行或跨列的情形，標題 就不會只有一層，也就是不會只有一行或一列。當步驟 1 中的資訊填妥後，按 下『確定』按鈕。
圖 4-29 VTG 系統起始畫面
圖 4-30 VTG 系統步驟 1 畫面
表格位址
表格類型
確定
確定
填入提示訊息
接下來來到步驟 2，如圖 4-31 所示，在這裡系統會告訴網頁設計者在步驟 1 選取的表格類型表格會有哪些查詢方式，並要求填入當系統無法辨識電話使 用者輸入的語音時，要有什麼提示訊息。然後可以按下『確定』按鈕。
然後，VTG 系統經過內部運作，就可以將原本的 HTML 格式的網頁表格 轉換成一個 VoiceXML 檔案了。這個由 VTG 系統生成的 VoiceXML 檔案，可 以讓網頁設計者下載回去，並放置在語音平台中，這樣就可以給電話使用者使 用了。VTG 系統運作完成的畫面如圖 4-32 所示，但若是表格類型為「行列型」
表格的，完成畫面則如圖 4-33 所示，這兩個畫面有些不同，是因為行列型的表 格比別類型的表格多出一種特殊的查詢方式，所以要讓網頁設計者下載的檔案 也比較多，共有三個檔案。而 VTG 系統所生成的 VoiceXML 檔案，如圖 4-34 所示。
圖 4-32 VTG 系統完成畫面 1 圖 4-33 VTG 系統完成畫面 2
生成檔案下載 生成檔案下載
圖 4-34 VTG 系統生成之語音網頁
4.3 資料型表格「語音行事曆」系統流程架構
4-3.1 語音行事曆系統架構
從 UML 的「使用案例觀點」來看，語音行事曆系統的使用者有兩個，一 個是「User」語音行事曆的使用者，一個是「行事曆系統管理者」。語音行事 曆使用者可以查詢行事曆、新增行事曆，而另外一個使用者，行事曆系統管理 者，則是可以管理行事曆裡面可以使用的行事項目，這個動作很重要，因為語 音行事曆使用者要新增行事曆時，可以新增的項目有哪些就是由行事曆系統管 理者所決定。圖 4-35 的使用案例圖就是描述了上述的情景。
查詢行事曆
行事曆系統管 理者
User 新增行事曆 行事項目
<<include>>
圖 4-35 語音行事曆使用案例圖
在語音行事曆系統的內部結構中，有六個類別在相互合作，這六個類別分 別是 JspPage，Modify，VxmlManager，Query，Insert，CreateMonth 等等。以 下我們將分別介紹每個類別：
1. JspPage 類別：
JspPage 類別的主要功能是提供給行事曆系統管理者一個窗口，讓他可以 看到目前行事曆可以讓使用者新增的項目有哪些，並且讓行事曆系統管理者可 以方便的修改行事曆的項目，但是，真正去修改「行事項目 XML 文件」並不 是此類別的工作，而是交給下一個要介紹的類別 Modify 來運作。JspPage 類別 擁有一個變數：
¾ items：儲存目前的行事項目有哪些。
JspPage 類別也擁有一個函式：
¾ GetTiemInfo：功能是從「行事項目 XML 文件」中，將目前的行事項目 擷取出來，存在 items 變數裡。
Modify 類別的功能是接續上一個類別 JspPage，將 JspPage 中，行事曆系 統管理者所修改過後的所有行事項目，存回「行事項目 XML 文件」檔案裡，
然後會呼叫 VxmlManager 類別裡的函式來更新語音行事曆的語音首頁內，有關 於行事項目的內容。Modify 類別有一個變數：
¾ items：儲存目前的行事項目有哪些。
Modify 類別有一個函式：
¾ ItemRenew( )：這個函式可以更新「行事項目 XML 文件」裡的行事項 目，使之保持行事曆系統管理者修改過的最新狀態。
3. VxmlManager 類別：
VxmlManager 類別管理所有與語音行事曆語音首頁內容有關係的動作，例 如更新語音首頁的內容、接收到語音首頁的要求而呼叫 Query 類別、Insert 類 別動起來等等，此類別的變數有四個：
¾ yyyy：記錄年的值，是以西元為單位。
¾ mm：記錄月份的值。
¾ dd：記錄日期的值。
¾ event：記錄要新增的行事項目。
VxmlManager 類別的函式只有一個：
¾ VxmlRenew( )：此函式用於行事曆系統管理者修改行事項目後，由 Modify 類別通知本類別需修改行事曆語音首頁的內容時，此函式就會 針對語音首頁作必要的修改。
當行事曆使用者要查詢行事曆內容時，VxmlManager 類別就會通知 Query 類別來執行查詢行事曆的動作。本類別的變數有三個：
¾ yyyy：記錄要查詢的年的值，是以西元為單位。
¾ mm：記錄要查詢的月份的值。
¾ dd：記錄要查詢的日期的值。
本類別的函式有兩個：
¾ GetEvent( )：傳入年月日後，本函式會去查對應的「行事曆 XML 文件」
得到當天的所有行事項目。
¾ GetDay( )：傳入年月日後，本函式會計算出這一天是星期幾。
5. Insert 類別：
當行事曆使用者要新增行事曆內容時，VxmlManager 類別就會通知 Insert 類別來執行新增行事曆的動作。本類別的變數有四個：
¾ yyyy：記錄要新增的年的值，是以西元為單位。
¾ mm：記錄要新增的月份的值。
¾ dd：記錄要新增的日期的值。
¾ event：記錄要新增的事項。
本類別的函式有一個：
¾ CalRenew( )：傳入年月日後，本函式會去更新對應的「行事曆 XML 文 件」，將行事項目放入當天的行事曆中。
6. CreateMonth 類別：
當使用者執行新增行事曆或查詢行事曆的時候，Query 類別或者 Insert 類 別發現系統中並沒有使用者要新增或查詢的「行事曆 XML 文件」存在時，代 表要查詢的這個月份的「行事曆 XML 文件」還沒產生，也就是說這個月還沒 有任何的行事曆內容，這時候，Query 類別或者 Insert 類別就會請 CreateMonth 類別來新增這一個月份的「行事曆 XML 文件」，以供之後使用。CreateMonth 類別的變數有兩個：
¾ yyyy：記錄要新增的年的值，是以西元為單位。
¾ mm：記錄要新增的月份的值。
CreateMonth 類別的函式也是有兩個：
¾ GetActualMaximum( )：傳入西元年與月份，可以得到這個月有幾天。
¾ NewMonth( )：傳入西元年與月份，產生這個年月的「行事曆 XML 文 件」。
圖 4-36 是語音行事曆系統的類別圖，在這個類別圖裡，我們可以看到 JspPage 與 VxmlMnager 兩個類別是語音行事曆系統的兩個發號施令者，JspPage 類別可以呼叫 Modify 類別，一起完成修改行事曆項目的任務，而 VxmlManager 類別，則是可以呼叫 Query 類別與 Insert 類別來完成查詢行事曆項目與新增行 事曆項目的動作。而 Modify 類別也會在要修改行事項目時，告訴 VxmlManager 類別需要更新語音行事曆的語音首頁內容；Query 類別或 Insert 類別在發現所 需的「行事曆 XML 文件」不存在時，會呼叫 CreateMonth 類別來新增該「行 事曆 XML 文件」。
CreateMonth yyyy
mm
getActualMaximum() NewMonth() Query
yyyy mm dd
GetEvent() GetDay()
Insert yyyy mm dd event CalRenew() VxmlManager
yyyy mm dd event
VxmlRenew() JspPage
items GetItemInfo()
Modify items ItemRenew()
圖 4-36 語音行事曆類別圖
語音行事曆系統裡，有三個主要的動作，分別是新增行事曆內容、查詢行 事曆內容、修改行事曆項目。以下介紹這三個主要動作的流程。
1. 新增行事曆內容
當行事曆使用者想要新增行事曆內容時，語音網頁會將使用者的需求告知 VxmlManager 類別，並由 VxmlManager 類別發動 Insert 類別來完成。如圖 4-37
「新增行事曆內容」循序圖所示，VxmlManager 類別會呼叫 Insert 類別的 CalRenew 函式，將要新增的行事項目新增到年月日對應的「行事曆 XML 文件」
中，但是如果目標「行事曆 XML 文件」不存在，那麼 Insert 類別會先呼叫 CreateMonth 類別來新增該年月的空白行事曆 XML 文件，然後在對這個新增出 來的行事曆 XML 文件作新增行事曆的動作。在新增一個空白行事曆 XML 文 件時，CreateMonth 類別會呼叫本身的 GetActualMaximum 來得知該年月的天 數，以便新增一個空白的行事曆 XML 文件。
圖 4-37 「新增行事曆內容」循序圖
2. 查詢行事曆內容
當行事曆使用者想要查詢行事曆內容時，語音網頁會將使用者的需求告知 VxmlManager 類別，並由 VxmlManager 類別發動 Query 類別來完成。如圖 4-38
「查詢行事曆內容」循序圖所示，VxmlManager 類別會呼叫 Query 類別的 GetEvent 函式，在要查詢的年月日對應的「行事曆 XML 文件」中，抽取出該 日的行事曆內容。但是如果目標「行事曆 XML 文件」不存在，那麼 Query 類 別會先呼叫 CreateMonth 類別來新增該年月的空白行事曆 XML 文件，然後在 對這個新增出來的行事曆 XML 文件作查詢行事曆的動作。在新增一個空白行 事曆 XML 文件時，CreateMonth 類別會呼叫本身的 GetActualMaximum 來得知 該年月的天數，以便新增一個空白的行事曆 XML 文件。在 Query 類別查詢到 該年月日的行事曆內容時，會呼叫本身的 GetDay 函式來查得該日是星期幾。
圖 4-38 「查詢行事曆內容」循序圖
3. 修改行事曆項目
當語音行事曆系統管理者要修改行事曆項目時，是透過 JspPage 類別來達成目 的。如圖 4-39「修改行事曆項目」循序圖所示，JspPage 類別會先呼叫本身之 GetItemInfo 函式，告知行事曆系統管理者目前的行事項目有哪些，等行事曆系 統管理者修改好行事項目後，JspPage 類別會呼叫 Modify 類別之 ItemRenew 函 式，將「行事項目 XML 文件」的內容作修改，然後 Modify 函式會呼叫
VxmlManager 類別的 VxmlRenew 函式，針對語音首頁的內容作必要的修改。
圖 4-39 「修改行事曆項目」循序圖
4.3.2 語音行事曆軟體環境介紹
語音行事曆是一種資料型表格，表格內容以 XML 檔案來儲存，是一種很 難單純使用 HTML 就可以呈現出來的表格。在此我們試著使用 XSL 檔案來結 合 XML 檔案，想辦法將語音行事曆的行事曆內容以視覺方式來呈現，結果如 圖 4-40 所示，畫面上呈現出來的是現在這個月的行事曆內容，若要看下一個月 或上一個月，可以按下『下一個月』或者『上一個月』的連結，若按下『上一 個月』，就會看到如圖 4-41 所示，行事曆由六月變成五月了。
圖 4-40 語音行事曆畫面 1
圖 4-41 語音行事曆畫面 2
上一個月 下一個月
語音行事曆還有一個很重要的部分，就是讓語音行事曆系統管理者來管理 行事項目的內容，如圖 4-42 所示，這個畫面裡會顯示出目前每一個選項的事件 內容與其簡稱，管理者可以針對這些內容作修改，修改完後按下『確定送出』
按鈕，語音行事曆系統就會去更新「行事項目 XML 文件」裡的內容，並且更 新語音行事曆的語音首頁內容，如圖 4-43 所示，會更新語音首頁中，行事項目 的文法敘述。
圖 4-42 語音行事曆系統管理者管理畫面
事件 簡稱
確定送出
圖 4-43 修改語音首頁之行事項目
