도구 확장에 사용자 지정 게이트웨이 플러그 인 사용

아티클
10/06/2023

적용 대상: Windows 관리 Center, Windows 관리 Center 미리 보기

이 문서에서는 Windows 관리 Center CLI를 사용하여 만든 비어 있는 새로운 도구 확장에서 사용자 지정 게이트웨이 플러그 인을 사용합니다.

환경 준비

아직 개발하지 않은 경우 도구 확장 개발의 지침에 따라 환경을 준비하고 비어 있는 새 도구 확장을 만듭니다.

프로젝트에 모듈 추가

아직 없는 경우 프로젝트에 빈 모듈을 새로 추가합니다. 이 모듈 은 다음 단계에서 사용합니다.

사용자 지정 게이트웨이 플러그 인에 통합 추가

이제 방금 만든 빈 새 모듈에서 사용자 지정 게이트웨이 플러그 인을 사용합니다.

plugin.service.ts 만들기

위에서 만든 새 도구 모듈의 디렉터리로 변경하고(\src\app\{!Module-Name}) 새 파일을 plugin.service.ts만듭니다.

방금 만든 파일에 다음 코드를 추가합니다.

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;
            }
        )
    }
}

기능 이름에 Sample Uno 대한 참조를 Sample%20Uno 적절하게 변경합니다.

Warning

기본 제공 this.appContextService.node 은 사용자 지정 게이트웨이 플러그 인에 정의된 모든 API를 호출하는 데 사용하는 것이 좋습니다. 이렇게 하면 게이트웨이 플러그 인 내에서 자격 증명이 필요한 경우 제대로 처리됩니다.

module.ts 수정

module.ts 이전에 만든 새 모듈의 파일(예: )을 엽니다. {!Module-Name}.module.ts

다음 import 문을 추가합니다.

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

선언 후 다음 공급자를 추가합니다.

  ,
  providers: [
    HttpService,
    PluginService,
    Http
  ]

component.ts 수정

component.ts 이전에 만든 새 모듈의 파일(예: )을 엽니다. {!Module-Name}.component.ts

다음 import 문을 추가합니다.

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';

다음 변수를 추가합니다.

  private serviceSubscription: Subscription;
  private responseResult: string;

생성자를 수정하고 다음 함수를 수정/추가합니다.

  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);
      }
    );
  }

component.html 수정

component.html 이전에 만든 새 모듈의 파일(예: )을 엽니다. {!Module-Name}.component.html

html 파일에 다음 콘텐츠를 추가합니다.

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

확장 빌드 및 테스트용 로드

이제 Windows 관리 Center에서 확장을 빌드하고 테스트용으로 로드할 준비가 되었습니다.

다음을 통해 공유