Öğretici: .NET SDK kullanarak Azure Bilişsel Arama'de ilk arama uygulamanızı oluşturma

Bu öğreticide, Azure Bilişsel Arama ve Visual Studio kullanarak arama dizininden sonuçları sorgulayan ve döndüren bir web uygulamasının nasıl oluşturulacağı gösterilmektedir.

Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

  • Geliştirme ortamı ayarlama
  • Model veri yapıları
  • Sorgu girişlerini toplamak ve sonuçları görüntülemek için bir web sayfası oluşturma
  • Arama yöntemi tanımlama
  • Uygulamayı test etme

Arama aramalarının ne kadar kolay olduğunu da öğreneceksiniz. Koddaki anahtar deyimleri aşağıdaki birkaç satırda kapsüllenir:

var options = new SearchOptions()
{
    // The Select option specifies fields for the result set
    options.Select.Add("HotelName");
    options.Select.Add("Description");
};

var searchResult = await _searchClient.SearchAsync<Hotel>(model.searchText, options).ConfigureAwait(false);
model.resultList = searchResult.Value.GetResults().ToList();

Yalnızca bir çağrı arama dizinini sorgular ve sonuçları döndürür.

*havuz* için arama

Genel Bakış

Bu öğreticide, verileri içeri aktarma hızlı başlangıcını adım adım ilerleyerek kendi arama hizmetinizde hızlı bir şekilde oluşturabileceğiniz hotels-sample-index kullanılmıştır. Dizin, her arama hizmetinde yerleşik veri kaynağı olarak kullanılabilen kurgusal otel verilerini içerir.

Bu öğreticideki ilk ders temel bir sorgu yapısı ve arama sayfası oluşturur. Bu sayfalama, modeller ve yazma deneyimi dahil olmak üzere sonraki derslerde geliştireceksiniz.

Kodun tamamlanmış bir sürümü aşağıdaki projede bulunabilir:

Ön koşullar

Projeyi GitHub'dan yükleme ve çalıştırma

Çalışan bir uygulamaya geçmek istiyorsanız, tamamlanmış kodu indirmek ve çalıştırmak için aşağıdaki adımları izleyin.

  1. GitHub'da örneği bulun: İlk uygulamayı oluşturun.

  2. Kök klasördeKod'u seçin ve ardından projenin özel yerel kopyasını oluşturmak için Kopyala veya ZIP İndir'i seçin.

  3. Visual Studio'yu kullanarak temel arama sayfasına ("1-basic-search-page") gidin ve çözümü açın ve programı derlemek ve çalıştırmak için Hata ayıklamadan başlat'ı seçin (veya F5 tuşuna basın).

  4. Bu bir otel dizinidir, bu nedenle otel aramak için kullanabileceğiniz bazı sözcükler yazın (örneğin, "wifi", "görünüm", "bar", "park") . Sonuçları inceleyin.

    *wifi* için arama

Daha gelişmiş aramalar için temel bileşenler bu uygulamada yer alır. Arama geliştirme konusunda yeniyseniz iş akışını öğrenmek için bu uygulamayı adım adım yeniden oluşturabilirsiniz. Aşağıdaki bölümlerde nasıl yapıldığını görebilirsiniz.

Geliştirme ortamı ayarlama

Bu projeyi sıfırdan oluşturmak ve böylece Azure Bilişsel Arama kavramlarını pekiştirmek için bir Visual Studio projesiyle başlayın.

  1. Visual Studio'da Yeni>Proje'yi ve ardından Web Uygulaması(Model-View-Controller) ASP.NET Core seçin.

    Bulut projesi oluşturma

  2. Projeye "FirstSearchApp" gibi bir ad verin ve konumu ayarlayın. İleri’yi seçin.

  3. Hedef çerçeve, kimlik doğrulama türü ve HTTPS için varsayılanları kabul edin. Oluştur’u seçin.

  4. İstemci kitaplığını yükleyin. Araçlar>NuGet Paket Yöneticisi>Çözüm için NuGet Paketlerini Yönet... bölümünde Gözat'ı seçin ve "azure.search.documents" araması yapın. Lisans sözleşmelerini ve bağımlılıklarını kabul ederek Azure.Search.Documents'ı (sürüm 11 veya üzeri) yükleyin.

    Azure kitaplıkları eklemek için NuGet kullanma

