建立 iOS 應用程式Create an iOS app

注意

Visual Studio App Center 投入新的和整合式服務行動應用程式開發的核心。Visual Studio App Center is investing in new and integrated services central to mobile app development. 開發人員可以使用建置測試散發services 設定持續整合和傳遞管線。Developers can use Build, Test and Distribute services to set up Continuous Integration and Delivery pipeline. 應用程式部署之後,開發人員可以監視的狀態和其應用程式使用的使用方式Analytics診斷服務,並使用使用者參與推播服務。Once the app is deployed, developers can monitor the status and usage of their app using the Analytics and Diagnostics services, and engage with users using the Push service. 開發人員也可以利用Auth來驗證使用者並資料保存和同步處理雲端中的應用程式資料的服務。Developers can also leverage Auth to authenticate their users and Data service to persist and sync app data in the cloud. 請參閱App Center今天。Check out App Center today.

概觀Overview

本教學課程說明如何將 Azure App Service Mobile Apps 這項雲端後端服務新增至 iOS 應用程式。This tutorial shows how to add Azure App Service Mobile Apps, a cloud backend service, to an iOS app. 第一個步驟是在 Azure 上建立新的行動後端。The first step is to create a new mobile backend on Azure. 然後,下載會將資料儲存在 Azure 中的簡易待辦事項清單 iOS 範例應用程式。Then, download a simple Todo list iOS sample app that stores data in Azure.

若要完成本教學課程,您需要一部 Mac 和 Azure 帳戶To complete this tutorial, you need a Mac and an Azure account

建立新的 Azure 行動應用程式後端Create a new Azure mobile app backend

  1. 登入 Azure 入口網站Sign in to the Azure portal.

  2. 按一下 [建立資源] 。Click Create a resource.

  3. 在 [搜尋] 方塊中,輸入Web 應用程式In the search box, type Web App.

  4. 在 [結果] 清單中,選取Web 應用程式從 Marketplace。In the results list, select Web App from the Marketplace.

  5. 選取您訂用帳戶資源群組(選取現有的資源群組_或_建立新的 (使用相同的名稱做為您的應用程式))。Select your Subscription and Resource Group (select an existing resource group or create a new one (using the same name as your app)).

  6. 選擇唯一名稱web 應用程式。Choose a unique Name of your web app.

  7. 選擇預設值發佈做為選項程式碼Choose the default Publish option as Code.

  8. 執行階段堆疊,您必須選取下的一個版本ASP.NET節點In the Runtime stack, you need to select a version under ASP.NET or Node. 如果您要建置.NET 後端,請選取 ASP.NET 下的版本。If you are building a .NET backend, select a version under ASP.NET. 否則如果您的目標節點為基礎的應用程式,選取其中一個版本的節點。Otherwise if you are targeting a Node based application, select one of the version from Node.

  9. 選取右側作業系統,Linux 或 Windows。Select the right Operating System, either Linux or Windows.

  10. 選取 地區您要部署此應用程式。Select the Region where you would like this app to be deployed.

  11. 選取適當App Service 方案並按下檢閱並建立Select the appropriate App Service Plan and hit Review and create.

  12. 在 [資源群組] 下,選取現有的資源群組或 建立新的資源群組 (使用與應用程式相同的名稱)。Under Resource Group, select an existing resource group or create a new one (using the same name as your app).

  13. 按一下頁面底部的 [新增] 。Click Create. 等候幾分鐘的時間來成功地部署服務,然後再繼續進行。Wait a few minutes for the service to be deployed successfully before proceeding. 監看狀態更新入口網站標頭中的 [通知] (鈴鐺) 圖示。Watch the Notifications (bell) icon in the portal header for status updates.

  14. 完成部署之後,按一下部署詳細資料區段,然後按一下 資源類型上microsoft.web/sitesOnce the deployment is completed, click on the Deployment details section and then click on the Resource of Type Microsoft.Web/sites. 它會將您巡覽至您剛才建立 App Service Web 應用程式。It will navigate you to the App Service Web App that you just created.

  15. 按一下組態下方的刀鋒視窗設定然後在應用程式設定,按一下新增應用程式設定按鈕。Click on the Configuration blade under Settings and in the Application settings, click on the New application setting button.

  16. 新增/編輯應用程式設定頁面上,輸入名稱做為MobileAppsManagement_EXTENSION_VERSION且值為最新和按 確定。In the Add/Edit application setting page, enter Name as MobileAppsManagement_EXTENSION_VERSION and Value as latest and hit OK.

所有會設定您要使用這個新建立的 App Service Web 應用程式,為行動裝置應用程式。You are all set to use this newly created App Service Web app as a Mobile app.

