使用 Azure 建立 Xamarin.Forms 應用程式

概觀

本教學課程說明如何使用 Azure App Service 的 Mobile Apps 功能作為後端,將雲端型後端服務新增到 Xamarin.Forms 行動裝置應用程式。 您會同時建立新的 Mobile Apps 後端,以及可在 Azure 中儲存應用程式資料的簡易待辦事項清單 Xamarin.Forms 應用程式。

完成本教學課程是所有其他 Xamarin.Forms 應用程式的行動應用程式教學課程的必要條件。

必要條件

若要完成此教學課程,您需要下列項目:

  • 使用中的 Azure 帳戶。 如果您沒有帳戶,可以註冊 Azure 試用版並取得最多 10 個免費的行動應用程式,即使在試用期結束之後仍可繼續使用這些應用程式。 如需詳細資訊,請參閱 Azure 免費試用

  • Visual Studio Tools for Xamarin、Visual Studio 2017 或更新版本中,或Visual Studio for Mac。 如需指示,請參閱 Xamarin 安裝頁面

  • (選擇性) 若要建置 iOS 應用程式,則需要安裝了 Xcode 9.0 或更新版本的 Mac。 Visual Studio for Mac可用來開發 iOS 應用程式,或 Visual Studio 2017 或更新版本可以使用 (,只要 Mac 可在網路上使用) 即可。