Bu adımda, oteller örnek dizinini sağlayan arama hizmetine bağlanmak için uç noktayı ve erişim anahtarını ayarlayın.

  1. appsettings.json dosyasını açın ve varsayılan satırları arama hizmeti URL'si (biçimindehttps://<service-name>.search.windows.net) ve arama hizmetinizin yönetici veya sorgu API anahtarıyla değiştirin. Dizin oluşturmanız veya güncelleştirmeniz gerekmeyen bu öğretici için sorgu anahtarını kullanabilirsiniz.

    {
        "SearchServiceUri": "<YOUR-SEARCH-SERVICE-URI>",
        "SearchServiceQueryApiKey": "<YOUR-SEARCH-SERVICE-API-KEY>"
    }
    
  2. Çözüm Gezgini dosyasını seçin ve Özellikler'de Çıkış Dizinine Kopyala ayarını Daha yeniyse Kopyala olarak değiştirin.

    Uygulama ayarlarını çıkışa kopyalama

Model veri yapıları

Modeller (C# sınıfları), MVC (model, görünüm, denetleyici) mimarisini kullanarak istemci (görünüm), sunucu (denetleyici) ve Azure bulutu arasındaki verileri iletmek için kullanılır. Bu modeller genellikle erişilen verilerin yapısını yansıtır.

Bu adımda, arama dizininin veri yapılarını ve görüntüleme/denetleyici iletişimlerinde kullanılan arama dizesini modelleyeceksiniz. Oteller dizininde her otelin birçok odası ve her otelin çok parçalı adresi vardır. Bir otelin tam gösterimi, hiyerarşik ve iç içe veri yapısıdır. Her bileşeni oluşturmak için üç sınıf gerekir.

Otel, Adres ve Oda sınıfları, Azure Bilişsel Arama önemli bir özelliği olan karmaşık türler olarak bilinir. Karmaşık türler sınıfların ve alt sınıfların çok daha derin düzeylerinde olabilir ve basit türleri (yalnızca ilkel üyeleri içeren bir sınıf) kullanmaktan çok daha karmaşık veri yapılarının temsil edilmesine olanak tanır.

  1. Çözüm Gezgini'da Modeller>Yeni Öğe Ekle'ye> sağ tıklayın.

  2. Sınıf'ı seçin ve öğeyi Hotel.cs olarak adlandırın. Hotel.cs dosyasının tüm içeriğini aşağıdaki kodla değiştirin. Sınıfın Adres ve Oda üyelerine dikkat edin; bu alanlar sınıfların kendileridir, bu nedenle bunlar için modellere de ihtiyacınız olacaktır.

    using Azure.Search.Documents.Indexes;
    using Azure.Search.Documents.Indexes.Models;
    using Microsoft.Spatial;
    using System;
    using System.Text.Json.Serialization;
    
    namespace FirstAzureSearchApp.Models
    {
        public partial class Hotel
        {
            [SimpleField(IsFilterable = true, IsKey = true)]
            public string HotelId { get; set; }
    
            [SearchableField(IsSortable = true)]
            public string HotelName { get; set; }
    
            [SearchableField(AnalyzerName = LexicalAnalyzerName.Values.EnLucene)]
            public string Description { get; set; }
    
            [SearchableField(AnalyzerName = LexicalAnalyzerName.Values.FrLucene)]
            [JsonPropertyName("Description_fr")]
            public string DescriptionFr { get; set; }
    
            [SearchableField(IsFilterable = true, IsSortable = true, IsFacetable = true)]
            public string Category { get; set; }
    
            [SearchableField(IsFilterable = true, IsFacetable = true)]
            public string[] Tags { get; set; }
    
            [SimpleField(IsFilterable = true, IsSortable = true, IsFacetable = true)]
            public bool? ParkingIncluded { get; set; }
    
            [SimpleField(IsFilterable = true, IsSortable = true, IsFacetable = true)]
            public DateTimeOffset? LastRenovationDate { get; set; }
    
            [SimpleField(IsFilterable = true, IsSortable = true, IsFacetable = true)]
            public double? Rating { get; set; }
    
            public Address Address { get; set; }
    
            [SimpleField(IsFilterable = true, IsSortable = true)]
            public GeographyPoint Location { get; set; }
    
            public Room[] Rooms { get; set; }
        }
    }
    
  3. Address.cs dosyasını adlandırarak Address sınıfı için model oluşturma işlemini yineleyin. İçeriği aşağıdakilerle değiştirin.

    using Azure.Search.Documents.Indexes;
    
    namespace FirstAzureSearchApp.Models
    {
        public partial class Address
        {
            [SearchableField]
            public string StreetAddress { get; set; }
    
            [SearchableField(IsFilterable = true, IsSortable = true, IsFacetable = true)]
            public string City { get; set; }
    
            [SearchableField(IsFilterable = true, IsSortable = true, IsFacetable = true)]
            public string StateProvince { get; set; }
    
            [SearchableField(IsFilterable = true, IsSortable = true, IsFacetable = true)]
            public string PostalCode { get; set; }
    
            [SearchableField(IsFilterable = true, IsSortable = true, IsFacetable = true)]
            public string Country { get; set; }
        }
    }
    
  4. Ve yine aynı işlemi izleyerek Room sınıfını oluşturun ve Room.cs dosyasını adlandırın.

    using Azure.Search.Documents.Indexes;
    using Azure.Search.Documents.Indexes.Models;
    using System.Text.Json.Serialization;
    
    namespace FirstAzureSearchApp.Models
    {
        public partial class Room
        {
            [SearchableField(AnalyzerName = LexicalAnalyzerName.Values.EnMicrosoft)]
            public string Description { get; set; }
    
            [SearchableField(AnalyzerName = LexicalAnalyzerName.Values.FrMicrosoft)]
            [JsonPropertyName("Description_fr")]
            public string DescriptionFr { get; set; }
    
            [SearchableField(IsFilterable = true, IsFacetable = true)]
            public string Type { get; set; }
    
            [SimpleField(IsFilterable = true, IsFacetable = true)]
            public double? BaseRate { get; set; }
    
            [SearchableField(IsFilterable = true, IsFacetable = true)]
            public string BedOptions { get; set; }
    
            [SimpleField(IsFilterable = true, IsFacetable = true)]
            public int SleepsCount { get; set; }
    
            [SimpleField(IsFilterable = true, IsFacetable = true)]
            public bool? SmokingAllowed { get; set; }
    
            [SearchableField(IsFilterable = true, IsFacetable = true)]
            public string[] Tags { get; set; }
        }
    }
    
  5. Bu öğreticide oluşturacağınız son model SearchData adlı bir sınıftır ve kullanıcının girişini (searchText) ve aramanın çıkışını (resultList) temsil eder. Bu tür arama sonuçlarıyla tam olarak eşleştiğinden ve bu başvuruyu görünüme geçirmeniz gerektiğinden, çıkışın türü çok önemlidir, SearchResults<Hotel>. Varsayılan şablonu aşağıdaki kodla değiştirin.

    using Azure.Search.Documents.Models;
    
    namespace FirstAzureSearchApp.Models
    {
        public class SearchData
        {
            // The text to search for.
            public string searchText { get; set; }
    
            // The list of results.
            public SearchResults<Hotel> resultList;
        }
    }
    

Web sayfası oluşturma

Proje şablonları , Görünümler klasöründe bulunan bir dizi istemci görünümüyle birlikte gelir. Tam görünümler, kullandığınız Core .NET sürümüne bağlıdır (bu örnekte 3.1 kullanılır). Bu öğreticide, Index.cshtml dosyasını arama sayfasının öğelerini içerecek şekilde değiştireceksiniz.

Index.cshtml içeriğini tamamen silin ve aşağıdaki adımlarda dosyayı yeniden derleyin.

  1. Öğreticide görünümde iki küçük resim kullanılır: Azure logosu ve arama büyüteci simgesi (azure-logo.png ve search.png). GitHub projesindeki görüntüleri projenizdeki wwwroot/images klasörüne kopyalayın.

  2. Index.cshtml dosyasının ilk satırı, istemci (görünüm) ile daha önce oluşturulan SearchData modeli olan sunucu (denetleyici) arasında veri iletmek için kullanılan modele başvurmalıdır. Bu satırı Index.cshtml dosyasına ekleyin.

    @model FirstAzureSearchApp.Models.SearchData
    
  3. Görünüm için başlık girmek standart bir uygulamadır, bu nedenle sonraki satırlar şu şekilde olmalıdır:

    @{
        ViewData["Title"] = "Home Page";
    }
    
  4. Başlığın ardından, kısa süre içinde oluşturacağınız BIR HTML stil sayfasına başvuru girin.

    <head>
        <link rel="stylesheet" href="~/css/hotels.css" />
    </head>
    
  5. Görünümün gövdesi iki kullanım örneğini işler. İlk olarak, herhangi bir arama metni girilmeden önce ilk kullanımda boş bir sayfa sağlaması gerekir. İkinci olarak, yinelenen sorgular için arama metin kutusuna ek olarak sonuçları işlemesi gerekir.

    Her iki durumu da işlemek için görünüme sağlanan modelin null olup olmadığını denetlemeniz gerekir. Null model, ilk kullanım örneğini (uygulamanın ilk çalıştırması) gösterir. Index.cshtml dosyasına aşağıdakileri ekleyin ve açıklamaları okuyun.

    <body>
    <h1 class="sampleTitle">
        <img src="~/images/azure-logo.png" width="80" />
        Hotels Search
    </h1>
    
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        // Display the search text box, with the search icon to the right of it.
        <div class="searchBoxForm">
            @Html.TextBoxFor(m => m.searchText, new { @class = "searchBox" }) <input class="searchBoxSubmit" type="submit" value="">
        </div>
    
        @if (Model != null)
        {
            // Show the result count.
            <p class="sampleText">
                @Model.resultList.TotalCount Results
            </p>
    
            var results = Model.resultList.GetResults().ToList();
    
            @for (var i = 0; i < results.Count; i++)
            {
                // Display the hotel name and description.
                @Html.TextAreaFor(m => results[i].Document.HotelName, new { @class = "box1" })
                @Html.TextArea($"desc{i}", results[i].Document.Description, new { @class = "box2" })
            }
        }
    }
    </body>
    
  6. Stil sayfasını ekleyin. Visual Studio'da,Dosya Yeni>Dosya'da>Stil Sayfası(Genel vurgulanmış olarak) öğesini seçin.

    Varsayılan kodu aşağıdakiyle değiştirin. Bu dosyaya daha ayrıntılı olarak girmeyeceğiz, stiller standart HTML'tir.

    textarea.box1 {
        width: 648px;
        height: 30px;
        border: none;
        background-color: azure;
        font-size: 14pt;
        color: blue;
        padding-left: 5px;
    }
    
    textarea.box2 {
        width: 648px;
        height: 100px;
        border: none;
        background-color: azure;
        font-size: 12pt;
        padding-left: 5px;
        margin-bottom: 24px;
    }
    
    .sampleTitle {
        font: 32px/normal 'Segoe UI Light',Arial,Helvetica,Sans-Serif;
        margin: 20px 0;
        font-size: 32px;
        text-align: left;
    }
    
    .sampleText {
        font: 16px/bold 'Segoe UI Light',Arial,Helvetica,Sans-Serif;
        margin: 20px 0;
        font-size: 14px;
        text-align: left;
        height: 30px;
    }
    
    .searchBoxForm {
        width: 648px;
        box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 2px 4px 0 rgba(0,0,0,.16);
        background-color: #fff;
        display: inline-block;
        border-collapse: collapse;
        border-spacing: 0;
        list-style: none;
        color: #666;
    }
    
    .searchBox {
        width: 568px;
        font-size: 16px;
        margin: 5px 0 1px 20px;
        padding: 0 10px 0 0;
        border: 0;
        max-height: 30px;
        outline: none;
        box-sizing: content-box;
        height: 35px;
        vertical-align: top;
    }
    
    .searchBoxSubmit {
        background-color: #fff;
        border-color: #fff;
        background-image: url(/images/search.png);
        background-repeat: no-repeat;
        height: 20px;
        width: 20px;
        text-indent: -99em;
        border-width: 0;
        border-style: solid;
        margin: 10px;
        outline: 0;
    }
    
  7. Stylesheet dosyasını hotels.css olarak wwwroot/css klasörüne ve varsayılan site.css dosyasına kaydedin.

