Banyak aplikasi perlu melakukan pemrosesan latar belakang di luar konteks permintaan web. Tutorial ini membuat aplikasi web yang memungkinkan pengguna memasukkan teks untuk diterjemahkan, lalu menampilkan daftar terjemahan sebelumnya. Terjemahan dilakukan dalam proses latar belakang untuk menghindari pemblokiran permintaan pengguna.
Diagram berikut mengilustrasikan proses permintaan terjemahan.
Berikut adalah urutan peristiwa untuk cara kerja aplikasi tutorial:
- Kunjungi halaman web untuk melihat daftar terjemahan sebelumnya, yang disimpan di Firestore.
- Minta terjemahan teks dengan memasukkan formulir HTML.
- Permintaan terjemahan dipublikasikan ke Pub/Sub.
- Cloud Function yang berlangganan topik Pub/Sub tersebut akan dipicu.
- Cloud Function menggunakan Cloud Translation untuk menerjemahkan teks.
- Cloud Function menyimpan hasilnya di Firestore.
Tutorial ini ditujukan bagi siapa saja yang tertarik untuk mempelajari pemrosesan latar belakang dengan Google Cloud. Anda tidak memerlukan pengalaman terkait Pub/Sub, Firestore, App Engine, atau Cloud Functions. Namun, untuk memahami semua kode, beberapa pengalaman dengan Go, JavaScript, dan HTML akan sangat membantu.
Tujuan
- Memahami dan men-deploy Cloud Function.
- Memahami dan men-deploy aplikasi App Engine.
- Coba aplikasi.
Biaya
Dalam dokumen ini, Anda menggunakan komponen Google Cloud yang dapat ditagih berikut:
Untuk membuat perkiraan biaya berdasarkan proyeksi penggunaan Anda,
gunakan kalkulator harga.
Setelah menyelesaikan tugas yang dijelaskan dalam dokumen ini, Anda dapat menghindari penagihan berkelanjutan dengan menghapus resource yang Anda buat. Untuk mengetahui informasi selengkapnya, lihat Pembersihan.
Sebelum memulai
- Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.
-
Di konsol Google Cloud, pada halaman pemilih project, pilih atau buat project Google Cloud.
-
Make sure that billing is enabled for your Google Cloud project.
-
Aktifkan API Firestore, Cloud Functions, Pub/Sub, and Cloud Translation.
-
Di konsol Google Cloud, pada halaman pemilih project, pilih atau buat project Google Cloud.
-
Make sure that billing is enabled for your Google Cloud project.
-
Aktifkan API Firestore, Cloud Functions, Pub/Sub, and Cloud Translation.
-
Di konsol Google Cloud, buka aplikasi di Cloud Shell.
Cloud Shell menyediakan akses command line ke resource cloud langsung dari browser. Buka Cloud Shell di browser Anda dan klik Continue untuk mendownload kode contoh dan berpindah ke direktori aplikasi.
-
Di Cloud Shell, konfigurasikan alat
gcloud
untuk menggunakan project Google Cloud Anda:# Configure gcloud for your project gcloud config set project YOUR_PROJECT_ID
Memahami Cloud Function
- Fungsi ini dimulai dengan mengimpor beberapa dependensi, seperti Firestore dan Translation. Fungsi ini juga memiliki beberapa variabel dan jenis global.
- Klien Firestore dan Translation global telah diinisialisasi agar dapat digunakan kembali di antara pemanggilan fungsi. Dengan demikian, Anda tidak perlu menginisialisasi klien baru untuk setiap pemanggilan fungsi, yang akan memperlambat eksekusi.
- Translation API menerjemahkan string ke bahasa yang Anda pilih.
-
Cloud Function dimulai dengan menginisialisasi klien Firestore dan Pub/Sub. Selanjutnya, Bard akan mengurai pesan Pub/Sub untuk mendapatkan teks yang akan diterjemahkan dan bahasa target yang diinginkan.
Kemudian, aplikasi akan memberikan nama unik untuk permintaan terjemahan guna memastikan permintaan terjemahan tidak menyimpan terjemahan duplikat. Kemudian, proses ini akan menerjemahkannya ke dalam transaksi Firestore untuk memastikan eksekusi serentak tidak menjalankan terjemahan yang sama dua kali secara tidak sengaja.
Men-deploy Cloud Function
Di Cloud Shell, pada direktori yang sama dengan file
translate.go
, deploy Cloud Function dengan pemicu Pub/Sub:gcloud functions deploy Translate --runtime go111 \ --trigger-topic=translate --set-env-vars GOOGLE_CLOUD_PROJECT=YOUR_GOOGLE_CLOUD_PROJECT
dengan
YOUR_GOOGLE_CLOUD_PROJECT
sebagai project ID Google Cloud Anda.
Memahami aplikasi
Ada dua komponen utama untuk aplikasi web:
-
Server HTTP Go untuk menangani permintaan web. Server memiliki dua endpoint berikut:
-
/
: Mencantumkan semua terjemahan yang ada dan menampilkan formulir yang dapat dikirimkan pengguna untuk meminta terjemahan baru. -
/request-translation
: Pengiriman formulir dikirim ke endpoint ini, yang memublikasikan permintaan ke Pub/Sub untuk diterjemahkan secara asinkron.
-
- Template HTML yang diisi dengan terjemahan yang sudah ada oleh server Go.
Server HTTP
Dalam direktori
index
,main.go
dimulai dengan menyiapkan aplikasi dan mendaftarkan pengendali HTTP:Pengendali indeks (
/
) mendapatkan semua terjemahan yang ada dari Firestore dan mengisi template HTML dengan daftar:Terjemahan baru diminta dengan mengirimkan formulir HTML. Pengendali terjemahan permintaan, yang terdaftar di
/request-translation
, mengurai pengiriman formulir, memvalidasi permintaan, dan memublikasikan pesan ke Pub/Sub:
{i>Template<i} HTML
Template HTML adalah dasar untuk halaman HTML yang ditampilkan kepada pengguna sehingga mereka dapat melihat terjemahan sebelumnya dan meminta terjemahan baru. Template tersebut diisi oleh server HTTP dengan daftar terjemahan yang ada.
-
Elemen
<head>
dari template HTML menyertakan metadata, style sheet, dan JavaScript untuk halaman:Halaman ini mengambil aset CSS dan JavaScript Material Design Lite (MDL). MDL memungkinkan Anda menambahkan tampilan dan nuansa Desain Material ke situs Anda.
Halaman ini menggunakan JQuery untuk menunggu hingga dokumen selesai dimuat dan menetapkan pengendali pengiriman formulir. Setiap kali formulir permintaan terjemahan dikirimkan, halaman akan melakukan validasi formulir minimal untuk memastikan nilainya tidak kosong, lalu mengirimkan permintaan asinkron ke endpoint
/request-translation
.Terakhir, snackbar MDL akan muncul untuk menunjukkan apakah permintaan berhasil atau jika mengalami error.
- Isi HTML halaman menggunakan tata letak MDL dan beberapa komponen MDL untuk menampilkan daftar terjemahan dan formulir untuk meminta terjemahan tambahan:
Membangun aplikasi
-
Sebelum mencoba men-deploy aplikasi web, build aplikasi untuk memastikan aplikasi tersebut dikompilasi
dan semua dependensi Anda berfungsi.
go build -o start ./index
Build akan berhasil jika tidak ada yang dicetak dan file
start
dibuat.
Men-deploy aplikasi web
Anda dapat menggunakan lingkungan standar App Engine untuk membangun dan men-deploy aplikasi yang berjalan dengan andal dalam beban yang berat dan dengan data dalam jumlah besar.
Tutorial ini menggunakan lingkungan standar App Engine untuk men-deploy frontend HTTP.
app.yaml
mengonfigurasi aplikasi App Engine:
-
Dari direktori yang sama dengan file
app.yaml
, deploy aplikasi Anda ke lingkungan standar App Engine:gcloud app deploy
Menguji aplikasi
Setelah Anda men-deploy aplikasi Cloud Function dan App Engine, coba minta terjemahan.
-
Untuk melihat aplikasi di browser Anda,masukkan URL berikut:
https://PROJECT_ID.REGION_ID.r.appspot.com
Ganti kode berikut:
PROJECT_ID
: ID Project Google Cloud AndaREGION_ID
: Kode yang ditetapkan App Engine untuk aplikasi Anda
Ada halaman dengan daftar terjemahan kosong dan formulir untuk meminta terjemahan baru.
-
Di kolom Text to translate, masukkan beberapa teks untuk diterjemahkan, misalnya,
Hello, World
. - Pilih bahasa dari menu drop-down untuk menerjemahkan teks.
- Klik Submit.
- Untuk memuat ulang halaman, klik Refresh refresh. Ada baris baru dalam daftar terjemahan. Jika Anda tidak melihat terjemahan, tunggu beberapa detik lagi dan coba lagi. Jika terjemahan masih tidak muncul, lihat bagian berikutnya tentang proses debug aplikasi.
Men-debug aplikasi
Jika Anda tidak dapat terhubung ke aplikasi App Engine atau tidak melihat terjemahan baru, periksa hal berikut:
-
Pastikan perintah deploy
gcloud
berhasil diselesaikan dan tidak menghasilkan error apa pun. Jika terjadi error, perbaiki error tersebut, lalu coba deploy Cloud Function dan aplikasi App Engine lagi. -
Di konsol Google Cloud, buka halaman Logs Viewer.
Buka halaman Logs Viewer- Di menu drop-down Recent selected resources, klik GAE Application, lalu klik All module_id. Anda akan melihat daftar permintaan dari saat Anda mengunjungi aplikasi. Jika Anda tidak melihat daftar permintaan, konfirmasi bahwa Anda memilih All module_id dari menu drop-down. Jika Anda melihat pesan error yang dicetak ke Konsol Google Cloud, pastikan kode aplikasi Anda cocok dengan kode di bagian tentang memahami aplikasi.
-
Di menu drop-down Recent selected resources, klik
Cloud Function, lalu klik All function name. Anda akan melihat
fungsi yang tercantum untuk setiap terjemahan yang diminta. Jika tidak, periksa apakah aplikasi Cloud Function dan App Engine menggunakan topik Pub/Sub yang sama:
- Dalam file
background/index/main.go
, pastikan konstantatopicName
adalah"translate"
. - Saat Anda men-deploy Cloud Function, pastikan untuk menyertakan flag
--trigger-topic=translate
.
- Dalam file
Pembersihan
Agar tidak perlu membayar biaya pada akun Google Cloud Anda untuk resource yang digunakan dalam tutorial ini, hapus project yang berisi resource tersebut, atau simpan project dan hapus setiap resource.
Menghapus project Google Cloud
- Di konsol Google Cloud, buka halaman Manage resource.
- Pada daftar project, pilih project yang ingin Anda hapus, lalu klik Delete.
- Pada dialog, ketik project ID, lalu klik Shut down untuk menghapus project.
Menghapus instance App Engine
- Di konsol Google Cloud, buka halaman Versi untuk App Engine.
- Pilih kotak centang untuk versi aplikasi non-default yang ingin Anda hapus.
- Untuk menghapus versi aplikasi, klik Hapus.
Menghapus Cloud Function
-
Hapus Cloud Function yang Anda buat dalam tutorial ini:
gcloud functions delete Translate
Langkah selanjutnya
- Coba tutorial Cloud Functions tambahan.
- Pelajari App Engine lebih lanjut.
- Coba Cloud Run, yang memungkinkan Anda menjalankan container stateless di lingkungan yang terkelola sepenuhnya atau di cluster Google Kubernetes Engine Anda sendiri.