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 uma janela separada do navegador, crie um fork do repositório de amostras 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 é uma etapa necessária para implantar o código-fonte no Azure posteriormente no módulo.

No terminal, clone o repositório. No seguinte comando, 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 EBADENGINE, ignore-os.
Entre no Azure com a CLI do Azure.
```
az login
```
Veja suas assinaturas e defina sua assinatura padrão do Azure.

Veja as assinaturas.
```
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 poderá demorar alguns minutos para ser concluído.
```
bash create-start-resources.sh "<YOUR-SUBSCRIPTION-NAME>"
```
Lembre-se de encapsular o nome entre aspas duplas. Se o script tem um erro sobre o local sem recursos disponíveis, edite o script para alterar o local: LOCATION=<NEW LOCATION>.

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

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

Use um script Node.js para carregar os dados de exemplo no banco de dados com o comando a seguir.
```
npm start
```
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. Esse é o aplicativo de funções que você usará para executar o código do lado do servidor.
Se você receber uma notificação sobre a instalação do Azure Functions Core Tools mais recente, selecione Instalar.

Obter as URLs do cliente e do servidor

Durante a execução local, 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 conteúdo a seguir. 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 valores copiados acima.

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 arquivo .env com o conteúdo a seguir.

BACKEND_URL=http://localhost:7071

Executar o aplicativo para servidores

No terminal, inicie o aplicativo do 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 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 faz uma solicitação à API a cada cinco segundos para todos os dados, mesmo que os dados não tenham sido 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 do servidor inicial e do cliente inicial, 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. Embora cada cliente individual possa não perceber isso com um número tão pequeno de ações, isso mudará à medida que o número de ações aumentar e o número de clientes for extraído do servidor. O protótipo pode ser aprimorado. Vamos aprender como fazer isso na próxima unidade.