練習 - Scaffolding 語音電話 Web 應用程式

3 分鐘

在此單元中，您會建立 Web 應用程式並在瀏覽器中執行。

建立應用程式資料夾

在主控台視窗 (例如 cmd、PowerShell 或 Bash) 中，使用下列命令為我們的應用程式建立新資料夾，並將其變更
```
mkdir VoiceCallingApp
cd VoiceCallingApp
```
接下來，我們會準備將新資料夾變成 Web 應用程式。
```
npm init -y
```

這會設定 Node.js 的資料夾，並允許您儲存和管理相依性。

新增必要的相依性

現在我們要新增必要的相依性。

首先，我們會新增 Azure 通訊服務特定項目。

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

後面接著包裹，這可讓我們在瀏覽器中執行應用程式。
```
npm install --save-dev parcel
```

建立索引 HTML 檔案

在應用程式目錄中建立一個名為 index.html 的新檔案。

針對此檔案的內容輸入下列文字。

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

建立應用程式的 JavaScript 檔案

在應用程式目錄中建立一個名為 app.js 的新檔案
目前將 app.js 檔案保留空白，我們會在下一個單元新增內容到其中。

測試您的新應用程式

在主控台視窗中，於專案目錄內執行下列命令：
```
npx parcel index.html
```
包裹現在會編譯並執行您的應用程式。
完成之後，會提供連結讓您在瀏覽器中查看您的應用程式。此連結通常是 http://localhost:1234/：
在瀏覽器開啟此連結，您應該在瀏覽器中看到空白應用程式：