Criar um aplicativo Xamarin.Forms com os Aplicativos Móveis do Azure

Nota

Este produto está desativado. Para obter uma substituição para projetos que usam o .NET 8 ou posterior, consulte a biblioteca datasync do Kit de Ferramentas da Comunidade .

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

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

Pré-requisitos

Você pode concluir este tutorial no Mac ou no Windows. Para concluir este tutorial, você precisa:

• do Visual Studio 2022 com as cargas de trabalho a seguir.
  • ASP.NET e desenvolvimento na Web
  • Desenvolvimento do Azure
  • Desenvolvimento móvel com .NET
• Uma conta do Azure.
• A CLI do do Azure.
  • Entre com az login e selecione uma assinatura apropriada antes de começar.
• (Opcional) A CLI do Desenvolvedor do do Azure.
• Um dispositivo virtual Android, com as seguintes configurações:
  • Telefone: Qualquer imagem de telefone – usamos o Pixel 5 para teste.
  • Imagem do sistema: Android 11 (API 30 com APIs do Google)

Se estiver compilando a edição iOS do aplicativo, você deverá ter um Mac disponível:

• Instalar do XCode
• Abra o Xcode após a instalação para que ele possa adicionar componentes adicionais necessários.
• Depois de abrir, selecione Preferências XCode...>Componentese instale um simulador iOS.
• Se estiver concluindo o tutorial no Windows, siga o guia para Emparelhar com o Mac.

Baixar o aplicativo de exemplo

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

2. Abra a lista suspensa Código e selecione BaixarZIP.

   

3. Depois que o download for concluído, abra sua pasta Downloads e localize o arquivo azure-mobile-apps-main.zip.

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 morto:

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

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

Implantar o back-end no Azure

Nota

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

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

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

Usar 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. Instalar a CLI do Desenvolvedor do Azure.
2. Abra um terminal e altere o diretório para a pasta que contém o arquivo TodoApp.sln. Esse diretório também contém azure.yaml.
3. Executar 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 usar uma assinatura e uma região do Azure. 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. Por fim, a CLI do Desenvolvedor do Azure grava um arquivo de Constants.cs apropriado para você.

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

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

Criar recursos no Azure.

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

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

3. Crie um novo grupo de recursos:

   az group create -l westus -g quickstart
   

   Esse comando cria o grupo de recursos quickstart na região Oeste dos EUA. Você pode selecionar qualquer região desejada, desde que 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 do Administrador do SQL. Você precisará dele mais tarde ao acessar o banco de dados.

5. Depois que a implantação for 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 é:

   

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

Publicar o código do serviço

Abra o TodoApp.sln no Visual Studio.

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

2. Clique com o botão direito do mouse no projeto TodoAppService.NET6 e selecione Definir comodo Projeto de Inicialização.

3. No menu superior, selecione Criar>Publicar TodoAppService.NET6.

4. Na janela Publicar, selecione Destino: do Azure e pressione Próximo.

   

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

   

6. Se necessário, entre e selecione um nome de assinatura apropriado.

7. Verifique se Exibir está definido como grupo de recursos.

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

   

9. Selecione Concluir.

10. Depois que o processo de criação do perfil de publicação for concluído, selecione Fechar.

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

    

12. Selecione do Banco de Dados SQL do Azure e selecione Próximo.

13. Selecione o banco de dados de início rápido e selecione Próximo.

    

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

    

15. Selecione Concluir.

16. Selecione Fechar quando for concluído.

17. Selecione Publicar para publicar seu aplicativo no Serviço de Aplicativo do Azure criado anteriormente.

    

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

    

Configurar o aplicativo de exemplo

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

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

1. Expanda o projeto de TodoApp.Data.

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

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

   

4. Abra o arquivo Constants.cs.example e copie o conteúdo (Ctrl-A, seguido por 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 pela URL de back-end do 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 uma URL de https.

7. Salve o arquivo. (Ctrl-S).

Compilar e executar o aplicativo Android

1. No gerenciador de soluções, expanda a pasta xamarin-forms.

2. Clique com o botão direito do mouse no projeto TodoApp.Forms.Android e selecione Definir comodo Projeto de Inicialização.

3. Na barra superior, selecione Qualquer configuração de de CPU e o destino TodoApp.Forms.Android:

   

4. Se você vir Android Emulator em vez disso, não criou um emulador android. Para obter mais informações, consulte configuração do android emulador. Para criar um novo emulador android:

   • Selecione ferramentas >Android>Android Device Manager.
   • Selecione + Novo.
   • Selecione as seguintes opções no lado esquerdo:
     • Nome: quickstart
     • Dispositivo Base: Pixel 5
     • Processador: x86_64
     • SO: Android 11.0 – API 30
     • APIs do Google: verificado
   • Selecione Criar.
   • Se necessário, aceite o contrato de licença. Em seguida, a imagem será baixada.
   • Depois que o botão iniciar for exibido, pressione Iniciar.
   • Se você for solicitado sobre Hyper-V aceleração de hardware, leia a documentação para habilitar a aceleração de hardware antes de continuar. O emulador será lento sem habilitar a aceleração de hardware.

   Ponta

   Inicie o emulador do Android antes de continuar. Você pode fazer isso abrindo o Gerenciador de Dispositivos Android e pressionando Iniciar ao lado do emulador escolhido.

5. Pressione F5 para compilar 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. É possível:

• Insira algum texto na caixa e pressione Enter para inserir um novo item.
• Selecione um item para definir ou limpar o sinalizador concluído.
• Pressione o ícone de atualização para recarregar dados do serviço.

Compilar e executar o aplicativo iOS

Nota

Você deve seguir o guia para Emparelhar com o Mac. Você receberá erros ao compilar ou executar aplicativos iOS sem um Mac emparelhado.

1. No gerenciador de soluções, expanda a pasta xamarin-forms.

2. Clique com o botão direito do mouse no projeto TodoApp.Forms.iOS e selecione Definir comodo Projeto de Inicialização.

3. Na barra superior, selecione configuração do Simulador de iPhone e o destino TodoApp.Forms.iOS:

   

4. Selecione o simulador do iPhone

5. Pressione F5 para compilar 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. É possível:

• Insira algum texto na caixa e pressione Enter para inserir um novo item.
• Selecione um item para definir ou limpar o sinalizador concluído.
• Pressione o ícone de atualização para recarregar dados do serviço.

Solucionando problemas

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

Para contornar esse problema:

• Desabilite 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. Em seguida, você pode interagir com o simulador diretamente em seu Mac ao usar o depurador, etc. no Windows.
• Desabilite o simulador remoto como acima, para que o simulador seja executado no Mac. Em seguida, use um aplicativo de área de trabalho remota para se conectar à área de trabalho do Mac do Windows. As opções de área de trabalho remota incluem do Gerenciador de Área de Trabalho Remota do Devolução (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óximas etapas

Continue o tutorial adicionando autenticação ao aplicativo.