GenAI-Powered Automation and Angular

Building a full-featured Angular browser/mobile user interface requires a very specific skill set. There is a vast array of tools, frameworks, and platforms, and each requires a steep learning curve.

An open-source project, ApiLogicServer, has released a technical preview that combines GenAI-powered microservice automation with Ontimize, an Angular UI framework. While the promise of a complete running application is the goal of GenAI-enabled microservice, the developer will still need to interact with the generated components to create a finished web application.  

Figure 1: Ontimize home landing page

GenAI-Enabled API Microservice Features

Using VSCode and CoPilot, ApiLogicServer has a long list of features based on existing Python libraries. 

• Python 3.8 and higher
• SQLALchemy ORM
• JSON API (OpenAPI - Swagger)
• KeyCloak single sign-on
• LogicBank for spreadsheet-like declarative rules
• Declarative role-based access control
• Kafka producer and consumer integration
• React-admin multi-page back-office application
• Ontimize Angular client (technical preview)
• Framework to extend and customize API
• DevOps scripts for Docker and Azure deployment

Installation

The ApiLogicServer can be installed on Windows, vdMAC OS, or Linux with a Python pip install command (setting up the Python and the virtual environment is described on the documentation page).

(venv) pip install ApiLogicServer

GenAI Prompting

Once installed, the command line opens up tools you can also use such as the genai command to submit a prompt to create, build, and connect to a new database automatically. This feature is great for testing new ideas. The developer can also build a project and connect to one of the many SQL databases (MySQL, PostgreSQL, SQL Server, Oracle, SQLite).

als genai --using=genai_demo.prompt

Command Line and Database Connectivity

Once installed in the virtual environment, a set of command line tools can be used to create a new project and connect to your database (e.g., PostgreSQL, Oracle, SQL Server, MySQL, or SQLite). The authentication provider can use sql (a SQLite database) or KeyCloak for single sign-on. In the nw+  example below, we will use the Northwind sample database running SQLite.

als create --project-name=demo --open-with=code --auth-provider-type=sql --app=ontimize --db-url=nw+ 

Server Automation Features

The create command will create a SQLAlchemy ORM model, JSON API (Swagger), a react-admin back-office multi-page application, and the ability to use copilot or ChatGPT to generate spreadsheet-like declarative rules using LogicBank. Once VSCode is open, press F5 to start the ApiLogicServer and use the browser to see a running react-admin application. Open browser http://localhost:5656.

Ontimize an Angular Framework

Ontimize is an open-source Node.js Angular framework that has been around for more than 7 years and there are hundreds of production applications built using this framework. It is well documented and the playground makes the learning curve extremely fast. Using the Ontimize playground and web version called QuickStart, ApiLogicServer created a suite of TypeScript, HTML, and SCSS templates (building blocks) using the Jinja framework. These templates can be modified or extended and reused to build new forms. The command line app-create installs the Ontimize seed and generates a new app_model.yaml file. This file is then used to generate the forms from the API’s. The npm install command brings in all the Node.js libraries needed to run the generated Ontimize application.

From the VSCode Terminal Window:

cd ui/ontimize 
npm install

Build Angular From a YAML Source

ApiLogicServer uses a YAML file to describe the entities, attributes, and relationships to create a runtime react-admin application.  The Ontimize Angular app uses a different YAML file with additional metadata that is used by the command line application builder. Each API endpoint is exposed with a New, Home, and Detail page. This application is similar to the react-admin application. The developer can edit the app_model.yaml to exclude entities or attributes, change labels or attribute templates, and then rebuild all the forms using the new settings. The ui/app_model.yaml can be edited and the app-build command can be re-run multiple times to reflect the edits.

From the terminal window in VSCode:

 als app-build --app=ontimize 
 cd ui/ontimize
 npm start

Then run http://localhost:4299.

Ontimize Angular Features

The out-of-the-box features of this new Ontimize Angular application include on-demand PDF reports and charts, over 20 different attribute template types (e.g., currency, date, phone, checkbox, email, checkbox, combo, password, etc.) master-detail using relationships, parent key lookups, exports, filters, sorts, maps and more. Ontimize also supports the translation into multiple languages and international currency/date types. Having an instant running application wired to your APIs allows a truly agile approach to getting feedback from stakeholders. 

Figure 2: Demo Bank Customer Table

Figure 3: Tree View Split Pane Detail

LifeCycle of API Development 

The lifecycle of any API project involves change. The database may add or remove tables or columns. The ApiLogicServer command line provides rebuild-from-database which will rebuild the SQLAlchemy ORM model. Another command line tool rebuild-from-model will regenerate the react-admin YAML file. Using the app-create and app-build for a new Ontimize project (als app-create –app=ont_new) then merge the Ontimize app_model.yaml files or forms. 

LogicBank is integrated into ApiLogicServer and SQLAlchemy ORM to provide spreadsheet-like rules (e.g. sums, counts, formulas, constraints, and events). Using Copilot prompts to generate rules is an interesting exercise for a future article. 

Once the forms are created and wired to the API, the UX team can modify the style sheet, TypeScript, and form layout to create a highly polished web application.

DevOps Containers

ApiLogicServer provides a DevOps directory that can be used to build and deploy Docker containers to the cloud. Ontimize can be instructed to build a production environment and deploy to a web container or include it with the ApiLogicServer.

Summary

There is the ability as a developer to deliver a full-featured application including a Server, API, and user interface without having to write a single line of code. ApiLogicServer has tools to quickly build and deploy to Docker containers and cloud. The GenAI-enabled feature helps with code completion and can generate declarative logic rules from prompts. The Python platform offers the developer access to a large suite of libraries and tools, and the Copilot services make extending server functions a snap. This really is the start of a beautiful friendship.