빠른 시작: 코드에 NotificationsExtensions 라이브러리 사용(HTML)

아티클
12/11/2015

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

참고 JavaScript를 사용하지 않는 경우 빠른 시작: 코드에 NotificationsExtensions 라이브러리 사용(XAML)을 참조하세요.

NotificationsExtensions 개체 모델 라이브러리를 사용하면 XML DOM(문서 개체 모델)을 사용하지 않고도 타일, 배지 및 알림 메시지 XML 템플릿 콘텐츠를 제공할 수 있습니다. 알림 콘텐츠를 제공하는 더 간단하고 더 분명하며 더욱 직접적인 방법을 제공합니다. Microsoft Visual Studio에서 이 라이브러리를 사용하면 다음과 같은 이점을 얻을 수 있습니다.

사용 가능한 태그 및 특성을 개체 속성으로 나열하는 IntelliSense 덕분에 요소 및 구조에 대한 정보를 얻기 위해 스키마 설명서를 참조할 필요가 없습니다.
콘텐츠로 채울 수 있는 기본 알림을 만들기 위해 팩터리 함수를 사용할 수 있습니다.
간편한 방식으로 알림 페이로드에 다양한 타일 크기를 포함할 수 있습니다.
텍스트 및 이미지 특성을 쉽게 찾아서 채울 수 있으며, 이러한 특성의 이름은 예상 용도, 크기 또는 템플릿에서의 위치와 관련하여 좀 더 자세한 정보를 제공할 수 있도록 지정됩니다.

참고 NotificationsExtensions 라이브러리는 MS-LPL(Microsoft Limited Public License)에 따라 출시됩니다. Windows 스토어 앱이나 웹 서비스에서 라이브러리를 다시 사용할 수 있으며 필요에 따라 앱용으로 사용자 지정할 수도 있습니다.

사전 요구 사항

타일 및 알림 용어와 개념에 대한 기본 지식. 자세한 내용은 타일, 배지 및 알림을 참조하세요.
Windows 런타임 API를 사용하여 JavaScript로 기본 Windows 스토어 앱을 만들 수 있는 능력 자세한 내용은 JavaScript를 사용하는 첫 번째 Windows 스토어 앱 만들기를 참조하세요.
XML에 대한 기본적인 지식이 있으면 NotificationsExtensions 라이브러리로 어떤 앱을 만들 수 있는지 보다 잘 이해할 수 있을 것입니다.

지침

1. NotificationsExtensions 라이브러리 가져오기

NotificationsExtensions 라이브러리는 다운로드 가능한 몇몇 타일 및 알림 샘플에 포함되어 있으며 이러한 곳에서 복사하여 사용할 수 있습니다. 이 절차에서는 기본 타일 및 배지 샘플을 사용할 것입니다.

참고 NotificationsExtensions는 C# 라이브러리이지만 JavaScript, C#, C++ 및 Microsoft Visual Basic 프로젝트에 포함하고 사용할 수 있습니다.

Windows 개발자 센터에서 앱 타일 및 배지 샘플을 다운로드합니다.
선택한 폴더에 "App tiles and badges sample.zip" 파일의 압축을 풉니다.
샘플의 압축을 푼 폴더로 이동합니다. NotificationsExtensions 폴더를 샘플에서 직접 작성한 프로젝트 디렉터리로 프로젝트 .sln 파일의 형제로 복사합니다.

2. 프로젝트에 라이브러리 포함

Visual Studio를 시작하고 프로젝트를 엽니다.
프로젝트 탐색기에서 트리의 맨 위에 있는 솔루션을 마우스 오른쪽 단추로 클릭합니다.
추가, 기존 프로젝트를 차례로 선택합니다.
프로젝트에서 NotificationsExtensions 폴더로 이동하여 NotificationsExtensions.csproj 파일을 선택합니다.
솔루션 내의 각 프로젝트에서 참조를 마우스 오른쪽 단추로 클릭하고 참조 추가를 선택합니다.
참조 관리자의 솔루션 아래에서 NotificationsExtensions를 선택하고 확인을 클릭합니다. 이제 NotificationsExtensions를 바로 사용할 수 있습니다.

