Criar um aplicativo Xamarin.Forms com AzureCreate a Xamarin.Forms app with Azure

Observação

Visual Studio App Center está investindo em novos e integrados serviços essenciais para o desenvolvimento de aplicativos móveis.Visual Studio App Center is investing in new and integrated services central to mobile app development. Os desenvolvedores podem usar construir, teste e distribuir services para configurar o pipeline de integração contínua e entrega.Developers can use Build, Test and Distribute services to set up Continuous Integration and Delivery pipeline. Depois que o aplicativo é implantado, os desenvolvedores podem monitorar o status e o uso do seu aplicativo usando o Analytics e diagnóstico serviços e entre em contato com usuários usando o enviar por Push serviço.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. Os desenvolvedores também podem aproveitar Auth autenticar seus usuários e dados serviço para manter e sincronizar dados do aplicativo na nuvem.Developers can also leverage Auth to authenticate their users and Data service to persist and sync app data in the cloud. Fazer check-out App Center hoje mesmo.Check out App Center today.

Visão GeralOverview

Este tutorial mostra como adicionar um serviço de back-end baseado em nuvem a um aplicativo móvel do Xamarin.Forms usando o recurso Aplicativos Móveis do Serviço de Aplicativo do Azure como back-end.This tutorial shows you how to add a cloud-based back-end service to a Xamarin.Forms mobile app by using the Mobile Apps feature of Azure App Service as the back end. Você cria um novo back-end do Aplicativo Móvel e um aplicativo de lista de tarefas pendentes Xamarin.Forms que armazena dados do aplicativo no Azure.You create both a new Mobile Apps back end and a simple to-do list Xamarin.Forms app that stores app data in Azure.

A conclusão desse tutorial é um pré-requisito para todos os outros tutoriais de Aplicativos Móveis para o Xamarin.Forms.Completing this tutorial is a prerequisite for all other Mobile Apps tutorials for Xamarin.Forms.

Pré-requisitosPrerequisites

Para concluir este tutorial, você precisará do seguinte:To complete this tutorial, you need the following:

  • Uma conta ativa do Azure.An active Azure account. Se você não tem uma conta, você pode se inscrever para uma avaliação do Azure e obter até 10 aplicativos móveis gratuitos que você pode continuar a usar mesmo após o fim do seu período de avaliação.If you don't have an account, you can sign up for an Azure trial and get up to 10 free mobile apps that you can keep using even after your trial ends. Para saber mais, confira Avaliação gratuita do Azure.For more information, see Azure Free Trial.

  • Ferramentas do Visual Studio para Xamarin, no Visual Studio 2017 ou posterior, ou o Visual Studio para Mac.Visual Studio Tools for Xamarin, in Visual Studio 2017 or later, or Visual Studio for Mac. Consulte a página de instalação do Xamarin para obter instruções.See the Xamarin installation page for instructions.

  • (opcional) Para compilar um aplicativo para iOS é necessário um Mac com Xcode 9.0 ou posterior.(optional) To build an iOS app, a Mac with Xcode 9.0 or later is required. O Visual Studio para Mac pode ser usado para desenvolver aplicativos iOS ou o Visual Studio 2017 ou posteriormente, pode ser usado (desde que o Mac está disponível na rede).Visual Studio for Mac can be used to develop iOS apps, or Visual Studio 2017 or later can be used (so long as the Mac is available on the network).

