Arama widget'ı, web uygulamaları için özelleştirilebilir bir arama arayüzü sağlar. Widget, Google Etiket Yöneticisi'ni kullanarak özellikler ve sayfalara ayırma gibi yaygın arama özelliklerini uygular ve etkinleştirir. Siz ayrıca arayüzün bölümlerini CSS ve JavaScript ile özelleştirebilirsiniz.
Widget'ın sunduğundan daha fazla esnekliğe ihtiyacınız varsa Sorgu API'si. Query API ile arama arayüzü oluşturma hakkında bilgi için Query API ile arama arayüzü oluşturma bölümüne bakın.
Arama arayüzü oluşturma
Arama arayüzünü oluşturmak için birkaç adım gerekir:
- Bir arama uygulamasını yapılandırma
- Uygulama için istemci kimliği oluşturma
- Arama kutusu ve sonuçlar için HTML işaretlemesi ekleme
- Sayfada widget'ı yükle
- Widget'ı başlatma
Bir arama uygulamasını yapılandırma
Her arama arayüzünün Yönetici Konsolu. Arama uygulaması, DMAIC ve PDCA gibi sorguyla ilgili bilgileri (ör. veri kaynakları, özellikler ve ve arama kalitesi ayarlarına gidin.
Bir arama uygulaması oluşturmak için Özel arama deneyimi oluşturun.
Uygulama için istemci kimliği oluşturma
Bu adımların yanı sıra Google Cloud Search API'ye erişimi yapılandırın, ayrıca web uygulaması için de bir istemci kimliği oluşturmalısınız.
Projeyi yapılandırdığınızda:
- Web tarayıcısı istemci türünü seçin
- Kaynak URI'yi sağlayın en iyi yoludur.
- Oluşturulan istemci kimliğini not edin. Aşağıdaki işlemler için istemci kimliğiniz gerekir: sonraki adımları tamamlayın. İstemci gizli anahtarı widget'ını tıklayın.
Daha fazla bilgi için bkz. İstemci Tarafı Web Uygulaması için OAuth 2.0.
HTML işaretlemesi ekleyin
Widget'ın çalışması için az miktarda HTML gerekir. Siz şunları sağlamalıdır:
- Arama kutusu için
input
öğesi. - Öneri pop-up'ının bağlanacağı öğe.
- Arama sonuçlarını içerecek öğe.
- (İsteğe bağlı) Özellik kontrollerini içerecek bir öğe sağlayın.
Aşağıdaki HTML snippet'i bir arama widget'ına ilişkin HTML'yi gösterir. Burada
bağlanacak öğeler id
özellikleriyle tanımlanır:
Widget'ı yükleyin
Widget, bir yükleyici komut dosyası aracılığıyla dinamik olarak yüklenir. Dahil edilecek
<script>
etiketini aşağıda gösterildiği gibi kullanın:
Komut dosyası etiketinde onload
geri çağırması sağlamanız gerekir. Fonksiyona
hazır olduğunu anlayabilirsiniz. Yükleyici hazır olduğunda widget'ı yüklemeye devam edin
gapi.load()
çağrısı yaparak API istemcisi, Google ile Oturum Açma ve Cloud Search modüllerini yükleyebilirsiniz.
initializeApp()
işlevi, tüm modüller tamamlandıktan sonra çağrılır
yüklendi.
Widget'ı başlatma
Öncelikle, şunu çağırarak istemci kitaplığını başlatın:
Oluşturulan istemci kimliğinizle gapi.client.init()
veya gapi.auth2.init()
ve https://www.googleapis.com/auth/cloud_search.query
kapsamı. Sonra,
gapi.cloudsearch.widget.resultscontainer.Builder
ve
Widget'ı yapılandırmak için gapi.cloudsearch.widget.searchbox.Builder
sınıf
HTML öğelerinize bağlamanız gerekir.
Aşağıdaki örnekte widget'ın nasıl başlatılacağı gösterilmektedir:
Yukarıdaki örnekte, şu şekilde tanımlanan yapılandırma için iki değişkene başvurulur:
Oturum açma deneyimini özelleştirme
Widget varsayılan olarak kullanıcılardan oturum açmalarını ve uygulamayı yetkilendirmelerini ister. ne kadar kısa bir süre olduğunu gösterir. Tekliflerinizi otomatikleştirmek ve optimize etmek için Web Siteleri İçin Google ile Oturum Açma .
Kullanıcıları doğrudan yetkilendirin
Google ile Oturum Aç özelliğini kullanarak
oturum açın veya kullanıcıların oturumlarını kapatın. Örneğin,
örneğin, isSignedIn
oturum açma değişikliklerini takip etmek için
GoogleAuth.signIn()
kullanılır
oturum açma işlemini bir düğmeden başlatma yöntemi
tıklayın:
Daha fazla bilgi için Google ile oturum açma başlıklı makaleyi inceleyin.
Kullanıcıların otomatik olarak oturum açmasını sağlayın
kuruluşunuzdaki kullanıcılar adına kullanmanız gerekir. Bu teknik Cloud Identity Aware Proxy kullanıyorsanız koruyabilirsiniz.
Daha fazla bilgi için Google ile Oturum Açma'yı BT Uygulamalarıyla kullanma başlıklı makaleye göz atın.
Arayüzü özelleştirme
Arama arayüzünün görünümünü bir kombinasyon görebilirsiniz:
- Stilleri CSS ile geçersiz kılma
- Öğeleri adaptörle süsleyin
- Adaptörle özel öğeler oluşturma
Stilleri CSS ile geçersiz kılma
Arama widget'ı, stil önerisi ve sonuç öğelerini oluşturmak için kendi CSS'siyle birlikte gelir ve sayfalara ayırma denetimlerini içerir. Bu öğeleri gerektiği gibi yeniden biçimlendirebilirsiniz.
Arama widget'ı, yükleme sırasında varsayılan stil sayfasını dinamik bir şekilde yükler. Bu durum, uygulama stil sayfaları yüklendikten sonra oluyor ve öncelik artıyor. gözden geçireceğiz. Kendi stillerinizin varsayılan stillere göre öncelikli olmasını sağlamak için varsayılan kuralların kesinliğini artırmak için üst öğe seçicileri kullanın.
Örneğin, aşağıdaki kuralın
Dokümanda link
veya style
etiketi var.
.cloudsearch_suggestion_container {
font-size: 14px;
}
Bunun yerine, kuralı üst kapsayıcının kimliği veya sınıfıyla niteleyin. beyan edersiniz.
#suggestions_anchor .cloudsearch_suggestion_container {
font-size: 14px;
}
Widget tarafından oluşturulan destek sınıflarının listesi ve örnek HTML için Desteklenen CSS sınıfları referansı.
Öğeleri adaptörle süsleyin
Bir öğeyi oluşturma işleminden önce süslemek için bir öğe oluşturup yeniden düzenleyin.
Aşağıdaki gibi süsleme yöntemlerinden birini uygulayan adaptör:
decorateSuggestionElement
veya decorateSearchResultElement.
Örneğin, aşağıdaki bağdaştırıcılar öneriye özel bir sınıf ekler ve öğeleri dahil eder.
Widget'ı başlatırken adaptörü kaydetmek için setAdapter()
ilgili Builder
sınıfının yöntemini değiştirin:
Dekoratörler, kapsayıcı öğenin özelliklerini değiştirebileceği gibi, alt öğelere karşılık gelir. Dekorasyon sırasında alt öğeler eklenebilir veya kaldırılabilir. Ancak öğelerde yapısal değişiklikler yapıyorsanız, doğrudan süslemeyi tercih edebilir.
Adaptörle özel öğeler oluşturma
Bir öneri, özellik kapsayıcı veya arama sonucu için özel öğe oluşturmak isterseniz:
kullanan bir bağdaştırıcı oluşturup kaydedin
createSuggestionElement
createFacetResultElement
,
veya createSearchResultElement
özümsemesini sağlamalısınız.
Aşağıdaki bağdaştırıcılar, özel öneri ve arama sonuçları oluşturmayı gösterir
öğeleri için HTML <template>
etiketleri kullanır.
Widget'ı başlatırken bağdaştırıcıyı kaydetmek için setAdapter()
ilgili Builder
sınıfının yöntemini değiştirin:
createFacetResultElement
ile özel özellik öğeleri oluşturma
çeşitli kısıtlamalara tabidir:
cloudsearch_facet_bucket_clickable
CSS sınıfını şuraya eklemelisiniz: öğe kullanıcılarının bir paketi açmak/kapatmak için tıkladığı öğe.- Her paketi CSS ile içeren bir öğe içine sarmalamanız gerekir
cloudsearch_facet_bucket_container
sınıfı. - Paketleri şurada göründüklerinden farklı bir sırada oluşturamazsınız: tıklayın.
Örneğin, aşağıdaki snippet, bunun yerine bağlantılar kullanarak façetalar oluşturur onay kutusu işaretini kaldırın.
Arama davranışını özelleştirin
Arama uygulaması ayarları, varsayılan değeri temsil eder statiktir. Dinamik arama ağı reklamlarını uygulamak için filtreleri veya özellikleri (ör. kullanıcıların veri kaynakları arasında geçiş yapmalarına izin verme) arama isteğine müdahale ederek arama uygulaması ayarlarını geçersiz kılma bunu kullanabilirsiniz.
Adaptör
interceptSearchRequest
isteklerinde değişiklik yapmak için
search API
göz önünde bulundurmalısınız.
Örneğin, aşağıdaki bağdaştırıcı, sorguları kısıtlama isteklerine müdahale eder kullanıcı tarafından seçilen kaynağa
Widget'ı başlatırken bağdaştırıcıyı kaydetmek için
setAdapter()
ResultsContainer
oluştururken
Aşağıdaki HTML, şuna göre filtreleme için bir seçim kutusu görüntülemek üzere kullanılır: kaynaklar:
Aşağıdaki kod değişikliği izler, seçimi ayarlar ve Gerekirse sorguyu yeniden yürütür.
Ayrıca, RACI matrisinde
interceptSearchResponse
girin.
API sürümünü sabitleyin
Widget varsayılan olarak API'nin en son kararlı sürümünü kullanır. Bir
belirli bir sürüm için cloudsearch.config/apiVersion
yapılandırma parametresini ayarlayın
tercih ettiğiniz sürüme güncelleyin.
Ayarlanmadan bırakılırsa veya geçersiz bir değere ayarlanırsa API sürümü varsayılan olarak 1.0 olur.
Widget sürümünü sabitleme
Arama arayüzlerinde beklenmedik değişiklikler önlemek için,
Gösterilen cloudsearch.config/clientVersion
yapılandırma parametresi:
gapi.config.update('cloudsearch.config/clientVersion', 1.1);
Ayarlanmadan bırakılırsa veya geçersiz bir değere ayarlanırsa widget sürümü varsayılan olarak 1.0 olur.
Arama arayüzünün güvenliğini sağlayın
Arama sonuçları son derece hassas bilgiler içeriyor. En iyi uygulamaları takip edin güvenlik önlemlerinden oluşan tıklama korsanlığı saldırılarıdır.
Daha fazla bilgi için OWASP Rehber Projesi'ne bakın.
Hata ayıklamayı etkinleştir
interceptSearchRequest
kullanın
seçeneğini tıklayın. Örneğin:
if (!request.requestOptions) {
// Make sure requestOptions is populated
request.requestOptions = {};
}
// Enable debugging
request.requestOptions.debugOptions = {enableDebugging: true}
return request;