Azure Functions: incorpore funções a uma loja virtual

Azure Functions e carrinho de compras - Apresentação

Olá, estudante, tudo bem? Sou o instrutor Marcelo Oliveira.

Audiodescrição: Marcelo se autodescreve como um homem branco, de olhos castanhos escuros, cabelos e barbas escuras. Usa óculos de grau com armação preta, retangular e arredondada nas laterais. Está vestindo uma camiseta cinza. Ao fundo, uma parede azul.

Este curso foi pensado para quem quer aprender uma solução de desenvolvimento sem servidor, que permite escrever menos código, manter menos infraestrutura e economizar custos. Receberemos o projeto do cliente Orgânico Vida, um site de comércio eletrônico que vende frutas, verduras, legumes e outros vegetais orgânicos com entrega a domicílio.

Você será a pessoa encarregada de desenvolver e integrar as Azure Functions com o site Orgânico Vida. Vamos trabalhar com vários conceitos que ajudarão a realizar essa integração. Primeiro, vamos criar as Azure Functions na linguagem C Sharp, utilizando o Visual Studio.

Vamos aprender a consultar os itens do carrinho de compras, inserir, modificar e remover os itens do carrinho, fechar os pedidos de compra e fazer a implantação das funções locais na nuvem.

Mais adiante, utilizaremos o VS Code para criar Azure Functions, desta vez, na linguagem JavaScript. Vamos aprender a implementar a aprovação de pedidos em fila, a geração do faturamento mensal do site Orgânico Vida e, ao final, realizar o deploy dessas funções na nuvem.

Além da programação, também aprenderemos a usar o portal do Azure para tarefas administrativas, como, por exemplo, criar e consultar o banco de dados, e containers com o Cosmos DB. Também aprenderemos a criar filas e enviar mensagens assíncronas com o Storage Account, conhecer a estratégia de integração contínua com o GitHub, melhorar a escalabilidade de uma aplicação de funções, testar as funções diretamente pelo portal do Azure e monitorar os logs criando queries com o Application Insights.

Apesar de ser um tópico um pouco mais avançado, que demanda um conhecimento básico em nuvem do Azure, além de programação C Sharp e JavaScript, você terá, ao longo do curso, todo o código necessário para fazer a implementação e recorrer a ele, caso tenha alguma dificuldade.

O que aprenderemos agregará muito ao mercado de trabalho e também aos seus projetos pessoais. Portanto, aproveite os recursos da plataforma Alura! Além dos vídeos, também temos atividades e apoio do fórum e da comunidade do Discord.

Vamos estudar?!

Azure Functions e carrinho de compras - Criando Azure Function localmente

Neste vídeo, vamos aprender a criar uma Azure Function localmente, utilizando o Visual Studio. Para começar, você precisa baixar o código-fonte que fornecemos na atividade "Preparando o Ambiente".

Neste curso, você fará parte da equipe de desenvolvimento do site Orgânico Vida, um site de comércio eletrônico que vende frutas, verduras, legumes e outros vegetais orgânicos com entrega a domicílio. Estamos acompanhando o projeto do site rodando no navegador.

Vamos observar o carrinho de compras, onde nossa clientela pode escolher seus produtos e ajustar as quantidades. Elas podem adicionar, modificar e remover os itens do carrinho de compras.

Para trabalhar com o projeto deste curso, precisamos abrir o Visual Studio. No código-fonte, encontraremos a solução Aula01.sln. Dentro dessa solução, temos dois projetos.

