Oefening: een web-app voor spraakgesprekken opzetten

3 minuten

In deze les maakt u een web-app en voert u deze uit in de browser.

App-map maken

Gebruik in een consolevenster (zoals cmd, PowerShell of Bash) de volgende opdrachten om een nieuwe map voor onze app te maken en hierin te veranderen
```
mkdir VoiceCallingApp
cd VoiceCallingApp
```
Vervolgens gaan we de nieuwe map voorbereiden om een web-app te worden.
```
npm init -y
```

Hiermee wordt de map voor Node.js ingesteld en kunt u afhankelijkheden opslaan en beheren.

De vereiste afhankelijkheden toevoegen

Nu voegen we de vereiste afhankelijkheden toe.

We beginnen met het toevoegen van de specifieke Azure Communication Services-services.
```
npm install --save @azure/communication-common @azure/communication-calling
```
Gevolgd door Parcel, waarmee we onze app in een browser kunnen uitvoeren.
```
npm install --save-dev parcel
```

Het HTML-indexbestand maken

Maak een nieuw bestand in de app-map met de naam index.html.

Voer de volgende tekst in voor de inhoud van dit bestand.

<!DOCTYPE html>
<html>
  <head>
    <title>Azure Communication Services - Simple voice calling app</title>
  </head>
  <body>
    <h1>Azure Communication Services</h1>
    <h2>Simple voice calling app</h2>

    <!-- Calling HTML here -->

    <script src="./app.js" type="module"></script>
  </body>
</html>

Het JavaScript-bestand van de app maken

Maak een nieuw bestand in de app-map met de naam app.js
Laat het app.js bestand voorlopig leeg. We voegen er tijdens de volgende les aan toe.

Uw nieuwe app testen

Voer in een consolevenster in de projectmap de volgende opdracht uit:
```
npx parcel index.html
```
Pakket compileert nu uw app en voert deze uit.
Zodra deze is voltooid, krijgt u een koppeling om uw app in de browser te zien. Deze koppeling is meestal http://localhost:1234/:
Open deze koppeling in uw browser en u ziet uw lege app in de browser: