Windows Azure Mobile Services – Push Notification Update

 

Windows Azure Mobile Services – Push Notification Update

 

저번 주 업데이트로 Push Notification을 구성하는 내용에 대한 부분도 변경되었습니다. 기존 처럼 작업하면 제대로 구성되지 않아 본글을 참조하시면 됩니다.

Windows Azure 뿐만 아니라 Windows Store 개발자 계정이 있어야 Push Notification을 구성해서 테스트 할 수 있습니다. Windows Azure Mobile Services의 Data 에 대한 내용은 변경이 없으므로 본 글은 Mobile Services를 구성한 후 진행하는 것으로 합니다.

 

Mobile Services를 통해 Push Notification 을 구성하기 위해서는 스토어 앱을 먼저 등록해야 합니다. Live Connect 개발자 센터(https://manage.dev.live.com/Applications/Index?d=1&wa=wsignin1.0) 사이트로 이동합니다. 해당 페이지에서 기존 업데이트에서는 응용 프로그램 만들기를 했지만 업데이트 이후로는 Windows Store 대시 보드 페이지 링크를 클릭하여 Windows Store 앱을 먼저 생성합니다. Windows Store 개발자 계정이 없다면 미리 등록해야 합니다.

 

Windows Store 개발자 계정이 있다면 대시 보드 메뉴를 클릭하여 왼쪽 앱 등록 메뉴를 클릭합니다.

 

앱 이름을 클릭하여 Mobile Services의 이름을 입력하고 앱 이름 예약을 클릭하고 저장을 클릭합니다.

 

Mobile Services의 Visual Studio 2012 프로젝트로 돌아와서 솔루션 탐색기의 프로젝트를 오른쪽 클릭하여 스토어 메뉴의 “응용 프로그램을 저장소에 연결” 메뉴를 아래 그림처럼 클릭합니다.

 

“응용 프로그램을 Windows 스토어에 연결”에서는 위에서 앱을 생성한 계정으로 로그인합니다.

 

“앱 이름 선택”에서 위에서 생성한 앱 이름을 선택하고 다음을 클릭합니다.

  

결과를 확인하고 연결을 선택합니다.

 

위의 내용으로 프로젝트의 패키지 속성에 대한 이름과 게시자가 설정됩니다. 또한 Live Connect 개발자 센터의 응용 프로그램 정보가 아래와 같이 변경됩니다.

 

이제 설정되었으모로 Client 와 Server 로직을 작성하면 됩니다. 이제부터는 기존 업데이트와 동일합니다. 먼저  Client 로직을 작성해봅니다.

App.xaml.cs 로 이동하여 아래처럼 Channel 클래스를 추가하고 Push Notification 을 구성하겠습니다.

 

public class Channel

    {

        public int Id { get; set; }

        public string Uri { get; set; }

    }

 

Push Notification을 위해 아래와 같은 using 구문을 추가합니다.

using Windows.Networking.PushNotifications;

 

onLaunched 메서드는 async로 아래와 같이 변경합니다.

protected async override void OnLaunched(LaunchActivatedEventArgs args)

 

Push Notification 을 구성하기 위해 아래와 같은 코드를 onLaunched 메서드의 맨 아래에 추가합니다.

var ch = await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();

 

await MobileService.GetTable<Channel>().InsertAsync(new Channel() { Uri = ch.Uri });

 

Client 로직 구성은 끝났으며 앱이 구동될때 Mobile Services의 Channel 테이블에 Uri를 등록하게 됩니다.

 

Windows Azure Mobile Services로 이동하여 이미 생성한 Mobile Services 를 클릭하여 상단의 PUSH 메뉴를 클릭합니다. CLIENT SECRET와 PACKAGE SID 는 Live Connect 사이트의 앱 이름을 클릭하여 설정 변경에서 API 설정을 클릭하면 결과를 확인할 수 있습니다. 값을 입력하고 저장을 클릭합니다.

 

Data 테이블에 값이 추가될 때 마다  Push Notification 을 전송하기 위해 Channel 테이블을 Mobile Services에 생성하도록 하겠습니다. DATA 메뉴를 클릭하고 하단의 CREATE 메뉴를 클릭합니다. 테이블 이름은 Channel로 지정합니다.

 

생성된 테이블은 아래와 같으며 컬럼이 id 만 생성되어 있는 것을 확인가능하며 코드와 Script를 통해 구성할 것입니다.

 

위 그림의 Script 메뉴를 클릭합니다. Script를 통해 추가적인 작업이 가능하며 여기서는 동일한  Uri 일 경우 Notification을 하지 않도록 스크립트를 아래와 같이 추가하고 Save 버튼을 클릭합니다.

 

스크립트의 실제 내용은 아래와 같습니다.

function insert(item, user, request) {

    var channelTable = tables.getTable('Channel');

    channelTable.where({ uri: item.Uri })

        .read({ success: insertChannelIfNotFound});    

 

    function insertChannelIfNotFound(existingChannels) {

        if(existingChannels.length > 0) {

                                          request.respond(200, existingChannels[0]);

        } else {

                                          request.execute();

        }

    }

}

 

마찬가지로 TodoItem 테이블을 클릭하여 마찬가지로 Script를 통해 Insert 동작에서 Channel 테이블에 등록된 Uri 로 ToastNotification을 전송하는 스크립트를 작성합니다.

 

실제 스크립트는 아래와 같습니다.

function insert(item, user, request) {

    request.execute({

        success: function(){

                                          request.respond();

                                          sendNotifications(item);

        },

        error: function(err){

                                          request.respond(500, "Error");

        }

    });

}

 

function sendNotifications(item){              

    var channelTable = tables.getTable('Channel');

        channelTable.read({

            success: function(channels){

                channels.forEach(function(channel){

                    push.wns.sendToastText04(channel.Uri, {

                        text1: item.name,

                        text2: "text line 2",

                        text3:  "text line 3"

                    }, {

                        success: function(response){                                              

                            console.log(response);

                        },                                  

                        error: function(err){                                              

                            console.error(err);                      

                        }                    

                    });

                });

            }       

    });   

}

 

 

이제 Visual Studio 2012에서 로컬 컴퓨터로 실행하여 TodoItem에 값을 입력하면 ToastNotification이 발생됩니다.

 

 

이상으로 Push Notification의 업데이트 내용을 정리했습니다.