Exercício – analisar as limitações de uma aplicação Web baseada em consulta

15 minutos

Antes de alterar o protótipo, você precisa executá-lo para validar as suposições. O protótipo está em um repositório de código-fonte no GitHub.

Criar recursos do Azure

Em uma guia ou janela separada do navegador, bifurque o repositório de exemplo no GitHub com o seguinte link: mslearn-advocates.azure-functions-and-signalr. Isso permite que você envie suas alterações para sua própria versão do código-fonte. Esta é uma etapa necessária para implantar o código-fonte no Azure posteriormente no módulo.

No terminal, clone o repositório. No comando a seguir, substitua MicrosoftDocs pela sua conta:

git clone https://github.com/MicrosoftDocs/mslearn-advocates.azure-functions-and-signalr stock-prototype

Instale as dependências na pasta setup-resources .
```
cd stock-prototype/setup-resources && npm install
```
Se você receber avisos sobre EBADENGINEo , poderá ignorá-los.
Entre no Azure com a CLI do Azure.
```
az login
```
Exiba suas assinaturas e defina sua assinatura padrão do Azure.

Veja as subscrições.
```
az account list --output json | jq -r '.[] | .name' | sort
```
Para definir a assinatura padrão, substitua YOUR-SUBSCRIPTION-ID por uma ID de assinatura da saída anterior da CLI do Azure.
```
az account set --subscription <YOUR-SUBSCRIPTION-ID>
```
Essa assinatura padrão é usada para criar os recursos do Azure.
Crie os recursos do Azure e carregue os dados de exemplo no banco de dados. O processo pode levar alguns minutos para ser concluído.
```
bash create-start-resources.sh "<YOUR-SUBSCRIPTION-NAME>"
```
Certifique-se de envolver o nome entre aspas duplas.

Copie as informações necessárias, você precisará delas para executar o protótipo.

Tipo de Recurso	Variável de ambiente
Azure Cosmos DB	Referido como COSMOSDB_CONNECTION_STRING
Armazenamento do Azure	Referido como STORAGE_CONNECTION_STRING
Grupo de Recursos	Referido como RESOURCE_GROUP_NAME.

Use um script Node.js para carregar dados de exemplo no banco de dados com o seguinte comando.
```
npm start
```
No terminal, navegue até a pasta raiz .
```
cd ..
```

Instale dependências e execute o protótipo

Instale as dependências.

cd start/client && npm install && cd ../..
cd start/server && npm install && cd ../..

Se a notificação solicitar que você selecione um aplicativo de funções do Azure para o espaço de trabalho, selecione start/server. Este é o aplicativo de função que você usará para executar o código do lado do servidor.
Se você receber uma notificação sobre a instalação das Ferramentas Principais do Azure Functions mais recentes, selecione Instalar.

Obter as URLs do cliente e do servidor

Ao executar localmente, os aplicativos cliente e servidor precisam saber onde encontrar um ao outro. Os URLs são:

Cliente: http://localhost:3000
Servidor: http://localhost:7071

Atualizar configurações locais para o aplicativo Azure Functions

Adicione as cadeias de conexão ao aplicativo Azure Functions do protótipo.

Crie o arquivo ./start/server/local.settings.json e cole o seguinte. Este arquivo tem as definições de configuração para o projeto de funções locais.

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "<STORAGE_CONNECTION_STRING>",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureWebJobsFeatureFlags": "EnableWorkerIndexing",
    "COSMOSDB_CONNECTION_STRING": "<COSMOSDB_CONNECTION_STRING>"
  },
  "Host" : {
    "LocalHttpPort": 7071,
    "CORS": "http://localhost:3000",
    "CORSCredentials": true
  }
}

Atualize as variáveis a seguir com os valores copiados acima.

Property valor

AzureWebJobsStorage Substitua pela cadeia de conexão de armazenamento.

COSMOSDB_CONNECTION_STRING Substitua pela cadeia de conexão do Cosmos DB.

Agora, o aplicativo Functions pode receber solicitações do cliente e, em seguida, conectar-se ao banco de dados e gerenciar corretamente o gatilho de temporizador.

Property	valor
AzureWebJobsStorage	Substitua pela cadeia de conexão de armazenamento.
COSMOSDB_CONNECTION_STRING	Substitua pela cadeia de conexão do Cosmos DB.

Adicionar configurações locais para o aplicativo Cliente

Adicione a URL do servidor ao aplicativo cliente do protótipo.

Abra ./start/client e crie um .env arquivo com o seguinte conteúdo.

BACKEND_URL=http://localhost:7071

Executar o aplicativo de servidor

No terminal, inicie o aplicativo Azure Functions.
```
cd start/server && npm start
```

Aguarde até que o terminal exiba os pontos de extremidade da API.

Functions:

        getStocks: [GET] http://localhost:7071/api/getStocks

        setPrice: timerTrigger

Executar o aplicativo cliente

Em um novo terminal, inicie o aplicativo cliente.
```
cd start/client && npm start
```
Quando a notificação exibir que o aplicativo está em execução, selecione Abrir no navegador para usar o protótipo.
Organize as janelas do seu navegador para que você possa ver o terminal e o protótipo dos preços das ações ao mesmo tempo.
Na janela do protótipo do navegador, abra as ferramentas de desenvolvedor do navegador. Observe que o navegador está fazendo uma solicitação à API a cada 5 segundos para todos os dados, mesmo que os dados não tenham sido alterados.
Na janela do navegador, observe a saída do aplicativo Azure Functions. O preço de uma única ação muda a cada minuto. Quando o preço na API muda, a próxima busca do cliente de todos os dados inclui essa alteração.
Nos terminais start-client e start server, pare os aplicativos com Ctrl + C ou mate o terminal selecionando o ícone da lixeira.

Nesta unidade, você executou o protótipo. Embora o cliente seja executado com êxito, ele não é eficiente. Embora cada cliente individual possa não notar isso com um número tão pequeno de ações, isso mudará à medida que o número de ações cresce e o número de clientes puxa do servidor. O protótipo pode ser melhorado. Vamos aprender como na próxima unidade.

Continuar