Crie um aplicativo Xamarin.iOS com os Aplicativos Móveis do Azure

Este tutorial mostra como adicionar um serviço de back-end baseado em nuvem a um aplicativo móvel iOS usando o Xamarin.iOS e um back-end de aplicativos móveis do Azure. Você criará um novo back-end de aplicativo móvel e um aplicativo de lista Todo simples que armazena dados de aplicativos no Azure.

Você deve concluir este tutorial antes de outros tutoriais do Xamarin.iOS usando o recurso Aplicativos Móveis no Serviço de Aplicativo do Azure.

Pré-requisitos

Para concluir este tutorial, precisa de:

  • Visual Studio 2022 com as seguintes cargas de trabalho.
    • Desenvolvimento ASP.NET e Web
    • Desenvolvimento do Azure
    • Desenvolvimento móvel com .NET
  • Uma conta do Azure.
  • CLI do Azure.
    • Inicie sessão com az login e selecione uma subscrição adequada antes de começar.
  • (Opcional) A CLI do Azure Developer.
  • Um Mac disponível:
    • Instalar o XCode
    • Abra o Xcode após a instalação para que ele possa adicionar quaisquer componentes adicionais necessários.
    • Uma vez aberto, selecione Preferências do XCode...>Componentes e instale um simulador iOS.
    • Siga o guia para Emparelhar com Mac.

É necessário um mac para compilar a versão iOS.

Transferir a aplicação de exemplo

  1. Abra o repositório azure-mobile-apps no navegador.

  2. Abra a lista suspensa Código e selecione Baixar ZIP.

    Screenshot of the Code menu on GitHub.

  3. Quando o download estiver concluído, abra a pasta Downloads e localize o azure-mobile-apps-main.zip arquivo.

  4. Clique com o botão direito do mouse no arquivo baixado e selecione Extrair tudo....

    Se preferir, você pode usar o PowerShell para expandir o arquivo:

    C:\Temp> Expand-Archive azure-mobile-apps-main.zip
    

Os exemplos estão localizados na pasta de amostras dentro dos arquivos extraídos. O exemplo para o início rápido é chamado TodoApp. Você pode abrir o exemplo no Visual Studio clicando duas vezes no TodoApp.sln arquivo.

Screenshot of the file explorer for the solution.

Implantar o back-end no Azure

Nota

Se você já tiver implantado o back-end a partir de outro início rápido, poderá usar o mesmo back-end e ignorar esta etapa.

Para implantar o serviço de back-end, iremos:

  • Provisione um Serviço de Aplicativo do Azure e o Banco de Dados SQL do Azure para o Azure.
  • Use o Visual Studio para implantar o código de serviço no Serviço de Aplicativo do Azure recém-criado.

Use a CLI do Desenvolvedor do Azure para concluir todas as etapas

O exemplo TodoApp está configurado para dar suporte à CLI do Desenvolvedor do Azure. Para concluir todas as etapas (provisionamento e implantação):

  1. Instale a CLI do Azure Developer.
  2. Abra um terminal e altere o diretório para a pasta que contém o TodoApp.sln arquivo. Este diretório também contém azure.yaml.
  3. Execute o azd up.

Se você ainda não estiver conectado ao Azure, o navegador será iniciado para solicitar que você entre. Em seguida, você será solicitado a fornecer uma assinatura e uma região do Azure para usar. Em seguida, a CLI do Desenvolvedor do Azure provisiona os recursos necessários e implanta o código de serviço na região do Azure e na assinatura de sua escolha. Finalmente, a CLI do Desenvolvedor do Azure grava um arquivo apropriado Constants.cs para você.

Você pode executar o comando para ver as informações de autenticação SQL caso deseje acessar o azd env get-values banco de dados diretamente.

Se você concluiu as etapas com a CLI do Desenvolvedor do Azure, prossiga para a próxima etapa. Se você não quiser usar a CLI do Azure Developer, prossiga com as etapas manuais.

Crie recursos no Azure.

  1. Abra um terminal e altere o diretório para a pasta que contém o TodoApp.sln arquivo. Este diretório também contém azuredeploy.json.

  2. Verifique se você entrou e selecionou uma assinatura usando a CLI do Azure.

  3. Crie um novo grupo de recursos:

    az group create -l westus -g quickstart
    

    Este comando cria o quickstart grupo de recursos na região Oeste dos EUA. Você pode selecionar qualquer região que desejar, desde que você possa criar recursos lá. Certifique-se de usar o mesmo nome e região onde quer que eles sejam mencionados neste tutorial.

  4. Crie os recursos usando uma implantação de grupo:

    az deployment group create -g quickstart --template-file azuredeploy.json --parameters sqlPassword=MyPassword1234
    

    Escolha uma senha forte para sua senha de administrador do SQL. Você precisa dele mais tarde ao acessar o banco de dados.

  5. Quando a implantação estiver concluída, obtenha as variáveis de saída, pois elas contêm informações importantes de que você precisa mais tarde:

    az deployment group show -g quickstart -n azuredeploy --query properties.outputs
    

    Um exemplo de saída é:

    Screenshot of command line results.

  6. Anote cada um dos valores nas saídas para uso posterior.

Publicar o código de serviço

