Menyiapkan antarmuka pengguna

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

  1. Jika konektor masih mengindeks repositori, buka shell baru dan lanjutkan di sana.

  2. Dari command line, ubah direktori ke cloud-search-samples/end-to-end/search-interface.

  3. Untuk mendownload dependensi yang diperlukan untuk menjalankan server web, jalankan perintah berikut:

npm install

Buat kredensial aplikasi penelusuran

Konektor memerlukan kredensial akun layanan untuk memanggil API Cloud Search. Untuk membuat kredensial:

  1. Kembali ke Konsol Google Cloud.

  2. Di navigasi sebelah kiri, klik Kredensial.

  3. Dari menu drop-down Create credentials, pilih OAuth client ID. Halaman "Create OAuth client ID" akan muncul.

  4. (Opsional). Jika Anda belum mengonfigurasi layar izin, klik KONFIGURASI LAYAR IZIN. Layar "Izin OAuth" akan muncul.

    1. Klik Internal, lalu klik CREATE. Layar "OAuth consent" lain akan muncul.

    2. Isi kolom yang wajib diisi. Untuk mengetahui petunjuk lebih lanjut, lihat bagian izin pengguna di artikel Menyiapkan OAuth 2.0.

  5. Klik menu drop-down Application type, lalu pilih Web application.

  6. Di kolom Name, masukkan "tutorial".

  7. Di kolom Authorized JavaScript origins, klik ADD URI. Kolom "URI" kosong akan muncul.

  8. Di kolom URIs, masukkan http://localhost:8080.

  9. Klik BUAT. Layar "OAuth client created" akan muncul.

  10. Catat ID klien. Nilai ini digunakan untuk mengidentifikasi aplikasi saat meminta otorisasi pengguna dengan OAuth2. Rahasia klien tidak diperlukan untuk penerapan ini.

  11. Klik Oke.

Buat aplikasi penelusuran

Selanjutnya, buat aplikasi penelusuran di konsol admin. Aplikasi penelusuran adalah representasi virtual dari antarmuka penelusuran dan konfigurasi default-nya.

  1. Kembali ke konsol Google Admin.
  2. Klik ikon Aplikasi. Halaman "Administrasi aplikasi" akan muncul.
  3. Klik Google Workspace. Halaman "Administrasi Google Workspace aplikasi" akan muncul.
  4. Scroll ke bawah, lalu klik Cloud Search. Halaman "Setelan untuk Google Workspace" akan muncul.
  5. Klik Aplikasi Penelusuran. Halaman "Search Applications" akan muncul.
  6. Klik + kuning bulat. Dialog "Buat aplikasi penelusuran baru" akan muncul.
  7. Di kolom Nama tampilan, masukkan "tutorial".
  8. Klik BUAT.
  9. Klik ikon pensil di samping aplikasi penelusuran yang baru dibuat ("Edit aplikasi penelusuran"). Halaman "Cari detail aplikasi" akan muncul.
  10. Catat ID Aplikasi.
  11. Di sebelah kanan Sumber data, klik ikon pensil.
  12. Di samping "tutorial", klik tombol Aktifkan. Tombol ini mengaktifkan sumber data tutorial untuk aplikasi penelusuran yang baru dibuat.
  13. Di sebelah kanan sumber data "tutorial", klik Opsi tampilan.
  14. Periksa semua aspek.
  15. Klik SIMPAN.
  16. Klik SELESAI.

Mengonfigurasi aplikasi web

