Oefening: De beperkingen van een web-app op basis van polling analyseren

15 minuten

Voordat u het prototype wijzigt, moet u het uitvoeren om de veronderstellingen te valideren. Het prototype bevindt zich in een opslagplaats voor broncode op GitHub.

Azure-resources maken

Maak in een afzonderlijk browsertabblad of -venster de voorbeeldopslagplaats op GitHub met de volgende koppeling: mslearn-advocates.azure-functions-and-signalr. Hiermee kunt u uw wijzigingen pushen naar uw eigen versie van de broncode. Dit is een vereiste stap om de broncode verderop in de module in Azure te implementeren.

Kloon uw geforkte opslagplaats in de terminal. Vervang in de volgende opdracht door MicrosoftDocs uw account:

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

Installeer de afhankelijkheden in de map setup-resources .
```
cd setup-resources && npm install
```
Als u waarschuwingen ontvangt, EBADENGINEkunt u deze negeren.
Meld u aan bij Azure met de Azure CLI.
```
az login
```
Bekijk uw abonnementen en stel uw standaard Azure-abonnement in.

Bekijk de abonnementen.
```
az account list --output json | jq -r '.[] | .name' | sort
```
Als u het standaardabonnement wilt instellen, vervangt u deze door YOUR-SUBSCRIPTION-ID een abonnements-id uit de vorige Azure CLI-uitvoer.
```
az account set --subscription <YOUR-SUBSCRIPTION-ID>
```
Dit standaardabonnement wordt gebruikt om de Azure-resources te maken.
Maak de Azure-resources en upload de voorbeeldgegevens naar de database. Het kan enkele minuten duren voordat het proces is voltooid.
```
bash create-start-resources.sh "<YOUR-SUBSCRIPTION-NAME>"
```
Zorg ervoor dat u de naam tussen dubbele aanhalingstekens plaatst. Als het script fouten veroorzaakt met een fout over de locatie die geen beschikbare resources bevat, bewerkt u het script om de locatie te wijzigen: LOCATION=<NEW LOCATION>.

Kopieer de vereiste informatie. U hebt deze nodig om het prototype uit te voeren.

Resourcetype	Omgevingsvariabele
Azure Cosmos DB	Aangeduid als COSMOSDB_CONNECTION_STRING
Azure Storage	Aangeduid als STORAGE_CONNECTION_STRING
Resourcegroep	Aangeduid als RESOURCE_GROUP_NAME.

Gebruik in de terminal, nog steeds in de map setup-resources, een Node.js script om voorbeeldgegevens naar de database te uploaden met de volgende opdracht.
```
npm start
```
De uitvoer toont de begingegevens voor de fictieve voorraadtoepassing:
```
Seed data added. Symbol ABC
Seed data added. Symbol DEF
Seed data added. Symbol GHI
```
Navigeer in de terminal naar de hoofdmap .
```
cd ..
```

Afhankelijkheden installeren en het prototype uitvoeren

Installeer de afhankelijkheden.

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

Als u in de melding wordt gevraagd om een Azure Functions-app voor de werkruimte te selecteren, selecteert u start/server. Dit is de functie-app die u gaat gebruiken om de code aan de serverzijde uit te voeren.
Als u een melding ontvangt over het installeren van de nieuwste Azure Functions Core Tools, selecteert u Installeren.

De client- en server-URL's ophalen

Wanneer de client- en servertoepassingen lokaal worden uitgevoerd, moeten ze weten waar ze elkaar kunnen vinden. De URL's zijn:

Client: http://localhost:3000
Server: http://localhost:7071

Lokale instellingen voor de Azure Functions-app bijwerken

Voeg de verbindingsreeks s toe aan de Azure Functions-app van het prototype.

Maak het bestand ./start/server/local.settings.json en plak het volgende. Dit bestand bevat de configuratie-instellingen voor het lokale functions-project.

{
  "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
  }
}

Werk de volgende variabelen bij met waarden die u hierboven hebt gekopieerd.

Eigenschappen Weergegeven als

AzureWebJobsStorage Vervang door de Storage-verbindingsreeks.

COSMOSDB_CONNECTION_STRING Vervang door de Cosmos DB-verbindingsreeks.

De Functions-app kan nu aanvragen van de client ontvangen, vervolgens verbinding maken met de database en de timertrigger correct beheren.

Eigenschappen	Weergegeven als
AzureWebJobsStorage	Vervang door de Storage-verbindingsreeks.
COSMOSDB_CONNECTION_STRING	Vervang door de Cosmos DB-verbindingsreeks.

Lokale instellingen voor de client-app toevoegen

Voeg de server-URL toe aan de clienttoepassing van het prototype.

Open ./start/client en maak een .env bestand met de volgende inhoud.

BACKEND_URL=http://localhost:7071

De servertoepassing uitvoeren

Start de Azure Functions-toepassing in de terminal.
```
cd start/server && npm start
```

Wacht totdat in de terminal de API-eindpunten worden weergegeven.

Functions:

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

        setPrice: timerTrigger

De clienttoepassing uitvoeren

Start de clienttoepassing in een nieuwe terminal.
```
cd start/client && npm start
```
Wanneer de melding weergeeft dat de toepassing wordt uitgevoerd, selecteert u Openen in Browser om het prototype te gebruiken.
Rangschik uw browservensters zodat u de terminal en het prototype van de aandelenkoersen tegelijkertijd kunt zien.
Open in het browservenster van het prototype de ontwikkelhulpprogramma's van de browser. U ziet dat de browser elke 5 seconden een aanvraag naar de API indient voor alle gegevens, ook al zijn de gegevens niet gewijzigd.
Bekijk in het browservenster de uitvoer voor de Azure Functions-app. Eén aandelenkoers verandert elke minuut. Wanneer de prijs in de API wordt gewijzigd, worden alle gegevens door de volgende client opgehaald.
Stop in de terminals voor client en server de toepassingen met Ctrl + C of beëindig de terminal door het prullenbakpictogram te selecteren.

In deze les hebt u het prototype uitgevoerd. Hoewel de client correct wordt uitgevoerd, is deze niet efficiënt. Hoewel elke afzonderlijke klant dit mogelijk niet merkt met zo'n klein aantal aandelen, verandert dat naarmate het aantal aandelen toeneemt en het aantal clients dat van de server wordt opgehaald. Het prototype kan worden verbeterd. In de volgende les leert u hoe u dit doet.