Ćwiczenie — tworzenie szkieletu aplikacji internetowej wywołującej głos

3 min

W tej lekcji utworzysz aplikację internetową i uruchomisz ją w przeglądarce.

Tworzenie folderu aplikacji

W oknie konsoli (takim jak cmd, PowerShell lub Bash) użyj następujących poleceń, aby utworzyć nowy folder dla naszej aplikacji i zmienić go na
```
mkdir VoiceCallingApp
cd VoiceCallingApp
```
Następnie przygotujemy nowy folder, aby stał się aplikacją internetową.
```
npm init -y
```

Spowoduje to skonfigurowanie folderu Node.js i umożliwienie zapisywania zależności i zarządzania nimi.

Dodawanie wymaganych zależności

Teraz dodamy wymagane zależności.

Zaczniemy od dodania określonych usług Azure Communication Services.

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

Następnie działka, która pozwoli nam uruchomić naszą aplikację w przeglądarce.
```
npm install --save-dev parcel
```

Tworzenie pliku HTML indeksu

Utwórz nowy plik w katalogu aplikacji o nazwie index.html.

Wprowadź następujący tekst zawartości tego pliku.

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

Tworzenie pliku JavaScript aplikacji

Tworzenie nowego pliku w katalogu aplikacji o nazwie app.js
Na razie pozostaw plik app.js pusty, dodamy go podczas następnej lekcji.

Testowanie nowej aplikacji

W oknie konsoli w katalogu projektu uruchom następujące polecenie:
```
npx parcel index.html
```
Usługa Parcel będzie teraz kompilować i uruchamiać aplikację.
Po zakończeniu zostanie wyświetlony link umożliwiający wyświetlanie aplikacji w przeglądarce. Ten link jest zwykle http://localhost:1234/:
Otwórz ten link w przeglądarce i w przeglądarce powinna zostać wyświetlona pusta aplikacja: