Checkpoint
Create a Firebase project
/ 25
Register your app
/ 25
Set up authentication and a database
/ 25
Add a customer page to your web app
/ 25
Membangun Aplikasi Web Serverless dengan Firebase
- GSP643
- Ringkasan
- Tujuan
- Tugas 1. Menyediakan lingkungan Firebase
- Tugas 2. Menginstal Firebase CLI
- Tugas 3. Menyiapkan Database Firestore
- Tugas 4. Membuat project Firebase
- Tugas 5. Mendaftarkan aplikasi Anda
- Tugas 6. Mengautentikasi ke Firebase dan Men-deploy
- Tugas 7. Menyiapkan autentikasi dan database
- Tugas 8. Skenario: menyiapkan aplikasi
- Tugas 9. Mengonfigurasi autentikasi Firestore dan menambahkan login ke aplikasi web
- Tugas 10. Men-deploy aplikasi Anda
- Tugas 11. Menambahkan halaman pelanggan ke aplikasi web
- Tugas 12. Mengizinkan pengguna menjadwalkan janji temu
- Tugas 13. Melihat update Firestore secara real time
- Selamat!
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:
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
-
Salin link IDE dari panel Lab Details dan tempel link ke tab browser baru untuk membuka Cloud Code.
-
Buka terminal untuk mengakses command line. Di panel kiri, klik Application menu (
) > Terminal > New terminal.
-
Buat clone repositori GitHub dari command line:
-
Di panel kiri, klik ikon Explorer, lalu Open Folder > pet-theory > lab02. Klik OK.
-
Buka terminal.
-
Instal paket node yang diperlukan:
Output:
Sekarang Anda siap membuat database Firestore.
Tugas 3. Menyiapkan Database Firestore
Di terminal, siapkan lingkungan yang akan digunakan untuk Database Firestore.
- Tetapkan region project ke
:
-
Aktifkan aplikasi
App Engine
:gcloud app create --region={{{project_0.startup_script.app_region|REGION}}} -
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.
-
Klik ikon akun di pojok kanan atas halaman dan pastikan akun tersebut adalah akun siswa Qwiklabs yang telah Anda sediakan untuk lab ini.
-
Lalu klik Add project. Saat nama project diminta, gunakan Project ID dari menu drop-down.
-
Terima persyaratan Firebase lalu klik Continue. Konfirmasi paket penagihan "Bayar sesuai penggunaan".
-
Klik Continue dan pada halaman berikut, pilih disable Google Analytics untuk Project Firebase Anda.
-
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.
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.
- 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.
-
Kemudian centang kotak di samping "Also set up Firebase Hosting for this app".
-
Klik tombol Register app.
-
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.
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.
- Lakukan autentikasi ke Firebase:
-
Masukkan Y jika diminta untuk mengizinkan Firebase mengumpulkan informasi pelaporan error lalu tekan Enter.
-
Salin dan tempel URL yang dibuat di tab browser samaran baru lalu tekan Enter (terjadi error saat mengklik link secara langsung).
-
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:
-
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:
- Sekarang, lakukan inisialisasi project Firebase baru di direktori kerja Anda saat ini:
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 dan spasi untuk memilih Firestore dan Hosting. Pastikan shell cocok dengan kode berikut lalu tekan Enter:
- 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:
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.
-
Klik tombol Project Overview di sisi kiri menu navigasi.
-
Pilih kotak Authentication lalu klik Get Started:
-
Klik Sign-in providers, lalu klik item Google.
-
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:
- 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.
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:
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 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.
- Jalankan perintah berikut untuk membuat daftar folder dan file di direktori
lab02
:
- Pastikan output terlihat seperti berikut:
- Gunakan editor kode untuk membuka
pet-theory/lab02/firestore.rules
:
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.
- Jalankan perintah berikut untuk men-deploy aplikasi Firebase:
Output:
- Salin URL hosting (seharusnya terlihat seperti ini
[PROJECT-ID].web.app
) dan buka URL di tab baru. - Klik tombol Sign in with Google:
- Pilih Akun Google Anda. Halaman berikut akan terbuka:
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.
- Buka file
customer.js
lalu salin dan tempel kode berikut:
- Buka file
styles.css
lalu tempel kode berikut:
- Dari command line, jalankan perintah berikut:
Output:
- 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.
- Kembali ke Firebase Console lalu 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.
Tugas 12. Mengizinkan pengguna menjadwalkan janji temu
Buat halaman yang memungkinkan pelanggan untuk menjadwalkan janji temu.
-
Kembali ke tab Code Editor. Anda akan menambahkan kode ke dua file di direktori
public
. -
Dari menu samping, pilih appointments.html dan tempelkan kode berikut:
- Sekarang buka file appointments.js dan tempelkan kode berikut:
- Sekarang file telah selesai dibuat, coba lihat perubahannya. Jalankan perintah berikut di Cloud Shell untuk men-deploy aplikasi Anda:
Output:
- Refresh tab aplikasi web, tempat halaman kosong sebelumnya muncul. Lanjutkan dan jadwalkan beberapa janji temu:
-
Sekarang buka Firebase Console, klik Build > Firestore Database lalu pilih kumpulan
appointments
yang sebelumnya dibuat atas nama pengguna Anda. -
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.
-
Buka tab browser baru dan arahkan ke [PROJECT ID].web.app, lalu login menggunakan tombol Google dan klik Appointments.
-
Susun dua tab browser secara berdampingan. Di jendela browser pertama, jadwalkan janji temu baru.
-
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.
- 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.