Latihan - Membuat perancah aplikasi web panggilan suara

3 menit

Di pelajaran ini, Anda akan membuat aplikasi web dan menjalankannya di browser.

Membuat folder aplikasi

Di jendela konsol (seperti cmd, PowerShell, atau Bash), gunakan perintah berikut untuk membuat folder baru untuk aplikasi kita dan mengubah ke dalam folder
```
mkdir VoiceCallingApp
cd VoiceCallingApp
```
Selanjutnya kita menyiapkan folder baru agar menjadi aplikasi web.
```
npm init -y
```

Hal ini akan menyiapkan, folder untuk Node.js dan memungkinkan Anda menyimpan dan mengelola dependensi.

Tambahkan dependensi yang diperlukan

Sekarang kita akan menambahkan dependensi yang diperlukan.

Kita akan memulai dengan menambahkan Azure Communication Services tertentu.

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

Diikuti oleh Parcel, yang memungkinkan kita menjalankan aplikasi di browser.
```
npm install --save-dev parcel
```

Membuat file HTML indeks

Buat file baru di direktori aplikasi bernama index.html.

Masukkan teks berikut untuk konten file ini.

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

Membuat file JavaScript aplikasi

Membuat file baru di direktori aplikasi bernama app.js
Untuk saat ini biarkan file app.js kosong, kita akan menambahkannya pada pelajaran berikutnya.

Menguji aplikasi baru Anda

Di jendela konsol, di dalam direktori proyek jalankan perintah berikut:
```
npx parcel index.html
```
Parcel sekarang akan mengompilasi dan menjalankan aplikasi Anda.
Setelah selesai, Parcel akan memberi Anda tautan untuk melihat aplikasi Anda di dalam browser. Tautan ini biasanya http://localhost:1234/:
Buka tautan ini di browser Anda dan Anda akan melihat aplikasi kosong Anda di browser: