Build an Appwrite database search dashboard with Algolia
Tags: algolia, appwritecloud, appwritedatabase, appwritecloudfunction
Published: 2024-01-18 15:02:32


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](https://github.com/)
- Appwrite Cloud [account](https://cloud.appwrite.io/login?utm_source=hackmamba&utm_medium=hackmamba-blog)
- An [Algolia account](https://www.algolia.com/?utm_source=hackmamba&utm_medium=hackmamba-blog) 

Checkout the complete project on [Github](https://github.com/Emilsone/sync-with-algolia)

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](https://www.algolia.com/?utm_source=hackmamba&utm_medium=hackmamba-blog) 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.**


![Create Appwrite project](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1702976814058_image.png)


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. 


![Appwrite console overview](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1703166490445_image.png)


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

![Create Appwrite database](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1703166280913_create-database.png)


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

![Create Appwrite collection](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1703167122643_image.png)


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.

![Appwrite function templates](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1702977345961_image.png)


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.


![Sync with Algolia template](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1702978322002_image.png)


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


![Appwrite function configuration](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1702988474007_image.png)


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.


![Generate Appwrite API key](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1702990430440_image.png)


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.

![Appwrite Database and Collection ID](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1702990375224_image.png)


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

![Algolia API variables](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1702990852437_image.png)


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 

![Algolia application](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1702991613761_image.png)


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!


![Select region](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1702991724536_image.png)


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


![Algolia API keys](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1702992330090_image.png)


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


![Algolia API keys](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1702992690066_image.png)


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

![Locating the search menu](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1702993422306_image.png)


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


![Algolia index](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1702993830754_image.png)


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.


![Create a new Algolia index](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1702995478583_image.png)


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.


![Algolia index created](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1702995755023_image.png)


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.

![Connect Appwrite function to Git organization](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1703165654572_connect-repository.png)


Next, you will install Appwrite on your GitHub.

![Install Appwrite](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1702997598567_image.png)


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


![](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1703832849251_image.png)


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.

![Selecet Git repository](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1702997793751_image.png)


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.

![Select Git branch](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1703167814332_connect-branch.png)


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.


![](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1703833186753_image.png)


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.


![Sync with Algolia demo](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1703168951066_image.png)


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.

![Create new Appwrite document](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1703169329886_image.png)

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.

![Create attribute](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1703170120381_image.png)

![Select attribute requirement](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1703170393682_image.png)

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

![Appwrite attribute created](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1703188644991_image.png)

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

![Update attribute with data](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1703190282310_image.png)

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.

![Select document permission](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1703190381906_image.png)

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.

![Execute Appwrite function](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1703191709430_image.png)

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.

![Execution ID](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1703192466943_image.png)

![Execution log](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1703192590765_image.png)

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.

![](https://paper-attachments.dropboxusercontent.com/s_6234BA94EABA72A11547BEE945BA9C69D40CA16F87F8672B5B4E3CF51037390C_1704709258913_image.png)

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. 


``` javascript

       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](https://appwrite.io/docs/references/cloud/client-web/functions?utm_source=hackmamba&utm_medium=hackmamba-blog)
- [Appwrite Database](https://appwrite.io/docs/references/cloud/client-web/databases?utm_source=hackmamba&utm_medium=hackmamba-blog) 
- [Algolia Documentation](https://www.algolia.com/?utm_source=hackmamba&utm_medium=hackmamba-blog)