GSP643

Ringkasan

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

Arsitektur

Diagram ini memberikan ringkasan terkait layanan yang akan Anda gunakan dan bagaimana layanan tersebut terhubung satu sama lain:

Tujuan

Di lab ini, Anda akan mempelajari cara:

• Mengonfigurasi Keamanan Firestore untuk mengotomatiskan autentikasi dan otorisasi di 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. Di lab ini, Anda dianggap telah memahami Konsol Cloud dan lingkungan shell. Berpengalaman di bidang Firebase akan sangat bermanfaat, 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, dll.) atau juga dapat meluncurkan editor kode dari Cloud Shell, yang dapat ditemukan di menu atas:

Setelah Anda siap, scroll ke bawah dan ikuti langkah berikut ini untuk menyiapkan lingkungan lab Anda.

Firebase Backend

Ruby mengirimkan email kepada Patrick:

Ruby, Konsultan Software	Halo Patrick, Pekerjaan yang luar biasa minggu lalu. Senang melihat data klinik sudah dimigrasikan ke Firestore. Sepertinya menggunakan Firebase untuk menghosting situs Pet Theory akan menjadi tugas berikutnya. Ruby
Patrick, Admin IT	Halo Ruby, Saya belum pernah mendengar Firebase Hosting, apa manfaatnya? Dari mana saya bisa memulainya? Patrick
Ruby, Konsultan Software	Halo Patrick Manfaat utama dari Firebase Hosting adalah sifatnya yang serverless, jadi tidak ada infrastruktur yang perlu dikelola. Aturan keamanan juga tersemat di dalam aplikasi, sehingga izin dapat dibatasi untuk meminimalkan masalah saat menangani data pelanggan. Firebase juga memiliki model “bayar sesuai penggunaan”, yang berarti Firebase adalah platform pengembangan seluler yang komprehensif untuk kasus penggunaan kita. Ruby
Patrick, Admin IT	Halo Ruby Sepertinya Firebase akan membuat pengelolaan keamanan dan infrastruktur (sebagian besar pekerjaan saya) menjadi jauh lebih mudah. Saya juga senang tidak ditagih untuk server yang tidak ada aktivitasnya. Patrick

Ruby mengirimkan beberapa informasi latar belakang kepada Patrick melalui email, dan mereka mengadakan pertemuan untuk menyusun aktivitas utama. Dari pertemuan ini, mereka menentukan hal yang harus dilakukan:

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

Selanjutnya, bantu Patrick menyelesaikan tugas-tugas ini.

Tugas 1. Mendaftarkan Aplikasi Firebase

Buka jendela samaran untuk mengakses URL Firebase Console di Firebase Console.

Jika diminta, masukkan:

• username sebagai
• password sebagai .

Catatan:
Project Firebase berlabel sudah tersedia. Pilih project ini untuk mengakses produk Firebase dan ikuti tutorial ini.

Dari layar Ringkasan Project Firebase, masukkan perintah berikut:

1. Pilih web icon (disorot di bawah ini) dari daftar ikon "Get started by adding Firebase to your app":

   

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

   Pet Theory

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

4. Klik dropdown deploy, lalu pilih Create a new site.

5. Ubah default untuk menyertakan imbuhan siswa.

   student-bucket-{{{ project_0.project_id | "PREFIX" }}}-1 Catatan:
   Pastikan dropdown situs berisi student-bucket--1 sebelum melanjutkan. Domain situs akan didasarkan pada setelan ini.

6. Klik tombol Register app.

7. Klik Next > Next > Continue to console.

   Catatan:
   Mengubah domain situs Firebase default akan memerlukan perubahan pada lingkungan lokal.
   Secara khusus, kita perlu:
   1. Mengupdate firebase.json untuk menyertakan ID situs kustom. Menyiapkan target deployment untuk situs Anda
   2. Menggunakan ID situs saat menggunakan perintah firebase deploy --only hosting:student-bucket--1

Sekarang Anda telah mengonfigurasi aplikasi Firebase.

Menguji tugas yang sudah selesai

Klik Check my progress untuk memverifikasi tujuan.

Mendaftarkan aplikasi Firebase Anda

Tugas 2. Mengaktifkan Produk Firebase

Firebase Authentication

Di Firebase Console, kita akan menyiapkan Firebase Authentication.

1. Klik tombol dropdown Build di sisi kiri panel navigasi.

2. Pilih kotak Authentication, lalu klik Get Started:

3. Klik tab Sign-in method, lalu klik item Google.

4. Klik tombol enable di pojok kanan atas dan untuk Support email for project, pilih akun lab dari menu drop-down.

   {{{ user_0.username | "USERNAME" }}}

   Sekarang halaman Anda akan terlihat seperti berikut:

