Criar um aplicativo do iOSCreate an iOS app

Visão geralOverview

Este tutorial mostra como adicionar os Aplicativos Móveis do Serviço de Aplicativo do Azure, um serviço de back-end da nuvem, a um aplicativo iOS.This tutorial shows how to add Azure App Service Mobile Apps, a cloud backend service, to an iOS app. A primeira etapa é criar um novo back-end móvel no Azure.The first step is to create a new mobile backend on Azure. Depois, baixe um aplicativo simples de exemplo para iOS de Lista de tarefas pendentes que armazena dados no Azure.Then, download a simple Todo list iOS sample app that stores data in Azure.

Para concluir este tutorial, você precisa de um Mac e uma conta do AzureTo complete this tutorial, you need a Mac and an Azure account

Criar um novo back-end de aplicativo móvel do AzureCreate a new Azure mobile app backend

  1. Entre no Portal do Azure.Sign in to the Azure portal.

  2. Clique em Criar um recurso.Click Create a resource.

  3. Na caixa de pesquisa, digite Aplicativos Móveis.In the search box, type Mobile Apps.

  4. Na lista de resultados, selecione aplicativo móvele, em seguida, selecione criar.In the results list, select Mobile App, and then select Create.

  5. Escolha um Nome de aplicativo exclusivo.Choose a unique App name. Isso também será parte do nome do domínio para seu Serviço de Aplicativo.This will also be part of the domain name for your App Service.

  6. Selecione o assinatura para este aplicativo móvel.Select the Subscription for this mobile app.

  7. Em Grupo de Recursos, selecione um grupo de recursos existente ou crie um novo (usando o mesmo nome que o aplicativo).Under Resource Group, select an existing resource group or create a new one (using the same name as your app).

  8. Clique em Criar.Click Create. Aguarde alguns minutos para que o serviço seja implantado com êxito antes de continuar.Wait a few minutes for the service to be deployed successfully before proceeding. Observe o ícone de notificações (sino) no cabeçalho do portal para atualizações de status.Watch the Notifications (bell) icon in the portal header for status updates.

Criar uma conexão de banco de dados e configurar o projeto de cliente e servidorCreate a database connection and configure the client and server project

  1. Baixe o guias de início rápido do SDK para as seguintes plataformas de cliente: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#)

    Observação

    Se você usar o projeto do iOS você precisa baixar "azuresdk-iOS -*. zip" partir versão mais recente do GitHub.If you use the iOS project you need to download "azuresdk-iOS-*.zip" from latest GitHub release. Descompacte e adicione o MicrosoftAzureMobile.framework arquivo para a raiz do projeto.Unzip and add the MicrosoftAzureMobile.framework file to the project's root.

  2. Você precisará adicionar uma conexão de banco de dados ou conectar-se para uma conexão existente.You will have to add a database connection or connect to an existing connection. Primeiro, determine se você criar um repositório de dados ou usar um existente.First, determine whether you’ll create a data store or use an existing one.

    • Criar um novo armazenamento de dados: Se você pretende criar um armazenamento de dados, use o seguinte guia de início rápido:Create a new data store: If you’re going to create a data store, use the following quickstart:

      Início Rápido: Guia de Introdução com bancos de dados individuais no banco de dados SQLQuickstart: Getting started with single databases in Azure SQL Database

    • Fonte de dados existente: Siga as instruções abaixo se você quiser usar uma conexão de banco de dados existenteExisting data source: Follow the instructions below if you want to use an existing database connection

      1. Formato de cadeia de Conexão de banco de dados 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} Nome do servidor, isso pode ser encontrado na página de visão geral do banco de dados e é normalmente na forma de "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} geralmente 1433.{port} usually 1433. {your_catalogue} Nome do banco de dados.{your_catalogue} Name of the database. {your_username} Nome de usuário para acessar seu banco de dados.{your_username} User name to access your database. {your_password} Senha para acessar seu banco de dados.{your_password} Password to access your database.

        Saiba mais sobre o formato de cadeia de caracteres de Conexão SQLLearn more about SQL Connection String format

      2. Adicione a cadeia de conexão para seu aplicativo móvel no serviço de aplicativo, você pode gerenciar cadeias de caracteres de conexão para seu aplicativo usando o configuração opção no menu.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.

        Para adicionar uma cadeia de caracteres de conexão:To add a connection string:

        1. Clique no configurações do aplicativo guia.Click on the Application settings tab.

        2. Clique em [+] nova cadeia de caracteres de conexão.Click on [+] New connection string.

        3. Você precisará fornecer nome, valor e tipo para a cadeia de conexão.You will need to provide Name, Value and Type for your connection string.

        4. Tipo de nome como MS_TableConnectionStringType Name as MS_TableConnectionString

        5. Valor deve ser formada na etapa antes da cadeia de conexão.Value should be the connecting string you formed in the step before.

        6. Se você estiver adicionando uma cadeia de caracteres de conexão para um banco de dados do SQL Azure, escolha SQLAzure sob tipo.If you are adding a connection string to a SQL Azure database choose SQLAzure under type.

  3. Aplicativos móveis do Azure tem SDKs para back-ends .NET e Node. js.Azure Mobile Apps has SDKs for .NET and Node.js backends.

    • Back-end do Node.jsNode.js backend

      Se você pretende usar o aplicativo de início rápido do Node. js, siga as instruções abaixo.If you’re going to use Node.js quickstart app, follow the instructions below.

      1. No portal do Azure, acesse tabelas fáceis, você verá esta tela.In the Azure portal, go to Easy Tables, you will see this screen.

        Tabelas fáceis de nó

      2. Verifique se a cadeia de caracteres de conexão do SQL já foi adicionada a configuração guia. Em seguida, marque a caixa de confirmo que isto substituirá todo o conteúdo do site e clique no criar tabela TodoItem botão.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.

        Configuração do nó tabelas fáceis

      3. Na tabelas fáceis, clique no + adicionar botão.In Easy Tables, click the + Add button.

        Botão de adicionar tabelas fáceis de nó

      4. Criar um TodoItem tabela com acesso anônimo.Create a TodoItem table with anonymous access.

        Tabelas de nó fácil adicionar tabela

    • Back-end do .NET.NET backend

      Se você pretende usar o aplicativo de início rápido do .NET, siga as instruções abaixo.If you’re going to use .NET quickstart app, follow the instructions below.

      1. Baixe o projeto de servidor .NET dos aplicativos móveis do Azure na repositório azure-mobile-apps-guias de início rápido.Download the Azure Mobile Apps .NET server project from the azure-mobile-apps-quickstarts repository.

      2. Compile o projeto de servidor .NET localmente no Visual Studio.Build the .NET server project locally in Visual Studio.

      3. No Visual Studio, abra o Gerenciador de soluções, clique duas vezes em ZUMOAPPNAMEService do projeto, clique em Publish, você verá um Publish to App Service janela.In Visual Studio, open Solution Explorer, right-click on ZUMOAPPNAMEService project, click Publish, you will see a Publish to App Service window. Se você estiver trabalhando no Mac, check-out de outras maneiras de implantar o aplicativo aqui.If you are working on Mac, check out other ways to deploy the app here.

        Publicação do Visual studio

      4. Selecione serviço de aplicativo como destino de publicação, em seguida, clique em selecionar existente, em seguida, clique no publicar botão na parte inferior da janela.Select App Service as publish target, then click Select Existing, then click the Publish button at the bottom of the window.

      5. Você precisará entrar no Visual Studio com sua assinatura do Azure pela primeira vez.You will need to log into Visual Studio with your Azure subscription first. Selecione o Subscription, Resource Groupe, em seguida, selecione o nome do seu aplicativo.Select the Subscription, Resource Group, and then select the name of your app. Quando você estiver pronto, clique em Okey, isso implantará o projeto do servidor .NET que você tiver localmente para o back-end do serviço de aplicativo.When you are ready, click OK, this will deploy the .NET server project that you have locally into the App Service backend. Quando a implantação for concluída, você será redirecionado para http://{zumoappname}.azurewebsites.net/ no navegador.When deployment finishes, you will be redirected to http://{zumoappname}.azurewebsites.net/ in the browser.

        Back-end está ativo