Setelah membuat kredensial dan aplikasi penelusuran, perbarui konfigurasi aplikasi untuk menyertakan nilai ini sebagai berikut:

  1. Dari command line, ubah direktori ke `cloud-search-samples/end-to-end/search-interface/public.'
  2. Buka file app.js dengan editor teks.
  3. Temukan variabel searchConfig di bagian atas file.
  4. Ganti [client-id] dengan client ID OAuth yang dibuat sebelumnya.
  5. Ganti [application-id] dengan ID aplikasi penelusuran yang dicatat di bagian sebelumnya.
  6. Simpan file.

Menjalankan aplikasi

Mulai aplikasi dengan menjalankan perintah ini:

npm run start

Membuat kueri indeks

Untuk membuat kueri indeks menggunakan widget penelusuran:

  1. Buka browser Anda, lalu buka http://localhost:8080.
  2. Klik login untuk mengizinkan aplikasi membuat kueri Cloud Search atas nama Anda.
  3. Di kotak penelusuran, masukkan kueri, seperti kata "test", lalu tekan enter. Halaman akan menampilkan hasil kueri beserta faset dan kontrol penomoran halaman untuk menavigasi hasil.

Meninjau kode

Bagian lainnya membahas cara membangun antarmuka pengguna.

Memuat widget

Widget dan library terkait dimuat dalam dua fase. Pertama, skrip bootstrap dimuat:

index.html
<script src="https://apis.google.com/js/api.js?mods=enable_cloud_search_widget&onload=onLoad" async defer></script>

Kedua, callback onLoad dipanggil setelah skrip siap. Kemudian, kode ini memuat klien Google API, Login dengan Google, dan library widget Cloud Search.

app.js
/**
 * Load the cloud search widget & auth libraries. Runs after
 * the initial gapi bootstrap library is ready.
 */
function onLoad() {
  gapi.load('client:auth2:cloudsearch-widget', initializeApp)
}

Inisialisasi aplikasi yang tersisa ditangani oleh initializeApp setelah semua library yang diperlukan dimuat.

Menangani otorisasi

Pengguna harus memberikan otorisasi kepada aplikasi untuk melakukan 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 menampilkan dua tampilan berbeda bergantung pada status login pengguna.

index.html
<div class="content">
  <div id="app" hidden>
    <div id="header">
      <button id="sign-out">Sign-out</button>
    </div>
    <!-- Markup for widget...-->
  </div>
  <div id="welcome" hidden>
    <h1>Cloud Search Tutorial</h1>
    <p>Sign in with your Google account to search.</p>
    <button id="sign-in">Sign-in</button>
  </div>
</div>

Selama inisialisasi, tampilan yang benar akan diaktifkan dan handler untuk peristiwa login dan logout akan dikonfigurasi:

app.js
/**
 * Initialize the app after loading the Google API client &
 * Cloud Search widget.
 */
async function initializeApp() {
  await gapi.auth2.init({
      'clientId': searchConfig.clientId,
      'scope': 'https://www.googleapis.com/auth/cloud_search.query'
  });

  let auth = gapi.auth2.getAuthInstance();

  // Watch for sign in status changes to update the UI appropriately
  let onSignInChanged = (isSignedIn) => {
    document.getElementById("app").hidden = !isSignedIn;
    document.getElementById("welcome").hidden = isSignedIn;
    if (resultsContainer) {
      resultsContainer.clear();
    }
  }
  auth.isSignedIn.listen(onSignInChanged);
  onSignInChanged(auth.isSignedIn.get()); // Trigger with current status

  // Connect sign-in/sign-out buttons
  document.getElementById("sign-in").onclick = (e) =>  auth.signIn();
  document.getElementById("sign-out").onclick = (e) => auth.signOut();

  // ...

}

Membuat antarmuka penelusuran

Widget penelusuran memerlukan sedikit markup HTML untuk input penelusuran dan untuk menampung hasil penelusuran:

index.html
<div id="search_bar">
  <div>
    <div id="suggestions_anchor">
      <input type="text" id="search_input" placeholder="Search for...">
    </div>
  </div>
</div>
<div id="facet_results" ></div>
<div id="search_results" ></div>

Widget diinisialisasi dan diikat ke elemen input dan container selama inisialisasi:

app.js
gapi.config.update('cloudsearch.config/apiVersion', 'v1');
resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
  .setSearchApplicationId(searchConfig.searchAppId)
  .setSearchResultsContainerElement(document.getElementById('search_results'))
  .setFacetResultsContainerElement(document.getElementById('facet_results'))
  .build();

const searchBox = new gapi.cloudsearch.widget.searchbox.Builder()
  .setSearchApplicationId(searchConfig.searchAppId)
  .setInput(document.getElementById('search_input'))
  .setAnchor(document.getElementById('suggestions_anchor'))
  .setResultsContainer(resultsContainer)
  .build();

Selamat, Anda berhasil menyelesaikan tutorial ini. Lanjutkan untuk melihat petunjuk pembersihan.

Sebelumnya Berikutnya