GSP643

Ringkasan

Dua belas tahun yang lalu, Lily mendirikan jaringan klinik hewan Pet Theory. Jaringan Pet Theory telah berkembang pesat dalam beberapa tahun terakhir. Sistem penjadwalan janji temu mereka yang lama sudah tidak mampu menangani beban kerja yang meningkat atau memungkinkan klien untuk menjadwalkan janji temu mereka. Oleh karena itu, Lily meminta Patrick, dari tim IT, dan Ruby, seorang konsultan, untuk membangun sistem berbasis cloud yang mudah diskalakan. Dalam lab ini, Anda akan membangun aplikasi web Firebase yang sepenuhnya berfungsi, sehingga pengguna dapat mencatat informasi dan menjadwalkan janji temu secara real time.

Arsitektur

Diagram berikut memberikan ringkasan terkait layanan yang akan Anda gunakan dan bagaimana layanan tersebut saling terhubung:

Tujuan

Dalam lab ini, Anda akan mempelajari cara:

• Mengonfigurasi Keamanan Firestore untuk mengotomatiskan autentikasi dan otorisasi dari sisi server.
• Menambahkan Login dengan Google ke aplikasi web.
• Mengonfigurasi database agar pengguna dapat menambahkan informasi kontak mereka.
• Mempelajari dan men-deploy kode yang memungkinkan pengguna menjadwalkan janji temu.
• Mempelajari update Firebase secara real time di aplikasi web.

Prasyarat

Ini adalah lab tingkat menengah. Dalam lab ini, Anda dianggap telah memahami Konsol Cloud dan lingkungan shell. Memiliki pengalaman menggunakan Firebase akan membantu, tetapi tidak wajib. Sebelum mengikuti lab ini, sebaiknya Anda telah menyelesaikan lab berikut:

• Mengimpor Data ke Database Firestore

Anda juga harus sudah terbiasa mengedit file. Anda dapat menggunakan editor teks favorit, seperti nano, vi, dan lainnya. Anda juga dapat meluncurkan editor kode dari Cloud Shell, yang tersedia di menu bagian atas:

Jika sudah siap, scroll ke bawah dan ikuti langkah berikut untuk menyiapkan lingkungan lab Anda.

Firebase Backend

Ruby mengirimkan email kepada Patrick:

Ruby mengirimkan beberapa informasi latar belakang kepada Patrick melalui email, lalu mereka mengadakan rapat untuk menentukan langkah-langkah yang perlu dilakukan. Dari rapat tersebut, mereka menyimpulkan bahwa Patrick perlu:

• Mengonfigurasi project Firebase.
• Membuat kebijakan keamanan.
• Menambahkan Firestore CLI ke project Google Cloud.

Selanjutnya, bantu Patrick menyelesaikan tugas berikut.

Tugas 1. Mendaftarkan Aplikasi Firebase

Buka jendela samaran dan tuju Firebase Console.

Jika diminta, masukkan:

• Username:
• Password:

1. Jika diminta, setujui Firebase Terms and Conditions, lalu klik Continue.

2. Di halaman Ringkasan Project, klik + Add app, lalu pilih ikon Web.

3. Saat diminta "App nickname", ketik Pet Theory.

4. Centang kotak di samping Also set up Firebase Hosting for this app.

5. Di menu dropdown situs, pilih Create a new site atau pastikan situs yang dipilih sesuai dengan project ID Anda (atau mengikuti petunjuk pada detail lab).

6. Klik tombol Register app.

7. Pada langkah berikutnya (Add Firebase SDK, Install Firebase CLI, dan Deploy to Firebase Hosting), klik Next atau Continue to console untuk kembali ke dasbor utama.

Kini Anda telah mengonfigurasi aplikasi Firebase.

Menguji tugas yang sudah selesai

Klik Periksa progres saya untuk memverifikasi tujuan.

Tugas 2. Mengaktifkan Produk Firebase.

Firebase Authentication

Di Firebase Console, siapkan Firebase Authentication agar pengguna dapat login dengan Google.

1. Di menu navigasi sebelah kiri, klik Authentication. Anda dapat menemukannya di bagian Project shortcuts atau Product categories > Security jika tidak disematkan.

2. Jika ini pertama kalinya Anda menggunakan fitur ini, klik Get Started.

3. Di tab Sign-in method, pilih Google dari daftar penyedia.

