PUROGU LADESU

ポエムがメインのブログです。

【ReactNative】algoliaを使ってみる

algoliaとは

全文検索ができるクラウドサービスです。Firebaseでできない検索ができるようになります。

How Algolia Works | Getting Started | Guide | Algolia Documentation

下記のデモを見るとイメージしやすいです。

Widgets Showcase | React InstantSearch | Building Search UI | Guide | Algolia Documentation

indexとは

テーブルみたいなもんです。レコードを追加していきます。データはKeyValueになっており、ObjectIDがユニークIDとなります。

ReactNativeで使う

Native | Building Search UI | Guide | Algolia Documentation

いろんな言語やフレームワークが提供されています。

InstantSearchとは

What Is React InstantSearch? | Building Search UI | Guide | Algolia Documentation

algolia検索を使ったUIを構築するためのコンポーネントです。
ReactNativeではconnector関数を使ってコンポーネントを作ります。 部品はSearchBox, InfiniteHitsなどがあります。基本は検索欄と検索結果のリストです。

<SafeAreaView style={styles.safe}>
  <StatusBar barStyle="light-content" />
  <View style={styles.container}>
    <InstantSearch
      searchClient={searchClient}
      indexName="demo_ecommerce"
      root={this.root}
    >
      <SearchBox />
      <InfiniteHits />
    </InstantSearch>
  </View>
</SafeAreaView>

デモアプリの構築

Native | Building Search UI | Guide | Algolia Documentation

上記の指示通りにcreate-instantsearch-appを実行してサンプルアプリを構築しようとしたがエラーで動かず。 expo init をして必要なものを追加してsrc配下のソースをコピーしてきたら動いた。
検索を実行するとヒットしたキーワードが黄色くなります。

yarn add algoliasearch
yarn add react-instantsearch-native

algoliaの設定

目的の検索結果となるように、検索対象データの設定やソートなどを設定します。

Relevance Overview | Managing Results | Guide | Algolia Documentation

データの登録

firebaseでの変更をalgoliaに反映する必要があります。下記はCloudFunctionを使うやり方です。

FirebaseとAlgoliaを自動反映させる - Qiita