1 - .NET ile web sitesine arama eklemeye genel bakış

Bu öğretici, kitap kataloğunda arama yapmak için bir web sitesi oluşturur ve ardından web sitesini bir Azure Statik Web Uygulamasına dağıtır.

Ö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.

Screenshot of the sample app in a browser window.

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ğıdakileri 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 .NET İşlev uygulaması (iş katmanı) - .NET SDK kullanarak Azure AI Arama API'sini çağırır /search-website-functions-v4/api
Toplu ekleme .NET dosyasını kullanarak dizini oluşturun ve bu dosyaya belge ekleyin. /search-website-functions-v4/bulk-insert

Geliştirme ortamınızı ayarlama

Yerel geliştirme ortamınız için aşağıdakileri yükleyin.

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. Web uygulamaları, 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 Azure Static Web Apps çatallanmış örneğinizdeki koddan okur.

  1. 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.

  2. 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-dotnet-samples
    
  3. Aynı Bash terminalinde, bu web sitesi arama örneği için çatallanmış deponuza gidin:

    cd azure-search-dotnet-samples
    
  4. Ç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

  1. Visual Studio Code'da Etkinlik çubuğunu açın ve Azure simgesini seçin.

  2. Henüz oturum açmadıysanız Azure'da oturum açın.

  3. Kaynaklar bölümünde Ekle ()+ öğesini ve ardından Kaynak Grubu Oluştur'u seçin.

    Screenshot of Visual Studio Code, in Azure explorer, showing **Create Resource Group** option.

  4. Gibi cognitive-search-demo-rgbir kaynak grubu adı girin.

  5. 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

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.

Sonraki adımlar