共用方式為


建立 Apache Cordova 應用程式

概觀

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

完成本教學課程是關於在 Azure App Service 中使用 Mobile Apps 功能之所有其他 Apache Cordova 教學課程的必要條件。

先決條件

若要完成本教學課程,您需要下列必要條件:

您也可以略過 Visual Studio,並直接使用 Apache Cordova 命令行。 在 Mac 電腦上完成教學課程時,使用命令行很有用。 本教學課程未涵蓋使用命令行編譯 Apache Cordova 用戶端應用程式。

建立 Azure 行動應用程式後端

  1. 登入 Azure 入口網站

  2. 按一下 [建立資源]

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

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

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

  6. 請為您的網絡應用程式選擇唯一的名稱

  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 Web 應用程式作為行動應用程式來使用。

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

  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/

下載並執行 Apache Cordova 應用程式

  1. 流覽至客戶端專案中的方案檔 (.sln),並使用 Visual Studio 加以開啟。

  2. 在 Visual Studio 中,從 [開始] 箭號旁邊的下拉式清單中選擇解決方案平臺 (Android、iOS 或 Windows)。 按兩下綠色箭號上的下拉式清單,以選取特定的部署裝置或模擬器。 您可以使用預設的 Android 平台和波紋模擬器。 更進階的教學課程(例如推播通知)需要您選取支援的裝置或模擬器。

  3. 開啟此資料夾中的檔案 ToDoActivity.java - ZUMOAPPNAME/app/src/main/java/com/example/zumoappname。 應用程式名稱 ZUMOAPPNAME

  4. 移至 Azure 入口網站,然後流覽至您所建立的行動應用程式。 在 [Overview] 區段中,尋找您行動應用程式的公用端點網址。 範例 - 我的應用程式名稱「test123」的站點名稱將會是 https://test123.azurewebsites.net

  5. 移至 ZUMOAPPNAME/www/js/index.js 檔案,然後在 onDeviceReady() 方法中,將參數 ZUMOAPPURL 替換為上述的公用端點。

    client = new WindowsAzure.MobileServiceClient('ZUMOAPPURL');

    變成

    client = new WindowsAzure.MobileServiceClient('https://test123.azurewebsites.net');

  6. 若要建置並執行 Cordova 應用程式,請按 F5 或按一個按下綠色箭號。 如果您在模擬器中看到安全性對話框,要求存取網路,請接受它。

  7. 在裝置或模擬器上啟動應用程式之後,請在 [ 輸入新文字] 中輸入有意義的文字,例如 完成教學課程 ,然後按兩下 [ 新增 ] 按鈕。

後端會將要求中的數據插入 SQL Database 中的 TodoItem 數據表,並將新儲存專案的相關信息傳回行動應用程式。 行動應用程式會在清單中顯示此資料。

您可以針對其他平台重複步驟 3 到 5。