使用 Azure Mobile Apps 建置 Xamarin.Android 應用程式

本教學課程說明如何使用 Xamarin 和 Azure 行動應用程式後端,將雲端式後端服務新增至 Android 行動應用程式。 您可以建立新的行動應用程式後端和簡單的 Todo 列表 應用程式,以將應用程式資料儲存在 Azure 中。

您必須在 Azure App 服務 中使用Mobile Apps功能的其他 Xamarin Android 教學課程之前完成本教學課程。

必要條件

若要完成本教學課程,您需要:

下載範例應用程式

  1. 在瀏覽器中開啟 azure-mobile-apps 存放

  2. 開啟 [ 程序代碼 ] 下拉式清單,然後選取 [ 下載 ZIP]。

    Screenshot of the Code menu on GitHub.

  3. 下載完成之後,請開啟 [ 下載] 資料夾並找出檔案 azure-mobile-apps-main.zip

  4. 以滑鼠右鍵按鍵按鍵按鍵的檔案,然後選取 [ 全部解壓縮...]。

    如果您想要的話,您可以使用 PowerShell 來展開封存:

    C:\Temp> Expand-Archive azure-mobile-apps-main.zip
    

這些範例位於 擷取檔案內的samples 資料夾中。 快速入門的範例名為 TodoApp。 您可以按兩下 TodoApp.sln 檔案,在Visual Studio 中開啟範例。

Screenshot of the file explorer for the solution.

將後端部署至 Azure

注意

如果您已經從另一個快速入門部署後端,您可以使用相同的後端,並略過此步驟。

若要部署後端服務,我們將:

  • 將 Azure App 服務和 Azure SQL 資料庫 布建至 Azure。
  • 使用 Visual Studio 將服務程式代碼部署到新建立的 Azure App 服務。

使用 Azure 開發人員 CLI 來完成所有步驟

TodoApp 範例已設定為支援 Azure 開發人員 CLI。 若要完成所有步驟(布建和部署):

  1. 安裝 Azure 開發人員 CLI
  2. 開啟終端機,並將目錄變更為包含檔案 TodoApp.sln 的資料夾。 此目錄也包含 azure.yaml
  3. 執行 azd up

如果您尚未登入 Azure,瀏覽器會啟動以要求您登入。 接著系統會提示您輸入訂用帳戶和 Azure 區域。 然後,Azure 開發人員 CLI 會布建必要的資源,並將服務程式代碼部署到您選擇的 Azure 區域和訂用帳戶。 最後,Azure 開發人員 CLI 會為您撰寫適當的 Constants.cs 檔案。

您可以執行 azd env get-values 命令來檢視您想要直接存取資料庫的 SQL 驗證資訊。

如果您已完成 Azure 開發人員 CLI 的步驟, 請繼續進行下一個步驟。 如果您不想使用 Azure 開發人員 CLI,請繼續進行手動步驟。

在 Azure 上建立資源。

  1. 開啟終端機,並將目錄變更為包含檔案 TodoApp.sln 的資料夾。 此目錄也包含 azuredeploy.json

  2. 請確定您已 使用 Azure CLI 登入並選取訂 用帳戶。

  3. 建立新的資源群組:

    az group create -l westus -g quickstart
    

    此命令會在 quickstart 美國西部區域建立資源群組。 您可以選取任何您想要的區域,前提是您可以在該處建立資源。 請確定您在本教學課程中所提及的名稱和區域都使用相同的名稱和區域。

  4. 使用群組部署建立資源:

    az deployment group create -g quickstart --template-file azuredeploy.json --parameters sqlPassword=MyPassword1234
    

    為您的 SQL 管理員 istrator 密碼挑選強密碼。 您稍後在存取資料庫時需要用到它。

  5. 部署完成後,取得輸出變數,因為這些保留您稍後需要的重要資訊:

    az deployment group show -g quickstart -n azuredeploy --query properties.outputs
    

    輸出範例如下:

    Screenshot of command line results.

  6. 記下輸出中的每個值,以供稍後使用。

發佈服務程序代碼

