Skip to content

deck.mdx

Latest commit

 

History

History
532 lines (314 loc) · 6.96 KB

deck.mdx

File metadata and controls

532 lines (314 loc) · 6.96 KB

import customTheme from "./theme"; import Layout from "./Layout"; export const theme = customTheme;

Getting started

Bootstrap a Project

Here is a list of things that we need to scaffold the project

  • Get Dataset
  • ElasticSearch Cluster
  • Import the dataset into ElasticSearch
  • Bootstrap a React Project
  • Install ReactiveSearch
  • Connect to ElasticSearch with <ReactiveBase />

Get Dataset

Let's download sample dataset for Yelp
Ref: https://www.kaggle.com/yelp-dataset/yelp-dataset

Create ElasticSearch Cluster

We will be using Appbase.io to create ElasticSearch cluster

Quick Demo

Import dataset

Appbase.io comes with great development tools,
which will allow us to quickly import the data

Quick Demo

Bootstrap React Project

We will be using CodeSandbox to quickly Bootstrap the React project

Quick Demo

Install ReactiveSearch

yarn add @appbaseio/reactivesearch

Ref: https://docs.appbase.io/docs/reactivesearch/v3/overview/quickstart/

Connect to ElasticSearch

<ReactiveBase
    app="yelp"
    url="YOUR_ELASTICSEARCH_CLUSTER_URL"
>

    // other components will go here.
    <div>Hello ReactiveSearch!</div>

</ReactiveBase>

Ref: https://docs.appbase.io/docs/reactivesearch/v3/overview/quickstart/

In the next video we will see how to build Search for Yelp Data.

DataSearch

Let us once again see how
our Search UI would look alike

Now let us start building a Search box.

Sample Code

<DataSearch
    componentId="SearchSensor"
    dataField={["name", "name.search", "name.autosuggest"]}
    onValueSelected={(value, cause, source) => {
        console.log("value", value);
        console.log("source", source);
    }}
/>

Ref: https://docs.appbase.io/docs/reactivesearch/v3/search/datasearch/

Quick Demo

Adding More fields to search

<DataSearch
    componentId="SearchSensor"
    dataField={[
        "name",
        "name.search",
        "name.autosuggest",
        "city",
        "city.search",
        "city.autosuggest"
    ]}
    onValueSelected={(value, cause, source) => {
        console.log("value", value);
        console.log("source", source);
    }}
/>

Adding field weights

<DataSearch
    componentId="SearchSensor"
    dataField={[
        "name",
        "name.search",
        "name.autosuggest",
        "city",
        "city.search",
        "city.autosuggest"
    ]}
    fieldWeights={[3, 1, 1, 2, 1, 1]}
    onValueSelected={(value, cause, source) => {
        console.log("value", value);
        console.log("source", source);
    }}
/>

In the next video we will see how we can add category filter.

MultiList

Let us once again see how
our Search + Filter UI would look alike

Now let us start building a Category Filter

Sample Code

<MultiList
    componentId="CategorySensor"
    dataField="categories.keyword"
/>

Ref: https://docs.appbase.io/docs/reactivesearch/v3/list/multilist/

Quick Demo

In the next video we will see how we can add search results to our UI

ReactiveList

Let us once again see how
our Search + Filter UI + Results would look alike

Now let us start building a Result UI.

Sample Code

<ReactiveList
	componentId="SearchResult"
	react={{
		and: ['CategorySensor', 'SearchSensor'],
	}}
	renderItem={res => <div>{res.name}</div>}
/>

Ref: https://docs.appbase.io/docs/reactivesearch/v3/result/reactivelist/

Quick Demo

Now let us see some more props that can help
us modify styles for the result easily

Quick Demo of <ResultList />

Ref: https://docs.appbase.io/docs/reactivesearch/v3/result/resultlist/

In the next video we will see how we can add Reactive Map to our UI

ReactiveMap

ReactiveMap helps us create a data-driven map UI component using Google Maps / Openstreet Map.
It is the key component for building map based experiences

Let us once again see how
our Search + Filter UI + Results + Map would look alike

Now let us start building a Map UI.

Install ReactiveMap

yarn add @appbaseio/reactivemaps

ReactiveMap is part of separate package, but still works
like any other ReactiveSearch Component

Getting Started with ReactiveMap

  • <ReactiveGoogleMap />
  • <ReactiveOpenStreetMap />

We will be using <ReactiveOpenStreetMap /> to render the Map UI as it is free and open-source.

Sample Code

import { ReactiveOpenStreetMap } from '@appbaseio/reactivemaps';

<ReactiveOpenStreetMap
	componentId="SearchResult"
	react={{
		and: ['CategorySensor', 'SearchSensor'],
	}}
    dataField="location"
/>

Ref: https://docs.appbase.io/docs/reactivesearch/v3/map/reactiveopenstreetmap/

Add map styles

In order to use OpenStreetMap / GoogleMap, we need to add their styles
in our index.html or you can import it in your codebase.

<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css" rel="stylesheet" />

Now let us see some more props that can help
us modify styles for the result easily and help us avoid using 2 result component

Quick Demo of renderAllData prop

Ref: https://docs.appbase.io/docs/reactivesearch/v3/result/resultlist/

In the next video we will explore some more features of Appbase.io