Kullanıcı arayüzünü ayarlama

Google Cloud Search eğiticisinin bu sayfasında, yerleştirilebilir 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 başlangıç eğitimine bakın.

Bağımlıları yükleme

1. Bağlayıcı hâlâ depoyu dizine eklemeye devam ediyorsa yeni bir kabuk açın ve 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 üzere aşağıdaki komutu çalıştırın:

npm install

Arama uygulaması kimlik bilgilerini oluşturma

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

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

2. Sol gezinme menüsünde, Credentials (Kimlik bilgileri) seçeneğini tıklayın.

3. Kimlik bilgileri oluştur açılır listesinden 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 ardından OLUŞTUR'u tıklayın. Başka bir "OAuth izni" ekranı görüntülenir.

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

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

6. Name (Ad) alanına "tutorial" 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. CREATE'ı (OLUŞTUR) tıklayın. "OAuth istemcisi oluşturuldu" ekranı görünür.

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.

Not: Bu adımlar bir alan yöneticisi tarafından gerçekleştirilmelidir.

1. Google Yönetici konsoluna dönün.
2. Uygulamalar simgesini tıklayın. "Uygulama yönetimi" sayfası görünür.
3. Google Workspace'i tıklayın. "Uygulamalardaki 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örünür.
5. Arama Uygulamaları'nı tıklayın. "Arama Uygulamaları" sayfası görünür.
6. Yuvarlak sarı + işaretini tıklayın. "Yeni bir arama uygulaması oluştur" iletişim kutusu görünür.
7. Görünen ad alanına "tutorial" yazın.
8. CREATE'ı (OLUŞTUR) 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ında 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. "Eğitim"in yanındaki Etkinleştir açma/kapatma 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. "Eğitim" veri kaynağının sağında, Görüntüleme seçenekleri'ni tıklayın.
14. Tüm özellikleri 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ı bu değerleri aşağıdaki gibi 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ı bir metin düzenleyicide açın.
3. Dosyanın en üstünde searchConfig değişkenini bulun.
4. [client-id] değerini daha önce oluşturulan OAuth istemci kimliğiyle değiştirin.
5. [application-id] yerine önceki bölümde belirtilen arama uygulaması kimliğini girin.
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çın ve http://localhost:8080 adresine gidin.
2. Uygulamayı, Cloud Search'ü sizin adınıza sorgulamak için yetkilendirmek üzere oturum aç'ı tıklayın.
3. Arama kutusuna "test" gibi bir sorgu girip Enter tuşuna basın. Sayfada, sonuçlarda gezinmek için özellikler ve sayfalandırma denetimleriyle birlikte sorgu sonuçları görüntülenmelidir.

Kodu inceleme

Geri kalan bölümlerde kullanıcı arayüzünün nasıl oluşturulduğu inceleniyor.

Widget yükleniyor

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

index.html

GitHub'da göster

<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ğırması çağrılır. Ardından Google API istemcisi, Google ile Oturum Açma ve Cloud Search widget kitaplıklarını yükler.

app.js

GitHub'da göster

/**
 * 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 başlatma işlemi initializeApp tarafından gerçekleştirilir.

Yetkilendirme işleme

Kullanıcılar, kendi adlarına sorgulama yapmak için uygulamayı yetkilendirmelidir. Widget, kullanıcılardan yetkilendirme yapmalarını isteyebilse de yetkilendirmeyi kendiniz yöneterek daha iyi bir kullanıcı deneyimi elde edebilirsiniz.

Arama arayüzünde ise uygulama, kullanıcının oturum açma durumuna bağlı olarak iki farklı görünüm sunar.

index.html

GitHub'da göster

<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 ile oturum kapatma etkinliklerinin işleyicileri yapılandırılır:

app.js

GitHub'da göster

/**
 * 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 az miktarda HTML işaretlemesi gerektirir:

index.html

GitHub'da göster

<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ş ile kapsayıcı öğelerine bağlanır:

app.js

GitHub'da göster

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ğiticiyi başarıyla tamamladınız! Temizleme talimatları için devam edin.

Önceki Sonraki