Bu bizim görüşümüzü tamamlar. Bu noktada hem modeller hem de görünümler tamamlanır. Her şeyi birbirine bağlamak için yalnızca denetleyici bırakılır.

Yöntemleri tanımlama

Bu adımda , Giriş Denetleyicisi'nin içeriğine geçin.

  1. HomeController.cs dosyasını açın ve using deyimlerini aşağıdakiyle değiştirin.

    using Azure;
    using Azure.Search.Documents;
    using Azure.Search.Documents.Indexes;
    using FirstAzureSearchApp.Models;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.Extensions.Configuration;
    using System;
    using System.Diagnostics;
    using System.Linq;
    using System.Threading.Tasks;
    

Dizin yöntemleri ekleme

MVC uygulamasında Index() yöntemi, herhangi bir denetleyici için varsayılan eylem yöntemidir. Dizin HTML sayfasını açar. Parametre içermeyen varsayılan yöntem, bu öğreticide uygulama başlatma kullanım örneği için kullanılır: boş bir arama sayfası işleme.

Bu bölümde, ikinci bir kullanım örneğini desteklemek için yöntemini genişleteceğiz: kullanıcı arama metni girdiğinde sayfayı işleme. Bu durumu desteklemek için dizin yöntemi bir modeli parametre olarak alacak şekilde genişletilir.

  1. Aşağıdaki yöntemi, varsayılan Index() yönteminden sonra ekleyin.

        [HttpPost]
        public async Task<ActionResult> Index(SearchData model)
        {
            try
            {
                // Ensure the search string is valid.
                if (model.searchText == null)
                {
                    model.searchText = "";
                }
    
                // Make the Azure Cognitive Search call.
                await RunQueryAsync(model);
            }
    
            catch
            {
                return View("Error", new ErrorViewModel { RequestId = "1" });
            }
            return View(model);
        }
    

    yönteminin zaman uyumsuz bildirimine ve RunQueryAsync'eawait çağrısına dikkat edin. Bu anahtar sözcükler zaman uyumsuz çağrılar yapmayı dikkate alır ve bu nedenle sunucuda iş parçacıklarını engellemekten kaçının.

    Catch bloğu, oluşturulan varsayılan hata modelini kullanır.

