Azure Data Studio 대시보드 확장 만들기

아티클
10/18/2023

이 자습서에서는 새 Azure Data Studio 대시보드 확장을 만드는 방법을 보여 줍니다. 확장은 Azure Data Studio 연결 대시보드에 기여하므로 사용자가 쉽게 볼 수 있는 방식으로 Azure Data Studio의 기능을 확장할 수 있습니다.

이 문서에서는 다음 방법을 알아봅니다.

확장 생성기를 설치합니다.
확장을 만듭니다.
확장의 대시보드에 기여합니다.
확장을 테스트합니다.
확장을 패키지합니다.
마켓플레이스에 확장 게시

필수 조건

Azure Data Studio는 Visual Studio Code와 동일한 프레임워크를 기준으로 하므로 Azure Data Studio 확장은 Visual Studio Code를 사용하여 빌드됩니다. 시작하려면 다음 구성이 필요합니다.

$PATH에서 설치되고 사용할 수 있는 Node.js. Node.js에는 확장 생성기를 설치하는 데 사용되는 Node.js 패키지 관리자인 npm이 포함되어 있습니다.
확장을 디버그하기 위한 Visual Studio Code
Azure Data Studio 디버그 확장(선택 사항). 디버그 확장을 사용하면 Azure Data Studio에 패키징하고 설치하지 않아도 확장을 테스트할 수 있습니다.
azuredatastudio이 경로에 있는지 확인합니다. Windows의 경우 setup.exe 경로에 추가 옵션을 선택해야 합니다. Mac 또는 Linux의 경우 Azure Data Studio의 명령 팔레트에서 Install 'azuredatastudio' command in PATH를 실행합니다.

확장 생성기를 설치합니다.

확장을 만드는 프로세스를 간소화하기 위해 Yeoman을 사용하여 확장 생성기를 빌드했습니다. 설치하려면 명령 프롬프트에서 다음 명령을 실행합니다.

npm install -g yo generator-azuredatastudio

대시보드 확장 만들기

대시보드 소개

Azure Data Studio 연결 대시보드는 사용자의 연결에 대한 정보를 요약하고 제공하는 강력한 도구입니다.

대시보드에는 두 가지 변형이 있습니다. 서버 대시보드는 전체 서버를 요약하고 데이터베이스 대시보드는 개별 데이터베이스를 요약합니다. Azure Data Studio의 연결 뷰렛에서 서버 또는 데이터베이스를 마우스 오른쪽 단추로 클릭하고 관리를 선택하여 대시보드에 액세스할 수 있습니다.

대시보드 소개를 보여주는 스크린샷.

확장 프로그램이 대시보드에 기능을 추가하는 데 기여하는 세 가지 주요 포인트가 있습니다:

전체 대시보드 탭: 확장에 대한 대시보드의 별도 탭입니다. 서버 또는 데이터베이스 대시보드에 추가할 수 있습니다. 위젯, 도구 모음 및 탐색 섹션을 사용하여 사용자 지정할 수 있습니다.
홈페이지 작업: 연결 도구 모음의 맨 위에 있는 작업 단추입니다.
위젯: SQL Server에 대해 실행되는 그래프입니다.

확장 생성기 실행

확장을 만들려면

다음 명령을 사용하여 확장 생성기를 시작합니다.

yo azuredatastudio
확장 유형 목록에서 새 대시보드를 선택합니다.
표시된 것처럼 프롬프트를 입력하여 탭을 서버 대시보드에 기여하는 확장을 만듭니다.

많은 프롬프트가 있으므로 각 질문의 의미에 대한 자세한 내용은 다음과 같습니다.

이전 단계를 완료하면 새 폴더가 만들어집니다. Visual Studio Code에서 폴더를 열면 나만의 대시보드 확장 프로그램을 만들 준비가 된 것입니다!

확장 실행

확장을 실행하여 대시보드 템플릿이 제공하는 내용을 살펴보겠습니다. 실행하기 전에 Azure Data Studio 디버그 확장이 Visual Studio Code에 설치되어 있는지 확인합니다.

Visual Studio Code에서 F5를 선택하여 해당 확장이 실행되는 디버그 모드에서 Azure Data Studio를 시작합니다. 그런 다음 이 기본 템플릿이 대시보드에 어떻게 기여하는지 확인할 수 있습니다.

다음으로 이 기본 대시보드를 수정하는 방법을 살펴보겠습니다.

대시보드 개발

확장 개발을 시작하는 데 가장 중요한 파일은 package.json입니다. 이 파일은 대시보드 기여가 등록된 매니페스트 파일입니다. dashboard.tabs, dashboard.insights및 dashboard.containers 섹션을 참고하세요.

몇 가지 변경할 수 있는 사항은 다음과 같습니다.

막대, horizontalBar 및 timeSeries를 포함하는 인사이트 형식을 사용하세요.
SQL Server 연결에 대해 실행할 고유한 쿼리를 작성합니다.
특정 인사이트 자습서는 이 샘플 인사이트 자습서 또는 이 자습서를 참조하세요.

확장을 패키지합니다.

다른 사용자와 공유하려면 확장명을 단일 파일로 패키지해야 합니다. 확장을 Azure Data Studio 확장 마켓플레이스에 게시하거나 팀 또는 커뮤니티와 공유할 수 있습니다. 이 단계를 수행하려면 명령줄에서 다른 npm 패키지를 설치해야 합니다.

npm install -g vsce

원하는 대로 README.md 파일을 편집합니다. 그런 다음 확장의 기본 디렉터리로 이동하여 vsce package를 실행 합니다. 필요에 따라 리포지토리를 확장에 연결하거나 리포지토리 없이 계속할 수 있습니다. 파일을 추가하려면 package.json 파일에 비슷한 줄을 추가합니다.

"repository": {
    "type": "git",
    "url": "https://github.com/anjalia/my-test-extension.git"
}

이러한 줄이 추가되면 my-test-extension-0.0.1.vsix 파일이 만들어지고, Azure Data Studio에 설치할 준비가 됩니다.

VSIX 설치를 보여 주는 스크린샷

Marketplace에 확장 게시

Azure Data Studio 확장 마켓플레이스는 생성 중에 있습니다. 현재 프로세스는 GitHub 릴리스 페이지 등 어딘가에서 확장 프로그램 VSIX를 호스팅하는 것입니다. 그런 다음, 확장 정보를 사용하여 이 JSON 파일을 업데이트하는 끌어오기 요청을 제출합니다.

다음 단계

이 자습서에서는 다음 작업 방법을 알아보았습니다.

확장 생성기를 설치합니다.
확장을 만듭니다.
확장의 대시보드에 기여합니다.
확장을 테스트합니다.
확장을 패키지합니다.
마켓플레이스에 확장 게시

이 문서를 읽은 후 Azure Data Studio에 대한 고유한 확장을 빌드하는 데 영감을 주길 바랍니다. 대시보드 인사이트(SQL Server에 대해 실행되는 매력적인 그래프), 여러 SQL 관련 API 및 Visual Studio Code에서 상속된 거대한 기존 확장 지점 집합을 지원합니다.

아이디어가 있지만 시작하는 방법을 잘 모르는 경우 이슈를 열거나 azuredatastudio에 있는 팀에 트윗하세요.

자세한 내용은 Visual Studio Code 확장 가이드에서 모든 기존 API 및 패턴을 설명합니다.

Azure Data Studio에서 T-SQL을 사용하는 방법을 알아보려면 T-SQL 편집기 자습서를 완료합니다.

Transact-SQL 편집기를 사용하여 데이터베이스 개체 만들기

다음을 통해 공유