GSP1051

Ringkasan

Cloud Spanner adalah layanan database relasional yang terkelola sepenuhnya dan dapat diskalakan secara horizontal dari Google. Pelanggan di layanan keuangan, game, retail, dan banyak industri lainnya mempercayai layanan ini untuk menjalankan workload yang paling berat, yang konsistensi dan ketersediaannya dalam skala besar sangat penting.

Di lab ini, Anda akan membangun dan men-deploy aplikasi Node.js yang terhubung ke instance Cloud Spanner. Aplikasi Node.js adalah alat visualisasi harga saham bernama OmegaTrade. Aplikasi OmegaTrade menyimpan harga saham di Cloud Spanner dan merender visualisasi menggunakan Google Charts.

Layanan backend menggunakan framework Node.js Express dan terhubung ke Cloud Spanner dengan kemampuan penggabungan koneksi, sesi, dan waktu tunggu default.

Yang akan Anda lakukan

• Mengonfigurasi Lingkungan Project
• Mendownload dan memeriksa kode aplikasi
• Men-deploy komponen aplikasi Backend
• Mengimpor data perdagangan saham sampel ke database
• Men-deploy komponen aplikasi Frontend
• Menjalankan operasi di Aplikasi OmegaTrade

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.

Mengaktifkan Cloud Shell

Cloud Shell adalah mesin virtual yang dilengkapi dengan berbagai alat pengembangan. Mesin virtual ini menawarkan direktori beranda persisten berkapasitas 5 GB dan berjalan di Google Cloud. Cloud Shell menyediakan akses command-line untuk resource Google Cloud Anda.

1. Klik Activate Cloud Shell di bagian atas Konsol Google Cloud.

2. Klik jendela berikut:

   • Lanjutkan melalui jendela informasi Cloud Shell.
   • Beri otorisasi ke Cloud Shell untuk menggunakan kredensial Anda guna melakukan panggilan Google Cloud API.

Setelah terhubung, Anda sudah diautentikasi, dan project ditetapkan ke Project_ID, . Output berisi baris yang mendeklarasikan Project_ID untuk sesi ini:

Project Cloud Platform Anda dalam sesi ini disetel ke {{{project_0.project_id | "PROJECT_ID"}}}

gcloud adalah alat command line untuk Google Cloud. Alat ini sudah terinstal di Cloud Shell dan mendukung pelengkapan command line.

3. (Opsional) Anda dapat menampilkan daftar nama akun yang aktif dengan perintah ini:

gcloud auth list

4. Klik Authorize.

Output:

ACTIVE: * ACCOUNT: {{{user_0.username | "ACCOUNT"}}} Untuk menetapkan akun aktif, jalankan: $ gcloud config set account `ACCOUNT`

5. (Opsional) Anda dapat menampilkan daftar ID project dengan perintah ini:

gcloud config list project

Output:

[core] project = {{{project_0.project_id | "PROJECT_ID"}}} Catatan: Untuk mendapatkan dokumentasi gcloud yang lengkap di Google Cloud, baca panduan ringkasan gcloud CLI.

Instance Cloud Spanner

Agar Anda dapat menyelesaikan lab ini dengan lebih cepat, instance, database, dan tabel Cloud Spanner yang diperlukan untuk aplikasi OmegaTrade telah dibuat secara otomatis untuk Anda.

Berikut beberapa detail untuk referensi Anda:

Item	Nama	Detail
Instance Cloud Spanner	omegatrade-instance	Ini adalah instance level project
Database Cloud Spanner	omegatrade-db	Ini adalah database khusus instance
Tabel	Pengguna	Berisi akun pengguna
Tabel	Perusahaan	Berisi nama perusahaan dan simbol saham
Tabel	CompanyStocks	Berisi nilai saham
Tabel	Simulasi	Melacak status setiap simulasi

Tugas 1. Mengaktifkan Google Cloud API yang diperlukan

Pertama, aktifkan Google Cloud API untuk Cloud Spanner, Container Registry, dan Cloud Run.

1. Di Cloud Shell, masukkan perintah berikut:

gcloud services enable spanner.googleapis.com gcloud services enable artifactregistry.googleapis.com gcloud services enable containerregistry.googleapis.com gcloud services enable run.googleapis.com

Tugas 2. Mendownload dan memeriksa kode aplikasi

