["建立WebApp"]
# 建立WebApp
ArOZ Online WebApp 與其他系統所使用的程式非常類似。 他是由HTML5, CSS, Javascript所組成。你可以使用你所熟悉的軟件來撰寫WebApp，大部份的HTML IDE皆支援。
以下是部份有用的貼士，或許能幫助到閣下撰寫WebApp
- 使用響應式設計，使其同時適用於桌面和流動裝置。
- 使用 ao_module 包裝函式。若非必要不要直接呼叫其他函式。
- 盡量不要包含其他模組。如有需要請提供圖形使用者介面。
- 不應使用數據庫。如有需要應盡量使用使攜式數據庫，例如SQLite而非MySQL。
### 流動裝置和 UTF-8
ArOZ Online 需要支援所有國家或地區的語言，因此請使用UTF-8編碼格式。
另外，為了令介面可於Android或iOS裝置上可以正確縮放，你需要添加元數據於標頭中。
```
```
*你可以修改 initial-scale 和 maximum-scale 的值以符合你的需求*
### 系統樣式
ArOZ Online 預設CSS是 TocasUI。你可以於```AOR/script/tocas/tocas.css```中找到。
如要引用此css，請輸入以下代碼於``````和``````之間。
```
```
## 其他標頭
現在假設你己完成你的WebApp開發工作。你可以將他整合至ArOZ Online系統。ArOZ Online提供3種類型的介面來存取WebApp。
1. 標準WebView (Grid Mode)
2. 漸進式網絡應用程式 (PWA Mode)
3. 虛擬桌面模式 (VDI Mode)
### 標準WebView
標準WebView是最基本的顯示模式，基本上就和一般瀏覽一樣，並且沒有ArOZ 附加功能。
### 漸進式網絡應用程式
漸進式網絡應用程式可以令到用戶在使用WebApp時獲得和原生程式一樣的體驗。
根據Google的教學，你需要加入一個json檔案至``````和``````之間以支援漸進式網絡應用程式功能。
以下是代碼範例。
* 還請注意iOS 未完整支援漸進式網絡應用程式 *
```
```
```
{
"name": "ArOZ Audio",
"short_name": "AudioA",
"icons": [{
"src": "img/pwa/128.png",
"sizes": "128x128",
"type": "image/png"
},{
"src": "img/pwa/192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "img/pwa/256.png",
"sizes": "256x256",
"type": "image/png"
}, {
"src": "img/pwa/512.png",
"sizes": "512x512",
"type": "image/png"
}],
"start_url": "index.php?mode=pwa",
"display": "standalone",
"scope": "./",
"background_color": "#f7f7f7",
"theme_color": "#4286f4"
}
```
### 虛擬桌面模式
虛擬桌面模式是 ArOZ Online 提供的功能之一。利用人性化的介面設計，使你的生活可於雲基礎上輕鬆完成。要支援虛擬桌面模式，您將需要額外設計才能使其支援 VDI 模式。
*一但不建立有關介面，你的 WebApp 將會於 VDI 模式下使用普通的 iframe 元素啟動*.
#### VDI 模式的程式要求
VDI 模式的要求非常簡單。我們建議開發人員在開發 WebApps 時遵循以下準則，以便更好地支援 VDI模式。
1. 不要重定向至 Grid Menu (同時不應有連結連至 /AOR/index.php)
2. 設計應偏向桌面而不是流動將置 (讓他看上來像是桌面程式)
3. 除非必要，否則不要干擾螢幕上的其他 WebApp。 (如果可以，不要在其他 iframe 上調用函數)
按照上面的準則，你的WebApp就會完成VDI的部份！
#### ao_module 簡介
ao_module 是功能表的應用程式接口。他包含了大部份的功能，如他包含了捷徑，檔案總管，浮動視窗等。
他位於```script/ao_module.js```，你可以用以下代碼引用。
```
```
如果想更改在 VDI 模式啟動的介面，可以使用下列Javscript偵測。
```
if (ao_module_virtualDesktop){
//Launching in VDI mode. Do something.
}else{
//Not launching in VDI mode. Do something else.
}
```
此功能可用於隱藏不適合 VDI 模式的功能表。
前往 "API Wrapper - ao_module" 查看更多。
#### 進階系統 API
您可以通過以下函式呼叫進階系統 API。進階系統 API 包括
- 輸入法 API
- 檔案系統 API
- 預設程式
- AO-Codec (UMFilename 用戶端上轉換)
- 浮動視窗 API
- 圖示管理器和工具