2012年9月5日

Windows Azure - 使用Mobile Service來處理行動裝置APP的Data

上一篇體驗完Mobile Service的強大後,今天我們繼續延續微軟官方的教材;這次的內容在說明,當我們建立了行動裝置APP( 這裡使用Win Store App來舉例 ),一定會有資料需要和後面的資料庫等作處理;通常我們會怎麼做!?,第一天,準備好資料庫 ( 不要問我為什麼要一天,上班總是要有摸魚時間嘛 ),第二天開始撰寫Service,第三天休息上網聊天打屁,第四天撰寫一下傳遞用的物件,第五天正式整合,然後可能因為失敗,假日還要來繼續加班;當然,對於神人大大門來說,可能一天就搞定了,但就算是一天搞定,還是要處理很多事情,所以今天,我們介紹的Mobile Service Data篇,他輕鬆地幫我們解決這些問題!!讓我們可以只要花短短一天的時間,就做完全部的事情,讓我們剩下四天,都可以輕鬆的打混!!(疑!?)…

這篇目前不會講太多的技術原理,未來可能會在這篇補完,也有可能另外寫一篇;這篇的重點,是希望大家快速地感受到,Mobile Service的好處。( 當然,另外一個理由,也是因為直接翻譯官方教學而來XDD,有些細節還沒深入去看… )

在開始前,這篇範例需要使用到Win 8和Visual Studio 2012,如果沒有的人,也可以直接看圖,我幾乎把所有的圖都截下來了,如果轉快一點,搞不好會出現動畫的效果喔!! ( 不要當真阿!! )

實際要做的人,需要先去下面網址下載範例,然後就可以正式開始了。

http://code.msdn.microsoft.com/Get-Started-with-Data-in-8c9239e6

開啟應用程式

下載完後,裡面會有如下圖的東西,可以放到你喜歡的位置,但不要放到資源回收桶!!

image

利用Visual Studio 2012打開後,並且啟動起來 ( 使用模擬器,不知道的人可以參考上一篇 ),就會開啟如下圖的應用程式,當我們在左邊的TextBox輸入資料後,並點擊Save後,就可以在右邊看到;其實這就是典型的超簡單TodoList。當然,不會這樣就結束了。

image

目前下載下來的範例,是將資料存到本機端,我們可以從下面程式碼看到,會有一個TodoItem來存放輸入的TextBox資料 ( 也就是TextInput.Text ),並且利用InsertTodoItem方法來存放這個物件。

private void ButtonSave_Click(object sender, RoutedEventArgs e)
{
    var todoItem = new TodoItem { Text = TextInput.Text };
    InsertTodoItem(todoItem);
}

當然,這個方法,其實也只是利用items.Add方法來存放,通常看到Add,我們大概就可以猜想到了;而第一行,只是來設定TodoItem的Id值而已。

private void InsertTodoItem(TodoItem todoItem)
{
    todoItem.Id = items.Count == 0 ? 0 : items.Max(i => i.Id) + 1;
     
    items.Add(todoItem);
}

其實再往上捲一點,就可以發現到了- -,items就是ObservableCollection型別。

public sealed partial class MainPage : Page
{
    private ObservableCollection<todoitem> items = new ObservableCollection<todoitem>();
...
}

到這邊,其實整個app很簡單,就是存到Collection裡面而已,但是,我們當然希望能把資料存到雲端上面去啊!!這樣資料才有機會跨平台,甚至可以保存!!所以接下來,我們要開始建立Mobile Service的Data。

建立Mobile Service

當然,建立任何Service都擺脫不了這個加號。

image

然後我們選擇Mobile Service,如果不能選的人,請看上一篇

image

接下來,我們要輸入超帥氣的URL,並且選擇新的Database,你也可以沿用舊的啦,這就看各人了。

image

然後我們要輸入一下Database的名稱,然後我們可以決定這個Database要放置的Server是哪一台( 這邊我們建立新Server ),並且給管理的名稱,和PW。

image

完成後,就會看到他在建立中,其實還滿快的。

image

完成後,我們就可以進去建立Data。

image

這邊選擇DATA。

image

這裡選擇ADD A TABLE。

image

我們決定一下DB的Table名稱,按下去之後,就會在DB建立好Table,另外,我們可以從下面的選項,來控制App存取權限。

image

