使用Windows Azure Mobile Service开发Windows Phone 8 App

- How to make a Windows Phone 8 app with Windows Azure Mobile Service

Windows Azure Mobile Service推出已经有一段时间了，这可能是这段时间以来Windows Azure上最受关注的一个Feature，试用了一下Mobile Service，觉得还不错，分享下试用的过程，供大家参考。

新建一个Mobile Service

1. 登陆到Windows Azure Portal，创建一个Mobile Service

2. 创建一个Mobile Service：MyTodos，并为之新建一个数据库，注意数据库服务器的区域和Mobile Service的区域最好相同，这样可以减少网络延迟和流量费用（当然也可以使用已有的数据库实例，Mobile Service会把新建的数据表都放到MyTodos这个Schema下，所以不用担心和原有的表重名）

3. 等待几分钟后，Mobile Service创建完成后，点击MyTodos进行配置：

a) 平台这里可以看到，Mobile Service支持Windows/ WP8/Android/iOS/Html5的应用，这里我们选择Windows Phone8，注意需要安装两个SDK – Windows Phone 8 SDK和Mobile Service SDK；

b) 单击“创建TodoItem表”在刚才的数据库中创建一个TodoItem表，当然也可以自己到数据库里创建。

4. 浏览到配置这个页面，注意启用“动态架构”，这样在开发阶段，我们给Mobile Service传什么样的entity，Mobile Service会自动为我们创建相应的字段，但等到发布阶段，出于安全的考虑，最好是把“动态架构”关闭。

5. 回到MyTodos的首页，下载Azure自动生成的代码

6. 打开刚下载的代码，这时候我们已经得到了一个完整的Windows Phone 8的应用，来看看Mobile Service都生成了什么代码

a) MobileServiceClient：这就是Mobile Service SDK里面用来访问Mobile Service的客户端

b) TodoItem以及相应的Insert/Update/Refresh等方法：注意这些方法都是使用.Net 4.5的异步编程，这也是Mobile Service所推荐的编程模式。

7. 运行测试一下这个小App，添加一些TodoItem，浏览之前建的数据库，可以看到，还没有写一行代码，就已经得到了一个完整的WP8 App。

添加用户验证

接下来添加用户验证，Mobile Service支持MicrosoftAccount(也就是LiveID)/Google/Facebook/Twritter四种用户验证方式，本文只使用了MicrosoftAccount。

1. 要使用MicrosofAccount，首先要到Live Connect Developer Center（http://go.microsoft.com/fwlink/p/?linkid=262039&clcid=0x409 ）注册一下我们的App，注意“手机客户端应用”选择“是”。

2. 将注册得到的客户端ID和客户端密钥填到Mobile Service上，并保存

3. 现在设置一下数据权限，将TodoItem表设为只有验证过的用户才能读写，并保存

4. 再运行一下App，这次应该收到一个Unauthorized异常，因为当前的用户没有登录

5. 接下来为App添加登录的代码

a) 在MainPage.xaml里为MainPage添加一个Login button

b) 注释掉OnNavigatedTo里面的代码

View Code

protected override void OnNavigatedTo(NavigationEventArgs e)

{

//RefreshTodoItems();

}

c) 修改App.xaml.cs里面的ApplicationKey

View Code

public static MobileServiceClient MobileService = new MobileServiceClient(

"https://mytodos.azure-mobile.net/",

"用注册app时得到的客户端密钥"

);

d) 将下面这段代码添加到MainPage class里

View Code

private MobileServiceUser user;

private async System.Threading.Tasks.Task Authenticate()
{
    if (user == null)
    {
    string message = "You must log in. Login Required";

    try
    {
    user = await App.MobileService.LoginAsync    (MobileServiceAuthenticationProvider.MicrosoftAccount);

    message = string.Format("You are now logged in - {0}", user.UserId);
    }
    catch (InvalidOperationException ex)
    {
        message = ex.Message;
    }

    MessageBox.Show(message);
    }
}

private async void BtnLogin_Click(object sender, RoutedEventArgs e)

{

    await Authenticate();

    if (null != this.user)

    {

    RefreshTodoItems();

    }

}

运行看看效果，现在又可以刷新和添加TodoItem了