Primeiro, o projeto Orgânico, que é o website desenvolvido em AspNet Core (Núcleo AspNet) com o C Sharp (C#). Este projeto contém as regras de apresentação do site Orgânico Vida.

O segundo projeto é o Orgânico Library, que é uma biblioteca de classes desenvolvida em C Sharp (C#). Ela contém as regras de negócio e também as regras de acesso a dados. Porém, apenas acessa os dados em memória. Queremos uma solução mais realista, que acesse um banco de dados.

Como já temos o banco de dados Cosmos DB, que foi instalado no Azure no início do curso, durante a preparação do ambiente, futuramente, vamos integrar esse banco de dados com a nossa solução de comércio eletrônico.

Para fazer essa integração da nossa aplicação com o banco de dados que está na nuvem, precisaremos de um novo projeto de um aplicativo de funções. O objetivo deste vídeo inicial é apenas criar um aplicativo de funções e demonstrar um teste simples com o MyAzure Function no navegador.

Para criar uma Azure Function no Visual Studio, temos que adicionar um novo projeto. Para isso, selecionaremos a solução Aula01, clicaremos com o botão direito e escolheremos "Add > New Project".

Na outra tela, buscaremos por "Azure Function". Selecionemos esse tipo de projeto e clicaremos no botão "Next". Em seguida, daremos um nome para este novo projeto de função, nosso aplicativo de funções. Vamos chamá-lo de Organico.FunctionApp e clicaremos no botão "Next".

Na próxima página, encontraremos algumas informações adicionais do projeto. Temos a versão .NET 7.0 isolated, que indica que o projeto será executado num processo de trabalho isolado.

Temos um modelo de função, "Function", que é HTTP Trigger. Significa que a nossa função será acionada por um gatilho, isto é, por um HTTP Trigger. A cada vez que a requisição HTTP for feita para o nosso site, ela acionará a nossa Azure Function.

Mais abaixo, temos a conta de armazenamento, com a indicação de que ele vai utilizar o Azurite. O Azurite é um emulador que fornece o ambiente local para estarmos nossa Function App.

Mais abaixo, temos o nível de autorização. Vamos trocar esse valor para "Anonymous" (anônimo), que vai indicar que a nossa função pode ser executada sem precisarmos fornecer uma chave de acesso. Essa é uma opção menos segura, porém, torna mais fácil testar a nossa função ao longo do curso. Por fim, clicaremos no botão "Criar".

O Visual Studio criou o projeto Organico.FunctionApp. Esse aplicativo de funções pode conter uma ou mais Azure Functions. Aos poucos, vamos migrar as regras de negócio e regras de acesso a dados que atualmente estão na nossa biblioteca "Orgânico Library" para esse aplicativo de funções.

Ao longo do curso, também começaremos a abandonar, aos poucos, o acesso a dados que estamos fazendo em memória. Em vez de acessar em memória, vamos começar a consumir e atualizar o nosso banco de dados que está na nuvem, que é o banco Cosmos DB.

Agora vamos começar a trabalhar com Azure Functions. O template do nosso projeto de funções criou uma função chamada Function1. Então, temos esse arquivo e precisamos renomeá-lo para o propósito do nosso projeto.

Já que vamos criar um carrinho de compras, podemos renomear esse arquivo Function1.cx para Carrinho.cs. Vamos usar a tecla "F2" e renomear o arquivo. Com isso, automaticamente o Visual Studio renomeará a classe Function1 para Carrinho.

Abaixo, temos o método Run, que será executado quando a função é executada. Logo acima, temos um atributo onde o nome da função ainda está como Function1. Precisamos ajustá-lo. Vamos trocar para Carrinho e salvar.

[Function("Carrinho")]
        public async Task<HttpResponseData> Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", "post")] HttpRequestData req)
        {

Para consultar o arquivo por completo, basta acessar o Github do curso

Agora, vamos executar nosso aplicativo de funções para depois testar a Azure Function. Para isso, clicaremos com o botão direito em cima do projeto Organico.FunctionApp e definiremos esse projeto como projeto de inicialização, isto é, "Set as Startup Project".

Podemos rodar o nosso aplicativo de funções com a tecla "F5" para executá-lo. Quando o aplicativo de funções é executado localmente, ele exibe uma janela com uma lista com as funções que estão disponíveis. Atualmente, só temos a função Carrinho.

Carrinho [GET, POST] http://localhost: 7266/api/Carrinho

À frente da função, temos uma URL. Para executar essa função, devemos pressionar a tecla "Ctrl" e clicar com o botão direito do mouse. Em seguida, seremos redirecionados para o navegador e localizaremos a URL que ele já está abrindo numa nova aba. Temos o endereço localhost, porta 7266 com /api/Carrinho. Temos a resposta da nossa primeira Azure Function: "Bem-vindo à Azure Functions".

Welcome to Azure Functions!

Quando abrimos a URL da nossa Azure Function, do carrinho de compras, um gatilho foi disparado. Esse gatilho também é chamado de HTTP Trigger, ele aciona a Azure Function do carrinho e faz com que a função seja executada.

Como a nossa função foi criada a partir do template padrão, que é um template muito simples, só respondeu com a mensagem "Bem-vindo as Azure Functions".

Neste vídeo, utilizamos o Visual Studio para criar uma função simples a partir do template padrão. A seguir, vamos aprender a montar os fluxos para receber as requisições HTTP GET e também HTTP POST para acessar o banco de dados Cosmos DB, que está na nuvem, na estação do Azure. Assim, poderemos começar a trabalhar com as funcionalidades do nosso carrinho de compras do site Orgânico Vida.

Muito obrigado e até o próximo vídeo!

Azure Functions e carrinho de compras - Consultando os itens do carrinho

• No projeto Organico.FunctionApp, adicionar uma referência ao projeto Organico.Library

• Modificar o método Run do arquivo Carrinho.cs

       [Function("Carrinho")]
       public async Task<HttpResponseData> Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", "post")] HttpRequestData req)
       {
           _logger.LogInformation("C# HTTP trigger function processed a request.");

          var response = req.CreateResponse(HttpStatusCode.OK);

           // 1. Comentar a resposta padrão
           //response.Headers.Add("Content-Type", "text/plain; charset=utf-8");

           //response.WriteString("Welcome to Azure Functions!");

          // 2. Acessar o objeto cliente de acesso a dados do Carrinho de Compras
           var cosmosClient = CarrinhoCosmosClient.Instance();

           // 3. Identificar quando a requisição é GET ou POST 
          if (req.Method == "GET")
           {
               // 4. Adicionar o cabeçalho para a resposta JSON
              response.Headers.Add("Content-Type", "application/json; charset=utf-8");

               // 5. ler carrinho de compras da nuvem
               var cart = await cosmosClient.Get();
        response.WriteString(JsonConvert.SerializeObject(cart.Items));
          }

          return response;
       }

No último vídeo, aprendemos a criar uma Azure Function localmente, na máquina de desenvolvimento. Agora, vamos aprender a montar um fluxo para receber a requisição HTTP GET e assim ler os itens do carrinho de compras que estão armazenados no banco de dados Cosmos DB, na nossa instalação do Azure.

De volta ao Visual Studio, precisamos adicionar uma referência do projeto Organico.Library no nosso projeto Organico.FunctionApp. Isso é necessário para que a nossa Azure Function consiga absorver as funcionalidades que estão na nossa biblioteca de classes, como o acesso ao banco de dados Cosmos DB.

No projeto Organico.Library, encontramos uma classe chamada CarrinhoCosmosClient. Ela fornecerá para a nossa Azure Function a funcionalidade necessária para realizar a conexão com o banco de dados que está na nuvem.

Para adicionar a referência de projeto, clicamos com o botão direito no projeto Organico.functionapp e selecionamos a opção de adicionar nova referência de projeto, selecionando o projeto Organico.Library.

Depois de clicar em ok, vamos modificar o código do carrinho, que está no arquivo Carrinho.cs dentro de Organico.Functionapp, para dar uma resposta diferente da resposta padrão, que é "Welcome to Azure Functions!". Não queremos mostrar um texto simples, mas, sim, uma lista de itens do carrinho de compras.

      var response = req. CreateResponse(HttpStatusCode.OK);
      response.Headers.Add("Content-Type", "text/plain; charset=utf-8");
    
      response.WriteString("Welcome to Azure Functions!");
    
      return response;
    }
  }
}