참고 전체 NotificationsExtensions 프로젝트를 솔루션에 포함하지 않으려면 NotificationsExtensions를 독립형 프로젝트로 빌드하고 NotificationsExtensions.winmd를 프로젝트에 참조로 포함할 수 있습니다.

3. 앱 서버의 라이브러리 포함

ASP.NET을 사용하여 WNS(Windows 푸시 알림 서비스)에 푸시 알림을 보내거나 정기적 타일 또는 배지 업데이트에 대한 요청을 처리할 ASP.NET 서비스를 구현하는 경우에도 앱 서버 코드에 NotificationsExtensions를 사용 수 있습니다. 한 가지 주의점은 NotificationsExtensions 프로젝트 속성에서 WINRT_NOT_PRESENT 컴파일 빌드 기호를 추가해야 한다는 것입니다.

샘플의 압축을 푼 디렉터리로 이동합니다. 샘플 폴더를 열고 해당 NotificationsExtensions 폴더를 선택한 새 위치로 복사합니다.
NotificationsExtensions.csproj 파일을 선택하여 Visual Studio에서 프로젝트를 엽니다.
프로젝트 메뉴에서 NotificationsExtensions 속성을 선택합니다.
출력 유형 선택을 "클래스 라이브러리"로 변경하여 DLL 파일을 빌드합니다.
또한 NotificationsExtensions 속성에서 빌드 탭을 선택합니다.
일반 범주에서 조건부 컴파일 기호 상자에 "WINRT_NOT_PRESENT"를 추가합니다. 상자에 이미 다른 기호가 포함되어 있으면 "WINRT_NOT_PRESENT" 앞에 구분 기호로 세미콜론을 추가합니다.
F7 키를 누르거나 빌드 > 빌드 솔루션을 사용하여 프로젝트를 빌드합니다.
빌드한 NotificationsExtensions.dll 파일을 폴더(\NotificationsExtensions\bin\Debug\ 아래)에서 앱 서버 코드로 복사합니다.

4. 코드에 라이브러리 사용

NotificationsExtensions를 이제 코드에서 개체로 사용할 수 있습니다. 여기에는 다음 세 가지 구성원이 포함되어 있습니다.

BadgeContent
TileContent
ToastContent

해당 콘텐츠 형식 각각은 각 형식에 대한 요소 및 특성을 나타내는 멤버를 포함합니다.

다음 예제에서는 NotificationsExtensions를 사용하여 다양한 배지에 값을 할당한 다음 타일로 보냅니다.


var badgeContent = NotificationsExtensions.BadgeContent.BadgeNumericNotificationContent(85);
var badgeNotification = badgeContent.createNotification();

Windows.UI.Notifications.BadgeUpdateManager.createBadgeUpdaterForApplication().update(badgeNotification);

비교를 위해 다음 예제에서는 XML DOM을 직접 조작하여 NotificationsExtensions 없이 동일한 절차를 보여 줍니다.


var notifications = Windows.UI.Notifications;                        
var badgeXml = notifications.BadgeUpdateManager.getTemplateContent(notifications.BadgeTemplateType.badgeNumber);
var badgeAttributes = badgeXml.getElementsByTagName("badge");
badgeAttributes[0].setAttribute("value", "85");
var badgeNotification = new notifications.BadgeNotification(badgeXml);

BadgeUpdateManager.createBadgeUpdaterForApplication().update(badgeNotification);

다음 예제에서는 NotificationsExtensions를 사용하여 타일 알림의 텍스트를 제공합니다. 첫 번째 단계에서는 NotificationsExtensions TileContentFactory 함수를 사용하여 특정 템플릿을 기반으로 개체를 만듭니다. 템플릿마다 별도의 create 함수가 있습니다. "create" 단어를 템플릿 이름에 붙이기만 하면 됩니다(예: "createTileWide310x150ImageAndText01").

템플릿 기반 개체는 IntelliSense를 제공하여 해당 템플릿에서 사용할 수 있는 요소를 함수에 따라 이름이 지정된 속성으로 표시합니다(예: textHeading, textBodyWrap, textBody1 또는 textColumn1Row4). 이를 통해 할당하고 있는 요소를 정확하게 파악할 수 있습니다.

