Kickstart Search with the Elastic App Search Reference UI

sorangutan

Elastic App Search provides you with a robust set of API endpoints to build any type of search experience. While modern tools and a blank canvas can be inspiring, we want you to craft functional and valuable things as quickly as possible. And so, we bring you the App Search Reference UI.

Open Sourcery

The Elastic App Search Reference UI is written in React. It is an open source developer tool that has been woven into the App Search dashboard. Its goal is twofold:

Provide a clean and dynamic search preview to experiment with features like facets, pagination, and sorting.
Generate a quality design and developmental foundation for new search experiences.

You can see a live Reference UI by visiting: https://parks.swiftype.info.

Field Day

Before we dig deeper into the Reference UI, we should consider a key goal of App Search: provide relevant search. Relevance is the key to the value of search, for both your end-user and your business goals. But what does it mean, to be relevant?

Relevance is how well a result can fulfill the needs of the user or system that requested it. In technical terms, a query is analyzed against document fields and the most relevant document is returned given how well the field values match the query.

Code and national parks feel like a nice pair, and so we will take a practical look at the Reference UI through the eyes of the national parks data set. It has a schema containing the following fields:

{
  "description": "text",
  "nps_link": "text",
  "states": "text",
  "title": "text",
  "visitors": "number",
  "world_heritage_site": "text",
  "location": "geolocation",
  "acres": "number",
  "square_km": "number",
  "date_established": "date"
}

Within this data set, a park is less vast and wood-y, like this…

When we click Generate a Preview, it appears just like our sample application. And when we search for “old growth"...

https://www.elastic.co/blog/kickstart-search-with-the-elastic-app-search-reference-ui