Xamarin.Forms 在 Azure 行動應用內，使用 Azure 儲存體

在 Azure 行動應用內，使用 Azure 儲存體

在 Azure 行動應用 綁定 Azure 儲存體

1. 進入到 Microsoft Azure 儀表板，接著點選 doggymobilebe 行動 App 圖示，進入到 doggymobilebe 行動 App 設定刀鋒頁面。
2. 點選 資料連接 ，當出現 Data Connections 刀鋒頁面，點選 + Add 連結
3. 在 Add data conne... 刀鋒頁面，點選標題 Type 欄位下方的下拉選單，選擇 Storage
   • 接著點選下方的 Storage ma8be62c4718c34f >
   • 在 儲存體帳戶 刀鋒視窗下，點選 + 新建
   • 在 剛剛出現的 儲存體帳戶 刀鋒視窗，請點選下方的 確定 按鈕
     
4. 當回到 Add data conne... 刀鋒視窗下方，點選 確定 按鈕
5. 當 Data Connection 建立完成後，會在 Data Connections 刀鋒視窗內，看到MS_AzureStorageAccountConnectionString 名稱出現。
   
   • 當回到 Azure 儀表板，點選 所有資源，在 所有資源 刀鋒視窗內，會看到這個 ma8be62c4718c34f之 Azure 儲存體 已經建立完成了。
   

修改 Azure Mobile App後端服務專案

在這裡，將會使用完成 附件 Azure Mobile App 後端服務建立說明 實作內容後，得到的 Azure Mobile App後端服務專案 來繼續實作這個範例。

