GSP125

Ringkasan

API streaming Google Cloud Speech dapat digunakan developer untuk mengubah bahasa lisan menjadi teks secara real time. Melalui penggabungan API dengan Websocket dan Web Audio API JavaScript, Java Servlet dapat menerima ucapan yang di-streaming dari halaman web dan menyediakan transkrip teksnya, sehingga halaman web dapat menggunakan kata-kata lisan tersebut sebagai antarmuka pengguna tambahan.

Lab ini dibagi menjadi beberapa bagian, dengan tiap bagian memperkenalkan komponen aplikasi web akhir.

Aplikasi web yang Anda buat akan merekam audio dari mikrofon klien dan men-streamingnya ke Java Servlet. Java Servlet akan meneruskan data ke Cloud Speech API, yang akan men-streaming semua transkripsi ucapan yang terdeteksi kembali ke servlet. Selanjutnya, servlet akan meneruskan hasil transkripsi ke klien, lalu klien akan menampilkannya di halaman.

Untuk melakukannya, Anda perlu membuat beberapa komponen:

• Java Servlet guna menyajikan HTML, JavaScript, dan CSS statis untuk halaman web.
• JavaScript, HTML, dan CSS untuk menghubungkan halaman web ke mikrofon pengguna, mengekstrak byte mentah, dan men-streamingnya ke servlet melalui Websocket.
• Handler Websocket servlet untuk men-streaming byte suara yang diterima dari klien ke Cloud Speech API, dan men-streaming hasil transkripsi dari Cloud Speech API kembali ke klien.

Yang akan Anda lakukan

• Membuat virtual machine (VM)
• Memulai Java Servlet HTTP
• Merekam audio di halaman web
• Mentranskripsi suara menjadi teks

Prasyarat

Lab ini mengasumsikan bahwa Anda sudah memahami:

• Bahasa pemrograman Java.
• Java Servlet (khususnya, container servlet Jetty). Meskipun container servlet lain dapat digunakan, contoh solusi akan menggunakan Jetty, sehingga solusi yang menggunakan container lain akan lebih sulit diverifikasi.
• Bahasa pemrograman JavaScript. Karena halaman web hampir selalu dibuat dengan JavaScript, hampir mustahil jika lab terkait halaman web tidak menggunakan JavaScript.
• Command line Linux. Sebagian besar lab akan dilakukan di command prompt Linux, dan Anda sebaiknya memahami beberapa alat umum serta editor teks untuk lingkungan tersebut.
• Alat pengelolaan project Maven. Meskipun pada prinsipnya, semua alat pengelolaan project Java dapat digunakan, contoh solusi akan menggunakan Maven, sehingga solusi yang menggunakan alat lain akan lebih sulit diverifikasi.

Penyiapan dan persyaratan

Sebelum mengklik tombol Start Lab

Baca petunjuk ini. Lab memiliki timer dan Anda tidak dapat menjedanya. Timer yang dimulai saat Anda mengklik Start Lab akan menampilkan durasi ketersediaan resource Google Cloud untuk Anda.

Lab interaktif ini dapat Anda gunakan untuk melakukan aktivitas lab di lingkungan cloud sungguhan, bukan di lingkungan demo atau simulasi. Untuk mengakses lab ini, Anda akan diberi kredensial baru yang bersifat sementara dan dapat digunakan untuk login serta mengakses Google Cloud selama durasi lab.

Untuk menyelesaikan lab ini, Anda memerlukan:

• Akses ke browser internet standar (disarankan browser Chrome).

Catatan: Gunakan jendela Samaran (direkomendasikan) atau browser pribadi untuk menjalankan lab ini. Hal ini akan mencegah konflik antara akun pribadi Anda dan akun siswa yang dapat menyebabkan tagihan ekstra pada akun pribadi Anda.

• Waktu untuk menyelesaikan lab. Ingat, setelah dimulai, lab tidak dapat dijeda.

Catatan: Hanya gunakan akun siswa untuk lab ini. Jika Anda menggunakan akun Google Cloud yang berbeda, Anda mungkin akan dikenai tagihan ke akun tersebut.

Cara memulai lab dan login ke Google Cloud Console

1. Klik tombol Start Lab. Jika Anda perlu membayar lab, dialog akan terbuka untuk memilih metode pembayaran. Di sebelah kiri ada panel Lab Details yang berisi hal-hal berikut:

   • Tombol Open Google Cloud console
   • Waktu tersisa
   • Kredensial sementara yang harus Anda gunakan untuk lab ini
   • Informasi lain, jika diperlukan, untuk menyelesaikan lab ini

