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ğı açıklanmaktadır. 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ı depoyu dizine eklemeye devam ediyorsa yeni bir kabuk açın ve oradan devam edin.

  2. Komut satırında 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 şu komutu çalıştırın:

npm install

Arama uygulaması kimlik bilgilerini oluşturma

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

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

  2. Soldaki gezinme panelinde Credentials'ı (Kimlik bilgileri) 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üntülenir.

  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üntülenir.

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

    2. Zorunlu alanları doldurun. Diğer talimatlar için OAuth 2.0'ı ayarlama 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. Ad alanına "eğitim" yazın.

  7. Yetkili 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. OK (Tamam) seçeneğini 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 konsoluna geri dönün.
  2. Uygulamalar simgesini tıklayın. "Uygulama yönetimi" sayfası görüntülenir.
  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örünür.
  5. Search Applications'ı (Uygulamalar Ara) tıklayın. "Uygulama Arama" sayfası görünür.
  6. Yuvarlak sarı renkli + simgesini tıklayın. "Yeni bir arama uygulaması oluştur" iletişim kutusu görünür.
  7. Görünen ad alanına "eğitim" 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ında arama" 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ı 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 Cloud Search'ü sizin adınıza sorgulaması için oturum aç'ı tıklayın.
  3. Arama kutusuna "test" gibi bir sorgu girin ve Enter tuşuna basın. Sayfada, sonuçlarda gezinmek için özellikler ve sayfalara ayırma denetimleriyle birlikte sorgu sonuçları gösterilmelidir.

Kodu inceleme

Geri 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ğırması çağrılır. Daha sonra Google API istemcisini, Google ile Oturum Açma'yı 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)
}

Uygulamanın kalan başlatma işlemi, gerekli tüm kitaplıklar yüklendikten sonra initializeApp tarafından gerçekleştirilir.

Yetkilendirme işleme

Kullanıcılar, uygulamaya kendi adlarına sorgu gönderme yetkisi vermelidir. Widget, kullanıcılardan yetki vermelerini isteyebilir. Ancak yetkilendirme işlemini 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, oturum açma ve oturum kapatma etkinliklerine ilişkin işleyiciler 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! Temizlik talimatları için devam edin.

Önceki Sonraki