Exercício – Criar um projeto das Funções do Azure

• 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 Code.

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 Azure Function.
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, adicione uma API e conecte-a ao seu aplicativo front-end. A pasta api-starter inclui um projeto incompleto das Funções do Azure, Então, vamos completar isso agora.

Criar uma ramificação da API

Antes de fazer alterações a uma aplicação, recomenda-se criar um novo ramo para as alterações. Está prestes a completar a API da sua aplicação, por isso agora é uma boa altura para criar um ramo.

1. No Visual Studio Code, abra a paleta de comandos pressionando F1.

2. Entre e selecione Git: Checkout para....

3. Selecione Criar nova ramificação.

4. Insira api para o novo nome de ramificação e pressione Enter.

Acabou de criar um ramo git api.

Completar a API das Funções do Azure

Para concluir a API, comece movendo o código inicial da API para uma pasta chamada api. Você inseriu esse nome de pasta para o api_location quando criou a instância Static Web Apps.

1. No Visual Studio Code, abra a paleta de comandos pressionando F1.

2. Entre e selecione Terminal: Create New Terminal (In Ative Workspace).

3. Verifique se você está na pasta raiz do projeto.

4. Execute o seguinte comando git para renomear a pasta api-starter para api.

   git mv api-starter api
   

5. Abra a paleta de comandos ao premir F1.

6. Digite e selecione Git: Confirmar tudo.

7. Digite a api de mensagem de confirmação e pressione Enter.

Agora, você vê uma pasta api no explorador de código do Visual Studio. A pasta api contém o seu projeto das Funções do Azure juntamente com três funções.

Pasta e ficheiro	Método	Rota
api/products-post	POST	products
api/products-put	PUT	products/:id
api/products-delete	DELETE	products/:id

Criar a função HTTP GET

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

Instalar a extensão Funções do Azure para o Visual Studio Code

Você pode criar e gerenciar aplicativos do Azure Functions usando a extensão do Azure Functions para Visual Studio Code.

1. Vá para o Visual Studio Marketplace e instale a extensão do Azure Functions para Visual Studio Code.

2. Quando a guia de extensão for carregada no Visual Studio Code, selecione Instalar.

3. Após a conclusão da instalação, selecione Recarregar.

Criar a função

Agora você estende seu aplicativo Azure Function com uma função para obter seus produtos.

1. No Visual Studio Code, abra a paleta de comandos pressionando F1.

2. Insira e selecione Azure Functions: Create Function.

3. Quando solicitado a criar uma função, selecione Gatilho HTTP.

4. Digite products-get como o nome da função.

5. Selecione Anônimo como o nível de autenticação.

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

Repare que a pasta api/products-get contém o ficheiro function.json. Este ficheiro contém a configuração para a sua função.

Por convenção, o ponto final da rota terá o mesmo nome da pasta que contém a função. Como a função é criada na pasta products-get, o ponto de extremidade da rota é gerado como products-get, por padrão. No entanto, pretende que o ponto final seja products.

Configurar a função:

1. Abra o arquivo api/products-get/function.json.

2. Observe que os métodos permitem ambos e GET POST.

3. Altere a matriz de métodos para permitir GET apenas solicitações.

4. Adicione uma "route": "products" entrada após a matriz de métodos.

Agora, a sua função é acionada num pedido HTTP GET para products. O ficheiro function.json deve ser semelhante ao seguinte código:

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": ["get"],
      "route": "products"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

Atualizar a lógica de função

O ficheiro index.js na pasta api/products-get contém a lógica que é executada quando faz um pedido HTTP à rota.

Você precisa atualizar a lógica para obter seus produtos. Há lógica de acesso a dados no módulo JavaScript /shared/product-data.js. O módulo product-data expõe uma função getProducts para obter os produtos para a lista de compras.

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

1. Abra o arquivo api/products-get/index.js.

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

   const data = require('../shared/product-data');
   
   module.exports = async function (context, req) {
     try {
       const products = data.getProducts();
       context.res.status(200).json(products);
     } catch (error) {
       context.res.status(500).send(error);
     }
   };
   

Sua função obtém os produtos e os devolve com um código de status de 200, quando bem-sucedido.

Configurar o CORS (Cross-Origin Resource Sharing) localmente

Você não precisa se preocupar com CORS 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, tem de indicar às Funções do Azure que permite que a sua aplicação Web faça pedidos HTTP à API no seu computador.

1. Crie um arquivo chamado api/local.settings.json.

2. Adicione o seguinte conteúdo ao ficheiro:

   {
     "Host": {
       "CORS": "http://localhost:4200"
     }
   }
   

   {
     "Host": {
       "CORS": "http://localhost:3000"
     }
   }
   

   {
     "Host": {
       "CORS": "http://localhost:5000"
     }
   }
   

   {
     "Host": {
       "CORS": "http://localhost:8080"
     }
   }
   

Executar a API

Chegou a altura de ver a sua aplicação Web e o projeto das Funções do Azure a funcionarem em conjunto. Comece por executar o seu projeto das Funções do Azure localmente ao seguir estes passos:

1. Abra um terminal git e vá para a pasta api :

   cd api
   

2. Execute o aplicativo Azure Functions localmente:

   npm install
   

   npm start
   

Executar a aplicação Web

A sua API está a ser executada. Agora tem de configurar a sua aplicação de front-end para fazer o pedido HTTP à API. O aplicativo front-end é executado em uma porta e a API é executada em uma porta diferente (7071). Cada arquitetura de front-end pode ser configurada com segurança para pedidos HTTP do proxy para uma porta.

Configurar a porta do proxy

Configure o proxy para a sua aplicação de front-end ao seguir os seguintes passos:

Executar a aplicação Web de front-end

A sua API já está a ser executada na porta 7071. Agora, quando você executa seu aplicativo Web, ele faz suas solicitações HTTP para sua API. Execute a sua aplicação Web ao seguir estes passos:

1. Abra uma segunda instância do terminal git.

2. Em seguida, digite este comando para ir para a pasta de sua estrutura de front-end preferida:

   cd angular-app
   

   cd react-app
   

   cd svelte-app
   

   cd vue-app
   

3. Execute o aplicativo cliente front-end:

   npm start
   

   npm start
   

   npm run dev
   

   npm run serve
   

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.

2. 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 pressionando Ctrl-C nos terminais.

Próximos passos

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