Kullanıcı arayüzünü ayarlama

Google Cloud Search eğiticisinin bu sayfasında, yerleşik arama widget'ını kullanarak özel bir arama uygulamasının nasıl oluşturulacağı gösterilmektedir. Bu eğiticinin başından başlamak için Cloud Search'i kullanmaya başlama eğiticisine bakın.

Bağımlıları yükleme

  1. Bağlayıcı hâlâ deposu dizine eklemeye devam ediyorsa yeni bir kabuk açıp işleme orada devam edin.

  2. Komut satırından dizini cloud-search-samples/end-to-end/search-interface olarak değiştirin.

  3. Web sunucusunu çalıştırmak için gerekli bağımlılıkları indirmek isterseniz aşağıdaki komutu çalıştırın:

npm install

Arama uygulaması kimlik bilgilerini oluşturma

Bağlayıcı, Cloud Search API'lerini çağırmak için hizmet hesabı kimlik bilgilerini gerektirir. Kimlik bilgilerini oluşturmak için:

  1. Google Cloud Console'a dönün.

  2. Soldaki gezinme panelinde Kimlik bilgileri'ni tıklayın.

  3. Kimlik bilgileri oluştur açılır listesinde OAuth istemci kimliği'ni seçin. "OAuth istemci kimliği oluştur" sayfası görünür.

  4. (İsteğe bağlı). İzin ekranını yapılandırmadıysanız İZİN EKRANINI YAPILANDIR'ı tıklayın. "OAuth izni" ekranı görünür.

    1. Dahili'yi ve OLUŞTUR'u tıklayın. Başka bir "OAuth izni" ekranı görünür.

    2. Zorunlu alanları doldurun. Daha fazla talimat için OAuth 2.0 kurulumu başlıklı makalenin kullanıcı izni bölümüne bakın.

  5. Uygulama türü açılır listesini tıklayın ve Web uygulaması'nı seçin.

  6. Ad alanına "eğitim" yazın.

  7. Yetkilendirilmiş JavaScript kaynakları alanında URI EKLE'yi tıklayın. Boş bir "URI'ler" alanı görünür.

  8. URI'ler alanına http://localhost:8080 girin.

  9. OLUŞTUR'u tıklayın. "OAuth istemcisi oluşturuldu" ekranı görüntülenir.

  10. İstemci kimliğini not edin. Bu değer, OAuth2 ile kullanıcı yetkilendirmesi istenirken uygulamayı tanımlamak için kullanılır. Bu uygulama için istemci gizli anahtarı gerekli değildir.

  11. Tamam'ı tıklayın.

Arama uygulamasını oluşturma

Ardından, Yönetici Konsolu'nda bir arama uygulaması oluşturun. Arama uygulaması, arama arayüzünün ve varsayılan yapılandırmasının sanal bir temsilidir.

  1. Google Yönetici Konsolu'na dönün.
  2. Uygulamalar simgesini tıklayın. "Uygulama yönetimi" sayfası görünür.
  3. Google Workspace'i tıklayın. "Uygulamalar Google Workspace yönetimi" sayfası görünür.
  4. Aşağı kaydırın ve Cloud Search'ı tıklayın. "Google Workspace Ayarları" sayfası gösterilir.
  5. Arama Uygulamaları'nı tıklayın. "Arama Uygulamaları" sayfası görünür.
  6. Yuvarlak sarı + simgesini tıklayın. "Yeni arama uygulaması oluştur" iletişim kutusu görünür.
  7. Görünen ad alanına "tutorial" yazın.
  8. OLUŞTUR'u tıklayın.
  9. Yeni oluşturulan arama uygulamasının yanındaki kalem simgesini ("Arama uygulamasını düzenle") tıklayın. "Uygulama ayrıntılarını ara" sayfası görünür.
  10. Uygulama kimliğini not edin.
  11. Veri kaynakları'nın sağındaki kalem simgesini tıklayın.
  12. "Tutorial"ın yanındaki Etkinleştir düğmesini tıklayın. Bu açma/kapatma düğmesi, yeni oluşturulan arama uygulaması için eğitim veri kaynağını etkinleştirir.
  13. "Tutorial" veri kaynağının sağındaki Görüntüleme seçenekleri'ni tıklayın.
  14. Tüm yönleri kontrol edin.
  15. KAYDET'i tıklayın.
  16. BİTTİ'yi tıklayın.

Web uygulamasını yapılandırma

Kimlik bilgilerini ve arama uygulamasını oluşturduktan sonra uygulama yapılandırmasını aşağıdaki gibi bu değerleri içerecek şekilde güncelleyin:

  1. Komut satırından, dizini "cloud-search-samples/end-to-end/search-interface/public" olarak değiştirin.
  2. app.js dosyasını metin düzenleyiciyle açın.
  3. Dosyanın en üstündeki searchConfig değişkenini bulun.
  4. [client-id] kısmını, daha önce oluşturulan OAuth istemci kimliğiyle değiştirin.
  5. [application-id] değerini, önceki bölümde belirtilen arama uygulaması kimliğiyle değiştirin.
  6. Dosyayı kaydedin.

Uygulamayı çalıştırın

Şu komutu çalıştırarak uygulamayı başlatın:

npm run start

Dizini sorgulama

Arama widget'ını kullanarak dizini sorgulamak için:

  1. Tarayıcınızı açıp http://localhost:8080 adresine gidin.
  2. Uygulamanın sizin adınıza Cloud Search'i sorgulaması için yetkilendirmek üzere oturum aç'ı tıklayın.
  3. Arama kutusuna "test" gibi bir sorgu girin ve Enter tuşuna basın. Sayfada, sorgu sonuçlarının yanı sıra sonuçlar arasında gezinmek için özellikleri ve sayfalandırma denetimlerini de görebilirsiniz.

Kodu inceleme

Kalan bölümlerde, kullanıcı arayüzünün nasıl oluşturulduğu incelenmektedir.

Widget yükleniyor

Widget ve ilgili kitaplıklar iki aşamada yüklenir. İlk olarak önyükleme komut dosyası yüklenir:

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

İkinci olarak, komut dosyası hazır olduğunda onLoad geri çağırma işlevi çağrılır. Ardından Google API istemcisini, Google ile oturum açma özelliğini ve Cloud Search widget kitaplıklarını yükler.

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)
}

Gerekli tüm kitaplıklar yüklendikten sonra uygulamanın kalan ilklendirme işlemi initializeApp tarafından yönetilir.

Yetkilendirmeyi işleme

Kullanıcılar, uygulamanın kendi adlarına sorgu yapması için uygulamayı yetkilendirmelidir. Widget, kullanıcılardan yetkilendirme isteyebilir ancak yetkilendirmeyi kendiniz yaparak daha iyi bir kullanıcı deneyimi elde edebilirsiniz.

Uygulama, arama arayüzü için kullanıcının oturum açma durumuna bağlı olarak iki farklı görünüm sunar.

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>

Başlatma sırasında doğru görünüm etkinleştirilir ve oturum açma ve oturum kapatma etkinliklerinin işleyicileri yapılandırılır:

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();

  // ...

}

Arama arayüzü oluşturma

Arama widget'ı, arama girişi ve arama sonuçlarını tutmak için küçük bir HTML işaretlemesi gerektirir:

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 başlatılır ve başlatma sırasında giriş ve kapsayıcı öğelerine bağlanır:

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();

Tebrikler, eğitimi başarıyla tamamladınız. Temizleme talimatları için okumaya devam edin.

Önceki Sonraki