6. 如果需要得到更多的用户信息，则需要下载并安装LiveSDK（ http://msdn.microsoft.com/en-us/live/ff621310 ），并为MyTodos添加引用到Microsoft.Live

a) 按下面的代码修改MainPage.Authenticate

View Code

private async System.Threading.Tasks.Task Authenticate()

{

if (user == null)

{

string message = "You must log in. Login Required";

try

{

string clientId = "用注册app时得到的客户端ID";

LiveAuthClient liveIdClient = new LiveAuthClient(clientId);

LiveLoginResult result = await liveIdClient.LoginAsync(new[] { "wl.basic", "wl.photos" });

if (result.Status == LiveConnectSessionStatus.Connected)

{

LiveConnectClient client = new LiveConnectClient(result.Session);

var me = await client.GetAsync("me");

user = await App.MobileService.LoginAsync(result.Session.AuthenticationToken); //(MobileServiceAuthenticationProvider.MicrosoftAccount);

this.TitleTextBlock.Text = this.TitleTextBlock.Text +

" - welcome, "

+ me.Result["first_name"].ToString() + "." + me.Result["last_name"].ToString();

message = string.Format("You are now logged in - {0}", user.UserId);

}

else

{

message = string.Format("Connect to microsoft account failed. Status: {0}", result.Status);

}

}

catch (LiveAuthException authEx)

{

message = string.Format("{0}:{1}", authEx.GetType().Name, HttpUtility.UrlDecode(authEx.Message));

}

catch (LiveConnectException connEx)

{

message = string.Format("{0}:{1}", connEx.GetType().Name, HttpUtility.UrlDecode(connEx.Message));

}

catch (InvalidOperationException ex)

{

message = ex.Message;

}

MessageBox.Show(message);

}

}

运行效果如下,可以看到登录的页面与之前稍有差别,但这次能得到更多的用户信息

添加推送通知

1. 添加代码如下

a) 在App.xaml.cs中添加如下代码

View Code

public static HttpNotificationChannel CurrentChannel { get; private set; }

private static readonly string ChannelName = "MyTodosPushChannel";

private void AcquirePushChannel()

{

CurrentChannel = HttpNotificationChannel.Find(ChannelName);

if (CurrentChannel == null)

{

CurrentChannel = new HttpNotificationChannel(ChannelName);

CurrentChannel.Open();

CurrentChannel.BindToShellTile();

CurrentChannel.BindToShellToast();

}

CurrentChannel.ShellToastNotificationReceived += CurrentChannel_ShellToastNotificationReceived;

}

void CurrentChannel_ShellToastNotificationReceived(object sender, NotificationEventArgs e)

{

string msg = "";

foreach (var kv in e.Collection)

{

msg = msg + "\r\n" + kv.Key.ToString() + ": " + kv.Value;

}

Deployment.Current.Dispatcher.BeginInvoke(() => { MessageBox.Show(msg); });

}

b) 在Application_Launching中调用AcquirePushChannel

View Code

private void Application_Launching(object sender, LaunchingEventArgs e)

{

AcquirePushChannel();

}

c) 给TodoItem class添加一个property

View Code

[DataMember(Name = "channel")]

public string Channel { get; set; }

d) 修改MainPage.xaml.cs的ButtonSave_Click，代码如下。由于我们启用的动态架构，所以Save的时候Mobile Service会为新添加的Channel属性创建一个对应的数据库字段。

View Code

private void ButtonSave_Click(object sender, RoutedEventArgs e)

{

var todoItem = new TodoItem

{

Text = TodoInput.Text,

Channel = App.CurrentChannel.ChannelUri.ToString()

};

InsertTodoItem(todoItem);

}

2. 给App开启推送

3. 回到Azure的Portal，修改Mobile Service服务端script并保存，详细参数可以参考这里：

http://msdn.microsoft.com/en-us/library/windowsazure/jj871025.aspx

代码如下：

View Code

function insert(item, user, request) {

request.execute({

success: function () {

request.respond();

// send flip tile

push.mpns.sendFlipTile(item.channel, {

title: item.text

}, {

success: function (pushResponse) {

console.log("Sent flip tile push:", pushResponse);

}

});

// send toast

push.mpns.sendToast(item.channel, {

text1: 'MyTodos',

text2: item.text

}, {

success: function(pushResponse){

console.log("Sent toast push:", pushResponse);

}

});

}

});

}