1. Download repositori kode untuk digunakan di lab ini. Di Cloud Shell, masukkan perintah berikut:

git clone https://github.com/GoogleCloudPlatform/training-data-analyst

2. Buka folder yang berisi kode aplikasi.

cd training-data-analyst/courses/cloud-spanner/omegatrade/

3. Kode ini dibagi menjadi dua bagian utama, backend dan frontend. Arsitektur aplikasi digambarkan dalam diagram di bawah ini:

4. Aplikasi ini bergantung pada file khusus deployment bernama .env agar dapat berkomunikasi dengan instance Cloud Spanner dengan lancar. Anda akan membuat file ini di tugas berikutnya.

5. Terkait backend, beberapa binding dan interaksi dengan tabel Cloud Spanner dikelola oleh model Node.js - tiga di antaranya company.model.js, simulation.model.js, dan user.model.js - berada di folder models. Keluarkan perintah berikut untuk membuka folder model:

cd backend/app/models

6. Keluarkan perintah berikut untuk memeriksa file company.model.js. File ini berisi operasi database untuk berinteraksi dengan tabel companies.

more company.model.js

Tekan tombol spasi untuk berpindah ke halaman berikutnya hingga akhir file. Jika Anda ingin menutup file lebih awal, ketik q untuk menutup perintah more.

7. Beberapa interaksi frontend dengan model ini dan struktur lain di backend Node.js terjadi melalui komponen Angular yang terletak di folder components. Keluarkan perintah berikut untuk membuka folder komponen:

cd ../../../frontend/src/app/components

8. Misalnya, komponen company berisi kode aplikasi dasar untuk mengelola dan memperbarui informasi perusahaan.

9. Keluarkan perintah berikut untuk memeriksa file konfigurasi TypeScript manage-company.component.ts. File ini berisi metode untuk menghapus atau mengedit perusahaan, serta tindakan lainnya.

more company/manage-company/manage-company.component.ts

Tekan tombol spasi untuk berpindah ke halaman berikutnya hingga akhir file. Jika Anda ingin menutup file lebih awal, ketik q untuk menutup perintah more.

Tugas 3. Membangun dan men-deploy komponen backend

1. Buka folder yang berisi kode yang diperlukan untuk membangun dan men-deploy backend.

cd ../../../../backend

2. Buat file .env. Seperti yang disebutkan sebelumnya, file ini berisi informasi khusus project sehingga komponen backend aplikasi dapat berkomunikasi dengan instance Cloud Spanner.

Di Cloud Shell, masukkan perintah berikut untuk memanggil editor teks Nano dan membuat file .env baru.

nano .env

Tempel blok kode yang tercantum di bawah.

PROJECTID = {{{project_0.project_id|Project ID}}} INSTANCE = omegatrade-instance DATABASE = omegatrade-db JWT_KEY = w54p3Y?4dj%8Xqa2jjVC84narhe5Pk EXPIRE_IN = 30d

Tekan Ctrl+X untuk keluar dari Nano, Y untuk mengonfirmasi pembaruan, dan tekan Enter untuk menyimpan perubahan Anda.

3. Sebelum melanjutkan, Anda harus menginstal komponen yang diperbarui untuk npm agar backend dapat dikompilasi dengan benar. npm adalah pengelola paket untuk JavaScript. npm adalah pengelola paket default untuk lingkungan runtime JavaScript Node.js.

nvm install 22.6 npm install npm -g npm install --loglevel=error

4. Selanjutnya, bangun aplikasi backend menggunakan dockerfile referensi yang ada di folder repositori.

docker build -t gcr.io/{{{project_0.project_id|Project ID}}}/omega-trade/backend:v1 -f dockerfile.prod . Catatan: Anda dapat mengabaikan pesan npm notice... yang muncul selama proses build

5. Sebelum mengirim paket aplikasi baru, jalankan perintah berikut untuk menetapkan izin konfigurasi di Cloud Shell.

Masukkan 'y' saat diminta untuk melanjutkan.

gcloud auth configure-docker

6. Kirim paket aplikasi yang baru dibuat ke Repositori Container untuk project Qwiklabs Anda.

docker push gcr.io/{{{project_0.project_id|Project ID}}}/omega-trade/backend:v1