Executar o aplicativo iOSRun the iOS app

  1. Abra o projeto de cliente baixados usando o Xcode.Open the downloaded client project using Xcode.

  2. Vá para o portal do Azure e navegue até o aplicativo móvel que você criou.Go to the Azure portal and navigate to the mobile app that you created. Sobre o Overview folha, procure a URL que é o ponto de extremidade público para seu aplicativo móvel.On the Overview blade, look for the URL which is the public endpoint for your mobile app. Exemplo – o nome do site para o meu nome de aplicativo "test123" será https://test123.azurewebsites.net.Example - the sitename for my app name "test123" will be https://test123.azurewebsites.net.

  3. Para o projeto Swift, abra o arquivo ToDoTableViewController.swift nesta pasta - ZUMOAPPNAME/ZUMOAPPNAME/ToDoTableViewController.swift.For Swift project, open the file ToDoTableViewController.swift in this folder - ZUMOAPPNAME/ZUMOAPPNAME/ToDoTableViewController.swift. O nome do aplicativo é ZUMOAPPNAME.The application name is ZUMOAPPNAME.

  4. Na viewDidLoad() método, substitua ZUMOAPPURL parâmetro com o ponto de extremidade público acima.In viewDidLoad() method, replace ZUMOAPPURL parameter with public endpoint above.

    let client = MSClient(applicationURLString: "ZUMOAPPURL")

    torna-sebecomes

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

  5. Para o projeto de Objective-C, abra o arquivo QSTodoService.m nesta pasta - ZUMOAPPNAME/ZUMOAPPNAME.For Objective-C project, open the file QSTodoService.m in this folder - ZUMOAPPNAME/ZUMOAPPNAME. O nome do aplicativo é ZUMOAPPNAME.The application name is ZUMOAPPNAME.

  6. Na init método, substitua ZUMOAPPURL parâmetro com o ponto de extremidade público acima.In init method, replace ZUMOAPPURL parameter with public endpoint above.

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

    torna-sebecomes

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

  7. Pressione o botão Executar para criar o projeto e iniciar o aplicativo no simulador de iOS.Press the Run button to build the project and start the app in the iOS simulator.

  8. No aplicativo, clique no ícone de adição ( + ), digite um texto significativo, como Concluir o tutorial e, em seguida, clique no botão Salvar.In the app, click the plus (+) icon, type meaningful text, such as Complete the tutorial, and then click the save button. Isso envia uma solicitação POST para o back-end do Azure implantado anteriormente.This sends a POST request to the Azure backend you deployed earlier. O back-end insere dados da solicitação na tabela SQL TodoItem e retorna informações sobre os itens armazenados recentemente no aplicativo móvel.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. O aplicativo móvel exibe esses dados na lista.The mobile app displays this data in the list.

    Aplicativo de início rápido em execução no iOS