Abra o TodoApp.sln no Visual Studio.

  1. No painel direito, selecione o Gerenciador de Soluções.

  2. Clique com o botão direito do mouse no TodoAppService.NET6 projeto e selecione Definir como projeto de inicialização.

  3. No menu superior, selecione Build>Publish TodoAppService.NET6.

  4. Na janela Publicar, selecione Destino: Azure e pressione Avançar.

    Screenshot of the target selection window.

  5. Selecione Destino específico: Serviço de Aplicativo do Azure (Windows) e pressione Avançar.

    Screenshot of the specific target selection window.

  6. Se necessário, inicie sessão e selecione um nome de Subscrição adequado.

  7. Verifique se Modo de Exibição está definido como Grupo de recursos.

  8. Expanda o grupo de recursos e selecione o quickstart Serviço de Aplicativo criado anteriormente.

    Screenshot of the app service selection window.

  9. Selecione Concluir.

  10. Quando o processo de criação do perfil de publicação estiver concluído, selecione Fechar.

  11. Localize as Dependências de Serviço e selecione os pontos triplos ao lado do Banco de Dados do SQL Server e, em seguida, selecione Conectar.

    Screenshot showing the S Q L server configuration selection.

  12. Selecione Banco de Dados SQL do Azure e, em seguida, selecione Avançar.

  13. Selecione o banco de dados de início rápido e, em seguida, selecione Avançar.

    Screenshot of the database selection window.

  14. Preencha o formulário usando o nome de usuário e a senha SQL que estavam nas saídas da implantação e selecione Avançar.

    Screenshot of the database settings window.

  15. Selecione Concluir.

  16. Selecione Fechar quando terminar.

  17. Selecione Publicar para publicar seu aplicativo no Serviço de Aplicativo do Azure que você criou anteriormente.

    Screenshot showing the publish button.

  18. Assim que o serviço de back-end é publicado, um navegador é aberto. Adicionar /tables/todoitem?ZUMO-API-VERSION=3.0.0 ao URL:

    Screenshot showing the browser output after the service is published.

Configurar a aplicação de exemplo

Seu aplicativo cliente precisa saber a URL base do seu back-end para que ele possa se comunicar com ele.

Se você costumava azd up provisionar e implantar o serviço, o Constants.cs arquivo foi criado para você e você pode ignorar esta etapa.

  1. Expanda o TodoApp.Data projeto.

  2. Clique com o botão direito do TodoApp.Data mouse no projeto e selecione Adicionar>classe....

  3. Digite Constants.cs como o nome e selecione Adicionar.

    Screenshot of adding the Constants.cs file to the project.

  4. Abra o arquivo e copie o Constants.cs.example conteúdo (Ctrl-A, seguido de Ctrl-C).

  5. Alterne para Constants.cs, realce todo o texto (Ctrl-A) e cole o conteúdo do arquivo de exemplo (Ctrl-V).

  6. Substitua o https://APPSERVICENAME.azurewebsites.net pelo URL de back-end do seu serviço.

    namespace TodoApp.Data
    {
        public static class Constants
        {
            /// <summary>
            /// The base URI for the Datasync service.
            /// </summary>
            public static string ServiceUri = "https://demo-datasync-quickstart.azurewebsites.net";
        }
    }
    

    Você pode obter a URL de back-end do seu serviço na guia Publicar . Certifique-se de usar um URL https .

  7. Guarde o ficheiro. (Ctrl-S).

Compilar e executar a aplicação

  1. No explorador de soluções, expanda a xamarin-native pasta.

  2. Clique com o botão direito do mouse no TodoApp.iOS projeto e selecione Definir como projeto de inicialização.

  3. Na barra superior, selecione a configuração do iPhone Simulator e o destino TodoApp.iOS :

    Screenshot showing how to set the run configuration for a Xamarin for i O S app.

  4. Selecione um simulador de iPhone apropriado (eu escolhi um iPhone SE com iOS 15.5).

  5. Pressione F5 para criar e executar o projeto.

Depois que o aplicativo for iniciado, você verá uma lista vazia e uma caixa de texto para adicionar itens no emulador. Pode:

  • Pressione o + botão para adicionar um item.
  • Selecione um item para definir ou limpar o sinalizador concluído.
  • Pressione o ícone de atualização para recarregar os dados do serviço.

Screenshot of the running i O S app showing the to do list.

Resolução de Problemas

O simulador remoto que acompanha o Visual Studio 2022 é incompatível com o XCode 13.3. Você receberá a seguinte mensagem de erro:

Screenshot of the error message when launching the i O S simulator.

Para contornar este problema:

  • Desative o simulador remoto (Ferramentas / Opções / Configurações do iOS / desmarque Simulador remoto para Windows). Quando desmarcado, o simulador será executado no Mac em vez de no Windows. Você pode então interagir com o simulador diretamente no seu Mac enquanto usa o depurador, etc. no Windows.
  • Desative o simulador remoto como acima, para que o simulador seja executado no Mac. Em seguida, utilize uma aplicação de ambiente de trabalho remoto para ligar ao ambiente de trabalho do Mac a partir do Windows. As opções de área de trabalho remota incluem o Devolutions Remote Desktop Manager (rápido e há uma versão gratuita disponível) e clientes VNC (mais lentos e gratuitos).
  • Use um dispositivo físico para testar em vez do simulador. Você pode obter um perfil de provisionamento gratuito para concluir o tutorial de autenticação.

Próximos passos

Continue o tutorial adicionando autenticação ao aplicativo.