7. Terakhir, deploy aplikasi backend menggunakan Cloud Run. Cloud Run adalah framework deployment serverless yang menghilangkan kerumitan pengelolaan infrastruktur dan menaikkan atau menurunkan skala secara otomatis hampir secara instan, bergantung pada traffic.

gcloud run deploy omegatrade-backend --platform managed --region {{{project_0.default_region|Default Region}}} --image gcr.io/{{{project_0.project_id|Project ID}}}/omega-trade/backend:v1 --memory 512Mi --allow-unauthenticated

8. Salin URL yang disediakan di akhir deployment. Simpan URL di notepad, file teks, atau lokasi lain yang mudah diakses. URL ini akan diberikan ke aplikasi frontend untuk memastikan antarmuka pengguna dapat berkomunikasi dengan benar dengan database Cloud Spanner melalui backend.

URL Layanan backend akan muncul dalam format berikut:

https://omegatrade-backend-zzzyyyxx1x-uw.a.run.app

Tugas 4. Mengimpor data perdagangan saham sampel ke database

1. Untuk mengimpor data sampel perusahaan dan saham, jalankan perintah berikut di folder saat ini (backend utama).

unset SPANNER_EMULATOR_HOST node seed-data.js

2. Anda akan menerima konfirmasi bahwa tabel telah berhasil dimuat.

Inserting Companies... done Inserting Simulations... done Inserting Stocks... done Data Loaded successfully

3. Klik Periksa progres saya untuk memverifikasi tujuan.

Mengimpor data perdagangan saham sampel ke database

Tugas 5. Membangun dan men-deploy komponen frontend

1. Buka direktori yang berisi kode frontend. Buka folder environments untuk mengupdate file konfigurasi agar mengarah ke komponen backend Anda.

cd ../frontend/src/environments

2. Di Cloud Shell, masukkan perintah berikut untuk memanggil editor teks Nano dan membuka file environment.ts.

nano environment.ts

3. Hapus string http://localhost:3000 dengan hati-hati, lalu ganti dengan URL backend Anda.

Catatan: Pastikan untuk mempertahankan bagian /api/v1/ dari URL

Tekan Ctrl+X untuk keluar dari Nano, Y untuk mengonfirmasi pembaruan, dan tekan Enter untuk menyimpan perubahan Anda.

File environment.ts Anda yang telah diupdate akan terlihat seperti contoh di bawah ini.

