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:
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:
Pilih web icon (disorot di bawah ini) dari daftar ikon "Get started by adding Firebase to your app":
Saat diminta "App nickname", ketik Pet Theory.
Pet Theory
Centang kotak di samping "Also set up Firebase Hosting for this app".
Klik dropdown deploy, lalu pilih Create a new site.
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.
Klik tombol Register app.
Klik Next > Next > Continue to console.
Catatan:
Mengubah domain situs Firebase default akan memerlukan perubahan pada lingkungan lokal.
Secara khusus, kita perlu:
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.
Klik tombol dropdown Build di sisi kiri panel navigasi.
Pilih kotak Authentication, lalu klik Get Started:
Klik tab Sign-in method, lalu klik item Google.
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:
Setelah memastikan semua hal di atas, klik tombol Save.
Catatan:
Saat menggunakan domain kustom dengan Firebase, Anda juga harus mengubah setelan Authorized domains.
Klik tab Settings
Di bagian judul Domains, klik item menu Authorized domains
Sekarang halaman Anda akan terlihat seperti berikut:
Klik tombol Add domain
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.
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.
Klik tombol dropdown Build di sisi kiri panel navigasi.
Pilih kotak Firestore Database, lalu klik Create database:
Terima setelan default, lalu klik Next
Klik Create untuk menyediakan Cloud Firestore
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.
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.
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.
Buka kembali terminal dengan mengklik Application menu () > Terminal > New terminal.
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.
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.
Masukkan Y jika diminta untuk mengizinkan Firebase mengumpulkan informasi pelaporan error, lalu tekan Enter.
Salin dan tempel URL yang dihasilkan di tab browser samaran yang baru, lalu tekan Enter (jika link langsung diklik, akan terjadi error).
Pilih akun lab Anda, lalu klik Allow.
Klik Yes, I just ran this command untuk melanjutkan
6 Konfirmasi ID sesi Anda dengan mengklik Yes, this is my session ID.
Kemudian Anda akan menerima kode akses:
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.
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.
Kita memerlukan produk berikut:
Firestore
Hosting
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
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.
Edit firebase.json dan update bagian hosting dengan site
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.
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.
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.
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,
})
})
Buka file public/styles.css, lalu tempel kode berikut:
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.
Masukkan beberapa informasi pelanggan—isi nama dan nomor telepon
Klik Build > Firestore Database untuk melihat informasi profil yang disimpan:
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.
...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 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.
Lab membuat project dan resource Google Cloud untuk jangka waktu tertentu
Lab memiliki batas waktu dan tidak memiliki fitur jeda. Jika lab diakhiri, Anda harus memulainya lagi dari awal.
Di kiri atas layar, klik Start lab untuk memulai
Gunakan penjelajahan rahasia
Salin Nama Pengguna dan Sandi yang diberikan untuk lab tersebut
Klik Open console dalam mode pribadi
Login ke Konsol
Login menggunakan kredensial lab Anda. Menggunakan kredensial lain mungkin menyebabkan error atau dikenai biaya.
Setujui persyaratan, dan lewati halaman resource pemulihan
Jangan klik End lab kecuali jika Anda sudah menyelesaikan lab atau ingin mengulanginya, karena tindakan ini akan menghapus pekerjaan Anda dan menghapus project
Konten ini tidak tersedia untuk saat ini
Kami akan memberi tahu Anda melalui email saat konten tersedia
Bagus!
Kami akan menghubungi Anda melalui email saat konten tersedia
Satu lab dalam satu waktu
Konfirmasi untuk mengakhiri semua lab yang ada dan memulai lab ini
Gunakan penjelajahan rahasia untuk menjalankan lab
Gunakan jendela Samaran atau browser pribadi untuk menjalankan lab ini. Langkah ini akan mencegah konflik antara akun pribadi Anda dan akun Siswa yang dapat menyebabkan tagihan ekstra pada akun pribadi Anda.
Di lab ini, Anda akan membuat aplikasi web serverless dengan Firebase, yang memungkinkan pengguna mengupload informasi dan membuat janji temu dengan klinik fiktif Pet Theory.