Primeiro, comentamos a resposta padrão, portanto, vamos comentar as duas linhas onde temos response.Headers e response.WriteString para que não sejam executadas. Em seguida, montamos o objeto que vai representar o cliente de acesso a dados do carrinho de compras, criando uma variável chamada CosmosClient e a instanciando com CarrinhoCosmosClient.Instance.

            // 1. Comentar a resposta padrão
            //response.Headers.Add("Content-Type", "text/plain; charset=utf-8");

            //response.WriteString("Welcome to Azure Functions!");

            // 2. Acessar o objeto cliente de acesso a dados do Carrinho de Compras
            var cosmosClient = CarrinhoCosmosClient.Instance();

      return response;
    }
  }
}

Note que a classe CarrinhoCosmosClient está no outro projeto, o Organico.Library. Ela já nos fornece tudo que precisamos para acessarmos o banco de dados na nuvem. Após a classe, adicionamos o método Instance() para criar uma nova instância do objeto client de acesso aos dados.

O próximo passo é fazer com que a nossa Azure Function identifique quando a requisição é POST ou GET. Para isso, criamos uma condição if para verificar se a requisição é do tipo GET. Se for, faremos a leitura do carrinho de compras.

Dentro da condição, adicionaremos o objeto de requisição. Este objeto é o mesmo da linha 19, onde está o método Run(). O parâmetro req é nosso objeto de requisição. Então, passaremos if (req). O objeto de requisição tem uma propriedade, que é o método. Logo, se o método da requisição for igual ao tipo GET, faremos a leitura do carrinho de compras.