Criar um novo back-end de Aplicativos MóveisCreate a new Mobile Apps back end

  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 aplicativo Web.In the search box, type Web App.

  4. Na lista de resultados, selecione aplicativo Web do Marketplace.In the results list, select Web App from the Marketplace.

  5. Selecione suas assinatura e grupo de recursos (selecione um grupo de recursos ou criar um novo (usando o mesmo nome que seu aplicativo)).Select your Subscription and Resource Group (select an existing resource group or create a new one (using the same name as your app)).

  6. Escolha um único nome do seu aplicativo web.Choose a unique Name of your web app.

  7. Escolha o padrão Publish opção como código.Choose the default Publish option as Code.

  8. No pilha de tempo de execução, você precisa selecionar uma versão sob ASP.NET ou .In the Runtime stack, you need to select a version under ASP.NET or Node. Se você estiver criando um back-end .NET, selecione uma versão em ASP.NET.If you are building a .NET backend, select a version under ASP.NET. Caso contrário, se você estiver direcionando um aplicativo de nó com base em, selecione uma da versão do nó.Otherwise if you are targeting a Node based application, select one of the version from Node.

  9. Selecione o direito sistema operacional, Linux ou Windows.Select the right Operating System, either Linux or Windows.

  10. Selecione o região onde gostaria que este aplicativo a ser implantado.Select the Region where you would like this app to be deployed.

  11. Selecionar as devidas plano do serviço de aplicativo e clique em revisão e criar.Select the appropriate App Service Plan and hit Review and create.

  12. 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).

  13. 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.

  14. Depois que a implantação for concluída, clique no detalhes de implantação seção e, em seguida, clique no recurso do tipo Microsoft.Once the deployment is completed, click on the Deployment details section and then click on the Resource of Type Microsoft.Web/sites. Ele você navegará para o aplicativo de Web do serviço de aplicativo que você acabou de criar.It will navigate you to the App Service Web App that you just created.

  15. Clique no configuração folha sob configurações e, no as configurações do aplicativo, clique no nova configuração de aplicativo botão.Click on the Configuration blade under Settings and in the Application settings, click on the New application setting button.

  16. No Adicionar/Editar configuração de aplicativo , insira nome como MobileAppsManagement_EXTENSION_VERSION e o valor como mais recente e Pressione Okey.In the Add/Edit application setting page, enter Name as MobileAppsManagement_EXTENSION_VERSION and Value as latest and hit OK.

Você está pronto para usar esse aplicativo Web do serviço de aplicativo como um aplicativo móvel de recém-criado.You are all set to use this newly created App Service Web app as a Mobile app.

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.

Executar a solução do xamarin. FormsRun the Xamarin.Forms solution

Ferramentas do Visual Studio para Xamarin são necessárias para abrir a solução, consulte a instruções de instalação do Xamarin.The Visual Studio Tools for Xamarin are required to open the solution, see the Xamarin installation instructions. Se as ferramentas já estiverem instaladas, execute estas etapas para baixar e abrir a solução:If the tools are already installed, follow these steps to download and open the solution:

Visual Studio (Windows e Mac)Visual Studio (Windows and Mac)

  1. 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.

  2. Abra o arquivo Constants.cs nesta pasta - xamarin.forms/ZUMOAPPNAME.Open the file Constants.cs in this folder - xamarin.forms/ZUMOAPPNAME. O nome do aplicativo é ZUMOAPPNAME.The application name is ZUMOAPPNAME.

  3. Na Constants.cs classe, substitua ZUMOAPPURL variável com o ponto de extremidade público acima.In Constants.cs class, replace ZUMOAPPURL variable with public endpoint above.

    public static string ApplicationURL = @"ZUMOAPPURL";

    torna-sebecomes

    public static string ApplicationURL = @"https://test123.azurewebsites.net";

  4. Siga as instruções abaixo para executar os projetos Android ou Windows e, se houver um computador Mac em rede disponível, o projeto iOS.Follow the instructions below to run the Android or Windows projects; and if there is a networked Mac computer available, the iOS project.

(Opcional) Executar o projeto do Android(Optional) Run the Android project

Nesta seção, será executado o projeto Xamarin.Android.In this section, you run the Xamarin.Android project. Você poderá ignorá-la se não estiver trabalhando com dispositivos Android.You can skip this section if you are not working with Android devices.

Visual StudioVisual Studio

  1. Clique com o botão direito do mouse no projeto do Android (Droid) e selecione Definir como Projeto de Inicialização.Right-click the Android (Droid) project, and then select Set as StartUp Project.

  2. No menu Build, selecione Gerenciador de Configurações.On the Build menu, select Configuration Manager.

  3. Na caixa de diálogo Gerenciador de Configurações, marque as caixas de seleção Compilar e Implantar ao lado do projeto Android e verifique se o projeto de código compartilhado está com a caixa Compilar selecionada.In the Configuration Manager dialog box, select the Build and Deploy check boxes next to the Android project, and ensure the shared code project has the Build box checked.

  4. Para compilar o projeto e iniciar o aplicativo em um emulador Android, pressione a tecla F5 ou clique no botão Iniciar.To build the project and start the app in an Android emulator, press the F5 key or click the Start button.