4. Di dialog konfigurasi, klik tombol Enable.

5. Pilih email dukungan Anda dari menu dropdown, lalu klik Save.

6. Untuk menambahkan domain kustom untuk otorisasi, klik tab Settings di bagian atas halaman Authentication.

7. Di menu sebelah kiri panel setelan, pilih Authorized domains.

8. Klik tombol Add domain

9. Masukkan domain berikut (ganti dengan project ID Anda jika diperlukan):

   {{{ project_0.project_id | PROJECT_ID }}}.web.app

10. Klik tombol Add.

Menguji tugas yang sudah selesai

Klik Periksa progres saya untuk memverifikasi tujuan.

Firebase Firestore

Selanjutnya, siapkan Database Firestore.

1. Di menu navigasi sebelah kiri, di bagian Databases and Storage, klik Firestore.

2. Di halaman landing Cloud Firestore, klik tombol Create database.

3. Di Step 1: Select edition, pilih Standard edition, lalu klik Next.

4. Di Step 2: Database ID & location, pilih lokasi yang sesuai (misalnya nam5 atau gunakan lokasi default), lalu klik Next.

5. Di Step 3: Configure, pilih Start in test mode, lalu klik Create.

6. Setelah database disediakan, klik tab Rules.

7. Ganti aturan keamanan dengan aturan berikut agar pengguna yang telah diautentikasi dapat membaca/menulis data mereka sendiri:

   rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /customers/{email} { allow read, write: if request.auth.token.email == email; } match /customers/{email}/{document=**} { allow read, write: if request.auth.token.email == email; } } }

Klik Publish untuk men-deploy perubahan Anda ke Firebase.

Kini Anda telah menyiapkan Firebase Authentication dan Firestore. Konfigurasi backend telah selesai.

Firebase Localhost

Anda telah membantu Patrick menyiapkan lingkungan Firebase Hosting yang berfungsi dengan baik, sehingga dapat digunakan oleh developer web untuk men-deploy kode miliknya.

Namun, Patrick belum pernah mengaktifkan Firebase Authentication maupun men-deploy kode ke Firebase, jadi Patrick mengirimkan email kepada Ruby untuk meminta bantuan...

Tugas 3. Membuat clone repositori dan menginstal dependensi.

Dalam tugas ini, Anda akan menggunakan Cloud Shell dan Cloud Shell Editor untuk membuat clone kode aplikasi serta menginstal paket Node.js yang diperlukan.

1. Di jendela samaran yang sama yang Anda gunakan untuk Firebase Console, buka tab baru, lalu buka Konsol Google Cloud dan setujui Persyaratan Layanan jika diminta.

2. Klik Activate Cloud Shell di toolbar Konsol Google Cloud.

3. Di terminal Cloud Shell, jalankan perintah berikut untuk menyalin file lab dari bucket Cloud Storage:

   gcloud storage cp -r gs://spls/gsp643/pet-theory .

4. Untuk melihat dan mengedit kode, klik tombol Open Editor di toolbar Cloud Shell.

5. Di Cloud Shell Editor, buka folder pet-theory/lab02 di file explorer.

6. Buka terminal di Cloud Shell Editor (atau gunakan terminal Cloud Shell yang sudah ada) dan ubah ke direktori lab02:

   cd pet-theory/lab02

7. Jalankan perintah berikut untuk menginstal paket Node.js:

   npm install Catatan: Lingkungan Cloud Shell dilengkapi dengan Node.js dan npm bawaan.

Kini Anda siap untuk menautkan aplikasi ke project Firebase backend.

Tugas 4. Memberikan Otorisasi Akses ke Firebase.

Di IDE, hubungkan Firebase dan deploy aplikasi Anda.

1. Ketik perintah berikut untuk memberikan otorisasi akses ke project Firebase:

   firebase login --no-localhost

   Catatan:

   Firebase akan mencoba memberikan otorisasi ke lingkungan lokal agar terhubung dengan project Firebase. Oleh karena itu, pastikan Anda menjalankan aktivitas browser di jendela samaran untuk memudahkan tindakan ini dengan kredensial yang sesuai.

2. Masukkan Y untuk mengaktifkan fitur Gemini di Firebase.

3. Jika diminta untuk mengizinkan Firebase mengumpulkan informasi pelaporan error, masukkan Y, lalu tekan ENTER.

4. Klik URL yang dihasilkan untuk membuka tab lain di jendela samaran yang sama.

