使用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 tilepush.mpns.sendFlipTile(item.channel, {title: item.text}, {success: function (pushResponse) {console.log("Sent flip tile push:", pushResponse);}});// send toastpush.mpns.sendToast(item.channel, {text1: 'MyTodos',text2: item.text}, {success: function(pushResponse){console.log("Sent toast push:", pushResponse);}});}});}

 

4. 把MyTodos pin到主介面上，運行app，觀察效果

 

總結

Azure Mobile Service極大地簡化了server端的代碼開發，尤其是對於比較小的應用來說，更是非常方便，使App開發人員可以專註於前端代碼。

 

附：

用戶端原始碼在這裡