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

Concluído

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

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

  2. 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
    
  3. Instale as dependências na pasta setup-resources.

    cd stock-prototype/setup-resources && npm install
    

    Se você receber avisos sobre EBADENGINE, ignore-os.

  4. Entre no Azure com a CLI do Azure.

    az login
    
  5. 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.

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

  7. 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.
  8. Use um script Node.js para carregar os dados de exemplo no banco de dados com o comando a seguir.

    npm start
    
  9. No terminal, navegue até a pasta raiz.

    cd ..
    

Instalar as dependências e executar o protótipo

  1. Instale as dependências.

    cd start/client && npm install && cd ../..
    cd start/server && npm install && cd ../..
    
  2. 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.

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

  1. 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
      }
    }
    
  2. 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.

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

  1. No terminal, inicie o aplicativo do Azure Functions.

    cd start/server && npm start
    
  2. 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

  1. Em um novo terminal, inicie o aplicativo cliente.

    cd start/client && npm start
    
    
  2. Quando a notificação exibir que o aplicativo está em execução, selecione Abrir no Navegador para usar o protótipo.

    Captura de tela da notificação do Visual Studio Code para abrir o navegador.

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

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

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

    Captura de tela do terminal do Visual Studio Code mostrando a saída do console da alteração do preço das ações.

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