Kullanıcı arayüzünü ayarlama

Google Cloud Search eğiticisinin bu sayfasında, özel bir arama widget'ı kullanarak düzenleyebilirsiniz. Bu eğiticinin başından başlamak için Cloud Search başlangıç eğitimi.

Bağımlıları yükleme

1. Bağlayıcı depoyu dizine eklemeye devam ediyorsa yeni bir kabuk açın ve buradan devam edebilirsiniz.

2. Komut satırında dizini şu şekilde değiştirin: cloud-search-samples/end-to-end/search-interface

3. Her bir görev için gerekli bağımlılıkları web sunucusunu çalıştırmak için aşağıdaki komutu çalıştırın:

npm install

Arama uygulaması kimlik bilgilerini oluşturma

Bağlayıcının Cloud Search'ü çağırması için hizmet hesabı kimlik bilgileri gerekir API'ler. 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. "OAuth istemci kimliği oluştur" görünür.

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

   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. Daha ayrıntılı talimatlar için kullanıcıya onay bölümü OAuth 2.0'ı kurma.

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ş "URI'ler" alanı görüntülenir.

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

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

10. İstemci kimliğini not edin. Bu değer, aşağıdaki durumlarda uygulamayı tanımlamak için kullanılır: OAuth2 ile kullanıcı yetkilendirmesi isteniyor. İstemci gizli anahtarı gerekli değil göz önünde bulundurun.

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 sanal bir temsilidir ve yapılandırma.

1. Google Yönetici konsoluna geri dönün.
2. Uygulamalar simgesini tıklayın. "Uygulama yönetimi" görünür.
3. Google Workspace'i tıklayın. "Uygulamalar Google Workspace yönetimi" görünür.
4. Aşağı kaydırın ve Cloud Search'ü tıklayın. "Google Workspace ayarları" sayfa görünür.
5. Search Applications'ı (Uygulamalar Ara) tıklayın. "Uygulama Arama" görünür.
6. Yuvarlak sarı + işaretini tıklayın. "Yeni arama uygulaması oluştur" iletişim kutusu görüntülenir.
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 tıklayın ("Arama uygulamasını düzenle"). "Arama uygulaması ayrıntıları" 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ında Etkinleştir açma/kapatma düğmesini tıklayın. Bu açma/kapatma düğmesi yeni oluşturulan arama uygulamasının eğitim veri kaynağı.
13. "Eğitim"in 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 uygulamayı güncelleyin aşağıdaki gibi yapılandırmanız gerekir:

1. Komut satırında dizini şu şekilde değiştirin: `cloud-search-samples/end-to-end/search-interface/public.'
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] öğesini önceki bölüm.
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. Uygulamaya Cloud Search'ü sorgulama yetkisi vermek için oturum aç'ı tıklayın sizin adınıza çalışır.
3. Arama kutusuna "test" gibi bir sorgu girin ve tuşuna basın Enter tuşuna basın. Sayfa, sorgu sonuçlarını özellikler ve sayfalama denetimlerini kullanın.

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, komut dosyası yüklendiğinde:

<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 istemcisi, Google ile Oturum Açma ve Cloud Search widget kitaplıkları.

/**
 * 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 initializeApp tarafından işlenir .

Yetkilendirme işleme

Kullanıcılar, uygulamaya kendi adlarına sorgu gönderme yetkisi vermelidir. Widget kullanıcıların yetkilendirmesini isteyebilir. Daha iyi bir kullanıcı deneyimi yapmanız gerekir.

Arama arayüzü için uygulama, arama motoruna bağlı olarak iki farklı görünüm sunar. bir değişiklik gösterebilir.

<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 etkinlikleri yapılandırıldığında:

/**
 * 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 için az miktarda HTML işaretlemesi gerektirir giriş yapın ve arama sonuçlarını basılı tutun:

<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ıldı ve giriş ile kapsayıcı öğelerine bağlandı başlatma sırasında:

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! üzerinde devam edin: temizle'ye dokunun.

Önceki Sonraki