创建 Xamarin iOS 应用Create a Xamarin.iOS app

概述Overview

本教程说明如何使用 Azure 移动应用后端向 Xamarin.iOS 移动应用添加基于云的后端服务。This tutorial shows you how to add a cloud-based backend service to a Xamarin.iOS mobile app by using an Azure mobile app backend. 将创建一个新的移动应用后端以及一个简单的 待办事项列表 Xamarin.iOS 应用，此应用将应用数据存储在 Azure 中。You create both a new mobile app backend and a simple Todo list Xamarin.iOS app that stores app data in Azure.

只有在完成本教程后，才可以学习有关使用 Azure 应用服务中的移动应用功能的所有其他 Xamarin.iOS 教程。Completing this tutorial is a prerequisite for all other Xamarin.iOS tutorials about using the Mobile Apps feature in Azure App Service.

必备条件Prerequisites

若要完成本教程，需要具备以下先决条件：To complete this tutorial, you need the following prerequisites:

  • 有效的 Azure 帐户。An active Azure account. 如果没有帐户，可以注册 Azure 试用版并获取多达 10 个免费的移动应用，即使在试用期结束之后仍可继续使用这些应用。If you don't have an account, sign up for an Azure trial and get up to 10 free mobile apps that you can keep using even after your trial ends. 有关详细信息，请参阅 Azure 1 元试用。For details, see Azure 1RMB Trial.
  • Visual Studio for Mac。Visual Studio for Mac. 请参阅设置和安装 Visual Studio for MacSee Setup and install for Visual Studio for Mac
  • 安装了 Xcode 9.0 或更高版本的 Mac。A Mac with Xcode 9.0 or later.

创建 Azure 移动应用后端Create an 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 应用” 。In the results list, select Web App from the Marketplace.

  5. 选择 Web 应用的唯一名称。Choose a unique Name of your web app.

  6. 选择订阅。Select your Subscription.

  7. 在“资源组”下 ，选择现有资源组，_或_创建新组（使用与应用相同的名称）。Under Resource Group, select an existing resource group or create a new one (using the same name as your app).

  8. 选择适当的应用服务计划/位置_或_创建一个新的应用服务计划/位置。Select the appropriate App Service Plan/Location or create a new one.

  9. 单击“创建”。 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.

  10. 部署完成后，单击“通知(铃声)”图标，然后单击“转到资源” 按钮。Once the deployment is completed, click on the Notifications (bell) icon and then click on the Go to resource button. 它将导航到刚刚创建的应用服务 Web 应用。It will navigate you to the App Service Web App that you just created.

  11. 单击“设置”下的“配置”边栏选项卡，并在“应用程序设置”中，单击“新建应用程序设置”按钮。Click on the Configuration blade under Settings and in the Application settings, click on the New application setting button.

  12. 在“添加/编辑应用程序设置” 页中，将名称输入为 MobileAppsManagement_EXTENSION_VERSION，将“值”输入为 latest 并点击“确定”。In the Add/Edit application setting page, enter Name as MobileAppsManagement_EXTENSION_VERSION and Value as latest and hit OK.

