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:

• Mengaktifkan Firebase API di project Google Cloud.
• Membuat dan mengonfigurasi project Firebase.
• 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.

Tugas 1. Menyediakan lingkungan Firebase

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 yang harus dilakukan:

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

Selanjutnya, bantu Patrick menyelesaikan tugas-tugas ini.

Tugas 2. Menginstal Firebase CLI

Catatan: Lingkungan pengembangan telah dikonfigurasikan sebelumnya dengan Alat Firebase.

1. Salin link IDE dari panel Lab Details dan tempel link ke tab browser baru untuk membuka Cloud Code.

2. Buka terminal untuk mengakses command line. Di panel kiri, klik Application menu () > Terminal > New terminal.

3. Buat clone repositori GitHub dari command line:

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

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

5. Buka terminal.

6. Instal paket node yang diperlukan:

npm i && npm audit fix --force

Output:

+ firebase-tools@10.7.0 added 3 packages from 11 contributors, removed 1 package and updated 8 packages in 79.808s

Sekarang Anda siap membuat database Firestore.

Tugas 3. Menyiapkan Database Firestore

Di terminal, siapkan lingkungan yang akan digunakan untuk Database Firestore.

1. Tetapkan region project ke :

gcloud config set compute/region {{{project_0.default_region|REGION}}}

2. Aktifkan aplikasi App Engine:

   gcloud app create --region={{{project_0.startup_script.app_region|REGION}}}

3. Buat database Firestore:

   gcloud firestore databases create --region={{{project_0.startup_script.app_region|REGION}}}

Sekarang Anda siap membuat project Firestore dan menautkannya ke akun Google Cloud.

Tugas 4. Membuat project Firebase

Buka Firebase console di jendela samaran.

Catatan: Lab ini menyertakan izin untuk Firebase. Salin link Firebase Console untuk mengakses Firebase. Gunakan Username/Password yang disediakan untuk lab guna melakukan autentikasi dengan Firebase.

1. Klik ikon akun di pojok kanan atas halaman dan pastikan akun tersebut adalah akun siswa Qwiklabs yang telah Anda sediakan untuk lab ini.

2. Lalu klik Add project. Saat nama project diminta, gunakan Project ID dari menu drop-down.

3. Terima persyaratan Firebase lalu klik Continue. Konfirmasi paket penagihan "Bayar sesuai penggunaan".

4. Klik Continue dan pada halaman berikut, pilih disable Google Analytics untuk Project Firebase Anda.

5. Lalu klik Add Firebase. Klik Continue saat melihat dialog yang menyatakan project baru Anda siap:

Menguji tugas yang sudah selesai

Klik Check my progress untuk memverifikasi tujuan.

Membuat project Firebase

Tugas 5. Mendaftarkan aplikasi Anda

Setelah menyelesaikan langkah terakhir, Anda seharusnya berada di Firebase Console. Jika menutup halaman tersebut, Anda akan membuka tab samaran lain dan menggunakan link berikut ke Firebase Console.

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.

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

4. Klik tombol Register app.

5. Klik Next > Next > Continue to console. Halaman berikut akan terbuka:

Sekarang, Anda telah berhasil mengonfigurasi Firebase untuk project. Selanjutnya, Anda akan melakukan inisialisasi project untuk mereferensikan host Firebase.

Menguji tugas yang sudah selesai

Klik Check my progress untuk memverifikasi tujuan.

Mendaftarkan aplikasi Anda

Tugas 6. Mengautentikasi ke Firebase dan Men-deploy

Gunakan IDE untuk terhubung ke Firebase dan deploy aplikasi Anda. Ketik perintah di terminal yang tersedia di editor.

1. Lakukan autentikasi ke Firebase:

firebase login --no-localhost

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

3. Salin dan tempel URL yang dibuat di tab browser samaran baru lalu tekan Enter (terjadi error saat mengklik link secara langsung).

4. Pilih akun lab lalu klik Allow. Klik Yes, I just ran this command untuk melanjutkan, lalu konfirmasi ID sesi dengan mengklik Yes, this is my session ID. Kemudian Anda akan menerima kode akses:

5. Salin kode akses, lalu tempel di prompt Cloud Shell Enter authorization code:, dan tekan Enter. Anda akan menerima output yang mirip dengan respons berikut:

Output:

✔ Success! Logged in as gcpstaging86673_student@qwiklabs.net

6. Sekarang, lakukan inisialisasi project Firebase baru di direktori kerja Anda saat ini:

firebase init

Dengan menjalankan perintah ini, Anda akan dipandu untuk menyiapkan direktori project dan produk Firebase.