Hata işlemeye ve diğer varsayılan görünümlere ve yöntemlere dikkat edin

Kullandığınız .NET Core sürümüne bağlı olarak, biraz farklı bir varsayılan görünüm kümesi oluşturulur. .NET Core 3.1 için varsayılan görünümler Dizin, Gizlilik ve Hata'dır. Uygulamayı çalıştırırken bu varsayılan sayfaları görüntüleyebilir ve bunların denetleyicide nasıl işlendiğini inceleyebilirsiniz.

Bu öğreticinin ilerleyen bölümlerinde Hata görünümünü test edeceğiz.

GitHub örneğinde kullanılmayan görünümler ve ilişkili eylemleri silinir.

RunQueryAsync yöntemini ekleme

Azure Bilişsel Arama çağrısı RunQueryAsync yöntemimizde kapsüllenmiş.

  1. İlk olarak Azure hizmetini ayarlamak için bazı statik değişkenler ve bunları başlatmak için bir çağrı ekleyin.

        private static SearchClient _searchClient;
        private static SearchIndexClient _indexClient;
        private static IConfigurationBuilder _builder;
        private static IConfigurationRoot _configuration;
    
        private void InitSearch()
        {
            // Create a configuration using appsettings.json
            _builder = new ConfigurationBuilder().AddJsonFile("appsettings.json");
            _configuration = _builder.Build();
    
            // Read the values from appsettings.json
            string searchServiceUri = _configuration["SearchServiceUri"];
            string queryApiKey = _configuration["SearchServiceQueryApiKey"];
    
            // Create a service and index client.
            _indexClient = new SearchIndexClient(new Uri(searchServiceUri), new AzureKeyCredential(queryApiKey));
            _searchClient = _indexClient.GetSearchClient("hotels");
        }
    
  2. Şimdi RunQueryAsync yönteminin kendisini ekleyin.

    private async Task<ActionResult> RunQueryAsync(SearchData model)
    {
        InitSearch();
    
        var options = new SearchOptions() 
        { 
            IncludeTotalCount = true
        };
    
        // Enter Hotel property names into this list so only these values will be returned.
        // If Select is empty, all values will be returned, which can be inefficient.
        options.Select.Add("HotelName");
        options.Select.Add("Description");
    
        // For efficiency, the search call should be asynchronous, so use SearchAsync rather than Search.
        model.resultList = await _searchClient.SearchAsync<Hotel>(model.searchText, options).ConfigureAwait(false);          
    
        // Display the results.
        return View("Index", model);
    }
    

    Bu yöntemde önce Azure yapılandırmamızın başlatıldığından emin olun, ardından bazı arama seçeneklerini ayarlayın. Seç seçeneği, sonuçlarda döndürülecek alanları belirtir ve bu nedenle otel sınıfındaki özellik adlarıyla eşleştir. Select değerini atlarsanız, tüm gizlenmeyen alanlar döndürülür ve bu da tüm olası alanların yalnızca bir alt kümesiyle ilgileniyorsanız verimsiz olabilir.

    Arama için zaman uyumsuz çağrı, isteği ( searchText olarak modellenir) ve yanıtı ( searchResult olarak modellenir) formüle eder. Bu kodun hatalarını ayıklarsanız, model.resultList içeriğini incelemeniz gerekiyorsa SearchResult sınıfı bir kesme noktası ayarlamak için iyi bir adaydır. Bunun sezgisel olduğunu, yalnızca istediğiniz verileri sağladığını ve başka bir şey sağlamadığını fark etmelisiniz.

