• Plugin basics
• Introduction
  • Unified Development process
  • OpenAPI approach
  • Reference architecture
  • Shared information model
• Platform overview
  • Package types
  • Distributed architecture
  • Technical stack
  • Distributed cache
  • Common usage scenario
• Plugin guides
• First UI package
  • Creation Angular project
  • Adding dependencies
  • Changing the base selector
  • Routing changes
  • Creating of first component
  • Specification file version.json
  • Build and Deploy
• Package registration
  • Registration into platform
  • Package configuration
  • General setting
  • Dependencies setting
  • Router Links setting
  • Package uploading
• First Backend package
  • Clon repo
  • Content overview
  • Implementation
  • Build
  • Package registration
  • Package uploading
  • Dry run
• Portal package creation
  • Portal type
  • class PlatformConnectorService
  • interface IHttpService
  • Translation
  • npm scripts
  • Versioning
• REST API
• REST API using
  • Standard Package requests
  • Specific Action requests
  • Idempotency
  • Authorization types
  • Date and time format
• Request Formats
  • HTTP GET: Getting a list of elements of type Entity
  • HTTP GET: Getting a specific Element of the Entity Type
  • HTTP PUT: Editing an Entity Type Element
  • HTTP POST: Creating a new Element of Entity Types
  • HTTP POST: Doing an Action for Element of Entity Types
  • HTTP POST: Creating an new element Sub-Entity of Types
  • HTTP DELETE: Deleting the element of Entity Types
  • HTTP PATCH: Partially editing the element of Entity Types
  • Handling Errors When Calling HTTP Methods

Creation of UI package with Backend logic

Prerequisites. Before you begin, you have got to install nodejs and @angular/cli

Note. Tested on the following versions of @angular/cli: 12.2.17, 13.3.8

Any UI platform package does not lose the ability to run locally with the command ng serve. This mode of operation is characterized by the lack of capabilities provided by the platform "on the air". The functionality presented here helps to keep partial capabilities for this operation mode.

This repository is an extended example of the package within the mef.dev technical preview platform. Design-wise, we recommend using this example after covering the process of creating the basic plugin.

This plugin will not have business logic implementation. Its purpose is to explain the Angular project design for interaction with a custom backend within the platform.

The repository is designed to run as Portal type of package together with the package example: tutorial-backend-plugin.

Portal type of package

The process of building and uploading packages does not differ from previous guides, except selecting the Portal type of package by registration. This type of package is oriented to Frontend + Backend operation, respectively, the data for the front and back component should be configured properly.

class PlatformConnectorService

Designed to easy handling HTTP requests. Its purpose is to implement the HTTP sending service to a transparent and close to Angular-developer form (using HttpClient).

The implementation service helps to use Dependency injection. Moreover, in the case of local running, the service will provide its own implementation of the IHttpService interface, for this example that is the HttpService implementation.

interface IHttpService

It is a wrapper for standard HTTP requests. The platform provides a class that implements this service to send requests on behalf of the platform. It can also be implemented as your own in any convenient form.

Translation implementation

Built on @ngx-translate/core. The problem is that plug-in assets in the case of working within the platform are in an unusual location.

To obtain assets, the platform provides their location by @natec/mef-dev-platform-connector.

A custom loader is used for this solution case:

// src/app.module.ts
...
TranslateModule.forRoot({
    loader: {
        provide:  TranslateLoader,
        useClass:  CustomLoader,
        deps: [HttpClient],
    }
}),
...

npm scripts

// package.json
...
"scripts": {
    "ng": "ng",
    "start": "npm run generate-version-file && ng serve",
    "build": "npm run generate-version-file && ng build",
    "watch": "npm run generate-version-file && ng build --watch --configuration development",
    "test": "ng test",
    "generate-version-file": "npm explore @natec/mef-dev-platform-connector -- npm run generate-version-file",
    "build:plugin": "npm run generate-version-file && ng build --prod --output-hashing none --single-bundle",
    "build:plugin:watch": "ng build --output-hashing none --single-bundle --watch --optimization=false"
},
...

generate-version-file

The command use the script from @natec/mef-dev-platform-connector to generate the version specification file for the package.

It is included into all methods are genereting new versions of packages. Execution result is used by assets and environments:

// src/environments/environment.ts

import { PLUGIN_VERSION } from  './version;
export  const  environment = {
    production:  false,
    version:  PLUGIN_VERSION.version // <--
};

build:plugin

Script for generation a build of package version.

build:plugin:watch

Script for generation a build of debug package version, in uninterrupted mode, and without code optimization. Can be used for debug.