7. Anda akan diminta untuk memilih fitur Firebase CLI yang ingin Anda siapkan di folder ini. 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

8. Kemudian jalankan langkah-langkah selanjutnya untuk mengonfigurasi Firebase:

• Gunakan tombol turun ke Use an existing project lalu tekan Enter.
• Pilih Project ID Qwiklabs dari daftar (dimulai dengan "qwiklabs-gcp-") lalu tekan Enter.
• Tekan Enter lalu N untuk menyimpan file firestore.rules.
• Tekan Enter lalu Y 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.

Anda akan menerima output berikut:

✔ 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. Sekarang, langkah autentikasi database diperlukan untuk memberikan akses di antara layanan.

Tugas 7. Menyiapkan autentikasi dan database

Kembali ke Firebase Console untuk menyelesaikan langkah ini.

1. Klik tombol Project Overview di sisi kiri menu navigasi.

2. Pilih kotak Authentication lalu klik Get Started:

3. Klik Sign-in providers, 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. Sekarang halaman Anda akan terlihat seperti berikut:

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

Sekarang Anda telah berhasil menyiapkan autentikasi Firestore. Pada langkah berikutnya, Anda akan menghosting aplikasi dengan Firebase.

Menguji tugas yang sudah selesai

Klik Check my progress untuk memverifikasi tujuan.

Menyiapkan autentikasi dan database

Tugas 8. Skenario: menyiapkan aplikasi

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. Melihat update melalui browser semudah memanggil firebase deploy dari command line. Buat perubahan, deploy, dan lihat perubahannya di situs web. Ruby
Patrick, Admin IT	Halo Ruby Senang mendengarnya. Firebase Hosting semakin lama semakin baik :-) Patrick

Sekarang Patrick memiliki pemahaman yang lebih baik tentang apa yang diperlukan. Selanjutnya, Anda akan membantu Patrick men-deploy Pet Theory sebagai aplikasi Firebase.

Tugas 9. Mengonfigurasi autentikasi Firestore dan menambahkan login ke aplikasi web

Kembali ke Terminal untuk melakukan langkah ini. Seharusnya Anda masih memiliki sesi command line yang terbuka saat melakukan inisialisasi Firebase sebelumnya.

1. Jalankan perintah berikut untuk membuat daftar folder dan file di direktori lab02:

ls -1

2. Pastikan output terlihat seperti berikut:

README.md firebase.json firestore.indexes.json firestore.rules node_modules package-lock.json package.json public solution

3. Gunakan editor kode untuk membuka pet-theory/lab02/firestore.rules:

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; } } } Catatan: Konfigurasi ini memastikan pengguna database Firestore hanya bisa mengakses data mereka sendiri. File firestore.rules digunakan untuk memberikan keamanan pada database Firestore. Pelajari lebih lanjut keamanan database Firestore.

Tugas 10. Men-deploy aplikasi Anda

Setelah melakukan perubahan yang diperlukan, Anda siap untuk men-deploy aplikasi. Pastikan Anda masih berada di folder pet-theory/lab02.

1. Jalankan perintah berikut untuk men-deploy aplikasi Firebase:

firebase deploy

Output:

✔ Deploy complete! Project Console: https://console.firebase.google.com/project/qwiklabs-gcp-7d652f8cf1f91cce/overview Hosting URL: https://qwiklabs-gcp-01-8be196f95006.web.app

2. Salin URL hosting (seharusnya terlihat seperti ini [PROJECT-ID].web.app) dan buka URL di tab baru.
3. 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 bisa 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 memperbarui setelan browser agar menerima cookie.

4. Pilih Akun Google Anda. Halaman berikut akan terbuka:

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.

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

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

Tugas 11. Menambahkan halaman pelanggan ke aplikasi web

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

1. Buka file 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 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, jalankan perintah berikut:

firebase deploy

Output:

✔ Deploy complete! Project Console: https://console.firebase.google.com/project/qwiklabs-gcp-7d652f8cf1f91cce/overview Hosting URL: https://qwiklabs-gcp-01-8be196f95006.web.app

4. Buka tab aplikasi dan refresh halaman secara paksa dengan 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 lalu klik Save profile.

5. Kembali ke Firebase Console lalu klik Build > Firestore Database untuk melihat informasi profil yang disimpan:

6. 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

Tugas 12. Mengizinkan pengguna menjadwalkan janji temu

Buat halaman yang memungkinkan pelanggan untuk menjadwalkan janji temu.

1. Kembali ke tab Code Editor. Anda akan menambahkan kode ke dua file di direktori public.