// 1. Comentar a resposta padrão
            //response.Headers.Add("Content-Type", "text/plain; charset=utf-8");

            //response.WriteString("Welcome to Azure Functions!");

            // 2. Acessar o objeto cliente de acesso a dados do Carrinho de Compras
            var cosmosClient = CarrinhoCosmosClient.Instance();

            // 3. Identificar quando a requisição é GET ou POST 
            if (req.Method == "GET")
            {

Mas, para fazer a leitura e exibir no navegador a lista dos itens, utilizaremos um padrão que não será o texto, como tínhamos em "Welcome to Azure Functions!". Retornaremos um formato JSON.

Para isso, temos que modificar o tipo de cabeçalho de resposta. Portanto, vamos adicionar um cabeçalho com a resposta apropriada, seguindo o padrão JSON. Sendo assim, na linha 26, vamos copiar o cabeçalho em formato de texto e colar dentro da condição if.

Temos reponse.Headers.Add() e o tipo e conteúdo que era text/plain, nós substituiremos pelo formato JSON que é application/json.

  // 1. Comentar a resposta padrão
            //response.Headers.Add("Content-Type", "text/plain; charset=utf-8");

            //response.WriteString("Welcome to Azure Functions!");

            // 2. Acessar o objeto cliente de acesso a dados do Carrinho de Compras
            var cosmosClient = CarrinhoCosmosClient.Instance();

            // 3. Identificar quando a requisição é GET ou POST 
            if (req.Method == "GET")
            {
                // 4. Adicionar o cabeçalho para a resposta JSON
                response.Headers.Add("Content-Type", "application/json; charset=utf-8");

Agora precisamos fazer a leitura do carrinho de compras que está na nuvem. Para fazer essa leitura, acessamos o objeto cosmosClient e os dados desse objeto através do método GET. Esse método vai fazer a leitura do carrinho de compras que está na nuvem.

// 1. Comentar a resposta padrão //response.Headers.Add("Content-Type", "text/plain; charset=utf-8");

        //response.WriteString("Welcome to Azure Functions!");

        // 2. Acessar o objeto cliente de acesso a dados do Carrinho de Compras
        var cosmosClient = CarrinhoCosmosClient.Instance();

        // 3. Identificar quando a requisição é GET ou POST 
        if (req.Method == "GET")
        {
            // 4. Adicionar o cabeçalho para a resposta JSON
            response.Headers.Add("Content-Type", "application/json; charset=utf-8");

            // 5. ler carrinho de compras da nuvem
            cosmosClient.Get();

Como esse método GET é assíncrono, precisamos utilizar o operador await antes da chamada e armazenaremos o resultado em uma variável que chamaremos de "carrinho de compras" ou cart.

 // 1. Comentar a resposta padrão
            //response.Headers.Add("Content-Type", "text/plain; charset=utf-8");

            //response.WriteString("Welcome to Azure Functions!");

            // 2. Acessar o objeto cliente de acesso a dados do Carrinho de Compras
            var cosmosClient = CarrinhoCosmosClient.Instance();

            // 3. Identificar quando a requisição é GET ou POST 
            if (req.Method == "GET")
            {
                // 4. Adicionar o cabeçalho para a resposta JSON
                response.Headers.Add("Content-Type", "application/json; charset=utf-8");

                // 5. ler carrinho de compras da nuvem
                var cart = await cosmosClient.Get();

Quando utilizamos o await e um método que é assíncrono, também precisamos modificar o tipo de resposta do método que estamos utilizando, que é o método Run. Vamos modificá-lo para marcá-lo também como assíncrono, usando o modificador async, e colocamos o tipo de resposta como Task.

 [Function("Carrinho")]
        public async Task<HttpResponseData> Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", "post")] HttpRequestData req)
        {
            _logger.LogInformation("C# HTTP trigger function processed a request.");

Continuando, agora que temos o objeto cart com a resposta do nosso carrinho de compras, precisamos gravar uma string no objeto de resposta para que seja exibida no navegador. Para isso, podemos utilizar response.writeString e substituir a string simples por o resultado no formato JSON. No entanto, ainda não temos esse formato, apenas temos o objeto cart.

Para transformar essa variável cart em um formato JSON, utilizamos a classe de conversão JSON convert e chamamos o objeto de serialização SerializeObject, que transforma um objeto em uma string no formato JSON. Então, passaremos o objeto cart e a propriedade que representa os itens do carrinho de compras: Items.

 [Function("Carrinho")]
        public async Task<HttpResponseData> Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", "post")] HttpRequestData req)
        {
            _logger.LogInformation("C# HTTP trigger function processed a request.");

            var response = req.CreateResponse(HttpStatusCode.OK);

            // 1. Comentar a resposta padrão
            //response.Headers.Add("Content-Type", "text/plain; charset=utf-8");

            //response.WriteString("Welcome to Azure Functions!");

            // 2. Acessar o objeto cliente de acesso a dados do Carrinho de Compras
            var cosmosClient = CarrinhoCosmosClient.Instance();

            // 3. Identificar quando a requisição é GET ou POST 
            if (req.Method == "GET")
            {
                // 4. Adicionar o cabeçalho para a resposta JSON
                response.Headers.Add("Content-Type", "application/json; charset=utf-8");

                // 5. ler carrinho de compras da nuvem
                var cart = await cosmosClient.Get();
                response.WriteString(JsonConvert.SerializeObject(cart.Items));
            }
                        
                return response;
            }

Feito isso, já temos uma implementação contendo tudo que é necessário para realizarmos a leitura do carrinho de compras a partir da nossa Azure Function. Agora vamos testar a nossa função já implementada, apertando a tecla "F5" para rodar o projeto Organico.FunctionApp.

Após carregar, a função Carrinho é exibida. Para testar, mantemos a tecla "Ctrl" pressionada e clicamos no link da nossa Azure Function. Isso faz com que ele abra no navegador e faça a requisição para a nossa Azure Function local, exibindo os três itens do carrinho de compras que estão armazenados na nuvem.

[
    {
        "productId": "4",
        "icon":
        "description": "Tangerina (kg)",
        "unitPrice": 3.5,
        "quantity": 1,
        "total": 3.5,
        "id": "4"
   },
   {
        "productId": "13",
        "icon":
        "description": "Cereja (kg)",
        "unitPrice": 3.5,
        "quantity":3,
          "total": 10.5,
        "id": "13"
   },
   {
        "productId": "17",
        "icon":
        "description": "Coco (un)",
        "unitPrice": 4.5,
        "quantity": 2,
          "total": 9,
          "id": "17"
   }
]

Neste vídeo, utilizamos o Visual Studio para refatorar o código da função do Azure, determinando quando a requisição é do tipo HTTP GET, e assim lemos os itens do carrinho de compras. Utilizamos código cliente para a conexão ao banco de dados do Cosmos DB, que está na nuvem, e fizemos a operação de leitura nesse banco através da nossa Azure Function.

No próximo vídeo, vamos adicionar à nossa função um novo fluxo para tratar a requisição do tipo HTTP POST, e assim também fazer a inserção, a modificação e a exclusão de itens do carrinho de compras.

Sobre o curso Azure Functions: incorpore funções a uma loja virtual

O curso Azure Functions: incorpore funções a uma loja virtual possui 209 minutos de vídeos, em um total de 55 atividades. Gostou? Conheça nossos outros cursos de Azure em DevOps, ou leia nossos artigos de DevOps.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Azure Functions e carrinho de compras
• Azure Functions e pedidos de venda
• Aprovação de pedidos
• Azure Functions e Queue Trigger
• Azure Functions e Timer Trigger
• Gerenciando Azure Functions