A Guide to Integrating Azure Cognitive Search into Business Apps

Introduction

In the rapidly evolving landscape of digital business, the ability to swiftly extract valuable insights from data is no longer a luxury but a necessity. In a previous article, I discussed some capabilities of Azure Cognitive Search, including some AI features, like Semantic Search that revolutionizes how you and your users engage with information.

In this article, I will demonstrate how to implement Azure Cognitive Search into your applications.

Step 1. Create an Azure Cognitive Search resource in Azure

Begin by logging into your Azure account and following the steps outlined in this article.

Step 2. Import Data

After successfully creating your Azure Cognitive Search resource, navigate to the main screen where various options are displayed.

Figure 1. Get started view of Azure Cognitive Search

Click on Import A drop down menu will appear, from which you should select Samples Proceed to import the hotels-sample dataset from the provided Data Sources

Figure 2. Available options to choose from

Figure 3. Samples

Regarding the “Customize target index” and “Create an indexer” tabs, you can opt to retain their default settings. For the purposes of this example, AI enrichments will not be required.

Step 3. Go to Indexes

Navigate to the "Indexes" section from the left navigation bar and select your recently created index.

Figure 4. Index

Step 4. Create Demo App

From the top navigation tabs, choose Create Demo App click on Enable CORS and continue. This configuration permits your application to connect with the Cognitive Search resource. In case you are 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 is a better practice to limit access, for this tutorial, we will enable CORS for all origins.

Within the creation wizard, you'll 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 depicted in Figure 5

.

 

Figure 5. Individual result customization

Keep the default settings for the Sidebar tab.

Figure 6. Sidebar

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

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

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.

Figure 8. Warning message

Step 5. Download and Open it as 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. Examine the file's content, focus on understanding its general structure rather than looking at every single code line. But make sure to pay attention to an important part, usually around line 134, containing a line of code like the code 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 added automatically. In good practice, this value should not be visible to people. You can also find it at the Azure Portal.

Figure 9. Azure Cognitive Search Keys

Do not even try to 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 prepared to launch and utilize your demo application. Initiate a Live Server or simply open the HTML file in your browser. You'll notice a user interface ready for interaction with your data .

Consider the example below, where I conduct various searches and employ the user interface to facilitate finding precise information with minimal effort. This illustrates the practical application of integrating Azure Cognitive Search into business applications.

Video 1. Business App

How do I implement this in my applications?

You can apply the knowledge gained from this article directly. To implement Azure Cognitive Search, here is 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 explore sample code for Python here, for .NET here, and for REST in the documentation.

Summary

Starting from the creation of an Azure Cognitive Search resource and extending to its usage within an app, the article illuminated the diverse integration possibilities, empowering businesses to enhance user experiences and streamline data retrieval with precision. Moreover, a hands-on showcase of crafting a demo app illuminated the seamless interface between Azure Cognitive Search and applications, revolutionizing user interactions.