5. Setelah memastikan semua hal di atas, klik tombol Save.

   Catatan:
   Saat menggunakan domain kustom dengan Firebase, Anda juga harus mengubah setelan Authorized domains.

6. Klik tab Settings

7. Di bagian judul Domains, klik item menu Authorized domains

   Sekarang halaman Anda akan terlihat seperti berikut:

8. Klik tombol Add domain

9. Masukkan domain berikut:

   student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1.web.app Catatan:
   Menambahkan domain kustom akan memungkinkan alur OAuth Firebase beroperasi dengan benar.

10. Klik tombol Add

Menguji tugas yang sudah selesai

Klik Check my progress untuk memverifikasi tujuan.

Menyiapkan Firebase Authentication

Firebase Firestore

Di Firebase Console, kita akan menyiapkan Firebase Firestore.

1. Klik tombol dropdown Build di sisi kiri panel navigasi.

2. Pilih kotak Firestore Database, lalu klik Create database:

3. Terima setelan default, lalu klik Next

4. Klik Create untuk menyediakan Cloud Firestore

5. Klik tab Rules

   Catatan:
   Kita ingin mengupdate aturan keamanan untuk database Firestore agar dapat menggunakan autentikasi. Dalam aturan yang baru, kita akan mengizinkan operasi baca/tulis pada database jika pengguna diautentikasi.

6. Update aturan seperti berikut:

   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; } } }

Sekarang Anda telah menyiapkan Firebase Authentication dan Firestore dengan ID situs kustom. Konfigurasi backend kini telah selesai.

Firebase Localhost

Anda telah membantu Patrick dalam menyiapkan lingkungan Firebase Hosting yang berfungsi dengan baik dan dapat digunakan oleh developer web untuk men-deploy kode mereka.

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

Patrick, Admin IT	Halo Ruby, Terima kasih atas semua tipsnya. Lingkungan Firebase sepertinya sudah siap. Tugas berikutnya adalah men-deploy kode developer situs. Bisakah membantu saya memahami apa yang diperlukan dan apa yang perlu saya lakukan selanjutnya? Patrick
Ruby, Konsultan	Halo Patrick, Senang mendengarnya. Saya akan mengirimkan petunjuk tentang cara menjalankan aplikasi dan menambahkan fitur-fitur berikut: Menyiapkan autentikasi web untuk login. Mengaktifkan detail pelanggan agar dapat dicatat di halaman Profil. Membuat portal mandiri untuk janji temu. Ruby
Patrick, DevOps Engineer	Halo Ruby Sepertinya akan menjadi pekerjaan yang cukup berat. Apakah ini berarti saya harus membuat perubahan struktural setiap kali saya ingin menambahkan sesuatu yang baru? Belum lagi waktu yang dibutuhkan untuk melihat update tersebut... Patrick
Ruby, Konsultan	Halo Patrick Sebagian besar pekerjaan berat bisa dilakukan dengan library Firebase. Firebase memiliki beberapa alat command line yang andal untuk membantu Anda menghubungkan localhost ke project Firebase backend. Gunakan firebase init untuk memberi tahu Firebase terkait produk yang ingin Anda gunakan. Setelah project disiapkan, Anda cukup memanggil firebase deploy dari command line. Ruby
Patrick, Admin IT	Halo Ruby Senang mendengarnya. Firebase Hosting semakin lama semakin baik :-) Patrick

Tugas 3. Menginstal Firebase CLI

Gunakan IDE untuk terhubung ke Firebase dan deploy aplikasi Anda.

Catatan:
Lingkungan pengembangan telah dikonfigurasikan sebelumnya dengan Alat Firebase.

1. Salin link IDE dari panel Lab Details

   {{{ project_0.startup_script.service_url | "IDE" }}}

2. Tempel link ke tab browser samaran baru untuk membuka Cloud Code.

3. Buka Terminal dengan Mengklik Application menu () > Terminal > New terminal.

4. Buat clone repositori GitHub dari command line:

   git clone https://github.com/rosera/pet-theory.git

5. Di panel kiri, klik ikon Explorer, lalu Open Folder > pet-theory > lab02. Klik OK.

   Catatan:
   Jika muncul pop-up yang bertuliskan Do you trust the authors of the files in this folder?, centang kotaknya, lalu klik Yes, I trust the authors.

6. Buka kembali terminal dengan mengklik Application menu () > Terminal > New terminal.

7. Update paket node:

   npm i

   Contoh Output:

   added 630 packages, and audited 631 packages in 42s 69 packages are looking for funding run `npm fund` for details found 0 vulnerabilities npm notice npm notice New minor version of npm available! 10.7.0 -> 10.8.3 npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.3 npm notice To update run: npm install -g npm@10.8.3 npm notice npm warn using --force Recommended protections disabled. up to date, audited 631 packages in 2s 69 packages are looking for funding run `npm fund` for details found 0 vulnerabilities