5. Pilih akun lab Anda, lalu klik Allow.

6. Klik Yes, I just ran this command untuk melanjutkan.

7. Klik Yes, this is my session ID untuk mengonfirmasi ID sesi Anda.

8. Salin kode akses yang dihasilkan, tempel ke prompt Cloud Shell Enter authorization code:, lalu tekan ENTER.

Anda akan menerima output yang mirip dengan respons berikut:

Contoh Output:

Firebase kini terhubung dan diberi otorisasi. Langkah berikutnya adalah melakukan inisialisasi produk Firebase yang akan digunakan.

Tugas 5. Melakukan Inisialisasi Produk Firebase.

Di IDE, beri tahu Firebase tentang produk yang diperlukan.

1. Lakukan inisialisasi project Firebase baru di direktori kerja Anda saat ini:

   firebase init

   Catatan:

   Dengan menjalankan perintah ini, Anda akan dipandu untuk menyiapkan direktori project dan produk Firebase. Pilih fitur Firebase CLI yang ingin Anda siapkan di folder ini. Gunakan tombol panah untuk berpindah ke atas dan ke bawah dalam daftar. Gunakan tombol SPASI untuk memilih opsi produk.

2. Pilih produk berikut:

   • Firestore
   • Hosting

3. Gunakan tombol panah dan spasi untuk memilih Firestore dan Hosting. Pastikan shell cocok dengan kode berikut lalu tekan Enter:

   ? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. ◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default insta ◉ Firestore: Configure security rules and indexes files for Firestore ◯ Functions: Configure a Cloud Functions directory and its files ❯◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys ◯ Hosting: Set up GitHub Action deploys ◯ Storage: Configure a security rules file for Cloud Storage

4. Jalankan langkah-langkah selanjutnya untuk mengonfigurasi Firebase:

   • Gunakan tombol panah bawah hingga ke Use an existing project, lalu tekan Enter.
   • Pilih Project ID Anda dari daftar , lalu tekan Enter.
   • Tekan N, lalu ENTER untuk menyimpan file firestore.rules.
   • Tekan N, lalu ENTER untuk menyimpan file firestore.indexes.json.
   • Tekan ENTER untuk menyimpan direktori publik Anda.
   • Tekan N untuk melarang penulisan ulang ke file index.html, lalu tekan ENTER.
   • Saat ditanya apakah ingin menyiapkan build dan deployment otomatis menggunakan GitHub, tekan N, lalu tekan ENTER.
   • Saat diminta untuk menimpa file 404.html, tekan N.
   • Saat diminta untuk menimpa file index.html, tekan N.
   • Saat ditanya apakah ingin menginstal keahlian agen untuk Firebase, tekan Y, lalu tekan ENTER.

   Contoh Output:

   ✔ Agent skills installation started ✔ Wrote configuration info to firebase.json ✔ Wrote project information to .firebaserc ✔ Wrote .gitignore ✔ Firebase initialization complete!

Konfigurasi lokal kini telah selesai.

Tugas 6. Men-deploy ke Firebase.

Lanjutkan langkah ini di Cloud Shell. Pastikan Anda berada di Editor Kode, tepatnya di folder pet-theory/lab02.

1. Edit file firebase.json dan perbarui bagian hosting dengan menambahkan kunci site:

   { ... "hosting": { "site": "{{{ project_0.project_id | PROJECT_ID }}}", ... } }

2. Buka terminal dan deploy aplikasi Firebase menggunakan nilai ID situs Anda, misalnya:

   firebase deploy --only hosting:{{{ project_0.project_id | PROJECT_ID }}}

   Output:

   ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://{{{ project_0.project_id| "site" }}}.web.app

3. Klik URL hosting yang dihasilkan (biasanya berformat .web.app) untuk membukanya di tab samaran baru:

   https://{{{ project_0.project_id | PROJECT_ID }}}.web.app

   Penting:

   Kredensial pribadi tidak boleh digunakan sebagai autentikasi dalam lab ini. Gunakan akun untuk login dengan Google.

4. Klik tombol Sign in with Google:

   Catatan:

   Jika Anda melihat error browser is not supported or 3rd party cookies and data may be disabled, pastikan untuk mengaktifkan cookie di browser.

   

   Di Chrome, klik ikon mata di sisi paling kanan tab URL dan ikuti link biru di pop-up. Klik link Situs tidak berfungsi? untuk memperbarui setelan browser guna menerima cookie.

