DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Last call! Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • Develop Microservices Using Azure Functions, API Management
  • Idea to Running: One Minute
  • AI-Powered Flashcard Application With Next.js, Clerk, Firebase, Material UI, and LLaMA 3.1
  • Lifecycle Microservices With GenAI Tools

Trending

  • Comprehensive Guide to Property-Based Testing in Go: Principles and Implementation
  • Cookies Revisited: A Networking Solution for Third-Party Cookies
  • Blue Skies Ahead: An AI Case Study on LLM Use for a Graph Theory Related Application
  • Concourse CI/CD Pipeline: Webhook Triggers
  1. DZone
  2. Coding
  3. Frameworks
  4. GenAI-Powered Automation and Angular

GenAI-Powered Automation and Angular

Learn how GenAI-Powered microservice automation provides a prompt-driven way to create and deliver a complete end-to-end Angular API-enabled application.

By 
Tyler Band user avatar
Tyler Band
·
Updated by 
Val Huber user avatar
Val Huber
DZone Core CORE ·
Jun. 06, 24 · Tutorial
Likes (8)
Comment
Save
Tweet
Share
5.9K Views

Join the DZone community and get the full member experience.

Join For Free

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).

Shell
 
(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).

Shell
 
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.

Shell
 
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.

Server automation features

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:

Shell
 
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:

Shell
 
 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. 

Demo Bank Customer TableFigure 2: Demo Bank Customer Table


Tree View Split Pane Detail

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.

API UI Visual Studio Code AngularJS generative AI

Opinions expressed by DZone contributors are their own.

Related

  • Develop Microservices Using Azure Functions, API Management
  • Idea to Running: One Minute
  • AI-Powered Flashcard Application With Next.js, Clerk, Firebase, Material UI, and LLaMA 3.1
  • Lifecycle Microservices With GenAI Tools

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!