建立資料庫連接,並設定用戶端和伺服器專案Create a database connection and configure the client and server project

  1. 下載用戶端 SDK 快速入門,為下列平台:Download the client SDK quickstarts for the following platforms:

    iOS (Objective-C)iOS (Objective-C)
    iOS (Swift)iOS (Swift)
    Android (Java)Android (Java)
    Xamarin.iOSXamarin.iOS
    Xamarin.AndroidXamarin.Android
    Xamarin.FormsXamarin.Forms
    CordovaCordova
    Windows (C#)Windows (C#)

    注意

    如果您使用 iOS 專案,您需要下載"azuresdk-iOS-*.zip 」 從最新的 GitHub 版本If you use the iOS project you need to download "azuresdk-iOS-*.zip" from latest GitHub release. 解壓縮,並新增MicrosoftAzureMobile.framework專案的根目錄的檔案。Unzip and add the MicrosoftAzureMobile.framework file to the project's root.

  2. 您必須新增資料庫連接或連接至現有的連接。You will have to add a database connection or connect to an existing connection. 首先,判斷是否會建立資料存放區,或使用現有的帳戶。First, determine whether you’ll create a data store or use an existing one.

    • 建立新的資料存放區:如果您將建立資料存放區,請使用下列快速入門:Create a new data store: If you’re going to create a data store, use the following quickstart:

      快速入門:開始使用 Azure SQL Database 中單一資料庫Quickstart: Getting started with single databases in Azure SQL Database

    • 現有的資料來源:如果您想要使用現有的資料庫連接,請遵循下列指示Existing data source: Follow the instructions below if you want to use an existing database connection

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

        {your_SQLServer} 名稱伺服器,這可在 [概觀] 頁面,為您的資料庫,通常是"server_name.database.windows.net 」 的形式。{your_SQLServer} Name of the server, this can be found in the overview page for your database and is usually in the form of “server_name.database.windows.net”. {port} 通常是 1433年。{port} usually 1433. {your_catalogue} 資料庫的名稱。{your_catalogue} Name of the database. {your_username} 存取您的資料庫使用者名稱。{your_username} User name to access your database. {your_password} 密碼以存取您的資料庫。{your_password} Password to access your database.

        深入了解 SQL 連接字串格式Learn more about SQL Connection String format

      2. 將連接字串加入您行動裝置應用程式在 App Service 中,您可以管理連接字串為您的應用程式使用組態功能表中的選項。Add the connection string to your mobile app In App Service, you can manage connection strings for your application by using the Configuration option in the menu.

        若要新增連接字串:To add a connection string:

        1. 按一下 [應用程式設定] 索引標籤。Click on the Application settings tab.

        2. 按一下 [+] 新的連接字串Click on [+] New connection string.

        3. 您必須提供名稱型別連接字串。You will need to provide Name, Value and Type for your connection string.

        4. 型別名稱MS_TableConnectionStringType Name as MS_TableConnectionString

        5. 值應該是您在前的步驟正確的連接字串。Value should be the connecting string you formed in the step before.

        6. 如果您要將連接字串新增至 SQL Azure 資料庫選擇SQLAzure下方型別If you are adding a connection string to a SQL Azure database choose SQLAzure under type.

  3. Azure Mobile Apps 的.NET 和 Node.js 後端 Sdk。Azure Mobile Apps has SDKs for .NET and Node.js backends.

    • Node.js 後端Node.js backend

      如果您要使用 Node.js 快速入門應用程式,請遵循下列指示。If you’re going to use Node.js quickstart app, follow the instructions below.

      1. 在 Azure 入口網站中,移至簡易表,您會看到這個畫面。In the Azure portal, go to Easy Tables, you will see this screen.

        節點的簡易表

      2. 請確定在已新增 SQL 連接字串組態 索引標籤。然後核取方塊我了解,這會覆寫所有網站內容然後按一下建立 TodoItem 資料表 按鈕。Make sure the SQL connection string is already added in the Configuration tab. Then check the box of I acknowledge that this will overwrite all site contents and click the Create TodoItem table button.

        節點簡易表設定

      3. 在 [簡易表,按一下 + 新增] 按鈕。In Easy Tables, click the + Add button.

        節點的簡易表 [新增] 按鈕

      4. 建立TodoItem匿名存取的資料表。Create a TodoItem table with anonymous access.

        將資料表加入節點簡易表

    • .NET 後端.NET backend

      如果您要使用.NET 快速入門應用程式,請遵循下列指示。If you’re going to use .NET quickstart app, follow the instructions below.

      1. 下載 Azure Mobile Apps.NET 伺服器專案,從azure 行動應用程式-入門存放庫Download the Azure Mobile Apps .NET server project from the azure-mobile-apps-quickstarts repository.

      2. 建置.NET 伺服器專案,Visual Studio 在本機。Build the .NET server project locally in Visual Studio.

      3. 在 Visual Studio 中,開啟 [方案總管] 中,以滑鼠右鍵按一下ZUMOAPPNAMEService專案中,按一下發佈,您會看到Publish to App Service視窗。In Visual Studio, open Solution Explorer, right-click on ZUMOAPPNAMEService project, click Publish, you will see a Publish to App Service window. 如果您使用 Mac 上,請參閱其他方式來部署應用程式此處If you are working on Mac, check out other ways to deploy the app here.

        Visual studio 發行

      4. 選取App Service發佈的目標,然後按一下選取現有,然後按一下發行底部的視窗 按鈕。Select App Service as publish target, then click Select Existing, then click the Publish button at the bottom of the window.

      5. 您必須先登入 Visual Studio Azure 訂用帳戶。You will need to log into Visual Studio with your Azure subscription first. 選取 SubscriptionResource Group,然後選取 應用程式的名稱。Select the Subscription, Resource Group, and then select the name of your app. 當您準備好時,按一下確定,這會將您所擁有的.NET 伺服器專案部署到 App Service 後端的本機。When you are ready, click OK, this will deploy the .NET server project that you have locally into the App Service backend. 部署完成時,您將會重新導向至http://{zumoappname}.azurewebsites.net/瀏覽器中。When deployment finishes, you will be redirected to http://{zumoappname}.azurewebsites.net/ in the browser.

執行 iOS 應用程式Run the iOS app

  1. 開啟已下載的用戶端專案使用 Xcode。Open the downloaded client project using Xcode.

  2. 移至Azure 入口網站並瀏覽至您所建立的行動應用程式。Go to the Azure portal and navigate to the mobile app that you created. Overview刀鋒視窗中,搜尋 URL,也就是您的行動裝置應用程式的公用端點。On the Overview blade, look for the URL which is the public endpoint for your mobile app. 範例-將會針對我的應用程式名稱"test123"sitename https://test123.azurewebsites.netExample - the sitename for my app name "test123" will be https://test123.azurewebsites.net.

  3. Swift 的專案中,開啟 檔案ToDoTableViewController.swiftZUMOAPPNAME/ZUMOAPPNAME/ToDoTableViewController.swift 此資料夾中。For Swift project, open the file ToDoTableViewController.swift in this folder - ZUMOAPPNAME/ZUMOAPPNAME/ToDoTableViewController.swift. 應用程式名稱是ZUMOAPPNAMEThe application name is ZUMOAPPNAME.

  4. viewDidLoad()方法,取代ZUMOAPPURL與上述的公用端點的參數。In viewDidLoad() method, replace ZUMOAPPURL parameter with public endpoint above.

    let client = MSClient(applicationURLString: "ZUMOAPPURL")

    會變成becomes

    let client = MSClient(applicationURLString: "https://test123.azurewebsites.net")

  5. Objective C 專案中,開啟 檔案QSTodoService.m在此資料夾-W/W。For Objective-C project, open the file QSTodoService.m in this folder - ZUMOAPPNAME/ZUMOAPPNAME. 應用程式名稱是ZUMOAPPNAMEThe application name is ZUMOAPPNAME.

  6. init方法,取代ZUMOAPPURL與上述的公用端點的參數。In init method, replace ZUMOAPPURL parameter with public endpoint above.

    self.client = [MSClient clientWithApplicationURLString:@"ZUMOAPPURL"];

    會變成becomes

    self.client = [MSClient clientWithApplicationURLString:@"https://test123.azurewebsites.net"];

  7. 按 [執行] 按鈕以建置專案,並在 iOS 模擬器中啟動應用程式。Press the Run button to build the project and start the app in the iOS simulator.

  8. 在應用程式中,按一下加號 ( + ) 圖示,輸入有意義的文字 (例如 Complete the tutorial),然後按一下儲存按鈕。In the app, click the plus (+) icon, type meaningful text, such as Complete the tutorial, and then click the save button. 這會將 POST 要求傳送至先前部署的 Azure 後端。This sends a POST request to the Azure backend you deployed earlier. 後端會將要求中的資料插入 TodoItem SQL 資料表,並將新儲存之項目的相關資訊傳回給行動應用程式。The backend inserts data from the request into the TodoItem SQL table, and returns information about the newly stored items back to the mobile app. 行動應用程式會以清單顯示此資料。The mobile app displays this data in the list.

    在 iOS 上執行的快速入門應用程式