建立新的 Mobile Apps 後端

  1. 登入 Azure 入口網站

  2. 按一下 [建立資源]。

  3. 在搜尋方塊中,輸入 Web 應用程式

  4. 在結果清單中,從 Marketplace 選取 [Web 應用程式 ]。

  5. 選取您的 用帳戶和資源 群組 (選取現有的資源群組, 或使用 與應用程式相同的名稱建立新的資源群組) ) (。

  6. 選擇 Web 應用程式的唯一 名稱

  7. 選擇預設的 [發佈] 選項作為 [程式碼]。

  8. 執行時間堆疊中,您必須在 [ASP.NET ] 或 [ 節點] 下選取版本。 如果您要建置 .NET 後端,請在 [ASP.NET] 底下選取版本。 否則,如果您要以節點為基礎的應用程式為目標,請從 Node 選取其中一個版本。

  9. 選取正確的 作業系統,可以是 Linux 或 Windows。

  10. 選取您要部署此應用程式的 [區域 ]。

  11. 選取適當的App Service方案,然後按[檢閱並建立]。

  12. 在 [資源群組] 下,選取現有的資源群組或建立新的資源群組 (使用與應用程式相同的名稱)。

  13. 按一下 [建立]。 等候幾分鐘的時間來成功地部署服務,然後再繼續進行。 監看狀態更新入口網站標頭中的 [通知] \(鈴鐺) 圖示。

  14. 部署完成後,按一下 [ 部署詳細資料 ] 區段,然後按一下 [類型 Microsoft.Web/sites] 的資源。 它會巡覽至您剛才建立的 App Service Web 應用程式。

  15. 按一下 [設定] 下的 [組] 刀鋒視窗,然後在 [應用程式設定] 中,按一下 [新增應用程式設定] 按鈕。

  16. 在 [ 新增/編輯應用程式設定 ] 頁面中,輸入 [名稱 ] 作為 [MobileAppsManagement_EXTENSION_VERSION ] 和 [值] 作為 [最新 ],然後按 [確定]。

您全都已設定為使用此新建立的 App Service Web 應用程式作為行動應用程式。

建立資料庫連線並設定用戶端和伺服器專案

  1. 下載下列平臺的用戶端 SDK 快速入門:

    iOS (Objective-C)
    iOS (Swift)
    Android (Java)
    Xamarin.iOS
    Xamarin.Android
    Xamarin.Forms
    Cordova
    Windows (C#)

    注意

    如果您使用 iOS 專案,則必須從 最新的 GitHub 版本下載 「azuresdk-iOS-*.zip」。 將檔案解壓縮並新增 MicrosoftAzureMobile.framework 至專案的根目錄。

  2. 您必須新增資料庫連接,或連接到現有的連接。 首先,判斷您要建立資料存放區,還是使用現有的存放區。

    • 建立新的資料存放區:如果您要建立資料存放區,請使用下列快速入門:

      快速入門:開始使用 Azure SQL 資料庫中的單一資料庫

    • 現有的資料來源:如果您想要使用現有的資料庫連線,請遵循下列指示

      1. SQL Database連接字串格式 -Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}

        {your_SQLServer} 伺服器的名稱,可以在資料庫的概觀頁面中找到,而且通常是 「server_name.database.windows.net」 的形式。 {port} 通常是 1433。 {your_catalogue} 資料庫的名稱。 {your_username} 用來存取資料庫的使用者名稱。 {your_password} 存取資料庫的密碼。

        深入瞭解 SQL 連接字串格式

      2. 將連接字串新增至行動應用程式在 App Service 中,您可以使用功能表中的 [組] 選項來管理應用程式的連接字串。

        若要新增連接字串:

        1. 按一下 [ 應用程式設定] 索引 標籤。

        2. 按一下 [+] [+] [新增連接字串]。

        3. 您必須為連接字串提供 [名稱]、[ ] 和 [ 類型 ]。

        4. 輸入 名稱 作為 MS_TableConnectionString

        5. 值應該是您在之前步驟中形成的連接字串。

        6. 如果您要將連接字串新增至SQL Azure資料庫,請選擇[類型] 下的[SQLAzure]。

  3. Azure Mobile Apps 具有適用于 .NET 和Node.js後端的 SDK。

    • Node.js 後端

      如果您要使用 Node.js 快速入門應用程式,請遵循下列指示。

      1. 在Azure 入口網站中,移至[簡易資料表],您會看到此畫面。

        節點簡易資料表

      2. 請確定已在 [組 ] 索引標籤中新增 SQL 連接字串。然後核取 [我確認這會覆寫所有網站內容] 的 方塊,然後按一下 [ 建立 TodoItem 資料表 ] 按鈕。

        節點簡易資料表設定

      3. [簡單資料表] 中,按一下 [ + 新增] 按鈕。

        節點簡易資料表新增按鈕

      4. 建立具有匿名存取權的 TodoItem 資料表。

        節點簡易資料表新增資料表

    • .NET 後端

      如果您要使用 .NET 快速入門應用程式,請遵循下列指示。

      1. azure-mobile-apps-quickstarts 存放庫下載 Azure Mobile Apps .NET 伺服器專案。

      2. 在 Visual Studio 本機建置 .NET 伺服器專案。

      3. 在 Visual Studio 中,開啟 [方案總管],以滑鼠右鍵按一下 ZUMOAPPNAMEService 專案,按一下 [發佈],您會看到視窗 Publish to App Service 。 如果您正在 Mac 上工作,請參閱 這裡部署應用程式的其他方式。

        Visual Studio 發佈

      4. 選取[App Service為發佈目標],然後按一下 [選取現有],然後按一下視窗底部的 [發佈] 按鈕。

      5. 您必須先使用 Azure 訂用帳戶登入 Visual Studio。 Subscription選取 、 Resource Group ,然後選取應用程式的名稱。 當您準備好時,按一下 [確定],這會將本機擁有的 .NET 伺服器專案部署至App Service後端。 部署完成時,您會在瀏覽器中重新導向至 http://{zumoappname}.azurewebsites.net/

執行 Xamarin.Forms 解決方案

需要有 Visual Studio Tools for Xamarin 才能開啟解決方案,請參閱 Xamarin 安裝指示。 如果工具已安裝好,請遵循下列步驟來下載並開啟解決方案:

Visual Studio (Windows 和 Mac)

  1. 移至Azure 入口網站,然後流覽至您建立的行動應用程式。 在 Overview 刀鋒視窗上,尋找 URL,這是行動應用程式的公用端點。 範例 - 我的應用程式名稱 「test123」 的網站名稱將是 https://test123.azurewebsites.net

  2. 開啟此資料夾中的檔案 Constants.cs - xamarin.forms/ZUMOAPPNAME。 應用程式名稱是 ZUMOAPPNAME

  3. 在 類別中 Constants.cs ,將變數取代 ZUMOAPPURL 為上述公用端點。

    public static string ApplicationURL = @"ZUMOAPPURL";

    變成

    public static string ApplicationURL = @"https://test123.azurewebsites.net";

  4. 遵循下列指示來執行 Android 或 Windows 專案;如果有可用的連網 Mac 電腦,則可執行 iOS 專案。

(選擇性) 執行 Android 專案

在這一節當中,您會執行 Xamarin.Android 專案。 如果未使用 Android 裝置,可以略過這一節。

Visual Studio

  1. 以滑鼠右鍵按一下 Android (Droid) 專案,然後選取 [設為起始專案]

  2. 在 [建置] 功能表上,選取 [組態管理員]

  3. 在 [組態管理員] 對話方塊中,選取 Android 專案旁邊的 [建置] 和 [部署] 核取方塊,並確定共用程式碼專案已核取 [建置] 方塊。

  4. 若要建置專案並在 Android 模擬器中啟動應用程式,請按 F5 鍵,或是按一下 [啟動] 按鈕。

Visual Studio for Mac

  1. 以滑鼠右鍵按一下 Android 專案,然後選取 [設為起始專案]

  2. 若要建置專案並在 Android 模擬器中啟動應用程式,請選取 [執行] 功能表,再選取 [開始偵錯]

在應用程式中,輸入有意義的文字 (例如「了解 Xamarin」),然後選取加號 (+)。

Android 待辦事項應用程式

此動作會傳送 post 要求到 Azure 中代管的新 Mobile Apps 後端。 要求中的資料會插入 TodoItem 資料表中。 Mobile Apps 後端會傳回資料表中儲存的項目,而該資料會顯示在清單中。

注意

會存取 Mobile Apps 後端的程式碼位於解決方案共用程式碼專案的 TodoItemManager.cs C# 檔案中。

(選擇性) 執行 iOS 專案

在這一節當中,您會執行適用於 iOS 裝置的 Xamarin.iOS 專案。 如果未使用 iOS 裝置,可以略過這一節。

Visual Studio

  1. 以滑鼠右鍵按一下 iOS 專案,然後選取 [ 設定為啟始專案]。

  2. 在 [建置] 功能表上,選取 [組態管理員]

  3. 在 [組態管理員] 對話方塊中,選取 iOS 專案旁邊的 [建置] 和 [部署] 核取方塊,並確定共用程式碼專案已核取 [建置] 方塊。

  4. 若要建置專案並在 iPhone 模擬器中啟動應用程式,請選取 F5 鍵。

Visual Studio for Mac

  1. 以滑鼠右鍵按一下 iOS 專案,然後選取 [設為起始專案]

  2. 在 [執行] 功能表上,選取 [開始偵錯] 以建置專案並在 iPhone 模擬器中啟動應用程式。

在應用程式中,輸入有意義的文字 (例如「了解 Xamarin」),然後選取加號 (+)。

iOS 待辦事項應用程式

此動作會傳送 post 要求到 Azure 中代管的新 Mobile Apps 後端。 要求中的資料會插入 TodoItem 資料表中。 Mobile Apps 後端會傳回資料表中儲存的項目,而該資料會顯示在清單中。

注意

您會在解決方案共用程式碼專案的 TodoItemManager.cs C# 檔案中,找到會存取 Mobile Apps 後端的程式碼。

(選擇性) 執行 Windows 專案

在這一節當中,您會執行適用於 Window 裝置的 Xamarin.Forms 通用 Windows 平台 (UWP) 專案。 如果未使用 Windows 裝置,可以略過這一節。

Visual Studio

  1. 以滑鼠右鍵按一下任意 UWP 專案,然後選取 [設為起始專案]

  2. 在 [建置] 功能表上,選取 [組態管理員]

  3. 在 [組態管理員] 對話方塊中,選取所選擇 Windows 專案旁邊的 [建置] 和 [部署] 核取方塊,並確定共用程式碼專案已核取 [建置] 方塊。

  4. 若要建置專案並在 Windows 模擬器中啟動應用程式,請按 F5 鍵,或是按一下 [啟動] 按鈕 (名稱應該是本機電腦)。

注意

Windows 專案不能在 macOS 中執行。

在應用程式中,輸入有意義的文字 (例如「了解 Xamarin」),然後選取加號 (+)。

此動作會傳送 post 要求到 Azure 中代管的新 Mobile Apps 後端。 要求中的資料會插入 TodoItem 資料表中。 Mobile Apps 後端會傳回資料表中儲存的項目,而該資料會顯示在清單中。

UWP 待辦事項應用程式

注意

您將會在您方案的可攜式類別庫專案的 TodoItemManager.cs C# 檔案中,發現可存取 Mobile Apps 後端的程式碼。

疑難排解

如果在建置解決方案時發生問題,請執行 NuGet 套件管理員,並更新為最新版的 Xamarin.Forms,並在 Android 專案中,更新 Xamarin.Android 支援套件。 快速入門專案不一定會包含最新版本。

請注意,您 Android 專案中所參考的所有支援套件都必須具有相同版本。 Azure Mobile Apps NuGet 套件 具有 Android 平台的 Xamarin.Android.Support.CustomTabs 相依性,因此若您的專案使用較新的支援套件,您必須直接安裝具有必要版本的此套件以避免發生衝突。