Build an Appwrite database search dashboard with Algolia

Crafting a compelling website search experience has historically posed certain challenges, causing pain points such as slow results and relevance problems as datasets expanded. However, Algolia has revolutionized this process. Its powerful API facilitates real-time data searches, solving speed, suggestion, relevance, and user experience concerns. Integrating Algolia guarantees fast and seamless search integration for websites and mobile applications. This article will show you how to build a database search dashboard with Appwrite and Algolia. You will use the built-in Appwrite Cloud Function template Sync with Algolia. Let’s get started!

Prerequisites

Before you proceed, you’ll need the following under your belt:

• A GitHub account
• Appwrite Cloud account
• An Algolia account

Checkout the complete project on Github

Once you’ve got all the necessary requisites, we can begin creating an Appwrite Cloud Function template is the subsequent step. However, before delving into the setup process, let's take a moment to talk a bit about what an Algolia search engine is and what it offers.

First, what is Algolia? Algolia is a hosted search engine tool designed to empower businesses to optimize search and discovery speed while mitigating the challenges of relevance tuning through AI. This platform provides users with tools for tailoring their search experience, offering solutions that cater to various use cases. Algolia focuses on two key aspects: implementing search functionalities and comprehensive search analytics.

Setting up Appwrite Cloud Functions

The first step will begin by creating a new Appwrite project. Navigate to the Appwrite's Cloud console and select Create project. Creating a new project will give you access to the Appwrite Function, Project ID, and API key.

Following that, you will proceed to creating your Database and Collection. Copy the corresponding IDs and store them in a readily accessible location — you’ll need them during the creation of the Appwrite Function.

To create your database, navigate to the left menu bar and click on Databases.

The next step is to create a collection, like a container for a list of documents.

Click the Create button to initiate your new collection. Afterward, go to the side menu, select Functions, and click on Templates for the next steps.

Once you've finished the previous step, a list of available options will appear. Choose the template from this list that aligns with your project's requirements. You can use the search bar to quickly locate the specific template needed for this project, which, in my case, is Sync with Algolia. Next, click on the Create function button.

Next, select a Node.js runtime. Select 18.0 as the runtime in this example and click the Next button.

The subsequent step involves adding environment variables for your function's runtime. Appwrite requires seven variables, as illustrated in the example below. Click on the Generate API key option. Once created, this action will automatically create the APPWRITE_API_KEY for your project and apply it to this function.

Then, navigate to the location where you stored your APPWRITE_DATABASE_ID and APPWRITE_COLLECTION_ID. Copy the respective IDs and paste them into the right inputs.

Afterward, navigate to your Algolia website and copy the following ID shown in the diagram below.

To get the following IDs, you must create an account with Algolia, as stated in the prerequisites. Now’s the time to log into your account and navigate to where you have your account profile. Click on the dropdown icon and click on Settings. This will take you to the section where you can create a new application and the ID.

Create Algolia application and index

Afterward, you'll be prompted to choose a region. Upon selecting a region, you'll have to complete a ReCaptcha test, and that concludes the application creation process!

Following that, copy the ALGOLIA_APP_ID — the ID of the recently created application. To do so, return to the settings, under the Team and Access section, click on API Keys.

This will give you access to where you will find the ALGOLIA_ADMIN_API_KEY and ALGOLIA_SEARCH_API_KEY.

The last ID is the ALGOLIA_INDEX_ID, and this is the ID of the index in Algolia where the documents are to be synced. Return to the overview page and navigate to the left-side menu of the dashboard. Click on the menu Search.

Next, you’ll create an Index. This index is where you’ll import your Appwrite data. Click on the Create index button.

When creating an index, it is crucial to exercise great caution in spelling, as even a minor error in word choice can lead to an error in your project. Algolia guides you on naming your index appropriately, offering strategies to mitigate the risk of such errors.

You have now successfully created your index! The next step is to get your Index ID. Your Index ID corresponds to the name you assigned to the index during creation. Copy this Index ID and paste it into the required section that prompts for the index ID.

After creating your Index and Algolia Application, revisit the section where Appwrite initially requested the variables and paste the Algolia variables.

Next, connect the function to a new or existing repository within a selected Git organization.

Next, you will install Appwrite on your GitHub.

