Menyiapkan antarmuka pengguna

Halaman tutorial Google Cloud Search ini menunjukkan cara menyiapkan akun aplikasi penelusuran 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 melanjutkan ke sana.

  2. Dari baris perintah, ubah direktori ke cloud-search-samples/end-to-end/search-interface.

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

npm install

Membuat kredensial aplikasi penelusuran

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

  1. Kembali ke Konsol Google Cloud.

  2. Di navigasi sebelah kiri, klik Credentials.

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

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

    1. Klik Internal lalu klik CREATE. "Izin OAuth" lainnya layar muncul.

    2. Lengkapi kolom yang wajib diisi. Untuk petunjuk lebih lanjut, lihat pengguna bagian izin dari Menyiapkan OAuth 2.0.

  5. Klik menu drop-down Jenis aplikasi, lalu pilih Aplikasi web.

  6. Di kolom Name, masukkan "tutorial".

  7. Di kolom Asal JavaScript yang sah, klik TAMBAHKAN URI. Kosong "URI" muncul.

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

  9. Klik BUAT. "Klien OAuth dibuat" muncul.

  10. Catat client ID. Nilai ini digunakan untuk mengidentifikasi aplikasi saat meminta otorisasi pengguna dengan OAuth2. Rahasia klien tidak wajib diisi untuk implementasi ini.

  11. Klik Oke.

Membuat aplikasi penelusuran

Selanjutnya, buat aplikasi penelusuran di konsol admin. Aplikasi penelusuran adalah representasi virtual antarmuka penelusuran dan konfigurasi Anda.

  1. Kembali ke konsol Google Admin.
  2. Klik ikon Apps. "Administrasi aplikasi" akan muncul.
  3. Klik Google Workspace. "Administrasi Google Workspace untuk aplikasi" akan muncul.
  4. Scroll ke bawah dan klik Cloud Search. "Setelan untuk Google Workspace" halaman muncul.
  5. Klik Aplikasi Penelusuran. "Aplikasi Penelusuran" akan muncul.
  6. Klik tanda bulat + berwarna kuning. Opsi "Buat aplikasi penelusuran baru" dialog 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"). "Detail aplikasi penelusuran" akan muncul.
  10. Catat ID Aplikasi.
  11. Di sebelah kanan Sumber data, klik ikon pensil.
  12. Di samping "tutorial", klik tombol Enable. Tombol ini memungkinkan sumber data tutorial untuk aplikasi penelusuran yang baru dibuat.
  13. Di sebelah kanan "tutorial" sumber data, klik Tampilkan opsi.
  14. Periksa semua {i>facet<i}.
  15. Klik SIMPAN.
  16. Klik SELESAI.

Mengonfigurasi aplikasi web

Setelah membuat kredensial dan aplikasi penelusuran, update aplikasi konfigurasi untuk menyertakan nilai-nilai berikut ini:

  1. Dari baris perintah, ubah direktori ke `cloud-search-samples/end-to-end/search-interface/public.&#39;
  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 tercantum dalam bagian sebelumnya.
  6. Simpan file.

Menjalankan aplikasi

Mulai aplikasi dengan menjalankan perintah ini:

npm run start

Membuat kueri indeks

Untuk melakukan kueri indeks menggunakan widget penelusuran:

  1. Buka browser Anda dan buka http://localhost:8080.
  2. Klik sign in untuk mengizinkan aplikasi mengkueri Cloud Search atas nama Anda.
  3. Di kotak penelusuran, masukkan kueri, misalnya "test", lalu tekan enter. Halaman harus menampilkan hasil kueri bersama dengan {i>facet <i}dan kontrol penomoran halaman untuk menavigasi hasil.

Meninjau kode

Bagian lainnya memeriksa bagaimana antarmuka pengguna dibangun.

Memuat widget

Widget dan library terkait dimuat dalam dua fase. Pertama, bootstrap skrip 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, aplikasi akan dimuat 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)
}

Sisa inisialisasi aplikasi ditangani oleh initializeApp setelah semua {i>library<i} yang diperlukan dimuat.

Menangani otorisasi

Pengguna harus mengizinkan aplikasi untuk membuat kueri atas nama mereka. Meskipun widget dapat meminta pengguna untuk melakukan otorisasi, Anda dapat mencapai pengalaman pengguna yang lebih baik dengan menangani otorisasi sendiri.

Untuk antarmuka penelusuran, aplikasi menyajikan dua tampilan yang berbeda, tergantung tentang 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 diaktifkan dan pengendali untuk peristiwa login dan logout 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 penelusuran input dan untuk menyimpan 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 terikat 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! Terus di selama petunjuk pembersihan data.

Sebelumnya Berikutnya