export const environment = { production: false, name: "dev", // change baseUrl according to backend URL baseUrl:"https://omegatrade-backend-zzzyyyxx1x-uw.a.run.app/api/v1/", // change clientId to actual value you have received from Oauth console clientId: "" };

4. Buka folder frontend utama.

cd ../..

5. Instal komponen yang diupdate untuk npm agar frontend dapat dikompilasi dengan benar.

npm install npm -g npm install --loglevel=error Catatan: Anda dapat dengan aman mengabaikan pesan npm WARN config... apa pun yang muncul selama proses penginstalan

6. Selanjutnya, bangun aplikasi frontend menggunakan dockerfile referensi yang ada di folder repositori. Proses build frontend mungkin memerlukan waktu 5 hingga 10 menit.

docker build -t gcr.io/{{{project_0.project_id|Project ID}}}/omegatrade/frontend:v1 -f dockerfile . Catatan: Anda dapat mengabaikan pesan npm notice... yang muncul selama proses build

7. Kirim paket aplikasi yang baru dibuat ke Repositori Container untuk project Qwiklabs Anda.

docker push gcr.io/{{{project_0.project_id|Project ID}}}/omegatrade/frontend:v1

8. Terakhir, deploy aplikasi frontend menggunakan Cloud Run.

gcloud run deploy omegatrade-frontend --platform managed --region {{{project_0.default_region|Default Region}}} --image gcr.io/{{{project_0.project_id|Project ID}}}/omegatrade/frontend:v1 --allow-unauthenticated

9. URL Layanan frontend akan muncul dalam format berikut. Anda dapat mengklik URL secara langsung untuk membukanya atau menyalin URL dan menempelkannya ke tab baru.

https://omegatrade-frontend-zzzyyyxx1x-uw.a.run.app

Tugas 6. Menjalankan operasi di Aplikasi OmegaTrade

1. Di halaman peluncuran aplikasi, klik link sign up.

2. Gunakan detail berikut untuk membuat akun baru untuk perusahaan fiktif bernama Spanner1.

Item	Nilai
Email bisnis	admin@spanner1.com
Nama Lengkap	Admin Spanner1
Sandi	Spanner1
Konfirmasi sandi Anda	Spanner1

3. Akun Anda akan dibuat dan Anda akan login.

4. Untuk memeriksa aplikasi OmegaTrade, buka Dashboard dan pilih Foobar Inc dari pemilih untuk melihat diagram performa saham Foobar Inc. Anda akan melihat berbagai harga saham simulasi dari waktu ke waktu untuk Foobar Inc.

5. Buka Manage Company dan tambahkan Spanner1 sebagai perusahaan baru.

6. Klik Add Company di sisi kanan halaman. Di jendela pop-up, masukkan nilai berikut:

Item	Nilai
Nama Perusahaan	Spanner1
Kode Singkat	SPN

Lalu klik Simpan.

7. Spanner1 kini ada dalam daftar perusahaan.

8. Buka Dashboard dan pilih Spanner1 jika belum dipilih. Anda akan melihat bahwa tidak ada simulasi untuk Spanner1. Klik link berjudul here untuk membuat simulasi.

9. Di bagian Simulate Data, berikan detail berikut:

Item	Nilai
Pilih Perusahaan	Spanner1
Pilih Interval	5
Jumlah Kumpulan Data	50

Lalu klik Simulate.

10. Buka Dashboard yang akan segera memperbarui diagram untuk Spanner1 seiring berjalannya simulasi. Simulasi akan selesai dalam waktu 3 hingga 6 menit.

11. Aplikasi OmegaTrade juga memungkinkan Anda memodifikasi informasi perusahaan yang ada. Di tab Manage Company, klik ikon pensil di bagian Action untuk Acme Corp.

12. Ubah nama perusahaan menjadi Coyote Inc. Perhatikan bahwa Kode Singkat tidak dapat diubah di antarmuka pengguna. Klik Update untuk menutup dan menerima perubahan.

13. Perubahan nama perusahaan akan langsung diterapkan. Buka Dashboard dan Anda akan melihat bahwa Acme Corp tidak lagi muncul dan Coyote Inc telah menggantikannya.

14. Terkadang, perubahan data diperlukan yang melebihi kemampuan kode aplikasi. Sebagai pengguna yang berdaya, Anda memiliki kemampuan untuk memperbarui data yang digunakan dalam aplikasi OmegaTrade dengan membuat perubahan langsung di database Cloud Spanner.

15. Di Konsol Cloud, klik Navigation menu () > View All Products > Databases > Spanner.

16. Terima jendela konfirmasi atau informasi apa pun yang mungkin muncul.

17. Klik nama omegatrade-instance, lalu omegatrade-db di bagian Databases. Dari daftar tabel di bagian bawah halaman, klik companies.

18. Klik Data di panel sebelah kiri untuk melihat konten tabel.

19. Anda akan memperbarui nama entity Bar Industries.

20. Klik kotak centang untuk baris Bar Industries. Kemudian, klik Edit dari pilihan yang tercantum di atas baris tabel.

21. Anda akan diarahkan ke Spanner Studio. Klik + Tab baru. Masukkan kueri berikut untuk memperbarui nilai companyName dari Bar Industries menjadi Consolidated Enterprises Inc.

UPDATE companies SET companyName='Consolidated Enterprises Inc' WHERE companyName='Bar Industries'; Catatan: Di jendela kueri Cloud Spanner, Anda dapat mengubah nilai Short Code. Kode aplikasi sebagaimana dirancang tidak mengizinkan nilai ini diupdate melalui antarmuka pengguna.

22. Klik Run untuk memproses update.

23. Kembali ke halaman aplikasi, muat ulang browser Anda, dan buka tab Dashboard. Anda akan melihat bahwa Bar Industries tidak lagi muncul dan Consolidated Enterprises Inc telah menggantikannya.

Selamat!

Anda kini telah men-deploy aplikasi Node.js yang terhubung ke instance Cloud Spanner dan melakukan operasi dasar terhadap database menggunakan aplikasi serta mengedit data secara langsung di database.

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 12 Mei 2025

Lab Terakhir Diuji pada 12 Mei 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.