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

Artigo
06/08/2023

Este tutorial mostra como adicionar um serviço de back-end baseado em nuvem a um aplicativo da área de trabalho de Plataforma Universal do Windows (UWP) 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 um aplicativo de lista De tarefas pendentes simples que armazena dados do aplicativo no Azure.

Este tutorial é necessário para todos os outros tutoriais do Windows (UWP) sobre como usar o recurso aplicativos móveis em Serviço de Aplicativo do Azure.

Pré-requisitos

Para concluir este tutorial, você precisará:

Visual Studio 2022 com as cargas de trabalho a seguir.
- Desenvolvimento Web e ASP.NET
- Desenvolvimento do Azure
- Desenvolvimento para a Plataforma Universal do Windows
Uma conta do Azure.
O CLI do Azure.
- Entre com az login e selecione uma assinatura apropriada antes de começar.

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 Baixar ZIP.
Depois que o download for concluído, abra a pasta Downloads e localize o azure-mobile-apps-main.zip arquivo.
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 na pasta de exemplos dentro dos arquivos extraídos. O exemplo para o início rápido é chamado TodoAppde . Você pode abrir o exemplo no Visual Studio clicando duas vezes no TodoApp.sln arquivo.

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

Implantar o back-end no Azure

Observação

Se você já tiver implantado 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:

Use o Azure Resource Manager e a CLI do Azure para implantar um banco de dados Serviço de Aplicativo do Azure e SQL do Azure no Azure.
Use o Visual Studio para publicar o código de serviço no Serviço de Aplicativo do Azure recém-criado.

Criar recursos no Azure.

Abra um terminal e altere o diretório para a pasta que contém o TodoApp.sln arquivo. Esse diretório também contém azuredeploy.json.
Verifique se você entrou e selecionou uma assinatura usando a CLI do Azure.
Criar um grupo de recursos:
```
az group create -l westus -g quickstart
```
Esse comando criará o quickstart grupo de recursos 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 de 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ê precisará mais tarde:
```
az deployment group show -g quickstart -n azuredeploy --query properties.outputs
```
Um exemplo de saída será:
Anote cada um dos valores nas saídas para uso posterior.

Publique o código do serviço.

Abra o TodoApp.sln no Visual Studio.

No painel direito, selecione o Explorer Soluções.
Clique com o botão direito do mouse no TodoAppService.NET6 projeto e selecione Definir como Projeto de Inicialização.
No menu superior, selecione Compilar>Publicar TodoAppService.NET6.
Na janela Publicar , selecione Destino: Azure e pressione Avançar.
Selecione Destino específico: Serviço de Aplicativo do Azure (Windows)e pressione Avançar.
Se necessário, entre e selecione um nome de assinatura apropriado.
Verifique se a Exibição está definida como Grupo de recursos.
Expanda o quickstart grupo de recursos 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 as Dependências de Serviço e selecione os pontos triplos ao lado do Banco de Dados SQL Server e selecione Conectar.
Selecione SQL do Azure Banco de Dados e, em seguida, selecione Avançar.
Selecione o banco de dados de início rápido e, em seguida, selecione Avançar.
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 Avançar.
Selecione Concluir.
Selecione Fechar quando concluir.
Selecione Publicar para publicar seu aplicativo no Serviço de Aplicativo do Azure que você criou anteriormente.
Depois que o serviço de back-end for publicado, um navegador será 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.

Expanda o TodoApp.Data projeto.
Clique com o botão direito do TodoApp.Data mouse no projeto e selecione Adicionar>Classe....
Insira Constants.cs como o nome e selecione Adicionar.
Abra o Constants.cs.example arquivo 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 serviço na guia Publicar . Certifique-se de usar uma URL https .

Salve o arquivo. (Ctrl-S).

Compilar e executar o aplicativo de exemplo

No gerenciador de soluções, expanda a windows pasta .
Clique com o botão direito do mouse no TodoApp.UWP projeto e selecione Definir como Projeto de Inicialização.
Na barra superior, selecione Qualquer configuração de CPU e o destino TodoApp.UWP :
Pressione F5 para criar e executar o projeto.