使用 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 可在網路上使用)。
建立新的行動應用程式後端
登入 Azure 入口網站。
按一下 [建立資源]。
在搜尋方塊中,輸入 Web App。
在結果清單中,從 Marketplace 選取 [Web 應用程式]。
選取您的 訂用帳戶 並 資源群組(選取現有的資源群組 或 建立新的資源群組(使用與您的應用程式同名) )。
選擇 Web 應用程式的唯一 名稱。
選擇預設 [發佈] 選項作為 程式碼。
在 執行時間堆疊中,您必須在 ASP.NET 或 Node下選取版本。 如果您要建置 .NET 後端,請在 [ASP.NET] 底下選取版本。 否則,如果您是以 Node.js 為基礎的應用程式為目標,請選取 Node.js 的其中一個版本。
選取正確的 作系統,Linux 或 Windows。
選取您想要部署此應用程式的 區域。
選取適當的 App Service 方案,並按 [檢閱 ],然後建立。
在 [資源群組]下,選取現有的資源群組 或 建立新的資源群組(使用與應用程式相同的名稱)。
點擊 建立。 請稍候幾分鐘,讓服務順利部署,再繼續進行。 在入口網站標頭中觀看通知(鈴鐺)圖示,以取得狀態更新。
部署完成後,點選 [部署詳細資料] 區段,然後點選類型為 Microsoft.Web/sites的資源。 它會引導您至您剛才建立的 App Service Web 應用程式。
在 [設定] 下,按一下 [組態] 刀鋒視窗,然後在 [應用程式設定]中,按一下 [新增應用程式設定] 按鈕。
在 [新增/編輯應用程式設定] 頁面中,輸入 [名稱] 為 [MobileAppsManagement_EXTENSION_VERSION] 和 [值] 為 [最新版本],然後按 [確定]。
您已準備好使用此新建立的 App Service 網頁應用程式作為行動應用程式使用。
建立資料庫連線並設定客戶端和伺服器專案
下載下列平臺的用戶端 SDK 快速入門:
iOS (Objective-C)
iOS (Swift)
Android (Java)
Xamarin.iOS
Xamarin.Android
Xamarin.Forms
科爾多瓦
Windows (C#)您必須新增資料庫連接或連線到現有的連接。 首先,判斷您要建立數據存放區或使用現有的數據存放區。
建立新的資料存放區:如果您要建立數據存放區,請使用下列快速入門:
現有的數據源:如果您想要使用現有的資料庫連線,請遵循下列指示
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} 密碼來存取您的資料庫。
在 App Service 中,將連接字串新增至 行動應用程式,您可以使用功能表中的 [組態] 選項來管理應用程式的連接字串。
若要新增連接字串:
按一下 應用程式設定 索引標籤。
點擊 [+] 新的連接字串。
您必須為連接字串提供 Name、Value 和 Type。
輸入 ,將名稱 設為
MS_TableConnectionString
值應該是您在之前步驟中形成的連接字串。
如果您要將連接字串新增至 SQL Azure 資料庫,請選擇 [SQLAzure] 底下的 [類型]。
Azure Mobile Apps 具有適用於 .NET 和 Node.js 後端的 SDK。
Node.js 後端
如果您要使用 Node.js 快速入門應用程式,請遵循下列指示。
在 Azure 入口網站中,移至 Easy Tables,您會看到此畫面。
請確定已在 [組態] 索引標籤中新增 SQL 連接字串。然後核取 [] 方塊,確認這會覆寫所有網站內容,然後按兩下 [建立TodoItem數據表 ] 按鈕。
在 Easy Tables中,按一下 [+ 新增] 按鈕。
使用匿名存取建立
TodoItem
數據表。
.NET 後端
如果您要使用 .NET 快速入門應用程式,請遵循下列指示。
從 azure-mobile-apps-quickstarts 存放庫中下載 Azure Mobile Apps .NET 伺服器專案。
在 Visual Studio 本機建置 .NET 伺服器專案。
在 Visual Studio 中,開啟方案總管,右鍵點擊
ZUMOAPPNAMEService
專案,然後點擊 發佈,您會看到Publish to App Service
視窗。 如果您正在使用 Mac,請參閱在這裡 部署應用程式的其他方式。選取 [App Service] 作為發佈目標,然後按一下 [選取現有],然後按一下視窗底部的 [發佈] 按鈕。
您必須先使用 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)
移至 Azure 入口網站,然後流覽至您所建立的行動應用程式。 在 [
Overview
] 區段中,尋找您行動應用程式的公用端點網址。 範例 - 我的應用程式名稱「test123」的站點名稱將會是 https://test123.azurewebsites.net。在此資料夾中開啟檔案
Constants.cs
- xamarin.forms/ZUMOAPPNAME。 應用程式名稱ZUMOAPPNAME
。在
Constants.cs
類別中,將ZUMOAPPURL
變數取代為上述公用端點。public static string ApplicationURL = @"ZUMOAPPURL";
變成
public static string ApplicationURL = @"https://test123.azurewebsites.net";
請遵循下列指示來執行Android或 Windows 專案;如果有可用的網路 Mac 計算機,則為 iOS 專案。
(選擇性)執行Android專案
在本節中,您會執行 Xamarin.Android 專案。 如果您未使用 Android 裝置,可以略過本節。
Visual Studio
以滑鼠右鍵按下 Android (Droid) 項目,然後選取 [[設定為啟始專案]。
在 [建置] 功能表上,選取 Configuration Manager。
在 [Configuration Manager] 對話框中,選取 Android 專案旁的 [組建 和 [部署] 複選框,並確定共用程式代碼專案已核取 [建置] 方塊。
若要建置專案並在 Android 模擬器中啟動應用程式,請按 F5 鍵,或按兩下 [開始 ] 按鈕。
Visual Studio for Mac
以滑鼠右鍵按下 Android 專案,然後選取 [設定為啟始專案]。
若要建置專案並在 Android 模擬器中啟動應用程式,請選取 [執行] 選單,然後 [開始偵錯]。
在應用程式中,輸入有意義的文字,例如 Learn Xamarin,然後選取加號(+)。
此動作會將張貼要求傳送至 Azure 中裝載的新 Mobile Apps 後端。 來自要求的數據會插入 TodoItem 數據表。 儲存在數據表中的專案會由Mobile Apps 後端傳回,資料會顯示在清單中。
備註
存取Mobile Apps 後端的程式代碼位於解決方案中共用程式碼專案的 TodoItemManager.cs C# 檔案中。
(選擇性)執行 iOS 專案
在本節中,您會執行適用於 iOS 裝置的 Xamarin.iOS 專案。 如果您未使用 iOS 裝置,可以略過本節。
Visual Studio
以滑鼠右鍵點擊 iOS 專案,然後選擇 設定為啟動專案。
在 [建置] 功能表上,選取 Configuration Manager。
在 [Configuration Manager] 對話框中,選取 [組建] 和 [在 iOS 專案旁部署] 複選框,並確定共用程式代碼專案已核取 [組建] 方塊。
若要建置專案並在iPhone模擬器中啟動應用程式,請選取 F5 鍵。
Visual Studio for Mac
以滑鼠右鍵點擊 iOS 的專案,然後選取 [設定為啟始專案]。
在 [執行] 功能表上,選取 [[開始偵錯],以建置專案並在 iPhone 模擬器中啟動應用程式。
在應用程式中,輸入有意義的文字,例如 Learn Xamarin,然後選取加號(+)。
此動作會將張貼要求傳送至 Azure 中裝載的新 Mobile Apps 後端。 來自要求的數據會插入 TodoItem 數據表。 儲存在數據表中的專案會由Mobile Apps 後端傳回,資料會顯示在清單中。
備註
您會在解決方案中共用程式碼專案的 TodoItemManager.cs C# 檔案中找到可存取 Mobile Apps 後端的程式代碼。
(選擇性)執行 Windows 專案
在本節中,您會執行適用於 Windows 裝置的 Xamarin.Forms 通用 Windows 平臺 (UWP) 專案。 如果您未使用 Windows 裝置,可以略過本節。
Visual Studio
以滑鼠右鍵按下任何 UWP 專案,然後選取 [[設定為啟始專案]。
在 [建置] 功能表上,選取 Configuration Manager。
在 [Configuration Manager] 對話框中,選取所選 Windows 專案旁的 [組建 和 [部署] 複選框,並確定共用程式代碼專案已核取 [組建] 方塊。
若要在 Windows 模擬器中建置專案並啟動應用程式,請按 F5 鍵,或按兩下 [開始 ] 按鈕 [開始] 按鈕(應讀取 本機電腦)。
備註
Windows 項目無法在macOS上執行。
在應用程式中,輸入有意義的文字,例如 Learn Xamarin,然後選取加號(+)。
此動作會將張貼要求傳送至 Azure 中裝載的新 Mobile Apps 後端。 來自要求的數據會插入 TodoItem 數據表。 儲存在數據表中的專案會由Mobile Apps 後端傳回,資料會顯示在清單中。
備註
您會在解決方案可攜式類別庫專案的 TodoItemManager.cs C# 檔案中找到可存取Mobile Apps 後端的程式代碼。
故障排除
如果您在建置解決方案時遇到問題,請執行 NuGet 套件管理員,並更新至最新版本的 Xamarin.Forms
,並在 Android 專案中更新 Xamarin.Android
支援套件。 快速入門專案不一定包含最新版本。
請注意,Android 專案中參考的所有支援套件都必須有相同的版本。
Azure Mobile Apps NuGet 套件 具有 Android 平臺 Xamarin.Android.Support.CustomTabs
相依性,因此如果您的專案使用較新的支援套件,您需要直接使用必要的版本安裝此套件,以避免衝突。