Aracılığıyla paylaş


1. Adım - .NET ile statik bir web uygulamasına arama eklemeye genel bakış

Bu öğretici, bir kitap kataloğunda arama yapıp web sitesini bir Azure Statik Web Uygulamasına dağıtan bir web sitesi oluşturur.

Örnek ne yapar?

Bu örnek web sitesi 10.000 kitaplık bir kataloğa erişim sağlar. Arama çubuğuna metin girerek katalogda arama yapabilirsiniz. Siz metin girerken, web sitesi metni otomatik olarak tamamlarken arama dizininin öneri özelliğini kullanır. Sorgu tamamlandığında, web sitesi ayrıntıların bir bölümünü içeren kitap listesini görüntüler. Kitabın arama dizininde depolanan tüm ayrıntıları görmek için bir kitap seçebilirsiniz.

Tarayıcı penceresindeki örnek uygulamanın ekran görüntüsü.

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 Purpose GitHub
Depo
Konum
client Arama ile kitapları görüntülemek için React uygulaması (sunu katmanı). Azure İşlevi uygulamasını çağırır. /azure-search-static-web-app/client
api Azure .NET İşlev uygulaması (iş katmanı) - .NET SDK kullanarak Azure AI Arama API'sini çağırır /azure-search-static-web-app/api
toplu ekleme Dizini oluşturmak ve buna belge eklemek için .NET projesi. /azure-search-static-web-app/bulk-insert

Geliştirme ortamınızı ayarlama

Hizmetleri oluşturun ve yerel geliştirme ortamınız için aşağıdaki yazılımı yükleyin.

Bu öğretici, Azure İşlevi API'sini yerel olarak çalıştırmaz. Yerel olarak çalıştırmak istiyorsanız azure-functions-core-tools'u yükleyin.

Git ile arama örneğini çatallama ve kopyalama

Statik Web Uygulamasını dağıtmak için örnek deponun çatalını oluşturmanız gerekir. Web tabanlı uygulamalar, derleme eylemlerine ve dağıtım içeriğine karar vermek için GitHub çatal konumunuzu kullanır. Statik Web App'te kod yürütme uzaktan gerçekleşir ve Azure Static Web Apps çatallanmış örneğinizdeki kodu okur.

  1. GitHub'da azure-search-static-web-app deposunu çatal yapın.

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

    cd azure-search-static-web-app
    
  4. Çatallanmış deponuzu açmak için Visual Studio Code komutunu code . kullanın. Belirtilmediği sürece kalan görevleri Visual Studio Code'dan gerçekleştirirsiniz.

    code .
    

Sonraki adımlar