Sekarang Anda siap menautkan aplikasi ke project Firebase backend.

Tugas 4. Memberikan Otorisasi pada Akses Firebase

Di IDE, hubungkan Firebase dan deploy aplikasi Anda.

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

   firebase login --no-localhost Catatan:
   Firebase akan mencoba memberikan otorisasi ke lingkungan lokal agar terhubung dengan project Firebase. Oleh sebab itu, pastikan aktivitas browser dilakukan di jendela samaran untuk memfasilitasi tindakan ini dengan kredensial yang sesuai.

2. Masukkan Y jika diminta untuk mengizinkan Firebase mengumpulkan informasi pelaporan error, lalu tekan Enter.

3. Salin dan tempel URL yang dihasilkan di tab browser samaran yang baru, lalu tekan Enter (jika link langsung diklik, akan terjadi error).

4. Pilih akun lab Anda, lalu klik Allow.

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

6 Konfirmasi ID sesi Anda dengan mengklik Yes, this is my session ID.

7. Kemudian Anda akan menerima kode akses:

8. Salin kode akses tersebut, lalu tempel di prompt Cloud Shell Enter authorization code:, dan tekan Enter.

Anda akan menerima output yang mirip dengan respons berikut:

Contoh Output:

✔ Success! Logged in as student-02-21ab4a7ce0d1@qwiklabs.net Catatan:
Pada tahap ini, localhost ditautkan ke project Firebase backend.

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. Anda akan diminta untuk memilih 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. Kita memerlukan produk berikut:

   • Firestore
   • Hosting

3. Gunakan tombol panah dan spasi untuk memilih Firestore dan Hosting. Pastikan shell Anda 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 bawah ke Use an existing project, lalu tekan Enter.
   • Pilih Project ID Anda dari daftar , lalu tekan Enter.
   • Tekan Enter lalu N untuk menyimpan file firestore.rules.
   • Tekan Enter lalu N untuk menyimpan file firestore.indexes.json.
   • Tekan Enter untuk menyimpan direktori publik, lalu N untuk melarang penulisan ulang ke file /index.html.
   • Tekan Enter, lalu pada permintaan "Set up automatic builds and deploys with GitHub?" tekan N.
   • Masukkan N saat diminta untuk menimpa file 404.html.
   • Masukkan N saat diminta menimpa file index.html.

   Contoh Output:

   ✔ Wrote public/404.html ✔ Wrote public/index.html i Writing configuration info to firebase.json... i Writing project information to .firebase... i Writing gitignore file to .gitignore... ✔ Firebase initialization complete!

Konfigurasi lokal kini telah selesai.

Tugas 6. Men-deploy ke Firebase

Untuk langkah ini, lanjutkan di Terminal. Pastikan Anda masih berada di folder pet-theory/lab02.

1. Edit firebase.json dan update bagian hosting dengan site

   Output yang Diinginkan

   { ... "hosting": { "site": "student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1", ... } }

2. Deploy aplikasi Firebase menggunakan nilai ID situs Anda, misalnya:

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

   Output:

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

3. Salin URL hosting (seharusnya terlihat seperti ini .web.app) dan buka URL di tab samaran baru.

   https://student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1.web.app Penting:
   Kredensial pribadi tidak boleh digunakan sebagai autentikasi di 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.

   

   Hal ini dapat dilakukan di Chrome dengan mengklik ikon mata di sisi paling kanan tab URL dan mengikuti link biru di pop-up. Klik link Situs tidak berfungsi? untuk mengupdate setelan browser agar menerima cookie.

5. Login dengan nama pengguna yang diberikan, yaitu . Halaman berikut akan terbuka:

   

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

   Catatan:
   Mengelola sandi adalah tugas yang sulit dan dapat 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:student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1

   Output:

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

4. Buka tab aplikasi dan refresh halaman secara paksa dengan menekan tombol CMND+SHIFT+R (Mac) atau CTRL+SHIFT+R (Windows). Me-refresh halaman dengan cara standar tidak akan menampilkan update yang diperlukan.

   

5. Masukkan beberapa informasi pelanggan—isi 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 Check my progress untuk memverifikasi tujuan.

Menambahkan halaman pelanggan ke aplikasi web

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 lab ini, Anda telah membuat aplikasi web serverless yang tangguh 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 janji temu. Terakhir, Anda telah mempelajari dan men-deploy kode yang memungkinkan pengguna menjadwalkan janji temu dan melihat update Firebase secara real time di aplikasi web. Sekarang, Anda siap untuk mengikuti lebih banyak lab di jalur 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 pada 16 Oktober 2024

Lab Terakhir Diuji pada 16 Oktober 2024

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