In the process of installing, Appwrite will request access to your GitHub.

After granting Appwrite access, you will be redirected to the Appwrite installation process. Click on the Repository option to see an automatically generated repository. Feel free to modify the repository name to align with your preferences. Remember that you can uncheck the Keep repository private checkbox if you prefer.

The final step in creating an Appwrite Function is to select your branch name. In this section, you can leave the branch name as main or choose a different name based on your preference.

Congratulations! You have successfully created your Appwrite Function for syncing with Algolia. Following the creation of your function, you can locate your Deployment ID, Domain, and GitHub source code, as illustrated in the diagram below.

You’re not quite done yet! The aim is to learn how to synchronize your Appwrite data with Algolia and subsequently query that data. Below is a screenshot of what your application should look like when you click on the Domains URL.

To get this synchronization going, begin by navigating to the Databases menu. Click on the specific database you created to be redirected to the associated Collections. Within the collection, you will be directed to the Documents page. Click on the button create attribute to add and organize your data.

You will notice four options for the attribute type you intend to create. Choose String, as that's the first attribute type you will be working with.

You will create a data collection for a phone, focusing on three key pieces of information: Brand, Model, and Price. Next, add the attribute key and size. Tick the Required box if you want to make the string required.

Proceed to create the remaining two attributes, model and price. Below is an image illustrating the expected structure of the three attributes.

To proceed, update the attributes with the correct data. Navigate to the Documents menu and click the Create document button.

Next, choose the individuals who should access your documents and collections. Once you have configured the access settings, click the create button to complete the process.

You have now updated your attributes with the correct data — and you are getting closer to finishing up! The next step is to index the data in Algolia. To accomplish this, navigate to your Function template and click the Execute Now button. A modal will appear, prompting you to execute your function manually. Leave the path unchanged and switch the method from GET to POST. After making this adjustment, click the Execute button to initiate the indexing process.

After your function has been successfully executed, there's one more step. Verify the log to ensure that your data was synchronized with Algolia. Click on the Execution ID, leading you to the Logs input for a detailed examination.

The next step is to confirm the data in the Algolia index. Head to the Algolia dashboard and refresh it; you will observe the new data you added to Appwrite.

Now that you have confirmed that your Appwrite data has been successfully indexed in Algolia, the next step is to query the data using the search input. As you have seen, the Appwrite Cloud Function template seamlessly integrates with Algolia, offering developers flexibility in synchronizing data. In the Algolia dashboard, you can configure which attributes are irrelevant or have higher priority and sync the parameters you need, as seen in the customization option below.

Customization with Appwrite and Algolia

The Appwrite and Algolia template allows you to customize and synchronize your required parameters. For example, suppose you only need three parameters: the phone's brand, model, and price. In that case, you can achieve this by accessing the index.html file and replacing the existing code within the script tag in the index.html file with the provided code below to change how data is displayed in the demo.

       const algolia = algoliasearch(
            '{{ALGOLIA_APP_ID}}',
            '{{ALGOLIA_SEARCH_API_KEY}}'
          );

          const search = instantsearch({
            indexName: '{{ALGOLIA_INDEX_ID}}',
            searchClient: algolia,
          });

          const searchBox = instantsearch.widgets.searchBox({
            container: '#searchbox',
          });

        const hits = instantsearch.widgets.hits({
          container: '#hits',
          templates: {
            item(hit, { html, components }) {
              return html`
                <div class="card">
                  <div class="card-body">
                    <h5 class="card-title">${hit.brand}</h5>
                    <p class="card-text">${hit.model}</p>
                      <p class="card-text">${hit.Price}</p>
                    <!-- Add other properties as needed -->
                  </div>
                </div>
              `;
            },
          },
        });

        search.addWidgets([searchBox, hits]);
        search.start();

Demo

{% embed https://www.loom.com/share/5e616240011345e28747a6d2a0f26f9b?sid=b21da5d0-4024-4f9d-93dd-5a98bbc0e9ae %}

Conclusion

Congrats! You’ve created a robust database search dashboard by leveraging the combination of Appwrite and Algolia. Using the Appwrite Cloud Function template for sync with Algolia, you can now incorporate an efficient search solution into your websites.

Resources

• Appwrite Cloud Function
• Appwrite Database
• Algolia Documentation