속성에 값을 할당한 후 타일 알림을 정상적으로 보냅니다.


var tileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquare150x150Text01();

tileContent.textHeading.text = "Hello!";
tileContent.textBody1.text = "One";
tileContent.textBody2.text = "Two";
tileContent.textBody3.text = "Three";

var tileNotification = tileContent.createNotification();

Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

이 예에서는 NotificationsExtentions를 사용하여 알림에 텍스트 및 이미지를 할당합니다. 텍스트와 마찬가지로 이미지 요소는 템플릿에서 함수에 따라 이름이 지정된 속성으로 표시됩니다(예: imageMain 및 imageSmallColumn2Row2).


var tileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileWide310x150ImageAndText01();

tileContent.textCaptionWrap.text = "This tile notification uses ms-appx images";

tileContent.image.src = "ms-appx:///images/redWide.png";
tileContent.image.alt = "A red rectangle";

이 예에서는 NotificationsExtensions를 사용하여 전체 타일 알림을 정의합니다. 이 예는 이 라이브러리의 한 가지 특징인, 페이로드 부분에 템플릿 크기를 추가하는 순서를 보여 줍니다.

작은 템플릿(정사각형 71x71—Windows Phone 8.1만 해당)은 중간 크기 템플릿에만 추가할 수 있습니다.
중간 크기 템플릿(정사각형 150x150)은 와이드 템플릿에만 추가할 수 있습니다.
와이드 템플릿은 큰 템플릿(정사각형 310x310—Windows만 해당)에만 추가할 수 있습니다.

템플릿 크기를 다른 순서로 추가해 보면 필요한 속성을 사용할 수 없음을 알 수 있습니다.


var tileLargeContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquare310x310Text09();
tileLargeContent.textHeadingWrap.text = "Lorem ipsum dolor sit amet, consectetur";
tileLargeContent.textHeading1.text = "Lorem ipsumo";
tileLargeContent.textHeading2.text = "Lorem ipsumo";
tileLargeContent.textBody1.text = "VivAmus tincidunt convallis urn";
tileLargeContent.textBody2.text = "VivAmus tincidunt convallis urn";

var tileWideContent = NotificationsExtensions.TileContent.TileContentFactory.createTileWide310x150Text04();
tileWideContent.textBodyWrap.text = "Lorem ipsum dolor sit amet, consectetur";

var tileMediumContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquare150x150Block();
tileMediumContent.textBlock.text = "24";
tileMediumContent.textSubBlock.text = "Aliquam";
        
tileWideContent.square150x150Content = tileMediumContent;
tileLargeContent.wide310x150Content = tileWideContent;

var tileNotification = tileLargeContent.createNotification();

Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

이 예에서는 NotificationsExtensions를 사용하여 텍스트, 이미지, 오디오, 기간, 시작 매개 변수를 비롯한 알림 메시지의 콘텐츠를 제공합니다.


var toastContent = NotificationsExtensions.ToastContent.ToastContentFactory.createToastImageAndText01();

toastContent.textBodyWrap.text = "Lorem ipsum dolor sit amet";

toastContent.image.src = "ms-appx:///images/redWide.png";
toastContent.image.alt = "A red rectangle";

toastContent.audio.content = NotificationsExtensions.ToastContent.ToastAudioContent.loopingAlarm;
toastContent.audio.loop = true;

toastContent.duration = NotificationsExtensions.ToastContent.ToastDuration.long;

toastContent.launch = '{"type":"toast","param1":"12345","param2":"67890"}';

var toast = toastContent.createNotification();
Windows.UI.Notifications.ToastNotificationManager.createToastNotifier().show(toast);

요약

이 항목에서는 NotificationsExtensions를 사용하여 배지, 타일 및 알림 메시지 생성을 단순화하는 방법을 보여 주었습니다. 이것은 XML DOM을 직접 사용하는 것보다 템플릿을 채우는 좀 더 능률적인 방법입니다.

다음을 통해 공유