Exercício – Analisar as limitações de um aplicativo Web baseado em sondagem

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, faça um fork do repositório de exemplo no GitHub com o seguinte link: mslearn-advocates.azure-functions-and-signalr. Isso permite que você envie as alterações por push para sua versão do código-fonte. Essa etapa é necessária para implantar o código-fonte no Azure posteriormente no módulo.

No terminal, clone seu repositório bifurcado. No seguinte comando, substitua <YOUR-GITHUB-ALIAS> pela sua conta:

git clone https://github.com/<YOUR-GITHUB-ALIAS>/mslearn-advocates.azure-functions-and-signalr stock-prototype

Verifique se você está na pasta stock-prototypecd stock-prototype caso necessário. Instale as dependências na pasta setup-resources .
```
cd setup-resources && npm install
```
Se você receber avisos sobre EBADENGINE, ignore-os.
Entre no Azure com a CLI do Azure.
```
az login
```
No navegador que é aberto, entre em sua conta do Azure.

O terminal do Visual Studio Code exibe uma lista das assinaturas associadas a essa conta.
Na lista, encontre a assinatura que deseja usar para este exercício.

Caso você tenha perdido a lista da inscrição, use o snippet a seguir para listar suas assinaturas novamente.
```
az account list --output table
```
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.
```
bash create-start-resources.sh "<YOUR-SUBSCRIPTION-NAME>"
```
Lembre-se de encapsular o nome entre aspas duplas. Se o script gerar um erro sobre a localização carente de recursos, edite o script para alterar a localização: LOCATION=<NEW LOCATION>.

Copie as informações a seguir a partir da saída e salve-as. Você precisa dele para executar o protótipo.

Tipo de recurso	Variável de ambiente
Banco de Dados Azure Cosmos	Conhecido como COSMOSDB_CONNECTION_STRING
Armazenamento do Azure	Conhecido como STORAGE_CONNECTION_STRING
Grupo de recursos	Conhecido como RESOURCE_GROUP_NAME.

No terminal, ainda no setup-resources diretório, use um script Node.js para carregar dados de exemplo no banco de dados com o comando a seguir.
```
npm start
```
A saída mostra os dados iniciais do aplicativo fictício de ações:
```
Seed data added. Symbol ABC
Seed data added. Symbol DEF
Seed data added. Symbol GHI
```
No terminal, navegue até a pasta raiz .
```
cd ..
```

Instalar as dependências e executar 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 workspace, selecione start/server. Em uma etapa posterior, você usará esse aplicativo de funções para executar o código do lado do servidor.
Se você receber uma notificação sobre como instalar as Ferramentas Principais do Azure Functions mais recentes, selecione Instalar.

Obter as URLs do cliente e do servidor

Quando você estiver executando localmente, os aplicativos cliente e servidor precisam saber onde encontrar uns aos outros. As URLs são:

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

Atualizar as configurações locais para o aplicativo do Azure Functions

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

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

{
  "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 e salvos anteriormente.

Propriedade Valor

AzureWebJobsStorage Substitua-as pela cadeia de conexão de armazenamento.

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

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

Propriedade	Valor
AzureWebJobsStorage	Substitua-as pela cadeia de conexão de armazenamento.
COSMOSDB_CONNECTION_STRING	Substitua-as pela cadeia de conexão do Cosmos DB.

Adicionar configurações locais ao aplicativo cliente

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

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

BACKEND_URL=http://localhost:7071

Executar o aplicativo para servidores

Inicie o aplicativo do Azure Functions inserindo o seguinte comando no terminal.
```
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 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 sejam alterados.
Na janela do navegador, inspecione a saída do aplicativo do Azure Functions. O preço de uma ação individual muda a cada minuto. Quando o preço na API é alterado, a próxima busca do cliente de todos os dados inclui essa alteração.
Nos terminais para cliente e servidor, interrompa os aplicativos com Ctrl + C ou encerre o terminal selecionando o ícone de lixeira.

Nesta unidade, você executou o protótipo. Embora o cliente seja executado com êxito, ele não é eficiente. Cada cliente individual pode não notar a ineficiência com apenas algumas ações. Mas isso se torna mais perceptível à medida que o número de ações aumenta e o número de clientes que extraem do servidor aumenta. O protótipo pode ser aprimorado. Vamos aprender como fazer isso na próxima unidade.