Learn Algolia, Asp-net 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

ASP.NET is an open source web framework for building modern web apps and services with .NET. ASP.NET creates websites based on HTML5, CSS, and JavaScript that are simple, fast, and can scale to millions of users.

asp-net

ASP.NET Core SignalR can push events from the server into your Client Application. In this video we will build a client side Todo app with Angular which consumes events from a ASP.NET Core SignalR backend to see how we can consume and synchronize data between our client side Angular Applications.

Consume ASP.NET Core SignalR values in an Angular Application

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.

Inform users about the current result set with Instantsearch JS Stats widget

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

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

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

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

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

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

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

All Instantsearch widgets are added to the page in a similar fashion and they also share a number of common options that we’ll cover in this video. We will be playing with a dummy menu widget that won’t be part of the final project just to showcase all those options.

How to Add Instantsearch JS widgets and their common attributes 

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Providing real time information to your Javascript apps with [ASP.NET Core SignalR](https://www.npmjs.com/package/@microsoft/signalr). With ASP.NET Core and SignalR you can add real time functionality with ease and keep your application up to date without letting the clients reloading their page manually.

Expose Values for Real-time Consumption with SignalR in ASP.NET Core

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

If you want to improve a REST API beyond GET/POST&PUT and DELETE the next step would be adding the push functionality to send new data into your web applications. With ASP.NET Core and SignalR you can add this functionality with ease and keep your application up to date without letting the clients reloading their page manually.

[signalr npm](https://www.npmjs.com/package/@aspnet/signalr), [signalr Core](https://www.nuget.org/packages/Microsoft.AspNetCore.SignalR.Core/)

[archived] Expose Values for Real-time Consumption with SignalR in ASP.NET Core

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

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.

Topics

Instructors

Content Type

Getting Started with Algolia InstantSearch.js

Consume ASP.NET Core SignalR values in an Angular Application

Inform users about the current result set with Instantsearch JS Stats widget

Set up the Instantsearch JS Library

Search an Algolia Index with Instantsearch JS searchbox and hits widgets

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

Highlight Keywords in Query Results using the Instantsearch JS Hits Widget

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

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

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

Reset all active refinements with the clearRefinements Instantsearch JS widget

Paginate Large Sets of Algolia Data with Instantsearch JS Pagination widget

How to Add Instantsearch JS widgets and their common attributes

Expose Values for Real-time Consumption with SignalR in ASP.NET Core

Scraping Data from Sites with Login Forms with Nightmare

Scraping Dynamic JavaScript Websites with Nightmare

[archived] Expose Values for Real-time Consumption with SignalR in ASP.NET Core

Consume ASP.NET Core SignalR values in an Angular Application

Set up the Algolia JavaScript Client

Push JSON Data to an Algolia Index from the JavaScript Client

Push MySQL Data to an Algolia Index from the JS Client