|
|
@@ -0,0 +1,50 @@
|
|
|
+["Making the WebApp"]
|
|
|
+# Making the WebApp
|
|
|
+ArOZ Online WebApps are similar to those used in other systems. It is made out of HTML5, CSS and Javascript.
|
|
|
+You can program the WebApps with tools that you have already familarized and program with your own fashion.
|
|
|
+
|
|
|
+Here are a few tips for you while designing an ArOZ Online friendly WebApp.
|
|
|
+
|
|
|
+- Design with responsive, it need to fit on both mobile and desktop devices.
|
|
|
+- Use ao_module wrapper. Do not call directly to ArOZ System Script unless it is necessary.
|
|
|
+- Try not to depends on other module if possible. If a certain package is required, provide a GUI for the installation process.
|
|
|
+- Try not to use database and use file system if possible. If database is required, use portable database software like SQLite instead of non-portable one like MySQL.
|
|
|
+
|
|
|
+
|
|
|
+### Mobile Interface and UTF-8
|
|
|
+ArOZ Online System needs to support languages from all over the world. Hence, all WebApps should be written in UTF-8 if possible.
|
|
|
+Moreover, to fit Mobile Interfaces on Andriod or iOS devices, some extra meta data should be added to the header as well.
|
|
|
+
|
|
|
+```
|
|
|
+<meta charset="UTF-8">
|
|
|
+<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
|
+<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=0.8, maximum-scale=0.8"/>
|
|
|
+```
|
|
|
+
|
|
|
+*You might want to change the initial-scale and maximum-scale value from the setting above.*
|
|
|
+
|
|
|
+### Style Matching
|
|
|
+ArOZ Online System default css is based on TocasUI. You can find the source of the css file at ```AOR/script/tocas/tocas.css```.
|
|
|
+To include it inside your module, put the following line in the header section.
|
|
|
+
|
|
|
+```
|
|
|
+<link rel="stylesheet" href="../script/tocas/tocas.css">
|
|
|
+<script src="../script/tocas/tocas.js"></script>
|
|
|
+```
|
|
|
+
|
|
|
+## Additional Headers
|
|
|
+Now, assume you have finished your WebApp module, you can now intergrate it to the ArOZ Online System. ArOZ Online System provide three kinds of interfaces for user to access the services on top of the host device.
|
|
|
+
|
|
|
+1. Standard WebView (Grid Menu)
|
|
|
+2. Progressive Web Apps (PWA Mode)
|
|
|
+3. Virtual Desktop Mode (VDI Mode)
|
|
|
+
|
|
|
+### Standard WebView
|
|
|
+The Standard WebView is the basic viewing method of ArOZ Online System. WebApp Modules are accessed through normal web browser.
|
|
|
+In this mode, WebApps are viewed just like a normal webpage with no ArOZ Online System additional features.
|
|
|
+
|
|
|
+### Progressive Web Apps
|
|
|
+Progressive Web Apps are user experiences that have the reach of the web. Mobile users can add ArOZ Online Modules to their devices' local app menu just like a normal app.
|
|
|
+
|
|
|
+
|
|
|
+
|
Toby Chui