2. Klik Open Google Cloud console (atau klik kanan dan pilih Open Link in Incognito Window jika Anda menjalankan browser Chrome).

   Lab akan menjalankan resource, lalu membuka tab lain yang menampilkan halaman Sign in.

   Tips: Atur tab di jendela terpisah secara berdampingan.

   Catatan: Jika Anda melihat dialog Choose an account, klik Use Another Account.

3. Jika perlu, salin Username di bawah dan tempel ke dialog Sign in.

   {{{user_0.username | "Username"}}}

   Anda juga dapat menemukan Username di panel Lab Details.

4. Klik Next.

5. Salin Password di bawah dan tempel ke dialog Welcome.

   {{{user_0.password | "Password"}}}

   Anda juga dapat menemukan Password di panel Lab Details.

6. Klik Next.

   Penting: Anda harus menggunakan kredensial yang diberikan lab. Jangan menggunakan kredensial akun Google Cloud Anda. Catatan: Menggunakan akun Google Cloud sendiri untuk lab ini dapat dikenai biaya tambahan.

7. Klik halaman berikutnya:

   • Setujui persyaratan dan ketentuan.
   • Jangan tambahkan opsi pemulihan atau autentikasi 2 langkah (karena ini akun sementara).
   • Jangan mendaftar uji coba gratis.

Setelah beberapa saat, Konsol Google Cloud akan terbuka di tab ini.

Catatan: Untuk mengakses produk dan layanan Google Cloud, klik Navigation menu atau ketik nama layanan atau produk di kolom Search.

Tugas 1. Membuat virtual machine

Compute Engine adalah layanan yang dapat Anda gunakan untuk memulai VM di infrastruktur Google. Di lab ini, Anda akan membuat dan menggunakan VM untuk menjalankan servlet yang ditulis di Java 8 yang menghosting situs dan menggunakan Cloud Speech API untuk memberikan transkripsi dinamis kepada klien. Untuk tujuan lab ini, Anda juga akan menggunakan VM untuk menjalankan kode.

1. Untuk membuat VM baru, klik Navigation menu () > Compute Engine > VM instances.

2. Untuk membuat instance baru, klik Create Instance.

3. Di Machine configuration.

   • Beri nama instance baru sebagai speaking-with-a-webpage.

   • Pilih zona sebagai .

   • Biarkan setelan lainnya menggunakan nilai default.

4. Klik OS and storage.

   • Klik Change untuk mulai mengonfigurasi boot disk dan pilih nilai berikut:

     • Untuk Operating system, pilih Debian.

     • Untuk Version, pilih Debian GNU/Linux 12 (bookworm).

     • Biarkan Boot disk type pada setelan default.

     • Di bagian bawah jendela, klik Select.

5. Klik Networking.

   • Untuk Firewall, centang Check Allow HTTP traffic dan Check Allow HTTPS traffic.

6. Klik Security.

   • Untuk Identity and API access > Service Account, biarkan tetap menggunakan setelan default.

   • Di bagian Access scopes, pilih Allow full access to all Cloud APIs.

7. Klik Create.

Setelah beberapa menit, VM Anda akan aktif dan berjalan. Lihat VM Anda dan detailnya dalam daftar VM instances. Perhatikan tombol SSH yang akan digunakan pada langkah berikutnya, dan External IP yang akan digunakan nanti dalam lab ini.

8. Hubungkan ke instance dengan mengklik tombol SSH di sebelah kanannya. Jika diminta, klik Authorize.

Jendela baru akan terbuka dan menghubungkan Anda ke VM, yang menyediakan command prompt. Gunakan antarmuka ini untuk bagian selanjutnya di lab ini.

Menguji tugas yang sudah selesai

Klik Periksa progres saya untuk memverifikasi tugas yang telah dijalankan.

Membuat virtual machine

Dokumentasi yang relevan

Baca informasi selengkapnya tentang Compute Engine dan berbagai kemampuannya dalam referensi dokumentasi Compute Engine.

Tugas 2. Mendownload dan menyiapkan contoh yang berfungsi

1. Di sesi SSH Anda, instal Git, Java 17, dan alat pengelolaan project Maven untuk mengompilasi dan menjalankan contoh kode:

sudo apt update && sudo apt install git -y sudo apt install -y maven openjdk-17-jdk Catatan: Perintah ini mungkin memerlukan waktu beberapa menit.

