|
| 1 | +!!! pied-piper ":bulb: TL;DR - Rich Custom Apps, Automated, Full Control" |
| 2 | + |
| 3 | + The Admin App is useful, but most systems will require custom User Interfaces. Use your favorite framework (eg, React, Angular, Vue) to create rich, custom apps. |
| 4 | + |
| 5 | + * App creation is much simpler since you can use the API to access your data, with **logic automation**. This reduces your app code, within a modern architecture that shares logic for both apps and services. |
| 6 | + |
| 7 | + * The API is available instantly. **App Dev is not blocked on API creation.** |
| 8 | + |
| 9 | + In addition, the system can automatically create a 'starter kit' Angular app, using [**Ontimize**](https://ontimizeweb.github.io/docs/v8/), a proven app framework. This approach provides: |
| 10 | + |
| 11 | + 1. **Faster and simpler automated creation:** learning a framework requires months of training, and app dev is slow and tedious. This approach creates a full app in seconds. |
| 12 | + |
| 13 | + 2. **Simpler customization:** it is orders of magnitude simpler to tweak the properties of a generated app than to create the app by hand. You can customize at 2 levels: |
| 14 | + |
| 15 | + a. **The generated app for full control:** you can edit the generated app (html, typescript, css). |
| 16 | + |
| 17 | + b. **The app model:** the app is generated from the model that designates the components for tables (grid, card, tree, dialog) and fields (text, image, combo, etc). You can modify the model to change the app. |
| 18 | + |
| 19 | + This technology is currently in preview state - *not* ready for production. Please contact us if you would like to try it, and provide feedback. |
| 20 | + |
| 21 | + |
| 22 | + |
| 23 | +# Ontimize - Angular Starter Kit |
| 24 | + |
| 25 | +What is Ontimize Web? From the [Ontimize Web site](https://try.imatia.com/ontimizeweb/v15/playground/main/home){:target="_blank" rel="noopener"}: |
| 26 | + |
| 27 | +> Ontimize Web is web application framework based on Angular for building business software. Ontimize Web makes use of Angular framework and its UI Component framework (Angular Material) to provide a set of reusable, well-tested and accesible components apart from a number of standard services and functionalities. |
| 28 | +
|
| 29 | +Components are a key element. As you can see from the [grid component](https://try.imatia.com/ontimizeweb/v15/playground/main/data/grid/basic){:target="_blank" rel="noopener"}, you provide a combination of html, css and typescript. There are analogous components for cards, trees, dialogs, and fields (text, image, combo, etc). |
| 30 | + |
| 31 | + |
| 32 | + |
| 33 | + |
| 34 | +# API Logic Server Automation |
| 35 | + |
| 36 | +Creating a complete application requires an extensive number of components. API Logic Server creates a complete app from the data model, which you can then customize. |
| 37 | + |
| 38 | +## Templates: Automated Components |
| 39 | + |
| 40 | +Each component has its own unique html code (including properties), css and typescript. So, changing from a list to a grid would be a complex task. |
| 41 | + |
| 42 | +So, API Logic Server introduces a template-based application model: |
| 43 | + |
| 44 | +* **Template**: a macro-expansible version of a template, bundling its html, css and typescript. The template is a 'generation ready' component. |
| 45 | + |
| 46 | +* **Model**: a YAML file that designates the templates for tables (grid, card, tree, dialog) and fields (text, image, combo, etc). The creation process macro-expands the designated templates, creating the full app, which you can then customize. |
| 47 | + |
| 48 | + |
| 49 | +## Procedures |
| 50 | + |
| 51 | +The simplist way is to `create` a project, specifying `--auth-provider-type=sql`. This will create a `ui/app` directory with a full Ontimize app: |
| 52 | + |
| 53 | +```bash |
| 54 | +als create --project_name=ApiLogicProject --db-url= --auth-provider-type=sql |
| 55 | +``` |
| 56 | + |
| 57 | +You can run it using pre-created run configurations. After starting the server: |
| 58 | + |
| 59 | +1. **Install Ontimize (npm install)** |
| 60 | +2. **Start Ontimize (npm start)** |
| 61 | + |
| 62 | +Then, open a browser to `http://localhost:4299`. |
0 commit comments