A Guide to Integrating Azure Cognitive Search into Business Apps

5 min readSep 11, 2023

Introduction

In the ever-changing world of digital business, the ability to quickly extract valuable insights from data is no longer just a luxury — it’s a necessity. In a previous article, we discussed the amazing capabilities of Azure Cognitive Search, including its AI features like Semantic Search that completely revolutionize how you and your users engage with information.

In this article, we will show you exactly how to implement Azure Cognitive Search into your business applications.

Step 1. Create an Azure Cognitive Search resource in Azure

To get started, log into your Azure account and follow the steps outlined in this article.

Step 2. Import Data

Once you have successfully created your Azure Cognitive Search resource, go to the main screen where you will see various options.

Figure 1: Azure Cognitive Search main screen

Click on “Import” and a dropdown menu will appear. From there, select “Samples” and proceed to import the hotels-sample dataset from the provided Data Sources.

Connect to your data in Azure Cognitive Search

Figure 2: Available options to choose from

Figure 3: Samples

For the “Customize target index” and “Create an indexer” tabs, you can choose to keep their default settings. For this example, we won’t require any AI enrichments.

Step 3. Go to Indexes

Navigate to the “Indexes” section from the left navigation bar and select the index you just created.

Figure 4: Index

Step 4. Create a Demo App

From the top navigation tabs, choose “Create Demo App”, then click on “Enable CORS” and continue. This configuration allows your application to connect with the Cognitive Search resource. If you’re not creating a demo app, you can configure CORS under the respective tab to provide more specific information. For security purposes, consider restricting access to custom origins that require access to your index. While it’s best practice to limit access, for this tutorial, we will enable CORS for all origins.

In the creation wizard, you will encounter three tabs where you can customize the appearance of your demo application. In the first tab, select “HotelName” as the Title and “Description” as the Description, as shown in Figure 5.

Figure 5: Individual result customization

Keep the default settings for the Sidebar tab.

Sidebar tab with options to customize the filters in the left pane bar.

Figure 6: Sidebar

Continue to the Suggestions tab and choose/select values as indicated in the image below.

Suggestions tab with options to customize cards from the search box.

Figure 7: Suggestions of search box

This will result in a well-formatted card display during searches. You will see it in action in a moment.

Once the configurations are complete, click on “Create Demo App”. A warning will appear, indicating that this app is intended for demonstration purposes. Proceed to download it.

Warning message to not use this app in production

Figure 8: Warning message

Step 5. Download and Open it with an IDE

Locate the downloaded HTML file in your Downloads folder. Open it using your preferred Integrated Development Environment (IDE) such as Visual Studio Code. Take a look at the file’s content, focusing on understanding its general structure rather than every single line of code. Pay attention to an important part, usually around line 134, that contains a line of code like the snippet below.

var automagic = new AzSearch.Automagic(
  index: "hotels-sample-index",
  queryKey: "HEW3nB1L9VWbvZ2nJ023WTq4sENZObSOFsmXYuXDhCAzSeDzf2bb",
  service: "searchverifytest",
  dnsSuffix: "search.windows.net"
);

Notice that a query key was automatically added. It would be best practice to not expose this value to people. You can also find it in the Azure Portal.

Keys from Azure Cognitive Search for API access control, admin keys, and query keys.

Figure 9: Azure Cognitive Search Keys

Don’t worry, you can’t use mine since the resource used for this tutorial no longer exists.

Step 6. Open your app in the browser

Even without an in-depth understanding of the HTML code, you are ready to launch and use your demo application. Start a Live Server or simply open the HTML file in your browser. You will see a user interface ready for interaction with your data.

Take a look at the example below, where various searches are made and the user interface is used to easily find precise information with minimal effort. This demonstrates the practical application of integrating Azure Cognitive Search into business applications.

Video 1: Business App

How can I implement this in my applications?

You can directly apply the knowledge gained from this article. To implement Azure Cognitive Search, here’s what you’ll need:

Azure Subscription
Azure Cognitive Search API Key
CORS on indexes
Azure SDKs

The only additional item in this list not covered in this article is the SDKs. You can find sample code for Python here, for .NET here, and for REST in the documentation.

Summary

From creating an Azure Cognitive Search resource to using it within an app, this article showcased the various integration possibilities that empower businesses to enhance user experiences and streamline data retrieval with precision. In addition, a hands-on demonstration of creating a demo app highlights the seamless interface between Azure Cognitive Search and applications, revolutionizing user interactions.

To know more about our company, visit Skrots. To explore our wide range of services, check out Skrots Services. Also, don’t forget to read our other informative blogs at the Skrots Blog. Thank you!

Thanks, Harsh
Founder | CEO — Skrots

Learn more about our blog at Blog at Skrots. Checkout our list of services on Skrots. Give a look at our website design at Skrots . Checkout our LinkedIn Page at LinkedIn.com. Check out our original post at https://blog.skrots.com/a-guide-to-integrating-azure-cognitive-search-into-business-apps/?feed_id=1996&_unique_id=64fed48956ede.