["建立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 (網格選單)
2. 漸進式網絡應用程式 (漸進式網絡應用程式模式)
3. 虛擬桌面模式 (虛擬桌面模式)
### 標準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"
}
```
### 虛擬桌面模式
Virtual Desktop Mode is one of the features that ArOZ Online Provides for the purpose of making life easier on Cloud base system by making the interface more human friendly.
To support Virtual Desktop Mode, you would need to program the following items into your WebApp to make it VDI Mode Friendly.
*You can choose not to implement the following items and your WebApp will still launch inside VDI mode as a normal iframe element*.
#### Requirement for VDI Mode
The basic requirement for VDI Mode is simple. We recommend developers to following the following guideline while developing their WebApps to enable better quality control over VDI supporting WebApps.
1. No redirect to Grid Menu (aka No link in the VDI that can allow the module to be redirected to /AOR/index.php)
2. Design for Desktop, not Mobile. (Design it so it looks like a Desktop Application)
3. Do not try to interference other on-screen WebApps unless necessary. (Do not try to call functions on other iframe if possible)
That is it! Follow the guideline above and your webApps will be ready to go!
#### Introduction to ao_module wrapper
ao_module wrapper is a system API wrapper for the functional bar interface. It includes shortcuts and functions that call to Float Window system, file explorer and more.
The ao_module wrapper is located under ```script/ao_module.js```. You can include it with the following header.
```
```
If you want to change the interface if the page is launched under VDI mode, you can call to the wrapper function as follow.
```
if (ao_module_virtualDesktop){
//Launching in VDI mode. Do something.
}else{
//Not launching in VDI mode. Do something else.
}
```
This function can be used to hide menu bar items that is not suitable for VDI modes.
See more about ao_module wrapper in the "API Wrapper - ao_module" page.
#### Advanced System APIs
You can access advance system API with the following function calls to the wrappers. Advance System APIs includes
- Input Method Editor API
- File System API
- Default System Opener
- AO-Codec (UMFilename conversion on Client Side)
- FloatWindow Control API
- Icon manager and utils