Criar um aplicativo Dalida com os Aplicativos Móveis do Azure

  • Artigo

A Avalonia permite que você crie aplicativos de GUI do .NET para Windows, macOS, Linux, iOS, Android e Web Assembly a partir de uma única base de código. Este tutorial mostra como adicionar um serviço de back-end baseado em nuvem a um aplicativo de área de trabalho do Windows Avalonia 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 um aplicativo de lista Todo simples que armazena dados do aplicativo no Azure.

Você deve concluir este tutorial antes de todos os outros tutoriais do Avalonia sobre como usar os Aplicativos Móveis do Azure.

Pré-requisitos

Para concluir este tutorial, você precisará:

Embora a Avalonia dê suporte à criação no Mac ou Windows, este tutorial pressupõe que você esteja usando Windows e Visual Studio 2022. Recomendamos que você passe pelo tutorial de Avalonia para se familiarizar com o processo de desenvolvimento da Avalonia.

Baixar o aplicativo de exemplo

  1. Abra o repositório de aplicativos móveis do azure no navegador.

  2. Abra a lista suspensa Código e, em seguida, selecione Baixar ZIP.

    Screenshot of the Code menu on GitHub.

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

  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 de exemplos dentro dos arquivos extraídos. O exemplo para o início rápido é nomeado TodoApp. Você pode abrir o exemplo em Visual Studio clicando duas vezes no TodoApp.sln arquivo.

Screenshot of the file explorer for the solution.

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 Serviço de Aplicativo do Azure e Banco de Dados SQL do Azure no Azure.
  • Use Visual Studio para publicar o código de serviço no Serviço de Aplicativo do Azure recém-criado.

Criar recursos no Azure.

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

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

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

  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 SQL Administrador. 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 que serão necessárias posteriormente:

    az deployment group show -g quickstart -n azuredeploy --query properties.outputs

    Uma saída de exemplo será:

    Screenshot of command line results.

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

Publicar o código do serviço.

Abra o TodoApp.sln Visual Studio.

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

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

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

  4. Na janela Publicar , selecione Destino: Azure e pressione Avançar.

    Screenshot of the target selection window.

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

    Screenshot of the specific target selection window.

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

  7. Verifique se o Modo de Exibição está definido como grupo de recursos.

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

    Screenshot of the app service selection window.

  9. Selecione Concluir.

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

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

    Screenshot showing the S Q L server configuration selection.

  12. Selecione Banco de Dados SQL do Azure e selecione Avançar.

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

    Screenshot of the database selection window.

  14. Preencha o formulário usando o SQL nome de usuário e senha que estavam nas saídas da implantação e selecione Avançar.

    Screenshot of the database settings window.

  15. Selecione Concluir.

  16. Selecione Fechar quando concluído.

  17. Selecione Publicar para publicar seu aplicativo no Serviço de Aplicativo do Azure que você criou anteriormente.

    Screenshot showing the publish button.

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

    Screenshot showing the browser output after the service is published.

Configurar o aplicativo de exemplo

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

  1. Expanda o TodoApp.Data projeto.

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

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

    Screenshot of adding the Constants.cs file to the project.

  4. Abra o Constants.cs.example arquivo 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 a https://APPSERVICENAME.azurewebsites.net 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 . Verifique se você usa uma URL https .

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

Compilar e executar o aplicativo de exemplo

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

  2. Clique com o botão direito do mouse no TodoApp.AvaloniaUI projeto e selecione Definir como Project de Inicialização.

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

    Screenshot of the Visual Studio configuration bar.

  4. Pressione F5 para criar e executar o projeto.

Depois que o aplicativo for iniciado, você verá uma lista vazia com uma caixa de texto. Você pode:

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

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

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

    Screenshot of the Avalonia app running on Windows.

Próximas etapas

Continue o tutorial adicionando autenticação ao aplicativo.