Udostępnij za pośrednictwem


Krok 1. Omówienie dodawania wyszukiwania do statycznej aplikacji internetowej przy użyciu platformy .NET

Ten samouczek tworzy witrynę internetową, która przeszukuje katalog książek, a następnie wdraża witrynę internetową w statycznej aplikacji internetowej platformy Azure.

Co robi próbka?

Ta przykładowa witryna internetowa zapewnia dostęp do katalogu 10 000 książek. Wykaz można przeszukiwać, wprowadzając tekst na pasku wyszukiwania. Podczas wprowadzania tekstu witryna internetowa używa funkcji sugestii indeksu wyszukiwania do automatycznego uzupełniania tekstu. Po zakończeniu zapytania w witrynie internetowej zostanie wyświetlona lista książek z częścią szczegółów. Możesz wybrać książkę, aby wyświetlić wszystkie szczegóły przechowywane w indeksie wyszukiwania książki.

Zrzut ekranu przedstawiający przykładową aplikację w oknie przeglądarki.

Środowisko wyszukiwania obejmuje:

  • Wyszukiwanie — udostępnia funkcje wyszukiwania dla aplikacji.
  • Sugerowanie — udostępnia sugestie, gdy użytkownik wpisuje na pasku wyszukiwania.
  • Aspekty i filtry — udostępnia strukturę nawigacji aspektowej, która filtruje według autora lub języka.
  • Wyniki podzielone na strony — dostarcza kontrolki stronicowania umożliwiające przeglądanie wyników.
  • Wyszukiwanie dokumentów — wyszukuje dokument według identyfikatora, aby pobrać całą jego zawartość dla strony szczegółów.

Jak jest zorganizowana próbka?

Przykładowy kod zawiera następujące składniki:

Aplikacja Cel GitHub
Repozytorium
Lokalizacja
klient Aplikacja React (warstwa prezentacji) do wyświetlania książek z wyszukiwaniem. Wywołuje aplikację Azure Function App. /azure-search-static-web-app/client
api Aplikacja Azure .NET Function App (warstwa biznesowa) — używa zestawu SDK .NET do wywoływania Azure AI Search API. /azure-search-static-web-app/api
wsadowe wstawianie Projekt .NET umożliwiający utworzenie indeksu i dodanie do niego dokumentów. /azure-search-static-web-app/bulk-insert

Konfigurowanie środowiska projektowego

Utwórz usługi i zainstaluj następujące oprogramowanie dla lokalnego środowiska programistycznego.

Ten samouczek nie uruchamia lokalnie API funkcji Azure. Jeśli chcesz uruchomić go lokalnie, zainstaluj narzędzie azure-functions-core-tools.

Rozwidl i sklonuj przykład wyszukiwania za pomocą git

Aby wdrożyć statyczną aplikację internetową, musisz skopiować przykładowe repozytorium. Aplikacje internetowe używają lokalizacji fork na GitHubie do decydowania o działaniach kompilacji i zawartości wdrażanej. Wykonywanie kodu w statycznej aplikacji internetowej odbywa się zdalnie, a usługa Azure Static Web Apps odczytuje kod z sforkowanego przykładu.

  1. Na GitHubie zforkuj repozytorium azure-search-static-web-app.

    Ukończ proces fork w przeglądarce internetowej, używając konta GitHub. W tym samouczku używane jest twoje fork jako część wdrożenia do statycznej aplikacji internetowej platformy Azure.

  2. W terminalu Bash pobierz swoją rozwidloną wersję przykładowej aplikacji na komputer lokalny.

    Zastąp YOUR-GITHUB-ALIAS swoim aliasem GitHub.

    git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-static-web-app.git
    
  3. W tym samym terminalu powłoki Bash przejdź do rozwidlenia repozytorium dla tego przykładu wyszukiwania w witrynie internetowej:

    cd azure-search-static-web-app
    
  4. Użyj polecenia programu Visual Studio Code, code ., żeby otworzyć sforkowane repozytorium. Pozostałe zadania są wykonywane z programu Visual Studio Code, chyba że określono.

    code .
    

Następne kroki