Constructing a full-featured Angular browser/cell consumer interface requires a really particular ability set. There’s a huge array of instruments, frameworks, and platforms, and every requires a steep studying curve.
An open-source challenge, ApiLogicServer, has launched a technical preview that mixes GenAI-powered microservice automation with Ontimize, an Angular UI framework. Whereas the promise of an entire operating utility is the objective of GenAI-enabled microservice, the developer will nonetheless must work together with the generated elements to create a completed net utility.
Determine 1: Ontimize dwelling touchdown web page
GenAI-Enabled API Microservice Options
Utilizing VSCode and CoPilot, ApiLogicServer has an extended record of options primarily based on current Python libraries.
- Python 3.8 and better
- SQLALchemy ORM
- JSON API (OpenAPI – Swagger)
- KeyCloak single sign-on
- LogicBank for spreadsheet-like declarative guidelines
- Declarative role-based entry management
- Kafka producer and client integration
- React-admin multi-page back-office utility
- Ontimize Angular consumer (technical preview)
- Framework to increase and customise API
- DevOps scripts for Docker and Azure deployment
Set up
The ApiLogicServer will be put in on Home windows, vdMAC OS, or Linux with a Python pip set up command (establishing the Python and the digital setting is described on the documentation web page).
(venv) pip set up ApiLogicServerGenAI Prompting
As soon as put in, the command line opens up instruments you too can use such because the genai command to submit a immediate to create, construct, and hook up with a brand new database robotically. This characteristic is nice for testing new concepts. The developer also can construct a challenge and hook up with one of many many SQL databases (MySQL, PostgreSQL, SQL Server, Oracle, SQLite).
als genai --using=genai_demo.immediateCommand Line and Database Connectivity
As soon as put in within the digital setting, a set of command line instruments can be utilized to create a brand new challenge and hook up with your database (e.g., PostgreSQL, Oracle, SQL Server, MySQL, or SQLite). The authentication supplier can use sql (a SQLite database) or KeyCloak for single sign-on. Within the nw+ instance beneath, we’ll use the Northwind pattern database operating SQLite.
als create --project-name=demo --open-with=code --auth-provider-type=sql --app=ontimize --db-url=nw+ Server Automation Options
The create command will create a SQLAlchemy ORM mannequin, JSON API (Swagger), a react-admin back-office multi-page utility, and the flexibility to make use of copilot or ChatGPT to generate spreadsheet-like declarative guidelines utilizing LogicBank. As soon as VSCode is open, press F5 to start out the ApiLogicServer and use the browser to see a operating react-admin utility. Open browser http://localhost:5656.
Ontimize an Angular Framework
Ontimize is an open-source Node.js Angular framework that has been round for greater than 7 years and there are lots of of manufacturing purposes constructed utilizing this framework. It’s nicely documented and the playground makes the training curve extraordinarily quick. Utilizing the Ontimize playground and net model referred to as QuickStart, ApiLogicServer created a collection of TypeScript, HTML, and SCSS templates (constructing blocks) utilizing the Jinja framework. These templates will be modified or prolonged and reused to construct new varieties. The command line app-create installs the Ontimize seed and generates a brand new app_model.yaml file. This file is then used to generate the varieties from the API’s. The npm set up command brings in all of the Node.js libraries wanted to run the generated Ontimize utility.
From the VSCode Terminal Window:
cd ui/ontimize
npm set upConstruct Angular From a YAML Supply
ApiLogicServer makes use of a YAML file to explain the entities, attributes, and relationships to create a runtime react-admin utility. The Ontimize Angular app makes use of a distinct YAML file with extra metadata that’s utilized by the command line utility builder. Every API endpoint is uncovered with a New, Dwelling, and Element web page. This utility is just like the react-admin utility. The developer can edit the app_model.yaml to exclude entities or attributes, change labels or attribute templates, after which rebuild all of the varieties utilizing the brand new settings. The ui/app_model.yaml will be edited and the app-build command will be re-run a number of occasions to mirror the edits.
From the terminal window in VSCode:
als app-build --app=ontimize
cd ui/ontimize
npm beginThen run http://localhost:4299.
Ontimize Angular Options
The out-of-the-box options of this new Ontimize Angular utility embrace on-demand PDF studies and charts, over 20 completely different attribute template sorts (e.g., foreign money, date, cellphone, checkbox, e-mail, checkbox, combo, password, and many others.) master-detail utilizing relationships, mum or dad key lookups, exports, filters, types, maps and extra. Ontimize additionally helps the interpretation into a number of languages and worldwide foreign money/date sorts. Having an prompt operating utility wired to your APIs permits a really agile method to getting suggestions from stakeholders.
Determine 2: Demo Financial institution Buyer Desk
Determine 3: Tree View Break up Pane Element
LifeCycle of API Growth
The lifecycle of any API challenge includes change. The database might add or take away tables or columns. The ApiLogicServer command line supplies rebuild-from-database which is able to rebuild the SQLAlchemy ORM mannequin. One other command line instrument rebuild-from-model will regenerate the react-admin YAML file. Utilizing the app-create and app-build for a brand new Ontimize challenge (als app-create –app=ont_new) then merge the Ontimize app_model.yaml recordsdata or varieties.
LogicBank is built-in into ApiLogicServer and SQLAlchemy ORM to offer spreadsheet-like guidelines (e.g. sums, counts, formulation, constraints, and occasions). Utilizing Copilot prompts to generate guidelines is an fascinating train for a future article.
As soon as the varieties are created and wired to the API, the UX group can modify the fashion sheet, TypeScript, and type format to create a extremely polished net utility.
DevOps Containers
ApiLogicServer supplies a DevOps listing that can be utilized to construct and deploy Docker containers to the cloud. Ontimize will be instructed to construct a manufacturing setting and deploy to an internet container or embrace it with the ApiLogicServer.
Abstract
There’s the flexibility as a developer to ship a full-featured utility together with a Server, API, and consumer interface with out having to jot down a single line of code. ApiLogicServer has instruments to shortly construct and deploy to Docker containers and cloud. The GenAI-enabled characteristic helps with code completion and may generate declarative logic guidelines from prompts. The Python platform affords the developer entry to a big suite of libraries and instruments, and the Copilot providers make extending server capabilities a snap. This actually is the beginning of an exquisite friendship.