Cvičení – generování uživatelského rozhraní webové aplikace pro hlasové volání

3 min

V této lekci vytvoříte webovou aplikaci a spustíte ji v prohlížeči.

Vytvoření složky aplikace

V okně konzoly (například cmd, PowerShell nebo Bash) pomocí následujících příkazů vytvořte novou složku pro naši aplikaci a změňte ji na ni.
```
mkdir VoiceCallingApp
cd VoiceCallingApp
```
V dalším kroku připravíme novou složku, aby se stala webovou aplikací.
```
npm init -y
```

Tím se nastaví složka Node.js a umožní vám ukládat a spravovat závislosti.

Přidejte požadované závislosti

Teď přidáme požadované závislosti.

Začneme přidáním konkrétních služeb Azure Communication Services.

npm install --save @azure/communication-common @azure/communication-calling

Následuje Balík, který nám umožní spustit naši aplikaci v prohlížeči.
```
npm install --save-dev parcel
```

Vytvoření souboru HTML indexu

Vytvořte nový soubor v adresáři aplikace s názvem index.html.

Zadejte následující text pro obsah tohoto souboru.

<!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>

Vytvoření souboru JavaScriptu aplikace

Vytvoření nového souboru v adresáři aplikace s názvem app.js
Prozatím soubor ponecháme app.js prázdný, přidáme ho během další lekce.

Otestování nové aplikace

V okně konzoly v adresáři projektu spusťte následující příkaz:
```
npx parcel index.html
```
Balíček se teď zkompiluje a spustí vaši aplikaci.
Po dokončení vám poskytne odkaz na zobrazení aplikace v prohlížeči. Tento odkaz je obvykle http://localhost:1234/:
Otevřete tento odkaz v prohlížeči a v prohlížeči byste měli vidět prázdnou aplikaci: