다음을 통해 공유

적응형 카드 템플릿 서비스

  • 아티클

적응형 카드 템플릿 서비스는 누구나 잘 알려진 템플릿 세트를 찾고, 기고하고, 공유할 수 있게 해주는 개념 증명 서비스입니다.

일부 데이터를 표시하지만 이에 대한 사용자 지정 적응형 카드의 작성을 방해하지 않으려는 경우에 유용합니다.

이에 대해서는 적응형 카드 템플릿 작성 개요를 참조하세요.

중요

사용 약관 및 계약

이 알파 수준 서비스는 모든 오류와 함께 "있는 그대로" 제공되며 어떤 방식으로도 지원되지 않습니다. 서비스의 모든 데이터 수집에는 Microsoft 개인정보처리방침이 적용됩니다.

이러한 기능은 미리 보기 상태이며 변경될 수 있습니다. 사용자 의견은 언제나 환영이며, 사용자에게 필요한 기능을 제공하는 데 중요합니다.

서비스는 어떻게 도움이 되나요?

방금 재무 데이터, Microsoft Graph 데이터, schema.org 데이터 또는 조직 내 사용자 지정 데이터 중 일부를 확보했다고 가정해 보겠습니다.

이제 사용자에게 데이터를 표시하려고 합니다.

일반적으로 이는 최종 사용자에게 제공하는 모든 프런트 엔드 스택에 사용자 지정 UI 코드를 작성하는 것을 의미합니다.

그러나 앱에서 데이터 형식에 따라 새 UI 템플릿을 "학습"할 수 있는 세계가 있다면 어떻게 될까요? 누구나 자신의 프로젝트 내에서, 조직 내에서 또는 인터넷 전체에서 공용 UI 템플릿을 기여, 개선 및 공유할 수 있는 세계입니다.

카드 템플릿 서비스는 무엇인가요?

카드 템플릿 서비스는 다음 작업을 지원하는 간단한 REST 엔드포인트입니다.

  • 데이터 구조를 분석하여 템플릿 찾기
  • 데이터를 서버에 보내거나 디바이스를 떠나지 않고 클라이언트에서 직접 바인딩할 수 있도록 템플릿 가져오기
  • 클라이언트 쪽 데이터 바인딩이 적절하지 않거나 가능하지 않은 경우 서버에서 템플릿 채우기

내부적으로

  • GitHub에서 지원하는 공유 오픈 소스 템플릿 리포지토리가 있습니다. (리포지토리는 현재 비공개이지만, 일부 마무리하지 못한 일을 처리하는 대로 공개할 예정입니다.)
  • 모든 템플릿은 리포지토리의 플랫 JSON 파일이므로 개발자 워크플로의 자연스러운 부분을 편집, 기여 및 공유할 수 있습니다.
  • 서비스 코드를 사용할 수 있으므로 가장 적합한 위치이면 어디서나 호스팅할 수 있습니다.

서비스 사용

모든 템플릿 가져오기

이 엔드포인트는 알려진 모든 템플릿의 목록을 반환합니다.

HTTP GET https://templates.adaptivecards.io/list

응답 발췌