Visual Studio para MacVisual Studio for Mac

  1. Clique com o botão direito do mouse no projeto do Android e selecione Definir Como Projeto de Inicialização.Right-click the Android project, and then select Set As Startup Project.

  2. Para compilar o projeto e iniciar o aplicativo em um emulador Android, selecione o menu Executar e, em seguida, Iniciar Depuração.To build the project and start the app in an Android emulator, select the Run menu, then Start Debugging.

No aplicativo, digite um texto significativo, como Saiba mais sobre o Xamarin e selecione o sinal de adição ( + ).In the app, type meaningful text, such as Learn Xamarin, and then select the plus sign (+).

Aplicativo de tarefa pendente do Android

Essa ação envia uma solicitação POST para o novo back-end dos Aplicativos Móveis hospedado no Azure.This action sends a post request to the new Mobile Apps back end that's hosted in Azure. Os dados da solicitação são inseridos na tabela TodoItem.Data from the request is inserted into the TodoItem table. Os Itens armazenados na tabela são retornados pelo back-end dos Aplicativos Móveis e os dados são exibidos na lista.Items that are stored in the table are returned by the Mobile Apps back end, and the data is displayed in the list.

Observação

O código que acessa o back-end dos Aplicativos Móveis está no arquivo C# TodoItemManager.cs do projeto de código compartilhado na solução.The code that accesses your Mobile Apps back end is in the TodoItemManager.cs C# file of the shared code project in the solution.

(Opcional) Executar o projeto do iOS(Optional) Run the iOS project

Nesta seção, você executará o projeto Xamarin.iOS para dispositivos iOS.In this section, you run the Xamarin.iOS project for iOS devices. Você poderá ignorá-la se não estiver trabalhando com dispositivos iOS.You can skip this section if you are not working with iOS devices.

Visual StudioVisual Studio

  1. Clique com o botão direito do mouse no projeto do iOS e clique em Definir como Projeto de Inicialização.Right-click the iOS project, and then select Set as StartUp Project.

  2. No menu Build, selecione Gerenciador de Configurações.On the Build menu, select Configuration Manager.

  3. Na caixa de diálogo Gerenciador de Configurações, marque as caixas de seleção Compilar e Implantar ao lado do projeto iOS e verifique se o projeto de código compartilhado está com a caixa Compilar selecionada.In the Configuration Manager dialog box, select the Build and Deploy check boxes next to the iOS project, and ensure the shared code project has the Build box checked.

  4. Para compilar o projeto e iniciar o aplicativo no emulador do iPhone, selecione a tecla F5.To build the project and start the app in the iPhone emulator, select the F5 key.

Visual Studio para MacVisual Studio for Mac

  1. Clique com o botão direito do mouse no projeto do iOS e clique em Definir Como Projeto de Inicialização.Right-click the iOS project, and then select Set As Startup Project.

  2. No menu Executar, selecione Iniciar Depuração para compilar o projeto e iniciar o aplicativo no emulador do iPhone.On the Run menu, select Start Debugging to build the project and start the app in the iPhone emulator.

No aplicativo, digite um texto significativo, como Saiba mais sobre o Xamarin e selecione o sinal de adição ( + ).In the app, type meaningful text, such as Learn Xamarin, and then select the plus sign (+).

Aplicativo de tarefa pendente do iOS

Essa ação envia uma solicitação POST para o novo back-end dos Aplicativos Móveis hospedado no Azure.This action sends a post request to the new Mobile Apps back end that's hosted in Azure. Os dados da solicitação são inseridos na tabela TodoItem.Data from the request is inserted into the TodoItem table. Os Itens armazenados na tabela são retornados pelo back-end dos Aplicativos Móveis e os dados são exibidos na lista.Items that are stored in the table are returned by the Mobile Apps back end, and the data is displayed in the list.

