In the aim of better understanding search and Algolia (Search-aas), I integrated Algolia into my latest project, LunarCal. LunarCal imports your google calendar to develop:

• STATS - Visualize basic stats (i.e. you have the most meetings on Tuesdays / in the afternoons)
• PREDICTION - Predict the productivity of future meetings (based on historical ratings you give the app) — still under construction
• SEARCH - Ability to search your calendar instantly

Algolia was extremely easy to set up, it only took a few hours from hitting the documentation to production code. I laid out the three major blocks of code below, along with some personal challenges.

Seed Initial Data

The initial seeding was the easier part, and they provide sample code in their documentation. I was confused (and still am to a small extent) on the macro-level strategy for how one should create the various indices, but in communicating it in the doc, they said it relates most closely to a db table — so, I simply loaded my main table (“events” on a calendar). While I currently seed Algolia manually, it would/will eventually be triggered after every calendar sync, since you need to update the Algolia indices every time you get new data (or delete/update data). You’ll also notice that Algolia asks you to set which fields you’ll eventually want to search (as indicated by :attributesToIndex) — I chose most of the fields, but you’ll want to customize for your project.

Search: UX

After seeding Algolia and playing around with search queries within their dashboard (which is also very easy to use), I used javascript (within a Ruby on Rails app) to build the UI/UX. When a user types each character into a search bar, a new event is triggered in the javascript file, which sends the updated search query to Algolia for updated search results. You can see in the code above, all that happened was basically “key stroke” (line 12)=> “algolia api call” (line 13) => “search results” (callback function on line 15). I will note that the biggest challenge for this implementation had nothing to do with Algolia, it was simply setting the ENV variables in the javascript file. From what I understand you can change the file name to “file.js.erb” and you should be able to get the ENV variables, but it didn’t seem to work so I created a simple Get request to a controller that returns a json object of the various ENV variables needed for the Algolia API call (line 8). In regards to the Algolia API call, each Json object result that’s returned defaults to all of the object data, plus a “highlighted” field that contains all the attributes that contain the search term. This is useful when you want to highlight the search results on the fly (more details below).

Search: UI

Normally, I would use something like handlebarsjs to feed and format the data in the html file, but in a quick implementation I just iterated and appended the results directly from the js file into a div in the html file. The example Algolia gives in their documentation is actually a <script></script> inside of the html file, but I rarely go that route (due to my OCD nature and desire for separation of concerns). Algolia returns the highlighted results wrapped in an <em></em> tag, which allows you to use your css file to format the specific keywords in your results (they come highlighted, and I added a green color).

Future

In the future, I will probably enhance two pieces:

• Query/API Call: they provide lots of options for granular api calls, so I’ll start to look at adding options for the users to select/search (i.e. year, location, etc.)
• UX/UI Results: decide on better content to surface, instead of just the highlighted object, as well as better formatting.
• Visualization: I’ll probably play around with a combination of Algolia’s speed + search bar + some kind of visualization functionality