언어: HTML | XAML

빠른 시작: 모바일 서비스에 대한 푸시 알림 추가(JavaScript 백 엔드)

Applies to Windows and Windows Phone

이 빠른 시작에서는 Azure 모바일 서비스를 사용하는 Windows 스토어 앱에서 푸시 알림을 사용하도록 설정하는 과정을 안내합니다. 모바일 서비스를 사용하면 WNS(Windows 푸시 알림 서비스)를 통해 앱에 푸시 알림을 쉽게 보낼 수 있습니다. 자세한 내용은 모바일 서비스 개발자 센터를 참조하세요. Microsoft Visual Studio 2013을 사용하면 모바일 서비스 앱에서 쉽게 푸시 알림을 사용하도록 설정할 수 있습니다. 이 항목은 이전 항목인 빠른 시작: 모바일 서비스 추가(C++의 경우 빠른 시작: C++를 사용하여 모바일 서비스 추가)를 기반으로 합니다. 완료하면 새 모바일 서비스에 푸시 알림을 추가하고 새 알림을 보내 앱을 테스트하게 됩니다.

이 빠른 시작은 JavaScript 백 엔드를 사용하는 모바일 서비스에 적용됩니다. .NET 백 엔드를 사용하는 경우 모바일 서비스에서 푸시 알림 시작을 참조하세요.

사전 요구 사항

앱에 푸시 알림 추가 및 구성

먼저 Visual Studio 2013의 푸시 알림 추가 마법사를 사용하여 Windows 스토어에 앱을 등록하고 푸시 알림을 사용하도록 모바일 서비스를 설정한 후 앱에 코드를 추가하여 장치 채널을 등록합니다.

참고  이 항목에서는 모바일 서비스 연결이 이전 항목에서 수행된 프로젝트에 이미 추가되었다고 가정합니다. 모바일 서비스가 연결되지 않은 경우 푸시 알림 추가 마법사에서 자동으로 이 연결을 만듭니다.

  1. Visual Studio 2013에서 솔루션 탐색기를 열고 프로젝트를 마우스 오른쪽 단추로 클릭한 후 추가, 푸시 알림...을 차례로 클릭합니다. 푸시 알림 추가 마법사가 시작됩니다.
  2. 다음을 클릭하고 Windows 스토어 계정에 로그인한 후 새 이름 예약에 이름을 제공하고 예약을 클릭합니다. Windows 스토어에 새로운 앱 등록이 만들어집니다.
  3. 앱 이름 목록에서 새 등록을 클릭하고 다음을 클릭합니다.
  4. 빠른 시작: 모바일 서비스 추가 또는 빠른 시작: C++를 사용하여 모바일 서비스 추가를 완료할 때 만든 모바일 서비스를 선택하고 다음, 마침을 차례로 클릭합니다. WNS(Windows 푸시 알림 서비스)와 함께 작동하여 앱에 알림을 보낼 수 있도록 모바일 서비스가 구성됩니다.

    참고  앱이 모바일 서비스에 연결하도록 구성되지 않은 경우 마법사에서 빠른 시작: 모바일 서비스 추가에 설명된 것과 동일한 구성 작업도 완료합니다.

  5. (옵션) 서비스, 모바일 서비스, 해당 서비스 이름을 차례로 확장하고 생성된 코드 파일을 엽니다. C++ 프로젝트에서는 이 파일의 이름이 PushRegister.cpp로 지정됩니다. 장치의 설치 ID 및 채널을 가져오고 이 데이터를 새 channels 테이블에 삽입하는 UploadChannel 메서드(C++에서는 AcquireAndUpdatePushChannel 멤버 함수)를 검사합니다. 이 테이블은 푸시 알림 추가 마법사를 통해 모바일 서비스에 만들어져 있습니다. 이 메서드 호출도 마법사를 통해 App.xaml.cs, App.xaml.vb 또는 App.xaml.cpp 코드 파일의 OnLaunched 이벤트 처리기에 추가되었습니다. 이렇게 하면 앱을 시작할 때마다 장치 등록이 시도됩니다.
  6. (옵션) notifyallusers.js 파일의 코드를 검사합니다. notifyallusers.js는 모바일 서비스 백 엔드의 일부이므로 Visual Studio에서 이 파일을 프로젝트에 추가하지 않습니다. 이 파일은 서버 탐색기에서 해당 모바일 서비스의 노드 아래에 표시됩니다. 코드는 모바일 서비스와 관련된 사용자 지정 API이며 실행할 경우 푸시 알림에 대해 등록된 클라이언트 앱에 푸시 알림을 보냅니다.

    
    exports.post = function(request, response) {
        response.send(statusCodes.OK,{ message : 'Hello World!' })
        
        // The following call is for illustration purpose only
        // The call and function body should be moved to a script in your app
        // where you want to send a notification
        sendNotifications(request);
    };
    
    // The following code should be moved to appropriate script in your app where notification is sent
    function sendNotifications(request) {
        var payload = '<?xml version="1.0" encoding="utf-8"?><toast><visual><binding template="ToastText01">' +
            '<text id="1">Sample Toast</text></binding></visual></toast>';
        var push = request.service.push; 
        push.wns.send(null,
            payload,
            'wns/toast', {
                success: function (pushResponse) {
                    console.log("Sent push:", pushResponse);
                }
            });
    }
    
    
    

    페이로드 변수는 Windows 스토어 앱에서 사용하는 특정 유형의 알림 메시지에 대한 XML을 나타냅니다. 알림 메시지 템플릿에 대한 전체 설명은 알림 템플릿 카탈로그를 참조하세요.

  7. 키보드에서 Ctrl+F5를 사용하거나 메뉴에서 디버그 > 디버깅하지 않고 시작을 사용하여 앱을 실행하고 모바일 서비스에서 즉시 알림이 수신되는지 확인합니다.
  8. (옵션) Alt+Tab 키를 사용하여 앱을 닫지 않고 Visual Studio로 돌아갑니다. Visual Studio에서 대화형으로 알림을 보내 푸시 알림에 대한 앱의 응답을 테스트하려는 경우 Visual Studio에서 푸시 알림을 보내는 방법의 단계를 따릅니다.

요약 및 다음 단계

지금까지 모바일 서비스를 사용하여 Windows 스토어 앱에 푸시 알림 기능을 추가하는 방법을 배웠습니다.

다음에는 모바일 서비스를 사용하여 앱에 다음 기능을 추가하는 방법을 알아보세요.

관련 항목

모바일 서비스에서 되풀이 작업 예약
모바일 서비스에서 서버 스크립트 작업

 

 

표시:
© 2014 Microsoft