Learn Algolia, Dart and Nightmare

Today’s users expect great things from their search experiences — speed, relevance, and usability, to name a few. Algolia provides developers with out-of-the-box and customizable search experiences that are a joy to build.

This introductory course on the Algolia search solution focuses on the user-facing part of search. Using the Algolia InstantSearch.js front-end library, we’ll see how to build an engaging search experience in no time. (28 minutes, to be exact.) 

**Prerequisites:** 
You don’t need previous experience with search to follow this course — we’ll use an example index with an e-commerce data set preconfigured. We will work mainly in JavaScript, so basic JS knowledge is expected.

If you want to play with your own index settings and data set, you can [create a free Algolia account here](https://www.algolia.com/users/sign_up/hacker/?utm_medium=link&utm_source=egghead&utm_campaign=education), but this is not required to follow along with this first course. 

Algolia's full suite APIs enable teams to develop unique search and discovery experiences for their customers across all platforms and devices. Type a query. Click a link. Open an app. Everything your customers do sends a signal about what they want. Algolia decodes that intent to deliver the right content - instantly.

algolia

Getting Started with Algolia InstantSearch.js

Dart is an object-oriented language you can use for building web applications, server-side code, and even mobile apps. It’s expressive, powerful, and has a friendly learning curve. 

In this course, we will look at the syntax and semantics of the Dart programming language. We will also cover various aspects of the Dart ecosystem, including its tools and packages that help make you a productive developer. This knowledge is applicable when developing software for client, server, and especially mobile with the Flutter framework. 

This course is beginner-friendly, but is well-suited for experience programmers as well. 

Dart is an open-source, scalable programming language, with robust libraries and runtimes, for building web, server, and mobile apps.

dart

Get Started with Dart

Nightmare is a high-level browser automation library.

The goal is to expose just a few simple methods, and have an API that feels synchronous for each block of scripting, rather than deeply nested callbacks. It's designed for automating tasks across sites that don't have APIs.

nightmare

Many pages you'll want to grab data from will require you to log in first. This video demonstrates how to log in and grab whatever data off the page you will need.

Scraping Data from Sites with Login Forms with Nightmare

Many websites have more than just simple static content. Dynamic content which is rendered by JavaScript requires browser to be able to scrape data. This video demonstrates how to use Nightmare (which is a wrapper around Electron) to launch a url and scrape dynamic data.

Scraping Dynamic JavaScript Websites with Nightmare

In this lesson, you will write a basic HTTP server in the Dart programming language. We will be using the HttpServer class from Dart's inbuilt 'dart:io' library to achieve this.

Dart is an object-oriented programming language by Google, which aims to help the developer build modern web applications. It covers client, server and now mobile with Flutter. It comes with a range of tools including a virtual machine, core libraries, and package management repository, lending enough ammunition to start your next project.

Learn more at https://dartlang.org


Write a Basic HTTP Server in Dart

This will get you started on how to setup the Javascript API client of Algolia search solution. To follow along the video having a free Algolia account already setup will make things easier (but is not required). Once the client is setup we will test it by pushing a couple of records to an index.  

Set up the Algolia JavaScript Client

We’ll load a simple JSON file containing 500 actors records from disk and push it to our Algolia index using the Javascript API client.

Push JSON Data to an Algolia Index from the JavaScript Client

We’ll learn how to push a small amount of data from a local MySQL database to an Algolia index. The first step is to connect to the DB using the `mysql` package, then select all records from the DB and finally push them to Algolia using the JS API client.

Push MySQL Data to an Algolia Index from the JS Client

Using the Lodash library, we’ll see how to split large amounts of data from a local MySQL database into smaller chunks and push them to an Algolia index.  

Push Chunks of Large MySQL Data to an Algolia Index with Lodash

The first step to implement Algolia on the front end using Instantsearch : importing and setting up the library with your credentials. This is what will allow the library to initiate the connection to Algolia servers and the first step to complete before adding some useful widgets.

Set up the Instantsearch JS Library

In this lesson we’ll build a search experience reduced to it’s 2 essential components : a search input and the displayed results. As simple as it is, to build this from scratch would require a fair amount of work. Between listening to the input, making the api call, parsing and displaying the result... To build this using Algolia’s Instantsearch library requires a few lines of code with simply two widgets: the Searchbox and the Hits widget.

Search an Algolia Index with Instantsearch JS searchbox and hits widgets

Before playing with Instantsearch widgets and build a rich search experience, the fundamental step is to understand what the library will be dealing with. In this lesson we we’ll cover the anatomy of the JSON search API response send back by Algolia for each search query and how it can be used.

Anatomy of an Algolia Search API Response

We now have a good understanding of the API Response structure, we could go playing with instantsearch JS library right away, that said this Library is building on top of the JS API Client. To get a better grasp on how it works at a lower level, let’s play first with raw hits straight from the JS API client, we’ll take care of better UI with Instantsearch JS right after that.

Leverage the Algolia JS API Client to Display Raw Hits from the API Response

Displaying barebones Hits won’t catch your user’s attention. The UI is key to provide a good search experience and hits are the meat of this experience so they need extra attention. By using Mustache templating we’ll see how to display rich results to your users. 

Display Rich results with templates in the Hits widget for Instantsearch JS

The range input is a simple but useful widget that allows a user filter the results by selecting a numeric range with a minimum and maximum input. In an e-commerce website for instance, this widget would be useful to limit the results where the price is comprised between $X and $Y.

Refine a dataset using a numeric range in Instantsearch JS with the Range Input widget

Every  good search UX make users understand instantly why a given hit is being displayed as part of the result set. One way to achieve that is to highlight the keywords from the query directly inside the Hits. This is built in the API JSON response and in this video we’ll explain how to leverage it easily.

Highlight Keywords in Query Results using the Instantsearch JS Hits Widget

When performing a complex query, based on several active facets and filters, its tedious for the user to start from scratch if she has to unset all refinements one by one. Thanks to the clearAll widget, this task becomes a one click action for the user and is trivial to implement for us developers as it requires no configuration.

Reset all active refinements with the clearRefinements Instantsearch JS widget

Searching is obviously not limited to inputting text in a searchbox. If your dataset allows it Algolia can leverage of attributes and values. To make use of those facets on the front end, one of the most common widget that you can find in a search UI is the refinement list. With this widget, the user can filter the dataset based on facets. This widget only displays the most relevant facets for the current search context.

Filter Datasets with Facets using Instantsearch JS to add a Refinement List

When you have a large result set for a specific query and usually not displaying more than a few dozen simultaneously. Pagination is a popular widget that allows the user to switch between pages of the results.

Paginate Large Sets of Algolia Data with Instantsearch JS Pagination widget

The hierarchical menu widget is used to create a navigation based on a hierarchy of facet attributes. We generally implement it for categories with subcategories.

Browse results based on a hierarchy of Facets (HierarchicalMenu) in Instantsearch JS

The stats widget is used to display useful insights about the current results like the number of hits and the time taken to compute the results inside the engine.

Search

Search Results