Halaman tutorial Google Cloud Search ini menunjukkan cara menyiapkan aplikasi penelusuran kustom menggunakan widget penelusuran yang dapat disematkan. Untuk memulai dari awal tutorial ini, lihat Tutorial memulai Cloud Search.
Menginstal dependensi
Jika konektor masih mengindeks repositori, buka shell baru dan lanjutkan di sana.
Dari command line, ubah direktori ke
cloud-search-samples/end-to-end/search-interface
.Untuk mendownload dependensi yang diperlukan guna menjalankan server web, jalankan perintah berikut:
npm install
Membuat kredensial aplikasi penelusuran
Konektor ini memerlukan kredensial akun layanan untuk memanggil Cloud Search API. Untuk membuat kredensial:
Kembali ke Konsol Google Cloud.
Di navigasi sebelah kiri, klik Credentials.
Dari menu drop-down Create credentials, pilih OAuth client ID. Halaman "Buat client ID OAuth" akan muncul.
(Opsional). Jika Anda belum mengonfigurasi layar izin, klik KONFIGURASI LAYAR PERSETUJUAN. Layar "Izin OAuth" akan muncul.
Klik Internal lalu klik CREATE. Layar "OAuth consent" lain akan muncul.
Lengkapi kolom yang wajib diisi. Untuk petunjuk lebih lanjut, lihat bagian izin pengguna di Menyiapkan OAuth 2.0.
Klik menu drop-down Jenis aplikasi, lalu pilih Aplikasi web.
Di kolom Name, masukkan "tutorial".
Di kolom Asal JavaScript yang sah, klik TAMBAHKAN URI. Kolom "URI" kosong akan muncul.
Di kolom URI, masukkan
http://localhost:8080
.Klik CREATE. Layar "OAuth client created" akan muncul.
Catat client ID. Nilai ini digunakan untuk mengidentifikasi aplikasi saat meminta otorisasi pengguna dengan OAuth2. Rahasia klien tidak diperlukan untuk implementasi ini.
Klik OK.
Membuat aplikasi penelusuran
Selanjutnya, buat aplikasi penelusuran di konsol admin. Aplikasi penelusuran adalah representasi virtual dari antarmuka penelusuran dan konfigurasi defaultnya.
- Kembali ke konsol Google Admin.
- Klik ikon Apps. Halaman "Administrasi aplikasi" akan muncul.
- Klik Google Workspace. Halaman "Administrasi aplikasi Google Workspace" akan muncul.
- Scroll ke bawah dan klik Cloud Search. Halaman "Setelan untuk Google Workspace" akan muncul.
- Klik Aplikasi Penelusuran. Halaman "Aplikasi Penelusuran" akan muncul.
- Klik tanda bulat + berwarna kuning. Dialog "Buat aplikasi penelusuran baru" akan muncul.
- Di kolom Nama tampilan, masukkan "tutorial".
- Klik CREATE.
- Klik ikon pensil di samping aplikasi penelusuran yang baru dibuat ("Edit aplikasi penelusuran"). Halaman "Detail aplikasi penelusuran" akan muncul.
- Catat ID Aplikasi.
- Di sebelah kanan Sumber data, klik ikon pensil.
- Di samping "tutorial", klik tombol Aktifkan. Tombol ini akan mengaktifkan sumber data tutorial untuk aplikasi penelusuran yang baru dibuat.
- Di sebelah kanan sumber data "tutorial", klik Opsi tampilan.
- Periksa semua {i>facet<i}.
- Klik SAVE.
- Klik SELESAI.
Mengonfigurasi aplikasi web
Setelah membuat kredensial dan aplikasi penelusuran, perbarui konfigurasi aplikasi untuk menyertakan nilai ini sebagai berikut:
- Dari command line, ubah direktori menjadi `cloud-search-samples/end-to-end/search-interface/public'.
- Buka file
app.js
dengan editor teks. - Temukan variabel
searchConfig
di bagian atas file. - Ganti
[client-id]
dengan client ID OAuth yang dibuat sebelumnya. - Ganti
[application-id]
dengan ID aplikasi penelusuran yang tercantum di bagian sebelumnya. - Simpan file.
Menjalankan aplikasi
Mulai aplikasi dengan menjalankan perintah ini:
npm run start
Membuat kueri indeks
Untuk melakukan kueri indeks menggunakan widget penelusuran:
- Buka browser Anda dan buka
http://localhost:8080
. - Klik sign in untuk mengizinkan aplikasi membuat kueri Cloud Search atas nama Anda.
- Di kotak penelusuran, masukkan kueri, misalnya kata "test", lalu tekan enter. Halaman harus menampilkan hasil kueri beserta faset dan kontrol penomoran halaman untuk menjelajahi hasil.
Meninjau kode
Bagian lainnya memeriksa bagaimana antarmuka pengguna dibangun.
Memuat widget
Widget dan library terkait dimuat dalam dua fase. Pertama, skrip bootstrap dimuat:
Kedua, callback onLoad
dipanggil setelah skrip siap. Kemudian, aplikasi akan memuat klien Google API, Login dengan Google, dan library widget Cloud Search.
Sisa inisialisasi aplikasi akan ditangani oleh initializeApp
setelah semua library yang diperlukan dimuat.
Menangani otorisasi
Pengguna harus mengizinkan aplikasi untuk membuat kueri atas nama mereka. Meskipun widget dapat meminta pengguna untuk memberikan otorisasi, Anda dapat memperoleh pengalaman pengguna yang lebih baik dengan menangani otorisasi sendiri.
Untuk antarmuka penelusuran, aplikasi menyajikan dua tampilan yang berbeda, bergantung pada status login pengguna.
Selama inisialisasi, tampilan yang benar diaktifkan dan pengendali untuk peristiwa login dan logout akan dikonfigurasi:
Membuat antarmuka penelusuran
Widget penelusuran memerlukan sejumlah kecil markup HTML untuk input penelusuran dan untuk menyimpan hasil penelusuran:
Widget diinisialisasi dan terikat ke input dan elemen container selama inisialisasi:
Selamat, Anda berhasil menyelesaikan tutorial ini! Lanjutkan untuk melihat petunjuk pembersihan.