• 6 minutos

A sua aplicação Web de lista de compras precisa de uma API. Neste exercício, você cria e executa sua API usando um projeto do Azure Functions. A partir daí, você estende a API com uma nova função usando a extensão Azure Functions para Visual Studio.

Neste exercício, conclua as seguintes etapas:

1. Crie uma ramificação enquanto se prepara para fazer alterações no seu aplicativo Web.
2. Explore o projeto do Azure Functions.
3. Crie a função HTTP GET.
4. Substitua o código inicial da função pela lógica para obter produtos.
5. Configure o aplicativo Web para proxy de solicitações HTTP para a API.
6. Execute a API e o aplicativo Web.

Obter a aplicação de funções

Agora, você adiciona uma API e a conecta ao seu aplicativo front-end. O projeto Api inclui um projeto incompleto do Azure Functions, então vamos concluir isso agora.

Criar uma ramificação da API

Antes de fazer alterações em um aplicativo, é uma boa prática criar uma nova ramificação para as alterações. Está prestes a completar a API da sua aplicação, portanto crie um novo ramo no Git chamado api.

Completar a API das Funções do Azure

O projeto Api contém o seu projeto das Funções do Azure juntamente com três funções.

Classe	Método	Rota
ProductsPost	POST	products
ProductsPut	PUT	products/:id
ProductsDelete	DELETE	products/:id

A sua API tem rotas para manipular os produtos para a lista de compras, mas falta-lhe uma rota para obter os produtos. Vamos acrescentar isso a seguir.

Criar a função HTTP GET

1. No Visual Studio, clique com o botão direito do mouse no projeto Api e selecione Adicionar>Novo Item.

   

2. Na caixa de diálogo Adicionar Novo Item, selecione Função do Azure.

   

3. Digite ProductsGet.cs como o nome do arquivo de função.

4. Selecione Gatilho Http como o tipo de função.

5. Selecione Anônimo na lista suspensa no campo Nível de autorização .

   

6. Selecione Adicionar.

Você acabou de estender seu aplicativo Azure Functions com uma função para obter seus produtos!

Configurar o método HTTP e o ponto final da rota

Observe que o Run método da classe C# recém-criada tem um HttpTrigger atributo no primeiro argumento, o HttpRequest. Este atributo define o nível de acesso da função, o(s) método(s) HTTP(s) a ser escutado e o ponto de extremidade da rota.

O ponto de extremidade de rota é por padrão, o que significa que o ponto de extremidade usa o valor do FunctionName atributo, que é .null ProductsGet Definir a Route propriedade para "products" substituir o comportamento padrão.

Atualmente, sua função é acionada em uma solicitação HTTP GET para produtos. Seu Run método se parece com o seguinte código:

[FunctionName("ProductsGet")]
public static async Task<IActionResult> Run(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)] HttpRequest req,
    ILogger log)

Atualizar a lógica da rota

O corpo do Run método é executado quando a função é executada.

Você precisa atualizar a Run lógica no método para obter seus produtos. Há lógica de acesso a dados no ProductData.cs arquivo como uma classe chamada ProductData, que está disponível via injeção de dependência como interface IProductData . A interface tem um método chamado GetProducts, que retorna uma Task<IEnumerable<Product> lista de produtos de forma assíncrona.

Agora, altere o ponto final da função para devolver os produtos:

1. Abra ProductsGet.cs.

2. Substitua os respetivos conteúdos pelo seguinte código:

   using Microsoft.AspNetCore.Http;
   using Microsoft.AspNetCore.Mvc;
   using Microsoft.Azure.WebJobs;
   using Microsoft.Azure.WebJobs.Extensions.Http;
   using System.Threading.Tasks;
   
   namespace Api;
   
   public class ProductsGet
   {
       private readonly IProductData productData;
   
       public ProductsGet(IProductData productData)
       {
           this.productData = productData;
       }
   
       [FunctionName("ProductsGet")]
       public async Task<IActionResult> Run(
           [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = "products")] HttpRequest req)
       {
           var products = await productData.GetProducts();
           return new OkObjectResult(products);
       }
   }
   

Nas alterações anteriores, você transformou a classe de uma classe estática para uma classe de instância. Você adicionou uma interface ao construtor para que a estrutura de injeção de dependência possa injetar a ProductData classe. Finalmente, você configurou a função para retornar a Run lista de produtos quando chamado.

Configurar o CORS (Cross-Origin Resource Sharing) localmente

Você não precisa se preocupar com o CORS (Cross-Origin Resource Sharing) ao publicar nos Aplicativos Web Estáticos do Azure. As Aplicações Web Estáticas do Azure configuram automaticamente a sua aplicação para que possa comunicar com a sua API no Azure com recurso a um proxy inverso. Porém, no caso de ser executada localmente, é necessário configurar a CORS para permitir a comunicação entre a aplicação Web e a API.

Agora, solicite ao Azure Functions que permita que seu aplicativo Web faça solicitações HTTP para a API em seu computador.

1. Abra o arquivo chamado launchSettings.json na pasta Properties do projeto Api .

   • Se o arquivo não existir, crie-o.

2. Atualize o conteúdo do arquivo:

   {
       "profiles": {
           "Api": {
               "commandName": "Project",
               "commandLineArgs": "start --cors *"
           }
       }
   }
   

Executar a API e a aplicação Web

Agora, é hora de ver seu aplicativo Web e o projeto do Azure Functions trabalharem juntos.

1. No Visual Studio, clique com o botão direito do mouse na solução ShoppingList .

2. Selecione Definir projetos de inicialização.

3. Selecione a opção Vários projetos de inicialização.

4. Defina Api e Cliente para ter Iniciar como Ação e selecione Ok.

5. Inicie o depurador.

Navegar para a aplicação

Chegou a altura de ver a sua aplicação a ser executada localmente em relação à API das Funções do Azure.

Navegue até o aplicativo Web (por exemplo, https://localhost:44348/).

Você criou seu aplicativo e agora ele está sendo executado localmente fazendo solicitações HTTP GET para sua API.

Agora, pare seu aplicativo e API em execução desconectando o depurador no Visual Studio.

Próximos passos

Seu aplicativo funciona localmente e sua próxima etapa é publicar o aplicativo com a API juntos.