2. Clone contoh yang berfungsi ke VM Anda:

git clone https://github.com/googlecodelabs/speaking-with-a-webpage.git

Tindakan ini akan membuat direktori, speaking-with-a-webpage, yang berisi subdirektori untuk tiap bagian berikutnya. Tiap subdirektori dibuat di atas subdirektori sebelumnya, dengan menambahkan fungsi baru secara inkremental:

• 01-hello-https - berisi servlet Jetty minimal dengan file statis dan handler yang disajikan melalui HTTPS
• 02-webaudio - melengkapi JavaScript sisi klien untuk merekam audio dari mikrofon klien dan menampilkan visualisasi yang mengonfirmasi bahwa audio berfungsi
• 03-websockets - mengubah klien dan server agar dapat berkomunikasi satu sama lain melalui websocket
• 04-speech - mengubah server untuk mengirim audio ke Cloud Speech API, dan mengirim transkripsi berikutnya ke klien JavaScript

Contoh yang digunakan untuk lab ini tidak menggunakan port HTTPS normal. Sebagai gantinya, contoh ini menggunakan port 8443 yang tidak memiliki hak istimewa untuk tujuan pengembangan.

3. Untuk mengakses port ini dari browser web, buka firewall VM menggunakan perintah gcloud ini:

gcloud compute firewall-rules create dev-ports \ --allow=tcp:8443 \ --source-ranges=0.0.0.0/0 Catatan: Anda dapat membandingkan perubahan yang terjadi di antara langkah-langkah yang dilakukan.

Jika ingin membandingkan perubahan yang terjadi antara satu bagian dengan bagian berikutnya, Anda dapat menggunakan perintah berikut:

cd ~/speaking-with-a-webpage

git diff --no-index 01-hello-https/ 02-webaudio/

Perintah ini menampilkan perbedaan antara direktori/langkah 02-https dan 03-webaudio.

Gunakan tombol panah, PgUp/PgDn untuk memilih, dan q untuk keluar.

Menguji tugas yang sudah selesai

Klik Periksa progres saya untuk memverifikasi tugas yang telah dijalankan.

Menginstal software yang diperlukan dan membuat aturan firewall

Tugas 3. Memulai Java Servlet HTTPS

Java Servlet adalah tulang punggung yang mendukung aplikasi web ini, karena servlet ini menyediakan kode HTML, CSS, dan JavaScript sisi klien yang diperlukan, serta terhubung ke Cloud Speech API untuk menyediakan transkripsi.

Saat mengakses mikrofon pengguna dari halaman web, browser mewajibkan halaman web berkomunikasi melalui saluran yang aman untuk mencegah penyadapan. Oleh sebab itu, siapkan servlet Anda untuk menyajikan halaman web melalui HTTPS. Karena proses konfigurasi dan penyajian halaman web yang aman merupakan topik tersendiri, untuk lab ini, gunakan sertifikat yang ditandatangani sendiri dan file konfigurasi Jetty dalam contoh solusi yang disediakan, dan cukup untuk lingkungan pengembangan.

Untuk bagian ini, cukup baca dan jalankan project Maven yang disediakan di 01-hello-https. Perhatikan secara khusus file dalam direktori src/, karena file tersebut adalah file utama yang dibuat pada langkah-langkah berikutnya:

• File di src/main/webapp mencakup file JavaScript, CSS, dan HTML, yang disajikan secara statis oleh Jetty
• TranscribeServlet.java menentukan servlet yang menangani permintaan ke jalur /transcribe

Menjalankan contoh solusi

Subdirektori 01-hello-https dari repositori speaking-with-a-webpage yang disediakan berisi project servlet Maven yang dikonfigurasi untuk HTTPS. Servlet ini menggunakan framework servlet Jetty untuk menayangkan file statis dan endpoint dinamis. Selain itu, servlet ini juga menggunakan postingan blog di atas untuk membuat sertifikat yang ditandatangani sendiri menggunakan perintah Key Tool, dan menambahkan konfigurasi Jetty untuk mendukung HTTPS.

1. Mulai servlet. Buka 01-hello-https.

cd ~/speaking-with-a-webpage/01-hello-https

2. Jalankan kode:

mvn clean jetty:run

3. Kemudian, arahkan browser web Anda ke: https://<your-external-ip>:8443

Catatan: Anda dapat menemukan alamat IP eksternal di halaman Cloud Console VM Instances.