完成後,就會看到TodoItem已經建立好了,我們可以再進一步的點進去看看。

image

點進去後,我們可以發現,裡面已經先幫我們建立好了一個Id欄位。

image

我們回到主畫面,按下CONFIGURE。

image

我們可以看到下面有一個Dynamic Schema已經啟動了,當這個啟動的時候,如果有JSON物件傳到Mobile Service時,Mobile Service就會自動地幫我們建立需要的欄位!!有沒有超方便的啦!!

image

到這邊,Mobile Service就已經設定好了,接下來,我們要開始改寫原本的程式。

改寫程式

首先,我們要先有安裝Mobile Services SDK,沒安裝的人,記得先去下載。

接下來,回到Visual Studio 2012,將Windows Azure Mobile Service Managed Client給參考進去。

image

我們第一步,需要先在App.xaml.cs這個檔案做設定,如下程式碼,我們要在AppUri輸入Mobile Service的網址,並且在AppKey的地方輸入存取Key。

public static MobileServiceClient MobileService = new MobileServiceClient(
    "AppUrl",
    "AppKey"
);

Key可以從下圖位置找到。

image

整個填法,可以參考下圖;另外,原本官方給的範例程式,其實都已經寫好了,只是把程式碼給註解了,把註解拿掉就可以;我們可以從下圖看到需要填值的位置。

image

接下來,我們要進入MainPage.xaml.cs進行修改,除了要加Microsoft.WindowsAzure.MobileServices這個NameSpace外,我們還要在建構子那邊,把原本的ObservableCollection那行給註解,並且把原本註解的程式碼復原,如下圖。

image

為了方便觀看,我又把程式碼貼出來,需要復原的程式碼如下,我們改用了MobileService的物件。

private MobileServiceCollectionView<todoitem> items;
private IMobileServiceTable<todoitem> todoTable = App.MobileService.GetTable<todoitem>();

接下來,在InsertTodoItem的地方,把todoItem.id那行註解調,現在交給DB來自動跳號了,並且在InsertTodoItem方法前面加上async,因為我們要用到非同步的功能,最後再把原本被註解掉的程式碼復原。

image

一樣,要復原的程式碼貼在這邊;我們利用todoTable物件,來進行新增資料的動作,當然,怎樣丟到Windows Azure上去,Microsoft都幫我們處理好了。

await todoTable.InsertAsync(todoItem);

接下來,來到RefreshTodoItems這個方法,我們先把如下圖的程式碼復原就好,

image

程式碼如下,這邊這裡,是當我們按下Refresh按鈕時要處理的事情,我們一樣使用Microsoft提供給我們的Mobile Service物件,來將資料塞到items裡面來。

items = todoTable.ToCollectionView();

最後,我們要處理UpdateChecktdTodoItem這個方法,因為一樣要使用到非同步,所以方法前面要加上async。

image

當然,這邊也是用todoTable物件來更新資料庫的資料。

await todoTable.UpdateAsync(item); 

剛完成之後,我們可以再把程式Run起來,一樣填填看,基本上,和原本的程式沒啥兩樣。

image

但我們回到管理介面,其實可以發現,資料已經丟到Windows Azure上了,更神奇的,連欄位都幫我們建立好了!!

image

到這邊,也算告一個段落,我們只剩下一點點東西,還沒調整。

小小的調整

或許有玩過第一版的人,會發現,這次在Checkbox打了勾之後,就不會消失了。

image

所以我們針對這個問題,利用Linq進行小小的修改;我們回到RefreshTodoItems這個方法,並把原本的註解,現在換上第二段程式碼。

image

同樣,為了方便起見,我把它貼到下面;我們這邊用Linq來過濾,如果為False,才會傳回到items。

items = todoTable
.Where(todoItem => todoItem.Complete == false)
.ToCollectionView();

然後我們再按一下Refresh按鈕,就會發現已經勾勾的Todo,全都不見了。

image

這樣,程式就告一個段落了!!

後記

當然,這個App還有些少許的東西沒加上去,所以並沒有第一版的完整,但這個就不在Mobile Service的教學範圍內了;這篇主要的目的,還是希望大家能感受到,Mobile Service強大的功能,也省略掉很多開發的時間,相信體驗過後,一定會發出一聲,哇!!的讚嘆聲!!

參考資料

沒有留言:

張貼留言