Uygulamayı test etme

Şimdi uygulamanın doğru çalışıp çalışmadığını denetleyelim.

  1. Hata Ayıklama Olmadan>Başlat'ı seçin veya F5 tuşuna basın. Uygulama beklendiği gibi çalışıyorsa ilk Dizin görünümünü almanız gerekir.

    Uygulamayı açma

  2. "Beach" (veya aklınıza gelen herhangi bir metin) gibi bir sorgu dizesi girin ve isteği göndermek için arama simgesine tıklayın.

    *plaj* araması

  3. "Beş yıldız" girmeyi deneyin. Bu sorgu hiçbir sonuç döndürmez. Daha karmaşık bir arama ,"beş yıldız"ı "lüks" ile eş anlamlı olarak kabul eder ve bu sonuçları döndürür. Eş anlamlılar için destek Azure Bilişsel Arama'da sağlanır, ancak bu öğretici serisinde ele alınamaz.

  4. Arama metni olarak "sık erişimli" girmeyi deneyin. Bu, içinde "otel" sözcüğü bulunan girdileri döndürmez. Aramamız yalnızca tam sözcükleri bulsa da birkaç sonuç döndürülür.

  5. Diğer sözcükleri deneyin: "pool", "sunshine", "view" ve her neyse. Azure Bilişsel Arama en basit ama yine de ikna edici düzeyde çalıştığını göreceksiniz.

