GenAI-Powered Automation and Angular

To develop a full-featured Angular browser/mobile user interface, you will need a set of skills very specific to Generative AI in Angular. It is important to note that there are numerous tools, frameworks, and platforms available and that each one requires a steep learning curve.

ApiLogicServer, an open-source project, is unveiling a technical preview that utilizes GenAI to automate microservices through Ontimize, an Angular UI framework.

Microservices that are GenAI-enabled promise a fully functional application. By counting on generative AI development company joining hands together with generated components to bring this application to life.

Here we will cover everything you need to know about Generative AI in Angular to deliver cutting-edge applications to rescue.

Must Know GenAI-Enabled API Microservice Features

It uses existing Python libraries and VSCode and CoPilot to implement a long list of features.

• Versions of Python 3.8 and later
• ORM for SQLALchemy
• API for JSON (OpenAPI - Swagger)
• Single sign-on with KeyCloak
• Declarative LogicBank for spreadsheets
• Control of access based on declarative roles
• Integrated producer and consumer for Kafka
• Multi-page backoffice application powered by React-admin
• Angular client with Ontimize (as a technical demonstration)
• API extension and customization framework
• Scripts for deployments on Docker and Azure

How to Install?

It is possible to install ApiLogicServer on Windows, macOS, or Linux using the pip install command in Python (a detailed description of Python and virtual environments can be found on the documentation page).

(venv) pip install ApiLogicServer

Best Practices for Bringing together GenAI-Powered Automation and Angular

GenAI Prompting

When the command line is installed, Genai can create, build, and connect to a database automatically when a command is submitted. Testing new ideas is made easier with this feature. Additionally, developers can connect to one of the many SQL databases supported (MySQL, PostgreSQL, SQL Server, Oracle, SQLite).

als genai --using=genai_demo.prompt

Command Line and Database Connectivity

With the environment installed, a set of command-line tools is available for creating new projects and connecting to databases (e.g., PostgreSQL, Oracle, SQL Server, MySQL, SQLite). A SQL database (a SQLite database) or KeyCloak can be used to provide single sign-on. Here is an nw+ example using a Northwind SQLite sample database.

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

Server Automation Features

The create command will generate a model using SQLAlchemy, a JSON API (Swagger), a multi-page back-office application using react-admin, and rules that can be generated using copilot or chatGPT from LogicBank. Once VSCode has been opened, simply press F5 to begin the APILogicServer, which will display an application that uses react-admin.

Navigate to http://localhost:5656.

Ontimize an Angular Framework

The Ontimize Angular framework has existed for over seven years, and hundreds of production-ready applications have been developed using it. As a result of the extensive documentation and the playground, learning curves are extremely short.

Ontimize Playground, along with its web version called QuickStart, was used by ApiLogicServer for creating TypeScript, HTML, and SCSS templates (building blocks).

New forms can be created by modifying or extending these templates. With the command line app-create, you can install the Ontimize seed and generate an app_model.yaml file. After this file is generated, the APIs are used to generate the forms. To run the generated Ontimize application, you must run npm install to bring in all the Node.js libraries.

From the VSCode Terminal Window:
1. cd UI/ontimize
2. npm install

Build Angular From a YAML Source

The YAML file that describes the entities, attributes, and relationships is used by the APILogicServer to create an application that can be run at runtime. By default, the command line application builder uses a different YAML file with additional metadata for the Ontimize Angular app.

There are three types of API endpoint pages:

• New
• Home
• Detail

As with react-admin, this application has a similar interface. Changing labels or attribute templates in app_model.yaml can be done by editing the app_model.yaml, which then lets the developer rebuild all forms with the new settings. Multiple times can be run app-build to reflect changes made to ui/app_model.yaml.

From the terminal window in VSCode:
1. als app-build --app=ontimize
2. cd UI/ontimize
3. npm start

Then run http://localhost:4299.

Ontimize Angular Features

There are over 20 different types of attribute templates available in this new Ontimize Angular application, including PDF reports and charts, on-demand PDF reports and charts, master-detail using relationships, parent key lookups, exports, filters, sorts, maps, as well as master-detail using relationships, parent key lookups, exports, filtering, sorting, and maps.

In addition to translations into multiple languages, Ontimize supports foreign currencies and date formats. With a running application connected to your APIs, you can get feedback from your stakeholders in a truly agile manner.

LifeCycle of API Development

Any API project is subject to change at some point in its lifecycle. There may be additions or deletions of tables or columns in the database. Using the APILogicServer command line, the SQLAlchemy ORM model can be rebuilt using the rebuild-from-database option.

It is also possible to regenerate the YAML file for react-admin using rebuild-from-model, a command line tool. After you have created an Ontimize project (as app-create -app=ont_new), you will need to merge the Ontimize app_model.yaml file with the Ontimize form.

The LogicBank provides spreadsheet-like rules (e.g., sums, counts, formulas, constraints, and events) for ApiLogicServer and SQLAlchemy ORM.

Using the forms created by the UX team and the API created by the developer, the web application can be customized to include a highly polished style sheet, TypeScript, and form layout.

DevOps Containers

With APILogicServer, you can build and deploy Docker containers in the cloud utilizing a DevOps directory. ApiLogicServer or a production environment can be built by Ontimize and deployed in a web container.