Karena servlet contoh memproses port non-standar, mengklik link External IP secara langsung tidak akan mengarahkan Anda ke servlet yang sedang berjalan. Anda harus menambahkan port yang relevan, seperti di atas, untuk mengakses servlet Anda.

Saat pertama kali mengakses aplikasi web menggunakan URL HTTPS, browser mungkin akan memperingatkan Anda bahwa koneksi tidak bersifat pribadi. Hal ini terjadi karena contoh aplikasi menggunakan sertifikat SSL yang ditandatangani sendiri untuk pengembangan. Di lingkungan produksi, Anda akan memerlukan sertifikat SSL yang ditandatangani oleh Certificate Authority, tetapi untuk tujuan lab ini, sertifikat SSL yang ditandatangani sendiri sudah cukup. Jangan buka rahasia apa pun ke halaman web Anda. 😁

Menguji tugas yang sudah selesai

Klik Periksa progres saya untuk memverifikasi tugas yang telah dijalankan.

Menjalankan contoh solusi (hello-https)

Tugas 4. Merekam audio di halaman web

Web Audio API memungkinkan halaman web merekam data audio dari mikrofon pengguna, dengan izin pengguna. Cloud Speech API memerlukan data mentah ini dalam bentuk tertentu, dan perlu mengetahui kecepatan pengambilan sampelnya.

Contoh solusi

Subdirektori 02-webaudio dari repositori speaking-with-a-webpage yang disediakan dibangun berdasarkan kode contoh 01-hello-https dengan menambahkan fungsi Web Audio getUserMedia untuk menghubungkan mikrofon pengguna ke visualisasi audio. Kemudian, ScriptProcessorNode ditambahkan ke pipeline audio untuk mengambil jumlah byte audio mentah, sebagai persiapan untuk mengirimkannya ke server. Karena Cloud Speech API nantinya juga akan memerlukan sampleRate, API tersebut juga akan mengambilnya. Mulai aplikasi 02-webaudio sebagai berikut:

1. Tekan CTRL+C untuk menghentikan server.

2. Buka direktori yang berisi 02-webaudio:

cd ~/speaking-with-a-webpage/02-webaudio

3. Jalankan aplikasi:

mvn clean jetty:run

4. Untuk mengakses aplikasi web yang sedang berjalan, cari alamat External IP di halaman Cloud Console VM Instances, lalu arahkan browser Anda ke: https://<your-external-ip>:8443

Catatan: Anda dapat memeriksa perubahan antara bagian sebelumnya (01-hello-https) dan bagian saat ini (02-webaudio) dengan menjalankan:

cd ~/speaking-with-a-webpage git diff --no-index 01-hello-https/ 02-webaudio/

Menguji tugas yang sudah selesai

Klik Periksa progres saya untuk memverifikasi tugas yang telah dijalankan.

Menjalankan contoh solusi untuk merekam audio di halaman web

5. Tekan CTRL+C untuk menghentikan server.

Tugas 5. Men-streaming audio dari klien ke server

Koneksi HTTP normal tidak cocok untuk men-streaming audio secara real-time ke server, sambil menerima transkripsi saat tersedia. Di bagian ini, Anda akan membuat koneksi Web Socket dari klien ke server, dan menggunakannya untuk mengirim metadata audio (yaitu, frekuensi sampel) dan data ke server, sambil memproses respons (yaitu, transkrip data).

Men-streaming byte audio

Contoh yang diberikan mengubah TranscribeServlet agar diperluas dari WebSocketServlet untuk mendaftarkan WebSocketAdapter. WebSocketAdapter yang ditetapkannya hanya mengambil pesan yang diterima dan mengirimkannya kembali ke klien.

Di klien, sampel akan menggantikan scriptNode dari langkah sebelumnya dengan scriptNode yang mengirimkan data ke socket yang akan ditentukan nanti. Kemudian, sampel akan membuat koneksi Websocket yang aman ke server. Setelah server dan mikrofon terhubung, sampel akan mulai memproses pesan dari server, lalu mengirimkan frekuensi sampel ke server. Saat server mengembalikan frekuensi sampel, klien akan mengganti pemroses dengan handler transkripsi yang lebih permanen, dan menghubungkan scriptNode untuk mulai men-streaming byte audio ke server.

1. Buka direktori yang berisi 03-websockets:

cd ~/speaking-with-a-webpage/03-websockets

2. Jalankan aplikasi:

mvn clean jetty:run

