Kullanıcı arayüzünü ayarlama

Google Cloud Search eğitiminin bu sayfasında, yerleştirilebilir arama widget'ını kullanarak özel bir arama uygulamasının nasıl ayarlanacağı gösterilmektedir. Bu eğiticinin en başından başlamak için Cloud Search'ü kullanmaya başlama eğitimi başlıklı makaleyi inceleyin.

Bağımlıları yükleme

1. Bağlayıcı, depoyu hâlâ dizine ekliyorsa yeni bir kabuk açıp işleme buradan 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ı, 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şturun açılır listesinde OAuth istemci kimliği'ni seçin. "OAuth istemci kimliği oluşturun" 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 izin ekranı" gösterilir.

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

   2. Zorunlu alanları doldurun. Diğer talimatlar için OAuth 2.0 kurulumu başlıklı makalenin kullanıcı izni bölümüne bakın.

5. Application type (Uygulama türü) açılır listesini tıklayın ve Web application'ı (Web uygulaması) seçin.

6. 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. URIs (URI'ler) alanına http://localhost:8080 girin.

9. OLUŞTUR'u 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ı 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 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. "Google Workspace yönetimi uygulamaları" 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ı + simgesini tıklayın. "Yeni bir arama uygulaması oluşturun" 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. "Arama uygulaması ayrıntıları" sayfası görünür.
10. Uygulama kimliğini not edin.
11. Veri kaynakları'nın sağ tarafı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ğı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ı bir metin düzenleyiciyle açın.
3. Dosyanın üst kısmında 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] kısmını ö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'te sorgu oluşturmasına izin vermek için Oturum aç'ı tıklayın.
3. Arama kutusuna "test" kelimesi gibi bir sorgu girin ve Enter tuşuna basın. Sayfada, sorgu sonuçları ile birlikte sonuçlar arasında gezinmek için yönler ve sayfalara ayırma kontrolleri gösterilmelidir.

Kodu inceleme

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

Widget'ı yükleme

Widget ve ilgili kitaplıklar iki aşamada yüklenir. İlk olarak bootstrap betiği 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>

İkincisi, onLoad geri çağırma işlevi, komut dosyası hazır olduğunda çağrılır. Ardından Google API istemcisini, Google ile Giriş'i 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)
}

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

Yetkilendirmeyi işleme

Kullanıcılar, uygulamanın kendi adlarına sorgu göndermesine izin vermelidir. Widget, kullanıcıları yetkilendirmeye yönlendirebilse de yetkilendirmeyi kendiniz yaparak daha iyi bir kullanıcı deneyimi sağlayabilirsiniz.

Uygulama, arama arayüzünde 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ünü oluşturma

Arama widget'ı, arama girişi ve arama sonuçlarını tutmak için az miktarda HTML biçimlendirmesi 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şlatma sırasında giriş ve kapsayıcı öğelerine başlatılır ve 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ğitimi başarıyla tamamladınız. Temizleme talimatları için devam edin.

Önceki Sonraki