Algolia Search

Using Algolia you can add search functionality to your FlutterFlow app. It allows you to search for documents present inside a Firestore Collection. Learn how to integrate Algolia Search with your app by following this tutorial.

Prerequisites

Before starting to integrate Algolia Search, make sure you have:

  • Completed all the steps of Firebase Setup for your project.

  • Upgraded your Firebase project to Blaze Plan.

  • Have at least one Firestore Collection on which you want to perform the search queries.

Setup Algolia

You need to create have an Algolia account for using their search service. Follow the steps below to setup Algolia:

  1. Login to Algolia. If you don't have an account, create your free Algolia account by going here.

  2. For a new account, fill up the required details and select a region of the data center.

  3. Once you reach the dashboard of Algolia, go to Settings.

  4. Select Applications. By default, you should already have an application called "(unnamed application)".

  5. Click on the button with three dots present beside it, select Rename.

  6. Enter a name for the Application and click Save.

Integrate with Firebase

You have to configure Firebase for integrating Algolia search, follow the steps below:

  1. Go to your Firebase project dashboard.

  2. Click on Extensions.

  3. Click Install under Search with Algolia.

  4. In Step 1 (Review billing and usage), it will show some information related to billing, click Next.

  5. In Step 2 (Review APIs enabled and resources created), this extension automatically creates a Cloud Function to interact with Algolia, click Next.

  6. In Step 3 (Configure extension), you have to fill in some information related to Algolia:

    1. Enter the Collection Path which is actually the name of the Collection that you want to make searchable using Algolia.

    2. You can skip the Indexable Fields.

    3. For Algolia Index Name, go to the Algolia dashboard and create a new index. Enter the same name in this field.

    4. For Algolia Application Id, you can go to the Algolia dashboard page, and check its URL, https://www.algolia.com/apps/<applicationid>. Copy the application_id and enter in the field.

    5. For Algolia API Key, from the Algolia dashboard go to Settings > API Keys > All API Keys and click New API Key. Under Indices, select the Index that you created earlier. In the ACL field, include these options: addObject, deleteObject, listIndexes, deleteIndex, editSettings & settings. Click Create. Copy the generated API Key and enter it in the respective field.

    6. Select a Cloud Functions location.

    7. Click Install Extension.

Wait for the extension to get installed before proceeding to the next phase.

Import existing documents

Once you have the Algolia extension installed on Firebase, it starts monitoring the Collection and automatically adds the documents that are created or updated in the Firestore Collection to Algolia Index.

But for the documents that were present on the Firestore Collection before the extension was installed, it won't get added to Algolia Index automatically.

You will find the specific instructions for importing your documents to Algolia by going to Extensions > Manage (under Search with Algolia) > How this extension works page. To keep it simple, the steps are listed below.

To use the import script you'll need a Firebase service account, follow the steps below:

  1. Go to your Firebase project dashboard.

  2. Click Settings (the gear icon on the left menu), select Project settings.

  3. Go to the Service accounts tab.

  4. Under Firebase Admin SDK, click Generate new private key.

  5. In the dialog that opens up, click Generate key.

This will download the service account private key to your system, store it in a secure location, and don't share this key anywhere.

Follow the steps below to import your existing documents to Algolia:

  1. To run the script, you need to have npx installed on your system. If you don't have it installed, install Node.js (npx comes along with it).

  2. From the Firebase dashboard, go to Extensions > Manage (under Search with Algolia) > How this extension works page. Copy the import script and run it on your system, the command will look like this:

  LOCATION=us-central1\
  PROJECT_ID=<firebase_project_id>\
  ALGOLIA_APP_ID=<algolia_application_id>\
  ALGOLIA_API_KEY=<algolia_api_key>\
  ALGOLIA_INDEX_NAME=<algolia_index_name>\
  COLLECTION_PATH=<firebase_collection_name>\
  GOOGLE_APPLICATION_CREDENTIALS=</path/to/service/account/key>\
  npx firestore-algolia-search

Don't use the above script directly, you need to replace all the angle brackets with the appropriate values of those fields.

It's recommended to just copy the script from the page specified above (it will contain all the values specific to your Collection), remove the FIELDS and TRANSFORM_FUNCTION params if it contains { unspecified parameter }, enter the correct credentials path, and run it.

After running this command if you navigate to the Algolia Search Index page, you will find all your existing Firebase documents imported there.

Algolia Configuration on FlutterFlow

In order to use Algolia Search in your apps, you have to configure Algolia on FlutterFlow. Follow the steps below:

  1. Click Settings and Integrations (the gear icon) from the Navigation Menu (left menu).

  2. Select Integrations > Algolia.

  3. On the Algolia Configuration page, first, you have to enter the Application ID. You will find it from the Algolia dashboard page, copy the application ID from the URL: https://www.algolia.com/apps/<applicationid>.

  4. You will get the Search API Key by going to Algolia Settings > API Keys. Copy the Search-Only API Key and paste it into the respective field of FlutterFlow.

  5. Under Indexed Collections, select the Collections to be indexed by Algolia Search.

Choose searchable fields

If you don't want all the fields of any Collection to be used for searching a document, you can choose the fields that you want to be indexable by Algolia.

Follow the steps below:

  1. From the Algolia dashboard, select Search (present on the left menu).

  2. Select Index under Configure, go to the Configuration tab.

  3. Click + Add a Searchable Attribute button.

  4. Enter the name of the field that you want Algolia to use while searching.

  5. Repeat Steps 3 & 4 if you want to add more fields.

  6. Click Review and Save Settings, and then Save Settings inside the dialog that opens up.

Now, Algolia will only use the fields that you specified here while searching for any term in your app.

There are two methods of using Algolia Search in your app:

  • Add an Action to trigger the Algolia Search by passing the search term, based upon a user gesture.

  • Add the API Call as a Backend Query that gets triggered automatically as the user navigates to the page.

You will find the steps for triggering Algolia Search using either of these two methods on the following pages:

Last updated