1 - Web sitesine arama eklemeye genel bakış
Bu Azure AI Search öğreticisinde, kitap kataloğunu arayan bir web uygulaması oluşturun ve web sitesini bir Azure Static Web Apps kaynağına dağıtın.
Bu öğretici, çok yönlü gezinti, tür başlığı ve sayfalandırma gibi arama etkileşimlerini içeren bir ön uç istemci uygulaması oluşturmak isteyen JavaScript geliştiricilerine yöneliktir. Ayrıca arka uçtaki dizin oluşturma ve sorgu iş akışları için Azure AI Search'e yapılan çağrılar için JavaScript için Azure SDK'daki kitaplığı gösterir @azure/search-documents .
Örnek ne yapar?
Bu örnek web sitesi 10.000 kitaplık bir kataloğa erişim sağlar. Kullanıcı, arama çubuğuna metin girerek katalogda arama yapabilir. Kullanıcı metin girerken web sitesi, metni tamamlamak için arama dizininin öneri özelliğini kullanır. Sorgu tamamlandıktan sonra, kitap listesi ayrıntıların bir bölümüyle birlikte görüntülenir. Kullanıcı, kitabın arama dizininde depolanan tüm ayrıntıları görmek için bir kitap seçebilir.
Arama deneyimi şunları içerir:
- Arama – uygulama için arama işlevi sağlar.
- Öneri – kullanıcı arama çubuğuna yazarken öneriler sağlar.
- Modeller ve filtreler : Yazara veya dile göre filtreleyen modelli bir gezinti yapısı sağlar.
- Sayfalandırılmış sonuçlar - Sonuçlar arasında gezinmek için sayfalama denetimleri sağlar.
- Belge Arama – Ayrıntılar sayfasının tüm içeriğini almak için bir belgeyi kimlikle arar.
Örnek nasıl düzenlenmiştir?
Örnek kod aşağıdaki bileşenleri içerir:
| Uygulama | Amaç | GitHub Depo Konum |
|---|---|---|
| İstemci | Arama ile kitapları görüntülemek için React uygulaması (sunu katmanı). Azure İşlevi uygulamasını çağırır. | /search-website-functions-v4/client |
| Sunucu | Azure İşlevi uygulaması (iş katmanı) - JavaScript SDK'sını kullanarak Azure AI Arama API'sini çağırır | /search-website-functions-v4/api |
| Toplu ekleme | Dizini oluşturmak ve buna belge eklemek için JavaScript dosyası. | /search-website-functions-v4/bulk-insert |
Geliştirme ortamınızı ayarlama
Aşağıdaki yazılımı yerel geliştirme ortamınıza yükleyin.
-
- Desteklenen dil sürümleri listesinden en son çalışma zamanı ve sürümü seçin.
- Yerel bilgisayarınızda node.js'nin farklı bir sürümü yüklüyse Node Sürüm Yöneticisi'ni (
nvm) veya Docker kapsayıcısı kullanmayı göz önünde bulundurun.
Visual Studio Code ve aşağıdaki uzantılar
- Azure Statik Web Uygulaması
- Komut satırı işlemleri için tümleşik terminali kullanın.
İsteğe bağlı:
- Bu öğretici, Azure İşlevi API'sini yerel olarak çalıştırmaz. Yerel olarak çalıştırmayı planlıyorsanız aşağıdaki bash komutuyla azure-functions-core-tools uygulamasını genel olarak yüklemeniz gerekir:
npm install -g azure-functions-core-tools@4
Git ile arama örneğini çatallama ve kopyalama
Örnek deponun çatalını oluşturma, Statik Web Uygulaması'nı dağıtabilmek için kritik öneme sahiptir. Statik web uygulaması, kendi GitHub çatal konumunuza göre derleme eylemlerini ve dağıtım içeriğini belirler. Statik Web Uygulamasında kod yürütme uzaktır ve statik web uygulaması çatallanmış örneğinizdeki koddan okur.
GitHub'da örnek deponun çatalını oluşturun.
GitHub hesabınızla web tarayıcınızda çatal işlemini tamamlayın. Bu öğreticide, azure statik web uygulamasına dağıtımın bir parçası olarak çatalınız kullanılır.
Bash terminalinde çatallı örnek uygulamanızı yerel bilgisayarınıza indirin.
değerini GitHub diğer adınızla değiştirin
YOUR-GITHUB-ALIAS.git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-javascript-samplesAynı bash terminalinde, bu web sitesi arama örneği için çatallanmış deponuza gidin:
cd azure-search-javascript-samplesÇatallanmış deponuzu açmak için Visual Studio Code komutunu
code .kullanın. Kalan görevler belirtilmediği sürece Visual Studio Code'dan gerçekleştirilir.code .
Azure kaynaklarınız için kaynak grubu oluşturma
Visual Studio Code'da Etkinlik çubuğunu açın ve Azure simgesini seçin.
Henüz oturum açmadıysanız Azure'da oturum açın.
Kaynaklar bölümünde Ekle ()+ öğesini ve ardından Kaynak Grubu Oluştur'u seçin.
Gibi
cognitive-search-demo-rgbir kaynak grubu adı girin.Bir bölge girin:
- Node.js için öğesini seçin
West US 2. Bu, Azure İşlevi programlama modeli (PM) v4 önizlemesi için önerilen bölgedir. - C# ve Python için azure static web apps tarafından desteklenen şu bölgeleri öneririz:
West US 2, ,East US 2,West Europe,Central US,East Asia
- Node.js için öğesini seçin
Bu öğretici sırasında oluşturulan tüm kaynaklar için bu kaynak grubunu kullanın. Kaynak grubu, işiniz bittiğinde kaynakları silmek de dahil olmak üzere kaynakları yönetmeniz için bir mantıksal birim sağlar.