3. Untuk mengakses aplikasi web yang sedang berjalan, cari alamat External IP di halaman Cloud Console VM Instances, lalu arahkan browser Anda ke: https://<your-external-ip>:8443

4. Tekan CTRL+C untuk menghentikan server.

Tugas 6. Mentranskripsi suara menjadi teks

Google Cloud Speech streaming API dapat Anda gunakan untuk mengirimkan byte audio ke API secara real time dan menerima transkripsi ucapan apa pun yang terdeteksi secara asinkron. API mengharapkan byte dalam format tertentu, sebagaimana ditentukan oleh konfigurasi yang dikirim di awal permintaan. Untuk aplikasi web ini, Anda perlu mengirimkan sampel audio mentah API dalam format LINEAR16 - yaitu, tiap sampel berupa bilangan bulat bertanda 16-bit - yang dikirim pada frekuensi sampel yang diperoleh dari klien.

Contoh solusi

Subdirektori 04-speech dari repositori speaking-with-a-webpage yang disediakan akan melengkapi kode server dari langkah 03-websockets. Subdirektori ini akan menggabungkan kode dari kode contoh StreamingRecognizeClient di atas agar terhubung dengan, meneruskan byte audio ke, dan menerima transkrip dari Cloud Speech API. Saat menerima transkrip secara asinkron, subdirektori tersebut akan menggunakan koneksinya ke klien JavaScript untuk meneruskan transkrip. Klien JavaScript hanya akan menampilkannya ke halaman web.

1. Mulai aplikasi:

cd ~/speaking-with-a-webpage/04-speech mvn clean jetty:run

2. Untuk mengakses aplikasi web yang sedang berjalan, cari alamat External IP di halaman Cloud Console VM Instances, lalu arahkan browser Anda ke: https://<your-external-ip>:8443

Tugas 7. Menguji pemahaman Anda

Di bawah ini terdapat beberapa pertanyaan pilihan ganda untuk memperkuat pemahaman Anda tentang konsep-konsep dalam lab ini. Jawab pertanyaan tersebut sebaik mungkin.

Selamat!

Anda telah mempelajari cara menggunakan gcloud untuk membuat VM dan memulai Java Servlet untuk merekam audio dan mentranskripsikannya menjadi teks di halaman web.

Langkah berikutnya/Pelajari lebih lanjut

Pertimbangkan untuk meningkatkan kualitas software yang dapat Anda tambahkan:

• Aplikasi klien saat ini hanya mencetak teks, tetapi dapat digunakan dengan berbagai cara. Anggap saja sebagai Antarmuka Pengguna lain. Kata kunci dapat memanggil tindakan tertentu. Anda dapat menggabungkan teks dengan mesin percakapan, atau teks dapat digunakan apa adanya untuk subtitel.
• Integrasikan transkripsi dengan Cloud Natural Language API, yang dapat mengekstrak struktur dari teks yang tidak terstruktur.
• Cloud Speech API mendukung lebih dari 80 bahasa, yang dapat dipilih melalui parameter konfigurasi sederhana. Coba fitur ini dengan bahasa lain yang Anda kuasai, atau bahasa yang sedang Anda pelajari.
• Penyiapan project saat ini terutama cocok untuk tujuan pengembangan, dan harus diubah saat di-deploy ke tingkat produksi. Misalnya, Anda dapat menggunakan beberapa instance Compute Engine dalam Grup Instance, dan menggunakan SSL Load Balancer untuk menyediakan komunikasi yang aman antara klien dan server.

Sertifikasi dan pelatihan Google Cloud

...membantu Anda mengoptimalkan teknologi Google Cloud. Kelas kami mencakup keterampilan teknis dan praktik terbaik untuk membantu Anda memahami dengan cepat dan melanjutkan proses pembelajaran. Kami menawarkan pelatihan tingkat dasar hingga lanjutan dengan opsi on demand, live, dan virtual untuk menyesuaikan dengan jadwal Anda yang sibuk. Sertifikasi membantu Anda memvalidasi dan membuktikan keterampilan serta keahlian Anda dalam teknologi Google Cloud.

Manual Terakhir Diperbarui pada 15 September 2025

Lab Terakhir Diuji pada 15 September 2025

Hak cipta 2025 Google LLC. Semua hak dilindungi undang-undang. Google dan logo Google adalah merek dagang dari Google LLC. Semua nama perusahaan dan produk lain mungkin adalah merek dagang masing-masing perusahaan yang bersangkutan.