XAML in Xamarin.Forms 基礎篇 電子書

XAML in Xamarin.Forms 基礎篇 電子書
XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

Xamarin.Forms 快速入門 電子書
Xamarin.Forms 快速入門 電子書

2016/07/19

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 使用權的帳號與密碼,若還沒有,可以線上進行免費申請。
    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 後端服務。
      新增MobileApp
    • 當這個服務建立完成後,可以透過右上方的通知圖示 (一個鐘的符號)得知,而各項在 Microsoft Azure 上的操作,都可以透過這個通知功能知道操作是成功還是失敗與處理進度到哪裡。
      MicrosoftAzure操作通知
  3. 當 DoggyMobileBE 這個 Azure Mobile App 後端服務建立完成後,點選左上角的 Microsoft Azure 文字,就可以回到 Microsoft Azure 儀表板,也會看到 doggymobilebe 這個行動App服務已經建立完成了。
    DoggyMobileBE後端服務建立完成之儀表板

建立後端資料存取來源

接下來,您需要在 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 刀鋒伺服器視窗的下方,點選 確定 按鈕
    • 當資料連線建立完成後,可以從通知圖示知道,這個工作需要等候一些時間,才能夠完成
      正在建立SQL資料庫
  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 服務上。
    發行DoggyMobileBE專案

使用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 資料表上的資料,確定您剛剛輸入的資料,有寫入到後端資料庫內。
    檢視資料庫內的紀錄

沒有留言:

張貼留言