{
  "graph.microsoft.com": {
    "templates": [
      {
        "file": "Files.json",
        "fullPath": "graph.microsoft.com/Files.json"
      },
      {
        "file": "Profile.json",
        "fullPath": "graph.microsoft.com/Profile.json"
      }
   ]
}

템플릿 찾기

이 엔드포인트는 데이터 구조를 분석하여 템플릿을 찾으려고 시도합니다.

HTTP POST https://templates.adaptivecards.io/find

예제

방금 Microsoft Graph 엔드포인트에 액세스하여 자신에 대한 조직 데이터를 가져왔다고 가정해 보겠습니다.

HTTP GET https://graph.microsoft.com/v1.0/me/

Graph Explorer screenshot

해당 API에서 JSON 데이터를 반환했지만 적응형 카드를 사용하는 사용자에게 어떻게 표시할까요?

먼저 이 형식의 데이터에 대한 템플릿이 있는지 확인하려고 합니다. 이에 따라 POST body의 내 데이터를 사용하여 /find 엔드포인트에 대한 HTTP 요청을 수행합니다.

HTTP POST https://templates.adaptivecards.io/find

{
    "@odata.context": "https://graph.microsoft.com/v1.0/$metadata#users/$entity",
    "businessPhones": [
        "+1 412 555 0109"
    ],
    "displayName": "Megan Bowen",
    "givenName": "Megan",
    "jobTitle": "Auditor",
    "mail": "MeganB@M365x214355.onmicrosoft.com",
    "mobilePhone": null,
    "officeLocation": "12/1110",
    "preferredLanguage": "en-US",
    "surname": "Bowen",
    "userPrincipalName": "MeganB@M365x214355.onmicrosoft.com",
    "id": "48d31887-5fad-4d73-a9f5-3c356e68a038"
}

응답:

[
  {
    "templateUrl": "graph.microsoft.com/Profile.json",
    "confidence": 1
  }
]

서비스에서 일치하는 템플릿의 목록과 해당 일치 항목의 정확도를 나타내는 confidence를 반환합니다. 이제 해당 템플릿 URL을 사용하여 템플릿을 가져오거나 서버 쪽에 이를 채울 수 있습니다.

템플릿 가져오기

이 엔드포인트에서 검색된 템플릿은 템플릿 작성 SDK를 사용하여 런타임에 데이터로 채워질 수 있습니다.

HTTP GET https://templates.adaptivecards.io/[TEMPLATE-PATH]

또한 "샘플 데이터"를 템플릿에 포함시켜 디자이너에서 더 친숙하게 편집할 수 있습니다.

HTTP GET https://templates.adaptivecards.io/[TEMPLATE-PATH]?sampleData=true

예제

위의 /find에서 반환된 Microsoft Graph 프로필 템플릿을 가져와 보겠습니다.

HTTP GET https://templates.adaptivecards.io/graph.microsoft.com/Profile.json

응답 발췌

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "size": "Medium",
      "weight": "Bolder",
      "text": "{name}"
    },
    {
        // ...snip
    }
  ]
}

이제 템플릿 작성 SDK에서 이 템플릿을 사용하여 바로 렌더링하도록 준비된 적응형 카드를 만듭니다.

서버 쪽에 템플릿 채우기

경우에 따라 템플릿을 클라이언트에 채우는 것이 적합하지 않을 수도 있습니다. 이러한 사용 사례의 경우 서비스에서 완전히 채워진 적응형 카드를 반환하여 적응형 카드 렌더러에 전달하도록 설정할 수 있습니다.

HTTP POST https://templates.adaptivecards.io/[TEMPLATE-PATH]

예제

위의 데이터를 사용하여 /find에서 반환된 Microsoft Graph 프로필 템플릿을 채워 보겠습니다.

HTTP POST https://templates.adaptivecards.io/graph.microsoft.com/Profile.json

{
    "@odata.context": "https://graph.microsoft.com/v1.0/$metadata#users/$entity",
    "businessPhones": [
        "+1 412 555 0109"
    ],
    "displayName": "Megan Bowen",
    "givenName": "Megan",
    "jobTitle": "Auditor",
    "mail": "MeganB@M365x214355.onmicrosoft.com",
    "mobilePhone": null,
    "officeLocation": "12/1110",
    "preferredLanguage": "en-US",
    "surname": "Bowen",
    "userPrincipalName": "MeganB@M365x214355.onmicrosoft.com",
    "id": "48d31887-5fad-4d73-a9f5-3c356e68a038"
}

응답 발췌

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "size": "Medium",
      "weight": "Bolder",
      "text": "Megan Bowen"
    },
    {
        // ...snip
    }
  ]
}

GET 요청에서와 같이 응답에서 첫 번째 TextBlock의 텍스트를 "{name}" 대신 "Megan Bowen"으로 바꾸는 방법을 확인합니다. 이제 이 AdaptiveCard는 클라이언트 쪽 템플릿 작성을 거치지 않고도 모든 적응형 카드 렌더러에 전달할 수 있습니다.

템플릿 기여

템플릿은 adaptivecards-templates 리포지토리의 GitHub에서 호스팅됩니다.

GitHub를 템플릿을 지원하는 저장소로 사용하는 것이 좋습니다. 그러면 템플릿을 작성, 개선 및 공유하는 프로세스를 "더 자유롭게 수행"할 수 있습니다. 누구나 완전히 새로운 템플릿을 포함하는 끌어오기 요청을 제출하거나 개발자에게 친숙한 GitHub 환경 내에서 기존의 모든 템플릿을 향상시킬 수 있습니다.

서비스 자체 호스팅

모든 형식의 데이터가 https://templates.adaptivecards.io에서 호스팅되는 "중앙" 적응형 카드 템플릿 서비스에 적합한 것은 아닙니다.

모든 사용자가 조직 내에서 템플릿 서비스를 호스팅할 수 있도록 하기 위해 GitHub에서 소스 코드를 사용할 수 있으며 자신의 Azure 함수에 쉽게 배포할 수 있습니다.

여기에서 시작 ➡ adaptivecards-templates