도구 및 샘플Tools and Samples

카드 디자이너Card Designer

카드를 디자인하려면 도구가 필요한가요?Need for a tool to design your cards? https://adaptivecards.io/designer에서 브라우저 기반 적응형 카드 디자이너만 찾으면 됩니다.Look no further than the browser-based adaptive card designer at https://adaptivecards.io/designer

디자이너 스크린샷designer screenshot

앱에 디자이너 포함Embed the designer into your app

그러나 JavaScript 라이브러리를 사용하여 웹앱에 직접 카드 디자이너를 포함할 수 있을 때 사용자를 해당 위치로 보내는 이유입니다.But why send your users there when you can embed the card designer directly into your web app using our JavaScript library.

시작하려면 adaptivecards-designer 패키지를 체크 아웃합니다.Check out the adaptivecards-designer package to get started.

스키마 유효성 검사Schema validation

스키마 유효성 검사는 쉽게 작성하고 도구를 사용할 수 있는 강력한 방법입니다.Schema validation is a powerful way of making authoring easier and enabling tooling.

json에서 적응형 카드를 편집하고 유효성 검사하는 데 필요한 전체 JSON 스키마 파일을 제공했습니다.We have provided a complete JSON Schema file for editing and validating adaptive cards in json. 스키마 URL의 버전이 지정되었으므로 최신 버전의 적응형 카드에 해당 URL이 포함됩니다.Note that the schema URL is versioned, newer versions of Adaptive Cards will have a corresponding URL.

Visual Studio 및 Visual Studio Code에서 $schema 참조를 포함하여 자동 IntelliSense를 가져올 수 있습니다.In Visual Studio and Visual Studio Code you can get automatic Intellisense by including a $schema reference.

불량

자동 완성

예제Example

{
    "$schema": "http://adaptivecards.io/schemas/1.2.0/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": []
}

Visual Studio Code 확장Visual Studio Code Extensions

적응형 카드 스튜디오Adaptive Cards Studio

marketplace

AdaptiveCards 스튜디오를 사용하면 Visual Studio Code에서 직접 카드를 제작할 수 있습니다.With AdaptiveCards Studio you can author cards directly in Visual Studio Code. 이 확장 도구는 작업 공간에서 모든 적응형 카드를 자동으로 감지하며 카드 템플릿과 샘플 데이터를 쉽게 편집할 수 있습니다.The Extension automatically detects all Adaptive Cards in your working space and lets you easily edit the card template and sample data.

Visual Studio Code Marketplace에서 자세히 알아보고 설치하기Read more and install it from the Visual Studio Code Marketplace

적응형 카드 뷰어Adaptive Card Viewer

편집기 자체에서 실시간으로 편집 중인 카드를 시각화할 수 있는 Visual Studio Code 확장을 만들었습니다.We have created a Visual Studio code extension which allows you to visualize the card you are editing in real time inside the editor itself.

확장

설치하려면 확장 Marketplace를 열고 적응형 카드 뷰어를 검색합니다.To install, open Extensions Marketplace and search for Adaptive Card Viewer.

marketplace

사용Usage

적응형 카드 $schema 속성으로 .json 파일을 편집하는 경우 Ctrl+Shift+V A를 사용하여 볼 수 있습니다.When you are editing a .json file with an Adaptive Card $schema property you can view by using Ctrl+Shift+V A.

{
    "$schema": "http://adaptivecards.io/schemas/1.2.0/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": []
}

옵션Options

다음 Visual Studio Code 설정은 AdaptiveCards 뷰어에 사용할 수 있습니다.The following Visual Studio Code setting is available for the AdaptiveCards Viewer. 이는 사용자 설정 또는 작업 영역 설정에서 설정할 수 있습니다.This can be set in User Settings or Workspace Settings.

{
    // Open or not open the preview screen automatically
    "adaptivecardsviewer.enableautopreview": true,
}

WPF 시각화 도우미 샘플WPF Visualizer Sample

WPF 시각화 도우미 샘플 프로젝트를 사용하면 Windows 머신에서 WPF/Xaml을 사용하여 카드를 시각화할 수 있습니다.The WPF visualizer sample project lets you visualize cards using WPF/Xaml on a Windows machine. 호스트 구성 설정을 편집하고 볼 수 있도록 hostconfig 편집기가 기본 제공됩니다.A hostconfig editor is built in for editing and viewing host config settings. 이 설정을 JSON으로 저장하여 애플리케이션의 렌더링에 사용합니다.Save these settings as a JSON to use them in rendering in your application.

WPF 시각화 도우미

WPF ImageRender 샘플WPF ImageRender Sample

ImageRender 샘플 프로젝트는 WPF를 사용하여 명령줄에서 카드를 PNG로 변환합니다.The ImageRender sample project turns any card into a PNG from the command line using WPF.