TodoApp.sln在 Visual Studio 中開啟 。

  1. 在右側窗格中,選取 [方案總管]。

  2. 以滑鼠右鍵按兩下 TodoAppService.NET6 項目,然後選取 [ 設定為啟始專案]。

  3. 在頂端功能表上,選取 [建置>發佈 TodoAppService.NET6]。

  4. 在 [發佈] 視窗中,選取 [目標:Azure],然後按 [下一步]。

    Screenshot of the target selection window.

  5. 選取 [特定目標:Azure App 服務 [Windows],然後按 [下一步]。

    Screenshot of the specific target selection window.

  6. 如有必要,請登入並選取適當的 訂用帳戶名稱

  7. 確定 [檢視 ] 設定為 [資源群組]。

  8. quickstart展開資源群組,然後選取稍早建立的 App Service。

    Screenshot of the app service selection window.

  9. 選取 [完成]。

  10. 發行配置檔建立程式完成後,請選取 [ 關閉]。

  11. 找出 [服務相依性],然後選取 SQL Server Database 旁的三點,然後選取 [連線]。

    Screenshot showing the S Q L server configuration selection.

  12. 選取 [Azure SQL 資料庫],然後選取 [下一步]。

  13. 選取快速入門資料庫,然後選取 [下一步]。

    Screenshot of the database selection window.

  14. 使用部署輸出中的 SQL 使用者名稱和密碼填入表單,然後選取 [ 下一步]。

    Screenshot of the database settings window.

  15. 選取 [完成]。

  16. 完成時選取 [ 關閉 ]。

  17. 選取 [發佈] 將應用程式發佈至您稍早建立的 Azure App 服務。

    Screenshot showing the publish button.

  18. 發佈後端服務之後,就會開啟瀏覽器。 新增 /tables/todoitem?ZUMO-API-VERSION=3.0.0 至 URL:

    Screenshot showing the browser output after the service is published.

設定範例應用程式

用戶端應用程式必須知道後端的基底 URL,才能與其通訊。

如果您用來 azd up 布建和部署服務, Constants.cs 則會為您建立檔案,而且您可以略過此步驟。

  1. TodoApp.Data展開專案。

  2. 以滑鼠右鍵按兩下TodoApp.Data項目,然後選取[新增>類別...]。

  3. 輸入 Constants.cs 作為名稱,然後選取 [ 新增]。

    Screenshot of adding the Constants.cs file to the project.

  4. 開啟檔案 Constants.cs.example 並複製內容 (Ctrl-A,後面接著 Ctrl-C)。

  5. 切換至 Constants.cs,反白顯示所有文字(Ctrl-A),然後貼上範例檔案中的內容(Ctrl-V)。

  6. https://APPSERVICENAME.azurewebsites.net將取代為您服務的後端URL。

    namespace TodoApp.Data
    {
        public static class Constants
        {
            /// <summary>
            /// The base URI for the Datasync service.
            /// </summary>
            public static string ServiceUri = "https://demo-datasync-quickstart.azurewebsites.net";
        }
    }
    

    您可以從 [發佈] 索引標籤取得服務的後端URL。請確定您使用 HTTPs URL。

  7. 儲存檔案。 (Ctrl-S)。

建置並執行應用程式

  1. 在方案總管中,展開 xamarin-native 資料夾。

  2. 以滑鼠右鍵按兩下項目, TodoApp.Android 然後選取 [ 設定為啟始專案]。

  3. 在頂端列中,選取 [任何 CPU 組 態] 和 [TodoApp.Android ] 目標:

    Screenshot showing how to set the run configuration for a Xamarin Android app.

  4. 如果您改為看到 Android模擬器 ,則尚未建立Android模擬器。 如需詳細資訊,請參閱 Android模擬器設定。 若要建立新的 Android 模擬器:

    • 選取 [Android Android>裝置管理員 工具]。>
    • 選取 + 新增
    • 選取左側的下列設定:
      • 名稱:quickstart
      • 基本裝置: 圖元 5
      • 處理器: x86_64
      • OS: Android 11.0 - API 30
      • Google API: 已核取
    • 選取 建立
    • 如有必要,請接受許可協定。 接著會下載映像。
    • 一旦出現 [ 開始] 按鈕,請按 [開始]。
    • 如果您收到有關 Hyper-V 硬體加速的提示,請閱讀檔以啟用硬體加速,再繼續進行。

    完成後,關閉Android裝置管理員。

    提示

    繼續之前,請先啟動Android模擬器。 您可以開啟 Android 裝置管理員,然後按所選模擬器旁的 [開始] 來執行此動作。

  5. F5 鍵建置並執行專案。

應用程式啟動之後,您會看到空白清單和浮動動作按鈕,以在模擬器中新增專案。 您可以:

  • 按浮動動作按鈕,然後輸入一些文字以新增專案。
  • 設定或清除複選框,將任何項目標示為已完成。
  • 按重新整理圖示,從服務重載數據。

Screenshot of the running Android app.

下一步

將驗證新增至應用程式,以繼續進行教學課程