5. Login dengan nama pengguna yang diberikan (misalnya ). Setelah berhasil login, halaman berikut akan ditampilkan:

   

   Perusahaan kecil seperti Pet Theory tidak memiliki resource atau keahlian yang diperlukan untuk melakukan hal tersebut. Dalam situasi seperti ini, akan lebih baik jika pengguna aplikasi bisa login dengan Akun Google yang sudah ada (atau penyedia identitas lainnya).

   Catatan:

   Mengelola sandi adalah tugas yang sulit dan bisa membuat perusahaan Anda terkena risiko tambahan. Selain itu, pengguna tidak ingin membuat ID pengguna dan sandi lain.

Sekarang Anda telah men-deploy kode yang memungkinkan pengguna menggunakan autentikasi Google untuk mengakses aplikasi janji temu.

Tugas 7. Menambahkan halaman pelanggan ke aplikasi web.

Kembali ke Terminal dan gunakan editor untuk melihat file di folder public.

1. Buka file public/customer.js, lalu salin dan tempel kode berikut:

   let user; firebase.auth().onAuthStateChanged(function(newUser) { user = newUser; if (user) { const db = firebase.firestore(); db.collection("customers").doc(user.email).onSnapshot(function(doc) { const cust = doc.data(); if (cust) { document.getElementById('customerName').setAttribute('value', cust.name); document.getElementById('customerPhone').setAttribute('value', cust.phone); } document.getElementById('customerEmail').innerText = user.email; }); } }); document.getElementById('saveProfile').addEventListener('click', function(ev) { const db = firebase.firestore(); var docRef = db.collection('customers').doc(user.email); docRef.set({ name: document.getElementById('customerName').value, email: user.email, phone: document.getElementById('customerPhone').value, }) })

2. Buka file public/styles.css, lalu tempel kode berikut:

   body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; } #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; } #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; } #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; } #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;} #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; } #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; } #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; } @media (max-width: 600px) { body, #message { margin-top: 0; background: white; box-shadow: none; } body { border-top: 16px solid #ffa100; } }

3. Dari command line Terminal, jalankan perintah berikut:

   firebase deploy --only hosting:{{{ project_0.project_id | PROJECT_ID }}}

   Output:

   ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://{{{ project_0.project_id | PROJECT_ID }}}.web.app

4. Buka tab aplikasi dan muat ulang halaman secara paksa dengan CMD+SHIFT+R (Mac) atau CTRL+SHIFT+R (Windows). Memuat ulang halaman dengan cara standar tidak akan menampilkan update yang diperlukan.

   

5. Masukkan beberapa informasi pelanggan, seperti nama dan nomor telepon:

   Customer name:

   John

   Customer phone:

   98473757454

6. Klik Save profile.

7. Kembali ke Firebase Console.

8. Klik Build > Firestore Database untuk melihat informasi profil yang disimpan:

   

9. Kembali ke halaman aplikasi web, lalu klik link Appointments. Anda akan melihat halaman kosong karena kode janji temu belum di-deploy.

Menguji tugas yang sudah selesai

Klik Periksa progres saya untuk memverifikasi tujuan.

Keren.

Firestore mengupdate klien (aplikasi web dan aplikasi seluler native) secara real time, sehingga pengguna tidak perlu me-refresh atau memuat ulang.

Selamat!

Di sepanjang kursus lab ini, Anda telah membuat aplikasi web serverless yang andal dengan Firebase. Setelah membuat dan mengonfigurasi Project Firebase, Anda menambahkan keamanan Firestore untuk mengotomatiskan autentikasi dan otorisasi dari sisi server. Selanjutnya, Anda menambahkan Login dengan Google ke aplikasi web dan mengonfigurasi database agar pengguna dapat menambahkan info kontak dan membuat janji temu. Terakhir, Anda telah mempelajari dan men-deploy kode yang memungkinkan pengguna menjadwalkan janji temu, serta melihat update Firebase secara real time di aplikasi web. Sekarang, Anda siap untuk mengikuti lebih banyak lab dalam alur pembelajaran ini.

Langkah berikutnya/pelajari lebih lanjut

• Google Cloud - Apa itu Serverless?

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: 31 Mei 2026

Lab Terakhir Diuji: 31 Mei 2026

Hak cipta 2026 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.