Observação

Você localizará o código que acessa o back-end do Aplicativo Móvel no arquivo C# TodoItemManager.cs do projeto de código compartilhado na solução.You'll find the code that accesses your Mobile Apps back end in the TodoItemManager.cs C# file of the shared code project in the solution.

(Opcional) Executar o projeto do Windows(Optional) Run the Windows project

Nesta seção, você executará o projeto Xamarin.Forms da UWP (Plataforma Universal do Windows) para dispositivos Windows.In this section, you run the Xamarin.Forms Universal Windows Platform (UWP) project for Windows devices. Você poderá ignorá-la se não estiver trabalhando com dispositivos Windows.You can skip this section if you are not working with Windows devices.

Visual StudioVisual Studio

  1. Clique com o botão direito do mouse em qualquer projeto UWP e selecione Definir como Projeto de Inicialização.Right-click any the UWP project, and then select Set as StartUp Project.

  2. No menu Build, selecione Gerenciador de Configurações.On the Build menu, select Configuration Manager.

  3. Na caixa de diálogo Gerenciador de Configurações, marque as caixas de seleção Compilar e Implantar ao lado do projeto Windows que você escolheu e verifique se o projeto de código compartilhado está com a caixa Compilar selecionada.In the Configuration Manager dialog box, select the Build and Deploy check boxes next to the Windows project that you chose, and ensure the shared code project has the Build box checked.

  4. Para compilar o projeto e iniciar o aplicativo em um emulador do Windows, pressione a tecla F5 ou clique no botão Iniciar (que deverá ler Computador Local).To build the project and start the app in a Windows emulator, press the F5 key or click the Start button (which should read Local Machine).

Observação

O projeto do Windows não pode ser executado no macOS.The Windows project cannot be run on macOS.

No aplicativo, digite um texto significativo, como Saiba mais sobre o Xamarin e selecione o sinal de adição ( + ).In the app, type meaningful text, such as Learn Xamarin, and then select the plus sign (+).

Essa ação envia uma solicitação POST para o novo back-end dos Aplicativos Móveis hospedado no Azure.This action sends a post request to the new Mobile Apps back end that's hosted in Azure. Os dados da solicitação são inseridos na tabela TodoItem.Data from the request is inserted into the TodoItem table. Os Itens armazenados na tabela são retornados pelo back-end dos Aplicativos Móveis e os dados são exibidos na lista.Items that are stored in the table are returned by the Mobile Apps back end, and the data is displayed in the list.

Aplicativo de tarefa pendente da UWP

Observação

Você encontrará o código que acessa o back-end dos Aplicativos Móveis no arquivo C# TodoItemManager.cs do projeto de biblioteca de classes portátil da sua solução.You'll find the code that accesses your Mobile Apps back end in the TodoItemManager.cs C# file of the portable class library project of your solution.

solução de problemasTroubleshooting

Se você tiver problemas para compilar a solução, execute o gerenciador de pacotes NuGet e atualize para a última versão do Xamarin.Forms e, no projeto Android, atualize os pacotes de suporte Xamarin.Android.If you have problems building the solution, run the NuGet package manager and update to the latest version of Xamarin.Forms, and in the Android project, update the Xamarin.Android support packages. Os projetos de Início Rápido nem sempre incluem as últimas versões.Quickstart projects might not always include the latest versions.

Observe que todos os pacotes de suporte referenciados em seu projeto Android devem ter a mesma versão.Please note that all the support packages referenced in your Android project must have the same version. O pacote NuGet de Aplicativos Móveis do Azure depende de Xamarin.Android.Support.CustomTabs para a plataforma Android e, portanto, se seu projeto usar pacotes de suporte mais recentes, será necessário instalar diretamente esse pacote com a versão necessária para evitar conflitos.The Azure Mobile Apps NuGet package has Xamarin.Android.Support.CustomTabs dependency for Android platform, so if your project uses newer support packages you need to install this package with required version directly to avoid conflicts.