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

아티클
11/02/2024
적용 대상:

✅ Windows Admin Center, ✅ Windows Admin Center Preview

해당 문서에서는 Windows Admin 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에 대한 참조를 기능 이름으로 적절히 변경합니다.

주의

내장된 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 Admin Center에서 확장을 빌드하고 테스트용으로 로드할 준비가 되었습니다.

다음을 통해 공유