2. Dari menu samping, pilih appointments.html dan tempelkan kode berikut:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Pet Theory appointments</title> <script src="/__/firebase/6.4.2/firebase-app.js"></script> <script src="/__/firebase/6.4.2/firebase-auth.js"></script> <script src="/__/firebase/6.4.2/firebase-firestore.js"></script> <script src="/__/firebase/init.js"></script> <link type="text/css" rel="stylesheet" href="styles.css" /> </head> <body> <div id="message"> <h2>Scheduled appointments</h2> <div id="appointments"></div> <hr/> <h2>Schedule a new appointment</h2> <select id="timeslots"> <option value="0">Choose time</option> </select> <br><br> <button id="makeAppointment">Schedule</button> </div> <script src="appointments.js"></script> </body> </html>

3. Sekarang buka file appointments.js dan tempelkan kode berikut:

let user; firebase.auth().onAuthStateChanged(function(newUser) { user = newUser; if (user) { const db = firebase.firestore(); const appColl = db.collection('customers').doc(user.email).collection('appointments'); appColl.orderBy('time').onSnapshot(function(snapshot) { const div = document.getElementById('appointments'); div.innerHTML = ''; snapshot.docs.forEach(appointment => { div.innerHTML += formatDate(appointment.data().time) + '<br/>'; }) if (div.innerHTML == '') { div.innerHTML = 'No appointments scheduled'; } }); } }); const timeslots = document.getElementById('timeslots'); getOpenTimes().forEach(time => { timeslots.add(new Option(formatDate(time), time)); }); document.getElementById('makeAppointment').addEventListener('click', function(ev) { const millis = parseInt(timeslots.selectedOptions[0].value); if (millis > 0) { const db = firebase.firestore(); db.collection('customers').doc(user.email).collection('appointments').add({ time: millis }) timeslots.remove(timeslots.selectedIndex); } }) function getOpenTimes() { const retVal = []; let startDate = new Date(); startDate.setMinutes(0); startDate.setSeconds(0); startDate.setMilliseconds(0); let millis = startDate.getTime(); while (retVal.length < 5) { const hours = Math.floor(Math.random() * 5) + 1; millis += hours * 3600 * 1000; if (isDuringOfficeHours(millis)) { retVal.push(millis); } } return retVal; } function isDuringOfficeHours(millis) { const aDate = new Date(millis); return aDate.getDay() != 0 && aDate.getDay() != 6 && aDate.getHours() >= 9 && aDate.getHours() <= 17; } function formatDate(millis) { const aDate = new Date(millis); const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; return days[aDate.getDay()] + ' ' + aDate.getDate() + ' ' + months[aDate.getMonth()] + ', ' + aDate.getHours() + ':' + (aDate.getMinutes() < 10? '0'+aDate.getMinutes(): aDate.getMinutes()); }

4. Sekarang file telah selesai dibuat, coba lihat perubahannya. Jalankan perintah berikut di Cloud Shell untuk men-deploy aplikasi Anda:

firebase deploy

Output:

✔ Deploy complete! Project Console: https://console.firebase.google.com/project/qwiklabs-gcp-7d652f8cf1f91cce/overview Hosting URL: https://qwiklabs-gcp-01-8be196f95006.web.app

5. Refresh tab aplikasi web, tempat halaman kosong sebelumnya muncul. Lanjutkan dan jadwalkan beberapa janji temu:

6. Sekarang buka Firebase Console, klik Build > Firestore Database lalu pilih kumpulan appointments yang sebelumnya dibuat atas nama pengguna Anda.

7. Anda akan melihat kumpulan kode janji temu yang serupa:

Tugas 13. Melihat update Firestore secara real time

Firestore adalah database real-time. Tambahkan update secara real time ke aplikasi untuk memanfaatkannya.

1. Buka tab browser baru dan arahkan ke [PROJECT ID].web.app, lalu login menggunakan tombol Google dan klik Appointments.

2. Susun dua tab browser secara berdampingan. Di jendela browser pertama, jadwalkan janji temu baru.

3. Sekarang lihat tab browser yang lain—Anda akan melihat janji temu ditambahkan secara otomatis tanpa perlu me-refresh:

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

4. Buka Firebase Console, klik tab Data di Cloud Firestore, lalu edit datanya. Anda bahkan dapat menghapus kumpulan appointments di bawah kumpulan data pengguna. Kedua jendela browser terus mengupdate secara real time.

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 30 Januari 2024

Lab Terakhir Diuji pada 8 Januari 2023

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.