1. 使用 Visual Studio 2015，開啟 Azure Mobile App後端服務專案 `DoggyMobileBE.sln
2. 將這個 NuGet 套件加入 Microsoft.Azure.Mobile.Server.Files 到專案內

   請記得要勾選 包括搶鮮版

   
3. 使用滑鼠右擊 DoggyMobileBEService > Controllers 選擇 加入 > 控制器
4. 當出現 新增 Scaffold 對話窗出現後，點選 Web API 2 控制器 - 空白 ，然後點選 新增 按鈕
   
5. 在 加入控制器 對話窗內，把 TodoItemStorageController 填入到 控制器名稱 欄位內
   
6. 當 TodoItemStorageController.cs 檔案建立完成之後，請在該檔案內加入底下 using 敘述

using Microsoft.Azure.Mobile.Server.Files;
using Microsoft.Azure.Mobile.Server.Files.Controllers;
using DoggyMobileBEService.DataObjects;
using System.Threading.Tasks;

1. 變更 StorageController 類別的基礎類別為 StorageController<TodoItem>

public class TodoItemStorageController : StorageController<TodoItem>

1. 加入底下方法到這個類別內

[HttpPost]
[Route("tables/TodoItem/{id}/StorageToken")]
public async Task<HttpResponseMessage> PostStorageTokenRequest(string id, StorageTokenRequest value)
{
    StorageToken token = await GetStorageTokenAsync(id, value);

    return Request.CreateResponse(token);
}

// Get the files associated with this record
[HttpGet]
[Route("tables/TodoItem/{id}/MobileServiceFiles")]
public async Task<HttpResponseMessage> GetFiles(string id)
{
    IEnumerable<MobileServiceFile> files = await GetRecordFilesAsync(id);

    return Request.CreateResponse(files);
}

[HttpDelete]
[Route("tables/TodoItem/{id}/MobileServiceFiles/{name}")]
public Task Delete(string id, string name)
{
    return base.DeleteFileAsync(id, name);
}

1. 更新 Web API 的設定，請開啟 App_Start 資料夾內的 Startup.MobileApp.cs 檔案；將下列程式碼加入到 config 變數定義之後。

config.MapHttpAttributeRoutes();

1. 請重新發行這個專案，使用滑鼠右擊 DoggyMobileBEService ，並選擇 發行 選項。

修正 Xamarin.Forms 可以使用 Azure 儲存體

1. 使用 Visual Studio 2015，開啟 Azure Mobile App 前端專案 DoggyMobileBE.sln
2. 滑鼠右擊方案 DoggyMobileBE，選擇 管理方案的 NuGet 套件，請依序安裝底下套件到所有專案內。

   請記得要勾選 包括搶鮮版

   • Microsoft.Azure.Mobile.Client.Files
   • Microsoft.Azure.Mobile.Client.SQLiteStore
3. 在核心PCL專案，滑鼠右擊節點 DoggyMobileBE，接著選擇 加入 > 新增項目
   • 在 加入新項目 - DoggyMobileBE 對話窗內，點選 Visual C# > 介面，在下方 名稱 欄位中，輸入 IPlatform，接著，點選 新增 按鈕
   • 在該檔案內，加入底下 using 敘述

using Microsoft.WindowsAzure.MobileServices.Files;
using Microsoft.WindowsAzure.MobileServices.Files.Metadata;
using Microsoft.WindowsAzure.MobileServices.Sync;

• 將該介面的定義使用底下程式碼替換

public interface IPlatform
{
    Task <string> GetTodoFilesPathAsync();

    Task<IMobileServiceFileDataSource> GetFileDataSource(MobileServiceFileMetadata metadata);

    Task<string> TakePhotoAsync(object context);

    Task DownloadFileAsync<T>(IMobileServiceSyncTable<T> table, MobileServiceFile file, string filename);
}

1. 在核心PCL專案，滑鼠右擊節點 DoggyMobileBE，接著選擇 加入 > 類別
   • 在 加入新項目 - DoggyMobileBE 對話窗內，點選 Visual C# > 類別，在下方 名稱 欄位中，輸入 FileHelper，接著，點選 新增 按鈕
   • 在該檔案內，加入底下 using 敘述

using System.IO;
using PCLStorage;
using System.Threading.Tasks;
using Xamarin.Forms;

* 將該類別的定義使用底下程式碼替換

public class FileHelper
{
    public static async Task<string> CopyTodoItemFileAsync(string itemId, string filePath)
    {
        IFolder localStorage = FileSystem.Current.LocalStorage;

        string fileName = Path.GetFileName(filePath);
        string targetPath = await GetLocalFilePathAsync(itemId, fileName);

        var sourceFile = await localStorage.GetFileAsync(filePath);
        var sourceStream = await sourceFile.OpenAsync(FileAccess.Read);

        var targetFile = await localStorage.CreateFileAsync(targetPath, CreationCollisionOption.ReplaceExisting);

        using (var targetStream = await targetFile.OpenAsync(FileAccess.ReadAndWrite)) {
            await sourceStream.CopyToAsync(targetStream);
        }

        return targetPath;
    }

    public static async Task<string> GetLocalFilePathAsync(string itemId, string fileName)
    {
        IPlatform platform = DependencyService.Get<IPlatform>();

        string recordFilesPath = Path.Combine(await platform.GetTodoFilesPathAsync(), itemId);

            var checkExists = await FileSystem.Current.LocalStorage.CheckExistsAsync(recordFilesPath);
            if (checkExists == ExistenceCheckResult.NotFound) {
                await FileSystem.Current.LocalStorage.CreateFolderAsync(recordFilesPath, CreationCollisionOption.ReplaceExisting);
            }

        return Path.Combine(recordFilesPath, fileName);
    }

    public static async Task DeleteLocalFileAsync(Microsoft.WindowsAzure.MobileServices.Files.MobileServiceFile fileName)
    {
        string localPath = await GetLocalFilePathAsync(fileName.ParentId, fileName.Name);
        var checkExists = await FileSystem.Current.LocalStorage.CheckExistsAsync(localPath);

        if (checkExists == ExistenceCheckResult.FileExists) {
            var file = await FileSystem.Current.LocalStorage.GetFileAsync(localPath);
            await file.DeleteAsync();
        }
    }
}

1. 在核心PCL專案，滑鼠右擊節點 DoggyMobileBE，接著選擇 加入 > 類別
   • 在 加入新項目 - DoggyMobileBE 對話窗內，點選 Visual C# > 類別，在下方 名稱 欄位中，輸入 TodoItemFileSyncHandler，接著，點選 新增 按鈕
   • 在該檔案內，加入底下 using 敘述

using System.Threading.Tasks;
using Microsoft.WindowsAzure.MobileServices.Files.Sync;
using Microsoft.WindowsAzure.MobileServices.Files;
using Microsoft.WindowsAzure.MobileServices.Files.Metadata;
using Xamarin.Forms;

* 將該類別的定義使用底下程式碼替換

public class TodoItemFileSyncHandler : IFileSyncHandler
{
    private readonly TodoItemManager todoItemManager;

    public TodoItemFileSyncHandler(TodoItemManager itemManager)
    {
        this.todoItemManager = itemManager;
    }

    public Task<IMobileServiceFileDataSource> GetDataSource(MobileServiceFileMetadata metadata)
    {
        IPlatform platform = DependencyService.Get<IPlatform>();
        return platform.GetFileDataSource(metadata);
    }

    public async Task ProcessFileSynchronizationAction(MobileServiceFile file, FileSynchronizationAction action)
    {
        if (action == FileSynchronizationAction.Delete) {
            await FileHelper.DeleteLocalFileAsync(file);
        }
        else { // Create or update. We're aggressively downloading all files.
            await this.todoItemManager.DownloadFileAsync(file);
        }
    }
}

1. 展開核心PCL DoggyMobileBE 專案，滑鼠雙擊 Properties 節點
   • 當在 Visual Studio 2015 內，出現了 DoggyMobileBE 視窗，請點選 建置
   • 在標題 條件式編譯的符號 欄位內，填入 OFFLINE_SYNC_ENABLED
   
2. 在核心PCL 專案內，開啟 TodoItemManager.cs 檔案，
   • 在該檔案內，加入底下 using 敘述

using System.IO;
using Xamarin.Forms;
using Microsoft.WindowsAzure.MobileServices.Files;
using Microsoft.WindowsAzure.MobileServices.Files.Sync;
using Microsoft.WindowsAzure.MobileServices.Eventing;

• 在 TodoItemManager 類別建構式內，在 DefineTable() 方法之後，加入底下程式碼

// Initialize file sync
this.client.InitializeFileSyncContext(new TodoItemFileSyncHandler(this), store);

• 在建構式內，將 InitializeAsync 方法使用底下程式碼置換

this.client.SyncContext.InitializeAsync(store, StoreTrackingOptions.NotifyLocalAndServerOperations);

• 在 SyncAsync() 方法內，將底下程式碼加入到 PushAsync() 之後

await this.todoTable.PushFileChangesAsync();

• 加入底下方法到 TodoItemManager 類別內

internal async Task DownloadFileAsync(MobileServiceFile file)
{
    var todoItem = await todoTable.LookupAsync(file.ParentId);
    IPlatform platform = DependencyService.Get<IPlatform>();

    string filePath = await FileHelper.GetLocalFilePathAsync(file.ParentId, file.Name); 
    await platform.DownloadFileAsync(this.todoTable, file, filePath);
}

internal async Task<MobileServiceFile> AddImage(TodoItem todoItem, string imagePath)
{
    string targetPath = await FileHelper.CopyTodoItemFileAsync(todoItem.Id, imagePath);
    return await this.todoTable.AddFileAsync(todoItem, Path.GetFileName(targetPath));
}

internal async Task DeleteImage(TodoItem todoItem, MobileServiceFile file)
{
    await this.todoTable.DeleteFileAsync(file);
}

internal async Task<IEnumerable<MobileServiceFile>> GetImageFilesAsync(TodoItem todoItem)
{
    return await this.todoTable.GetFilesAsync(todoItem);
}

1. 在核心PCL專案，滑鼠右擊節點 DoggyMobileBE，接著選擇 加入 > 類別
   • 在 加入新項目 - DoggyMobileBE 對話窗內，點選 Visual C# > 類別，在下方 名稱 欄位中，輸入 TodoItemImage，接著，點選 新增 按鈕
   • 在該檔案內，使用底下類別定義替換掉 TodoItemImage 的定義

public class TodoItemImage : INotifyPropertyChanged
{
    private string name;
    private string uri;

    public MobileServiceFile File { get; private set; }

    public string Name
    {
        get { return name; }
        set
        {
            name = value;
            OnPropertyChanged(nameof(Name));
        }
    }

    public string Uri
    {
        get { return uri; }      
        set
        {
            uri = value;
            OnPropertyChanged(nameof(Uri));
        }
    }

    public TodoItemImage(MobileServiceFile file, TodoItem todoItem)
    {
        Name = file.Name;
        File = file;

        FileHelper.GetLocalFilePathAsync(todoItem.Id, file.Name).ContinueWith(x => this.Uri = x.Result);
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

1. 在核心PCL內，打開 App.cs
   • 將檔案內的 MainPage 使用底下程式碼來替換

MainPage = new NavigationPage(new TodoList());

• 在這個 App 類別內，加入底下靜態屬性

public static object UIContext { get; set; }

1. 在核心PCL專案，滑鼠右擊節點 DoggyMobileBE，接著選擇 加入 > 新增項目
   • 在 加入新項目 - DoggyMobileBE 對話窗內，點選 Cross-Platform > Forms Xaml Page，在下方名稱 欄位中，輸入 TodoItemDetailsView，接著，點選 新增 按鈕
   • 打開 TodoItemDetailsView.xaml 檔案，使用底下定義替換掉這個檔案內的 ContentPage 內的宣告

  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Button Clicked="OnAdd" Text="Add image"></Button>
    <ListView x:Name="imagesList"
              ItemsSource="{Binding Images}"
              IsPullToRefreshEnabled="false"
              Grid.Row="2">
      <ListView.ItemTemplate>
        <DataTemplate>
          <ImageCell ImageSource="{Binding Uri}"
                     Text="{Binding Name}">
          </ImageCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
  </Grid>

* 打開 `TodoItemDetailsView.xaml.cs` 檔案，將底下的 using 定義加入到這個檔案內

using System.Collections.ObjectModel;
using Microsoft.WindowsAzure.MobileServices.Files;

* 使用底下程式碼替換掉 `TodoItemDetailsView` 類別定義

public partial class TodoItemDetailsView : ContentPage
{
    private TodoItemManager manager;

    public TodoItem TodoItem { get; set; }        
    public ObservableCollection<TodoItemImage> Images { get; set; }

    public TodoItemDetailsView(TodoItem todoItem, TodoItemManager manager)
    {
        InitializeComponent();
        this.Title = todoItem.Name;

        this.TodoItem = todoItem;
        this.manager = manager;

        this.Images = new ObservableCollection<TodoItemImage>();
        this.BindingContext = this;
    }

    public async Task LoadImagesAsync()
    {
        IEnumerable<MobileServiceFile> files = await this.manager.GetImageFilesAsync(TodoItem);
        this.Images.Clear();

        foreach (var f in files) {
            var todoImage = new TodoItemImage(f, this.TodoItem);
            this.Images.Add(todoImage);
        }
    }

    public async void OnAdd(object sender, EventArgs e)
    {
        IPlatform mediaProvider = DependencyService.Get<IPlatform>();
        string sourceImagePath = await mediaProvider.TakePhotoAsync(App.UIContext);

        if (sourceImagePath != null) {
            MobileServiceFile file = await this.manager.AddImage(this.TodoItem, sourceImagePath);

            var image = new TodoItemImage(file, this.TodoItem);
            this.Images.Add(image);
        }
    }
}

1. 在核心PCL 專案內，打開 TodoList.xaml.cs 檔案
   • 請將 OnSelected 方法，使用底下程式碼替換掉

public async void OnSelected(object sender, SelectedItemChangedEventArgs e)
{
    var todo = e.SelectedItem as TodoItem;

    if (todo != null) {
        var detailsView = new TodoItemDetailsView(todo, manager);
        await detailsView.LoadImagesAsync();
        await Navigation.PushAsync(detailsView);
    }

    todoList.SelectedItem = null;
}

修正 DoggyMobileBE.Droid 專案內容

1. 在 DoggyMobileBE.Droid 專案，滑鼠右擊專案內的 Components 節點，接著，選擇 Get More Components...
   • 當出現 All Components 對話視窗，請在左上方輸入 Xamarin.Mobile ，進行搜尋這個元件，當搜尋到之後，點選右半部的那個元件。
   
   • 當 Xamarin.Mobile 元件出現之後，請點選 Add to App 按鈕，安裝這個元件到 Android 專案內。
   
2. 在核心PCL專案，滑鼠右擊節點 DoggyMobileBE.Droid，接著選擇 加入 > 類別
   • 在 加入新項目 - DoggyMobileBE.Droid 對話窗內，點選 Visual C# > Class，在下方 名稱 欄位中，輸入 DroidPlatform，接著，點選 新增 按鈕
   • 在該檔案內，使用底下類別定義替換掉 TodoItemImage 的定義

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using System.Threading.Tasks;
using Microsoft.WindowsAzure.MobileServices.Sync;
using Microsoft.WindowsAzure.MobileServices.Files.Metadata;
using Microsoft.WindowsAzure.MobileServices.Files;
using Microsoft.WindowsAzure.MobileServices.Files.Sync;
using System.IO;
using Xamarin.Media;

[assembly: Xamarin.Forms.Dependency(typeof(DoggyMobileBE.Droid.DroidPlatform))]
namespace DoggyMobileBE.Droid
{
    public class DroidPlatform : IPlatform
    {
        public async Task DownloadFileAsync<T>(IMobileServiceSyncTable<T> table, MobileServiceFile file, string filename)
        {
            var path = await FileHelper.GetLocalFilePathAsync(file.ParentId, file.Name);
            await table.DownloadFileAsync(file, path);
        }

        public async Task<IMobileServiceFileDataSource> GetFileDataSource(MobileServiceFileMetadata metadata)
        {
            var filePath = await FileHelper.GetLocalFilePathAsync(metadata.ParentDataItemId, metadata.FileName);
            return new PathMobileServiceFileDataSource(filePath);
        }

        public async Task<string> TakePhotoAsync(object context)
        {
            try
            {
                var uiContext = context as Context;
                if (uiContext != null)
                {
                    var mediaPicker = new MediaPicker(uiContext);
                    var photo = await mediaPicker.TakePhotoAsync(new StoreCameraMediaOptions());

                    return photo.Path;
                }
            }
            catch (TaskCanceledException)
            {
            }

            return null;
        }

        public Task<string> GetTodoFilesPathAsync()
        {
            string appData = System.Environment.GetFolderPath(System.Environment.SpecialFolder.MyDocuments);
            string filesPath = Path.Combine(appData, "TodoItemFiles");

            if (!Directory.Exists(filesPath))
            {
                Directory.CreateDirectory(filesPath);
            }

            return Task.FromResult(filesPath);
        }
    }
}

1. 打開 MainActivity.cs 檔案，在 OnCreate 方法內，在 LoadApplication() 方法之前，加入底下程式碼。

App.UIContext = this;

1. 滑鼠右擊專案節點 DoggyMobileBE.Droid 選擇 設定為起始專案，並且按下 F5 開始執行
   • 因為採用離線存取方式，因此，就算當時裝置沒有連上網路，也可以看的到資料。
     
   • 使用 Add image 按鈕，可以透過裝置新增照片，並且該這片將會儲存到遠端的 Azure 儲存體中
     
   • 另外，在 Azure 的 Blob服務 網頁中，也可以看到這些圖片已經儲存到 Azure 儲存體上了。
     

修正 DoggyMobileBE.iOS 專案內容

1. 在 DoggyMobileBE.iOS 專案，滑鼠右擊專案內的 Components 節點，接著，選擇 Get More Components...
   • 當出現 All Components 對話視窗，請在左上方輸入 Xamarin.Mobile ，進行搜尋這個元件，當搜尋到之後，點選右半部的那個元件。
   
   • 當 Xamarin.Mobile 元件出現之後，請點選 Add to App 按鈕，安裝這個元件到 Android 專案內。
   
2. 在核心PCL專案，滑鼠右擊節點 DoggyMobileBE.Droid，接著選擇 加入 > 類別
   • 在 加入新項目 - DoggyMobileBE.Droid 對話窗內，點選 Apple > 類別，在下方 名稱 欄位中，輸入 TouchPlatform，接著，點選 新增 按鈕
   • 在該檔案內，使用底下類別定義替換掉 TodoItemImage 的定義

using Microsoft.WindowsAzure.MobileServices.Files;
using Microsoft.WindowsAzure.MobileServices.Files.Metadata;
using Microsoft.WindowsAzure.MobileServices.Files.Sync;
using Microsoft.WindowsAzure.MobileServices.Sync;
using System;
using System.Collections.Generic;
using System.IO;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Media;

[assembly: Xamarin.Forms.Dependency(typeof(DoggyMobileBE.iOS.TouchPlatform))]
namespace DoggyMobileBE.iOS
{
    class TouchPlatform : IPlatform
    {
        public async Task DownloadFileAsync<T>(IMobileServiceSyncTable<T> table, MobileServiceFile file, string filename)
        {
            var path = await FileHelper.GetLocalFilePathAsync(file.ParentId, file.Name);
            await table.DownloadFileAsync(file, path);
        }

        public async Task<IMobileServiceFileDataSource> GetFileDataSource(MobileServiceFileMetadata metadata)
        {
            var filePath = await FileHelper.GetLocalFilePathAsync(metadata.ParentDataItemId, metadata.FileName);
            return new PathMobileServiceFileDataSource(filePath);
        }

        public async Task<string> TakePhotoAsync(object context)
        {
            try
            {
                var mediaPicker = new MediaPicker();
                var mediaFile = await mediaPicker.PickPhotoAsync();
                return mediaFile.Path;
            }
            catch (TaskCanceledException)
            {
                return null;
            }
        }

        public Task<string> GetTodoFilesPathAsync()
        {
            string filesPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments), "TodoItemFiles");

            if (!Directory.Exists(filesPath))
            {
                Directory.CreateDirectory(filesPath);
            }

            return Task.FromResult(filesPath);
        }
    }
}

1. 打開 AppDelegate.cs 檔案，解除的註解 SQLitePCL.CurrentPlatform.Init()。

App.UIContext = this;

1. 滑鼠右擊專案節點 DoggyMobileBE.Droid 選擇 設定為起始專案，並且按下 F5 開始執行
   • 因為採用離線存取方式，因此，就算當時裝置沒有連上網路，也可以看的到資料。
     
   • 剛剛在 Android 平台下，已經在 Second item 項目內新增了三個照片，所以，當開啟 iOS 應用程式的時候，就可以直接看到這些圖片了。也可以從圖檔編號是一樣來確認。
     

Azure Mobile App 後端服務建立說明 Xamarin

Azure Mobile App 後端服務建立說明

在這裡，需要使用 Azure Mobile App 來建立 Doggy 這家公司跨平台行動應用程式所需要的後端服務，這包含了，身分驗證、資料存取、圖片檔案存取服務。

這篇文章將會說明如何建立與設定這些服務，並且，利用 Azure Mobile App 平台提供的範例專案，進行測試，確認這些功能可以正常運作。

建立 Azure Mobile App

1. 開啟瀏覽器，輸入網址：https://azure.microsoft.com/en-us/ ，接著，點選右上角的 PORTAL，進入到 Azure 管理儀表板中。
   在這裡，假設您已經具有 Azure 使用權的帳號與密碼，若還沒有，可以線上進行免費申請。
   
2. 在 Azure 儀表板點選 + 新增，接著在出現的刀鋒視窗內點選 Web + 行動，在 Web + 行動 刀鋒視窗內點選 Mobile App。
   • 請在 Mobile App 刀鋒視窗內的 應用程式名稱 欄位內輸入 DoggyMobileBE
   • 選擇您的 Azure 訂閱帳戶
   • 資源群組 您可以選擇新建立，或者在這裡是選擇之前建立過的資源群組
   • 請點選 App Service 方案與位置，在 App Server 方案之刀鋒視窗內，點選 + 新建
     (App Service 方案是您 app 的容器。App Service 方案設定將會決定與 app 相關聯的位置、功能、成本與運算資源。)
   • 在 App Service 方案 刀鋒視窗內的 App Service 方案 輸入 DoggyMobileSolution，而在 位置 選擇 East Asia，定價層 則使用預設值 S1 標準，最後點選下方的 確定 按鈕。
   • 此時，最右邊的刀鋒視窗就會成為 Mobile App (另外兩個刀鋒視窗，會自動關閉)，請在此刀鋒視窗下，勾選 釘選到到儀表板 檢查盒，接著點選 建立 按鈕。
   • 此時，Microsoft Azure 就會開始進行建立 DoggyMobileBE 這個 Azure Mobile App 後端服務。
     
   • 當這個服務建立完成後，可以透過右上方的通知圖示 (一個鐘的符號)得知，而各項在 Microsoft Azure 上的操作，都可以透過這個通知功能知道操作是成功還是失敗與處理進度到哪裡。
     
3. 當 DoggyMobileBE 這個 Azure Mobile App 後端服務建立完成後，點選左上角的 Microsoft Azure 文字，就可以回到 Microsoft Azure 儀表板，也會看到 doggymobilebe 這個行動App服務已經建立完成了。
   

建立後端資料存取來源

接下來，您需要在 Azure Mobile App 內，設定所要存取後端資料的資料庫資訊、選擇後端服務的程式語言、佈署與測試端服務是否有正常運作。

1. 請點選網頁左上角 Microsoft Azure 文字，進入到 Microsoft Azure 儀表板，接著點選 doggymobilebe 行動 App 圖示，進入到 doggymobilebe 行動 App 設定刀鋒頁面。
2. 當出現 設定 刀鋒視窗，請點選 快速入門
3. 當出現 Quick start 刀鋒視窗, 請點選 Xamarin.Forms
   
4. 在 Xamarin.Forms 刀鋒視窗內，點選 1 Connect a database 下的 i 圖示，準備進入設定資料庫伺服器與資料庫的設定：

   在這裡，將會假設您需要新建立一個新的 SQL Server 伺服器並且建立一個新的資料庫，若您需要採用現行 Azure 上存在的 SQL Server 伺服器或者資料庫，請自行點選相關設定。

   • 當出現 Data Connections 刀鋒視窗，請點選 + Add 連結
   • 在 Add Data Connections 刀鋒視窗下，點選 SQL Database 設定必要條件
   • 在 資料庫 刀鋒視窗，點選 建立新資料庫
   • 在 新資料庫 刀鋒視窗，在 名稱 欄位，輸入 DoggyMobileDb，設定該資料庫的名稱
   • 定價層 與 定序 都使用預設值
   • 點選 伺服器 設定必要條件
   • 當出現 新增伺服器 刀鋒視窗，
     在 伺服器名稱 欄位輸入 doggymobiledbsrv ，表示 SQL Server 伺服器的名稱
     在 伺服器管理員登入 欄位輸入 miniadmin ，表示 SQL Server 管理員的帳號
     在 密碼 欄位輸入 U9AkQ!eR!XN_M- ，表示 SQL Server 管理員的密碼
     在 確認密碼 欄位輸入 U9AkQ!eR!XN_M- ，表示 SQL Server 管理員的密碼
   • 在 位置 欄位，請選擇 東亞
   • 最後，在 新增伺服器 刀鋒伺服器視窗的下方，點選 確定 按鈕
   
   • 在 新資料庫 刀鋒伺服器視窗的下方，點選 確定 按鈕
   • 在 Add data connections 刀鋒伺服器視窗的下方，點選 確定 按鈕
   • 當資料連線建立完成後，可以從通知圖示知道，這個工作需要等候一些時間，才能夠完成
     
5. 在資料庫建立完成後，在 Data Connections 刀鋒視窗下，會顯示一個新的項目MS_TableConnectionString，而在 Xamarin.Forms 刀鋒視窗內的 1 Connecton a database 下的圖示，會變成綠色打勾圖示。
6. 接著在 Xamarin.Forms 刀鋒視窗中的 2 Create a table API，在 Backend language標題下方的下拉選單，請選擇 C#，接著點選 Download 按鈕，將這個後端專案下載下來，並且解壓縮到您硬碟目錄下，此專案稱為 Azure Mobile App後端服務專案
7. 接著在 Xamarin.Forms 刀鋒視窗中的 3 Configure your client application，點選 Download 按鈕，將這個後端專案下載下來，並且解壓縮到您硬碟目錄下，此專案稱為 Azure Mobile App前端專案

佈署 Azure Mobile App後端服務專案與進行測試

接下來，要使用剛剛下載下來的兩個專案，進行測試 Azure Mobile App 是否有設定完成。

佈署 Azure Mobile App後端服務專案

1. 使用 Visual Studio 2015，開啟 Azure Mobile App後端服務專案 DoggyMobileBE.sln
2. 滑鼠右擊 DoggyMobileBEService 專案節點，選擇 重建
3. 重建完成後，滑鼠右擊 DoggyMobileBEService 專案節點，選擇 發行
4. 在 發行 對話窗內，點選 選取發行目標 下方的 Microsoft Azure App Service(A)
5. 在出現 App Service 對話窗後
   • 請在 訂用帳戶 下拉選單，選擇您要佈署的訂用帳戶
   • 請在 檢視 下拉選單，選擇 資源類型 項目，此時，最下方的清單會顯示出有 Mobile App 資料夾節點。
   • 請展開 Mobile App 資料夾節點，就會看到 DoggyMobileBE 這個項目，請選擇這個項目。
   • 最後，點選 確定 按鈕
   • 當回到 發行 對話窗，點選 發行 按鈕，開始佈署這個專案到 Azure App 服務上。
   

使用Azure Mobile App前端專案測試後端服務

1. 使用 Visual Studio 2015，開啟 Azure Mobile App 前端專案 DoggyMobileBE.sln
2. 在這裡選擇使用 Android 專案來進行測試，因此，在方案總管上，滑鼠右擊專案 DoggyMobileBE.Droid選擇 設為起始專案，選擇好要執行的Android模擬器，就可以按下 F5 開始執行。
3. 若啟動該應用程式後的畫面如下圖，則表示，這個 Android 的 Xamarin.Forms 的專案，成功的抓取到後端資料
   
4. 您可以在模擬器上執行的應用程式，Item Name 欄位內，輸入一些文字，接著點選 + 按鈕，就可以把資料透過 Xamarin.Forms 應用程式，儲存到後端 SQL Server 上；另外，在 ListView 透過手勢，由上往下滑動，可以即時讀取後端資料庫內的資料，更新顯示在螢幕上。
5. 透過 Visual Studio 2015 的 SQL Server 物件管理 可以查看到 Azure SQL Server 上的 TodoItems 資料表上的資料，確定您剛剛輸入的資料，有寫入到後端資料庫內。