Kenar koşullarını ve hatalarını test etme

Hata işleme özelliklerimizin, her şey düzgün çalıştığında bile gerektiği gibi çalıştığını doğrulamak önemlidir.

  1. Index yönteminde, try { çağrısından sonra Yeni Özel Durum Oluştur() satırını girin. Bu özel durum, metinde arama yaptığınızda hataya neden olur.

  2. Uygulamayı çalıştırın, arama metni olarak "çubuk" yazın ve arama simgesine tıklayın. Özel durum hata görünümüne neden olmalıdır.

    Hataya zorlama

    Önemli

    Hata sayfalarında iç hata numaraları döndürmek bir güvenlik riski olarak kabul edilir. Uygulamanız genel kullanıma yönelikse, hata oluştuğunda nelerin döndürüleceğiyle ilgili en iyi güvenlik uygulamalarını izleyin.

  3. Hata işlemenin olması gerektiği gibi çalıştığından memnun olduğunuzda Throw new Exception() öğesini kaldırın.

Paketler

Bu projeden aşağıdakileri göz önünde bulundurun:

  • Azure Bilişsel Arama çağrısı kısadır ve sonuçları yorumlamak kolaydır.
  • Zaman uyumsuz çağrılar denetleyiciye az miktarda karmaşıklık ekler, ancak performansı geliştiren en iyi uygulamadır.
  • Bu uygulama, searchOptions'ta ayarlananlarla tanımlanan basit bir metin araması gerçekleştirdi. Ancak bu sınıf, aramaya karmaşıklık katan birçok üyeyle doldurulabilir. Biraz daha fazla çalışmayla bu uygulamayı önemli ölçüde daha güçlü hale getirebilirsiniz.

Sonraki adımlar

Kullanıcı deneyimini geliştirmek için, özellikle sayfalama (sayfa numaralarını kullanarak veya sonsuz kaydırma kullanarak) ve otomatik tamamlama/öneriler gibi daha fazla özellik ekleyin. Ayrıca diğer arama seçeneklerini (örneğin, belirli bir noktanın belirtilen yarıçapındaki otellerde coğrafi aramalar) ve arama sonuçları sıralamasını da göz önünde bulundurabilirsiniz.

Bu sonraki adımlar, kalan öğreticilerde ele alınıyor. Sayfalama ile başlayalım.