Compartilhar via

Criar um aplicativo do Windows (WinUI3) com os Aplicativos Móveis do Azure

  • Artigo

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 da área de trabalho do SDK de Aplicativo do Windows (WinUI3) usando os Aplicativos Móveis do Azure 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 todos os outros tutoriais do Windows (WinUI3) sobre como usar o recurso Aplicativos Móveis no Serviço de Aplicativo do Azure.

Pré-requisitos

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 da área de trabalho do .NET
    • Desenvolvimento da Plataforma Universal do Windows
    • No painel Detalhes da instalação da caixa de diálogo de instalação, selecione modelos C# do SDK do Aplicativo windows (na parte inferior da lista).
    • Na guia Componentes individuais da caixa de diálogo de instalação, na seção SDKs, bibliotecas e estruturas, verifique se do SDK do Windows 10 está selecionado. Escolha uma versão igual ou posterior à 10.0.19041.0.
  • 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.

Para obter mais informações sobre as ferramentas necessárias para o desenvolvimento do SDK de Aplicativos do Windows, consulte Instalar ferramentas para o SDK do Aplicativo do Windows.

Este tutorial só pode ser concluído em um sistema Windows.

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.

    Captura de tela do menu Código no GitHub.

  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.

Captura de tela do explorador de arquivos para a solução.

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

    Captura de tela dos resultados da linha de comando.

  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.

    Captura de tela da janela de seleção de destino.

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

    Captura de tela da janela de seleção de destino específica.

  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.

    Captura de tela da janela de seleção do serviço de aplicativo.

  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.

    Captura de tela mostrando a seleção de configuração do servidor S Q L.

  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.

    Captura de tela da janela de seleção do banco de dados.

  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.

    Captura de tela da janela de configurações do banco de dados.

  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.

    Captura de tela mostrando o botão publicar.

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

    Captura de tela mostrando a saída do navegador após a publicação do serviço.

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.

    Captura de tela da adição do arquivo Constants.cs ao projeto.

  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 de exemplo

  1. No gerenciador de soluções, expanda a pasta windows.

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

  3. Verifique se a barra superior mostra TodoApp.WinUI (Pacote) como o destino de depuração:

    Captura de tela da barra de configuração do Visual Studio.

  4. Pressione F5 para compilar e executar o projeto.

Depois que o aplicativo for iniciado, você verá uma lista vazia com uma caixa de texto. É possível:

  • Insira algum texto e pressione Enter ou o ícone + para adicionar o item.

  • Defina ou desmarque a caixa de seleção para marcar qualquer item como feito.

  • Pressione o ícone de atualização para recarregar dados do serviço.

    Captura de tela do aplicativo Windows em execução no Windows.

Próximas etapas

Continue o tutorial adicionando autenticação ao aplicativo.