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

Observação

Este produto foi retirado. Para obter uma substituição para projetos que usam o .NET 8 ou posterior, consulte a biblioteca Community Toolkit Datasync.

Este tutorial mostra como adicionar um serviço de back-end baseado em nuvem a um aplicativo móvel de plataforma cruzada 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 de aplicativos 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 Windows. Para concluir este tutorial, você precisa:

• Visual Studio 2022 com as seguintes cargas de trabalho.
  • ASP.NET e desenvolvimento 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) O Azure Developer CLI.
• Um dispositivo virtual Android , com as seguintes configurações:
  • Telefone: Qualquer imagem do telefone - usamos o Pixel 5 para testes.
  • Imagem do sistema: Android 11 (API 30 com APIs do Google)

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

• Instalar XCode
• Abra o Xcode após a instalação para que ele possa adicionar quaisquer componentes adicionais necessários.
• Uma vez aberto, selecione XCode Preferences...>Componentse instale um simulador iOS.
• Se estiver concluindo o tutorial no Windows, siga o guia para emparelhar com Mac.

Transferir a aplicação de exemplo

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

2. Abra a lista suspensa Code e selecione Download ZIP.

   

3. Quando o download estiver concluído, abra a 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:

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

Os exemplos estão localizados na pasta samples 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 arquivo TodoApp.sln.

Implantar o back-end no Azure

Observação

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 arquivo TodoApp.sln. Este diretório também contém azure.yaml.
3. Execute 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 de Constants.cs apropriado para você.

Você pode executar o comando azd env get-values para ver as informações de autenticação SQL, caso deseje acessar o 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 arquivo TodoApp.sln. Este diretório também contém azuredeploy.json.

2. Certifique-se de que iniciou sessão e selecionou um de subscrição utilizando 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 é:

   

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 Solutions Explorer.

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

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

4. Na janela Publicar, selecione Destino: Azuree, em seguida, prima Seguinte.

   

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

   

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

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

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

   

9. Selecione Concluir.

10. Após a conclusão do processo de criação do perfil de publicação, selecione Fechar.

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

    

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

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

    

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.

    

    Advertência

    Tenha cuidado ao gerenciar conexões usando nomes de usuário, senhas ou chaves de acesso. Esses segredos não devem ser comprometidos com o controle do código-fonte ou colocados em locais não seguros onde possam ser acessados por usuários não intencionais. Durante o desenvolvimento local, você geralmente se conectará a um banco de dados local que não requer o armazenamento de segredos ou a conexão direta com o Azure. Durante a produção, se conectar ao seu banco de dados SQL do Azure usando uma abordagem secreta como de ID do Microsoft Entra quando possível.

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.

    

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

    

Configurar o aplicativo de exemplo

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

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

1. Expanda o projeto TodoApp.Data.

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

3. Introduza Constants.cs como o nome e, em seguida, selecione Adicionar.

   

4. Abra o arquivo Constants.cs.example e copie o 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 https URL.

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

Crie e execute o aplicativo para Android

1. No explorador 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 como projeto de inicialização.

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

   

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

   • Selecione Ferramentas >Android>Gerenciador de dispositivos Android.
   • 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. A imagem será então descarregada.
   • Quando 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 ativar a aceleração de hardware.

   Dica

   Inicie seu emulador 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 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. É possível:

• Introduza algum texto na caixa e, em seguida, prima 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 os dados do serviço.

Crie e execute o aplicativo iOS

Observação

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

1. No explorador 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 como projeto de inicialização.

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

   

4. Selecione o simulador do iPhone

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. É possível:

• Introduza algum texto na caixa e, em seguida, prima 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 os dados do serviço.

Soluçã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:

Para contornar esse 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 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 concluir o tutorial de autenticação.

Próximos passos

Continue o tutorial adicionando autenticação ao aplicativo.