共用方式為


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

概觀

本教學課程說明如何使用 Azure App Service 的 Mobile Apps 功能作為後端,將雲端式後端服務新增至 Xamarin.Forms 行動應用程式。 您可以建立新的Mobile Apps 後端和簡單的 to-do 清單 Xamarin.Forms 應用程式,以將應用程式資料儲存在 Azure 中。

完成本教學課程是 Xamarin.Forms 所有其他 Mobile Apps 教學課程的必要條件。

先決條件

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

  • 作用中的 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 可在網路上使用)。

建立新的行動應用程式後端

  1. 登入 Azure 入口網站

  2. 按一下 [建立資源]

  3. 在搜尋方塊中,輸入 Web App

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

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

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

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

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

  9. 選取正確的 作系統,Linux 或 Windows。

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

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

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

  13. 點擊 建立。 請稍候幾分鐘,讓服務順利部署,再繼續進行。 在入口網站標頭中觀看通知(鈴鐺)圖示,以取得狀態更新。

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

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

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

您已準備好使用此新建立的 App Service 網頁應用程式作為行動應用程式使用。

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

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

    iOS (Objective-C)
    iOS (Swift)
    Android (Java)
    Xamarin.iOS
    Xamarin.Android
    Xamarin.Forms
    科爾多瓦
    Windows (C#)

    備註

    如果您使用 iOS 專案,您需要從最新 GitHub 下載 “azuresdk-iOS-*.zip”。 將 MicrosoftAzureMobile.framework 檔案解壓縮並新增至專案的根目錄。

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

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

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

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

      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. 您必須為連接字串提供 NameValueType

        4. 輸入 ,將名稱 設為 MS_TableConnectionString

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

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

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

    • Node.js 後端

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

      1. 在 Azure 入口網站中,移至 Easy Tables,您會看到此畫面。

        節點簡易數據表

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

        節點簡易數據表設定

      3. Easy Tables中,按一下 [+ 新增] 按鈕。

        節點簡易表格新增按鈕

      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。 選取 SubscriptionResource Group,然後選取應用程式的名稱。 當您準備好時,請按兩下 [確定] ,這會將本機擁有的 .NET 伺服器專案部署至 App Service 後端。 部署完成時,系統會將您重新導向至瀏覽器中的 http://{zumoappname}.azurewebsites.net/

執行 Xamarin.Forms 解決方案

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

Visual Studio (Windows 和 Mac)

  1. 移至 Azure 入口網站,然後流覽至您所建立的行動應用程式。 在 [Overview] 區段中,尋找您行動應用程式的公用端點網址。 範例 - 我的應用程式名稱「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. 在 [建置] 功能表上,選取 Configuration Manager

  3. 在 [Configuration Manager] 對話框中,選取 Android 專案旁的 [組建[部署] 複選框,並確定共用程式代碼專案已核取 [建置] 方塊。

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

Visual Studio for Mac

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

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

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

Android to-do 應用程式

此動作會將張貼要求傳送至 Azure 中裝載的新 Mobile Apps 後端。 來自要求的數據會插入 TodoItem 數據表。 儲存在數據表中的專案會由Mobile Apps 後端傳回,資料會顯示在清單中。

備註

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

(選擇性)執行 iOS 專案

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

Visual Studio

  1. 以滑鼠右鍵點擊 iOS 專案,然後選擇 設定為啟動專案

  2. 在 [建置] 功能表上,選取 Configuration Manager

  3. 在 [Configuration Manager] 對話框中,選取 [組建] 和 [在 iOS 專案旁部署] 複選框,並確定共用程式代碼專案已核取 [組建] 方塊。

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

Visual Studio for Mac

  1. 以滑鼠右鍵點擊 iOS 的專案,然後選取 [設定為啟始專案]。

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

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

iOS to-do 應用程式

此動作會將張貼要求傳送至 Azure 中裝載的新 Mobile Apps 後端。 來自要求的數據會插入 TodoItem 數據表。 儲存在數據表中的專案會由Mobile Apps 後端傳回,資料會顯示在清單中。

備註

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

(選擇性)執行 Windows 專案

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

Visual Studio

  1. 以滑鼠右鍵按下任何 UWP 專案,然後選取 [[設定為啟始專案]

  2. 在 [建置] 功能表上,選取 Configuration Manager

  3. 在 [Configuration Manager] 對話框中,選取所選 Windows 專案旁的 [組建[部署] 複選框,並確定共用程式代碼專案已核取 [組建] 方塊。

  4. 若要在 Windows 模擬器中建置專案並啟動應用程式,請按 F5 鍵,或按兩下 [開始 ] 按鈕 [開始] 按鈕(應讀取 本機電腦)。

備註

Windows 項目無法在macOS上執行。

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

此動作會將張貼要求傳送至 Azure 中裝載的新 Mobile Apps 後端。 來自要求的數據會插入 TodoItem 數據表。 儲存在數據表中的專案會由Mobile Apps 後端傳回,資料會顯示在清單中。

UWP to-do app

備註

您會在解決方案可攜式類別庫專案的 TodoItemManager.cs C# 檔案中找到可存取Mobile Apps 後端的程式代碼。

故障排除

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

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