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

Artigo
09/07/2023

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 de área de trabalho do WPF (Windows Presentation Framework) usando 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 (WPF) 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
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.

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

Baixar o aplicativo de exemplo

Abra o repositório azure-mobile-apps no navegador.
Abra a lista suspensa Código e selecione BaixarZIP.
Depois que o download for concluído, abra sua pasta Downloads e localize o arquivo azure-mobile-apps-main.zip.
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):

Instalar a CLI do Desenvolvedor do Azure.
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.
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.

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.
Verifique se você conectado e selecionou uma assinatura usando a CLI do Azure.
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.
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.
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 é:
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.

No painel direito, selecione odo Gerenciador de Soluções do .
Clique com o botão direito do mouse no projeto TodoAppService.NET6 e selecione Definir comodo Projeto de Inicialização.
No menu superior, selecione Criar>Publicar TodoAppService.NET6.
Na janela Publicar, selecione Destino: do Azure e pressione Próximo.
Selecione Destino específico: do Serviço de Aplicativo do Azure (Windows) e pressione Próximo.
Se necessário, entre e selecione um nome de assinatura apropriado.
Verifique se Exibir está definido como grupo de recursos.
Expanda o grupo de recursos quickstart e selecione o Serviço de Aplicativo que foi criado anteriormente.
Selecione Concluir.
Depois que o processo de criação do perfil de publicação for concluído, selecione Fechar.
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.
Selecione do Banco de Dados SQL do Azure e selecione Próximo.
Selecione o banco de dados de início rápido e selecione Próximo.
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.
Selecione Concluir.
Selecione Fechar quando for concluído.
Selecione Publicar para publicar seu aplicativo no Serviço de Aplicativo do Azure criado anteriormente.
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.

Expanda o projeto de TodoApp.Data.
Clique com o botão direito do mouse no projeto TodoApp.Data e selecione Adicionar Classe>....
Insira Constants.cs como o nome e selecione Adicionar.
Abra o arquivo Constants.cs.example e copie o conteúdo (Ctrl-A, seguido por Ctrl-C).
Alterne para Constants.cs, realce todo o texto (Ctrl-A) e cole o conteúdo do arquivo de exemplo (Ctrl-V).

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.

Salve o arquivo. (Ctrl-S).

Compilar e executar o aplicativo de exemplo

No gerenciador de soluções, expanda a pasta windows.
Clique com o botão direito do mouse no projeto TodoApp.WPF e selecione Definir comodo Projeto de Inicialização.
Na barra superior, selecione a configuração Qualquer de CPU e o TodoApp.WPF:
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.

Próximas etapas

Continue o tutorial adicionando autenticação ao aplicativo.

Compartilhar via