你已准备好将此新创建的应用服务 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 项目，则需从最新 GitHub 版本中下载“azuresdk-iOS-*.zip”。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 数据库中的单一数据库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 数据库连接字符串格式 - 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. 向移动应用添加连接字符串。可以在应用服务中管理应用程序的连接字符串，方法是使用菜单中的“配置”选项。 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_TableConnectionString 作为“名称” Type 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 移动应用有适用于 .NET 和 Node.js 后端的 SDK。Azure Mobile Apps has SDKs for .NET and Node.js backends.

    • Node.js backendNode.js backend

      若要使用 Node.js 快速入门应用，请按以下说明操作。If you’re going to use Node.js quickstart app, follow the instructions below.

      1. 创建新 API - 可以直接在 Azure 门户中进行更改，也可以在开发环境中以本地方式修改代码，然后将其发布到 Azure。Create a new API - You can either make changes right in the Azure portal or modify the code locally in your development environment and then publish to Azure. 单击“Development Tools”菜单下的“App Service Editor (Preview)”即可获得应用代码的浏览器内编辑体验。Click on the App Service Editor (Preview) under Development Tools menu which provides an in-browser editing experience for your app code.

      2. 单击“Go”，待应用服务编辑器打开后，就可以完全控制源代码了。Click on Go and once the App Service Editor opens, you have full control over the source code. 假设已使用 npm install 命令安装了 express 和 azure-mobile-apps 包，请单击 WWWROOT 下的 api 文件夹以创建或编辑自定义 API。Assuming you have already installed express and azure-mobile-apps package with npm install command, click on the api folder under WWWROOT to create or edit custom API. 对代码文件进行更改，所做的更改会自动保存。Make your changes to the code file and the changes are saved automatically.

      3. 可以完全控制用于存储应用程序数据的 Azure SQL 数据库。You have full control on the Azure SQL Database used to store the application data. 可以轻松地在数据库中创建新表。You can easily create new tables in the database.

    • .NET 后端.NET backend

      若要使用 .NET 快速入门应用，请按以下说明操作。If you’re going to use .NET quickstart app, follow the instructions below.

      1. 从 azure-mobile-apps-quickstarts 存储库下载 Azure 移动应用 .NET 服务器项目。Download the Azure Mobile Apps .NET server project from the azure-mobile-apps-quickstarts repository.

      2. 在 Visual Studio 中以本地方式生成 .NET 服务器项目。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. 选择“应用服务” 作为发布目标，接着单击“选择现有”，然后单击窗口底部的“发布”按钮。 Select App Service as publish target, then click Select Existing, then click the Publish button at the bottom of the window.

      5. 首先需通过 Azure 订阅登录 Visual Studio。You will need to log into Visual Studio with your Azure subscription first. 选择 Subscription、Resource Group，然后选择应用的名称。Select the Subscription, Resource Group, and then select the name of your app. 准备就绪后，单击“确定”，这样就会将本地的 .NET 服务器项目部署到应用服务后端。 When you are ready, click OK, this will deploy the .NET server project that you have locally into the App Service backend. 部署完成后，系统会在浏览器中将你重定向到 http://{zumoappname}.chinacloudsites.cn/。When deployment finishes, you will be redirected to http://{zumoappname}.chinacloudsites.cn/ in the browser.

运行 Xamarin.iOS 应用Run the Xamarin.iOS app

  1. 打开 Xamarin.iOS 项目。Open the Xamarin.iOS project.

  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”的站点名将为 https://test123.chinacloudsites.cn 。Example - the sitename for my app name "test123" will be https://test123.chinacloudsites.cn.

  3. 打开此文件夹（xamarin.iOS/ZUMOAPPNAME）中的文件 QSTodoService.cs。Open the file QSTodoService.cs in this folder - xamarin.iOS/ZUMOAPPNAME. 应用程序名称为 ZUMOAPPNAME。The application name is ZUMOAPPNAME.

  4. 在 QSTodoService 类中，将 ZUMOAPPURL 变量替换为上面的公共终结点。In QSTodoService class, replace ZUMOAPPURL variable with public endpoint above.

    const string applicationURL = @"ZUMOAPPURL";

    变为becomes

    const string applicationURL = @"https://test123.chinacloudsites.cn";

  5. 按 F5 键在 iPhone 模拟器中部署并运行应用。Press the F5 key to deploy and run the app in an iPhone emulator.

  6. 在应用中键入有意义的文本（例如“完成教程” ），然后单击 + 按钮。In the app, type meaningful text, such as Complete the tutorial and then click the + button.

    来自请求的数据插入到 TodoItem 表。Data from the request is inserted into the TodoItem table. 移动应用后端返回存储在表中的项，数据显示在列表中。Items stored in the table are returned by the mobile app backend, and the data appears in the list.

    备注

    可以查看访问移动应用后端以查询和插入数据的代码，这些代码在 ToDoActivity.cs C# 文件中。You can review the code that accesses your mobile app backend to query and insert data, which is found in the ToDoActivity.cs C# file.