Verwenden eines benutzerdefinierten Gateway-Plug-Ins in der Toolerweiterung

Artikel
11/02/2024
Gilt für::

✅ Windows Admin Center, ✅ Windows Admin Center Preview

In diesem Artikel verwenden wir ein benutzerdefiniertes Gateway-Plug-In in einer neuen, leeren Toolerweiterung, das wir mit der Windows Admin Center CLI erstellt haben.

Vorbereiten der Umgebung

Wenn Sie dies noch nicht getan haben, folgen Sie den Anweisungen unter Entwickeln einer Toolerweiterung, um Ihre Umgebung vorzubereiten und eine neue, leere Toolerweiterung zu erstellen.

Hinzufügen eines Moduls zu Ihrem Projekt

Falls noch nicht geschehen, fügen Sie Ihrem Projekt ein neues leeres Modul hinzu, das Sie im nächsten Schritt verwenden.

Hinzufügen der Integration zum benutzerdefinierten Gateway-Plug-In

Nun verwenden wir ein benutzerdefiniertes Gateway-Plug-In im neuen, leeren Modul, das wir gerade erstellt haben.

Erstellen von „plugin.service.ts“

Wechseln Sie zum Verzeichnis des neuen Toolmoduls, das oben erstellt wurde (\src\app\{!Module-Name}), und erstellen Sie eine neue Datei plugin.service.ts.

Fügen Sie der soeben erstellten Datei den folgenden Code hinzu:

import { Injectable } from '@angular/core';
import { AppContextService, HttpService } from '@microsoft/windows-admin-center-sdk/angular';
import { Cim, Http, PowerShell, PowerShellSession } from '@microsoft/windows-admin-center-sdk/core';
import { AjaxResponse, Observable } from 'rxjs';

@Injectable()
export class PluginService {
    constructor(private appContextService: AppContextService, private http: Http) {
    }

    public getGatewayRestResponse(): Observable<any> {
        let callUrl = this.appContextService.activeConnection.nodeName;

        return this.appContextService.node.get(callUrl, 'features/Sample%20Uno').map(
            (response: any) => {
                return response;
            }
        )
    }
}

Ändern Sie nach Bedarf die Verweise auf Sample Uno und Sample%20Uno in Ihren Featurenamen.

Warnung

Es wird empfohlen, dass der integrierte this.appContextService.node zum Aufrufen einer beliebigen API verwendet wird, die in Ihrem benutzerdefinierten Gateway-Plug-In definiert ist. Dadurch wird sichergestellt, dass Anmeldeinformationen in Ihrem Gateway-Plug-In ordnungsgemäß verarbeitet werden, wenn diese erforderlich sind.

Ändern von „module.ts“

Öffnen Sie die module.ts-Datei des neuen Moduls, das zuvor erstellt wurde (d. h. {!Module-Name}.module.ts):

Fügen Sie die folgenden import-Anweisungen hinzu:

import { HttpService } from '@microsoft/windows-admin-center-sdk/angular';
import { Http } from '@microsoft/windows-admin-center-sdk/core';
import { PluginService } from './plugin.service';

Fügen Sie die folgenden Anbieter (nach Deklarationen) hinzu:

  ,
  providers: [
    HttpService,
    PluginService,
    Http
  ]

Ändern von „component.ts“

Öffnen Sie die component.ts-Datei des neuen Moduls, das zuvor erstellt wurde (d. h. {!Module-Name}.component.ts):

Fügen Sie die folgenden import-Anweisungen hinzu:

import { ActivatedRouteSnapshot } from '@angular/router';
import { AppContextService } from '@microsoft/windows-admin-center-sdk/angular';
import { Subscription } from 'rxjs';
import { Strings } from '../../generated/strings';
import { PluginService } from './plugin.service';

Fügen Sie die folgenden Variablen hinzu:

  private serviceSubscription: Subscription;
  private responseResult: string;

Ändern Sie den Konstruktor, und ändern Sie die folgenden Funktionen bzw. fügen Sie diese hinzu:

  constructor(private appContextService: AppContextService, private plugin: PluginService) {
    //
  }

  public ngOnInit() {
    this.responseResult = 'click go to do something';
  }

  public onClick() {
    this.serviceSubscription = this.plugin.getGatewayRestResponse().subscribe(
      (response: any) => {
        this.responseResult = 'response: ' + response.message;
      },
      (error) => {
        console.log(error);
      }
    );
  }

Ändern von „component.html“

Öffnen Sie die component.html-Datei des neuen Moduls, das zuvor erstellt wurde (d. h. {!Module-Name}.component.html):

Fügen Sie der HTML-Datei folgenden Inhalt hinzu:

<button (click)="onClick()" >go</button>
{{ responseResult }}

Erstellen und Querladen der Erweiterung

Jetzt können Sie Ihre Erweiterung in Windows Admin Center erstellen und querladen.

Freigeben über