At runtime, Vision App Maker is a set of decoupled components arranged in three layers: front-end clients, the API Gateway and back-end services. Configuration made in App Factory Studio is stored in a configuration database and executed by the App Maker Engine.
Layers at a glance
| Layer | Components | Technology |
|---|---|---|
| UI layer | Internal and external portals, info kiosk applications, mobile app | React; React Native for the mobile app |
| API Gateway layer | App Maker Gateway, behind an ingress or reverse proxy | .NET Core |
| Services layer | App Maker Engine and other microservices or distributed components | .NET Core |
| Configuration layer | App Factory Studio and the App Factory back-end | Angular, .NET Core |
| Cache | Distributed cache shared by the platform's replicas | Redis |
| Data | Factory configuration database and business databases | Microsoft SQL Server |
| Workstation | Vision Desktop Experience | WPF desktop application |
Front-end clients
The front-end clients handle only the user interface and UI logic. They call the APIs exposed by the API Gateway. Several portal and info kiosk instances can share the same gateway, so business logic is reused across them.
- Internal portal: all configured features plus the standard administration, security and content management features. At least one internal portal is required to use these standard features.
- External portal: features configured for citizens, customers or partners. It has no direct access to the database.
- Info kiosk: a React application with access to local peripherals such as cameras and local ports.
- Mobile app: presents any feature configured in the platform.
The portals are built with React. They provide:
- modular components with separate UI, logic and data, and a design system;
- token or cookie handling, role and permission checks in the interface, SSO and OAuth2 login through the API Gateway or an external identity provider;
- dynamic routing without full page reloads, route guards by role, lazy loading and code splitting per route;
- Material UI and Bootstrap 5 libraries, mobile-first responsive layout and dynamic themes (dark, light, custom);
- runtime language switching and menus shown according to permissions;
- interactive maps with markers, shapes, routes and tiles from map providers such as OpenStreetMap.
All components run in Microsoft Edge, Mozilla Firefox and Google Chrome. Signing with a certificate on a token and locally connected scanners require Vision Desktop Experience.
API Gateway
The App Maker Gateway is the single entry point for client requests. It routes each request to the right service and returns one unified interface for all services.
- routing with load balancing, and aggregation of responses from several services;
- authentication and authorization through tokens or cookies, with single sign-on;
- rate limiting, throttling, caching and request or response transformation;
- CORS handling, SSL termination, IP whitelisting, input validation and DDoS protection;
- logging of requests and responses for audit, debugging and metrics.
Back-end services
The services layer contains microservices and monolithic services that implement business logic. They access databases, process data, handle events and expose their own APIs. They support data persistence and storage of geospatial coordinates.
The App Maker Engine runs the configured applications. It reads the configuration from the Factory configuration database and reads and writes business data. Additional services cover authentication, file processing and external integrations, depending on the project. The architecture diagrams also show an IoT appliance service built on .NET Core.
A distributed cache based on Redis is shared by the platform's replicas.
Communication between components
| Path | Protocol | Characteristics |
|---|---|---|
| Clients to API Gateway | REST over HTTP | JSON or XML, native caching, support in gateways and load balancers, TLS |
| API Gateway to services, and between services | gRPC over HTTP/2 | Compact binary serialization, multiplexing, synchronous and asynchronous calls, unary and streaming calls, compatible with Kubernetes |
Configuration component and databases
App Factory Studio is the integrated administration and configuration component. Configurators use it in a browser to define data models, rules, interfaces and workflows without writing code. The result is published to any of the front-end components.
The platform uses two kinds of databases:
- the Factory configuration database, which holds the configuration of all application domains;
- business databases, which store the application-specific data of each domain.
Vision Desktop Experience
Vision Desktop Experience is a WPF application that complements the web portals on the workstation. It gives the portal access to local resources.
- digital certificates stored on a token, for document signing;
- signature tablets, for handwritten signatures;
- locally connected scanners and multifunction devices, using TWAIN and PDFsharp;
- drawers and other info kiosk peripherals.
The application stores signing profiles locally. Each profile links a portal address, a portal account and a certificate installed on the machine.
