を使用して検索アプリケーションを構築する

ほとんどのアプリケーションの1つの共通の機能は、検索機能です.この機能は、ユーザーが製品やデータベースのさまざまなコレクションを検索することができます.いくつかのアプリケーションでは、単純な製品や他のリソースのデータベースを検索するには、必要な時間よりも多くの時間がかかります.
アマゾン、eBayとFlipkartのような電子商取引プラットホームは、ユーザー経験を強化して、正しい製品を得るために検索機能を利用します.顧客に表示.
検索ベースのアプリケーションは非常に一般的ですが、検索ボックスを介して、ほとんど、または技術的経験がなくデータベースを高速にクエリに役立ちます.

どのような種類ですか？

ゼロから完全に機能検索機能を構築するには、多くの時間、エネルギー、リソースを作成します.サイバー攻撃に対してユーザーの入力と検索アプリケーションを管理することは困難です.
TypeSenseは、アプリケーションのユーザーのための経験としてインスタント検索のための無料でオープンソースの検索エンジンです.Typesenseは開発者がゼロから各Webアプリケーションの検索エンジンを構築する必要性を減らします.これはアプリケーション開発時に開発者の生産性に大いに貢献します.
時々、ユーザーからのtypoエラーは、検索結果でエラーにつながることができます.TypeSenseは、エラーを検出し、正しいと期待される結果は、ユーザーが返されることを確認します.また、それが問い合わせされているときにTypesenseは非常に高速です.
Typesenseでは、開発者は簡単に少ないと削減の努力を自分たちのアプリケーションに検索機能を追加することができます.

タイプセンスアカウントの設定

のは、我々の反応アプリケーションと接続するためにtypesenseアカウントを設定することから始めましょう
ステップ1:アカウントを作成する
TypSenseはGitHubでアカウントを作成することが容易になります.〜についていきましょうTypesense アカウントを作成し、APIキーを取得します.

Step 2 :新しいクラスタを作成します.
アカウントを作成した後、我々はデータの異なるコレクションを管理するためのクラスタを作成する必要があります.

デフォルトを残し、起動ボタンをクリックしてクラスタを作成します.

起動ボタンをクリックすると、クラスタの作成を開始します.これは、以下のイメージで示されるように、クラスタを作成するのに数分かかるでしょう.

クラスタが作成された後、APIキーを作成し、ホスト名を取得できます.我々はtypesenseと我々のアプリを接続するには、この情報が必要になります.
注:私たちはtypesense雲を使用してtypesenseと我々のアプリを接続するように、それは簡単な方法typesenseに接続することです.
以下はホスト名とポート番号です.ストアは、この情報を簡単にアクセスすることができますどこか.

ステップ3 : APIキーを取得する
生成APIキーをクリックして我々のアプリのAPIキーを取得します.これは.txt ファイルをどこにtypesenseを使用してアプリケーションを接続するすべての情報を見つける.これはAPIキー、ホスト名、ポート番号も含みます.
注意:このチュートリアルでは、検索専用APIキーを使用します.
今、我々はすべてのtypesenseと我々のアプリを接続するように設定されます.おっと!

アプリケーションを反応させるためにTypesを接続してください

私たちはtypesenseと単純な検索アプリケーションを作成すると反応する.私たちの反応アプリを最初に作成してみましょう.
次のコマンドで反応アプリを作成し、これらの依存関係をインストールします.

反応アプリの作成npx create-react-app book-search-app

TypeSenseをインストールし、インスタント検索に反応

npm install typesense

`npm install react-instantsearch-dom`

`npm install typesense-instantsearch-adapter`

これらは検索アプリケーションを構築するためのライブラリです.このチュートリアルで使用されるResponse IntellantSearchは、すぐにあなたのアプリケーションに検索インターフェイス(UI)を構築して統合することができます反応オープンソースUIライブラリです.チュートリアルで使用する方法を参照してください.
今我々は我々の反応アプリケーションのセットアップを持って、我々はTypesenseに接続を開始することができます.
私たちのクラスタを変更して接続するには、typesenseクライアントを設定する必要があります.typesenseクライアントは、クラスタを作成したり、コレクションを作成したり、スキーマを構築するためにコマンドを実行することを可能にします.

反応における構文スキーマの生成と構築

TypeSenseクライアントを作成し、私たちのブックスキーマ(ブック構造)を構築するには、あなたの反応ルートディレクトリにファイルを作成し、それをあなたの選択の名前を与え、私のケースで私はそれに名前を与えたloadData.js . このファイルは、私たちのtypesenseクライアントを接続して、作成するのに必要なすべての構成を持ちます.
我々が続く前に、我々のGetを得ましょうbooks.json ファイルの準備.このファイルは、別の書籍のタイトルとその説明のコレクションです.これは、問い合わせを検索し、より速く情報を得るために検索するファイルです.Click here 本をダウンロードする.JSONファイル.
さて、我々のアプリケーションが実行を開始するように、自己実行機能を作成しましょう.コピーして、アプリケーションに以下のコードを貼り付けます.

// loadData.js
const Typesense = require('typesense');

module.exports = (async () => {
    //Configure Typesense
  const TYPESENSE_CONFIG = {
    nodes: [
      {
        host: process.env.TYPESENSE_HOST, // For Typesense Cloud use xxx.a1.typesense.net
        port: '443', // For Typesense Cloud use 443
        protocol: 'https', // For Typesense Cloud use https
      },
    ],
    apiKey: process.env.TYPESENSE_APIKEY,
  };

//Create and instance of Typesense client
  const typesense = new Typesense.Client(TYPESENSE_CONFIG);

// Build Schema
  const schema = {
    name: 'books',
    "fields": [
      {
        "facet": false,
        "index": true,
        "name": "title",
        "optional": false,
        "type": "string"
      },
      {
        "facet": true,
        "index": true,
        "name": "authors",
        "optional": false,
        "type": "string[]"
      },
      {
        "facet": true,
        "index": true,
        "name": "publication_year",
        "optional": false,
        "type": "int32"
      },
      {
        "facet": false,
        "index": true,
        "name": "ratings_count",
        "optional": false,
        "type": "int32"
      },
      {
        "facet": false,
        "index": true,
        "name": "average_rating",
        "optional": false,
        "type": "float"
      }
    ],
  };

// Import book.json
  const books = require('./dataset/books.json');

//Checks if the collection exists
  try {
    await typesense.collections('books').retrieve();
    console.log('Found existing collection of books');
  } catch (err) {
    console.error(err);
  }

// Create Booke schema
  await typesense.collections().create(schema);
  console.log('Creating schema...');

//Upload book.json to Typesense Database
  try {
    const returnData = await typesense
      .collections('books')
      .documents()
      .import(books);
  } catch (err) {
    console.error(err);
  }
})();

これを壊しましょう

TypeSenseライブラリをアクセス可能で使いやすくするために、タイプルズライブラリをインポートしました

それから、私たちのtypesense構成を格納するためにconstを作成しました.この構成はホスト、ポート、プロトコル、およびapikeyの設定を含んでいます.すべてのこれらのパラメータは、私たちがクラスタを作成したとき以前にtypesenseからダウンロードしたファイルにあります.

それから、コードで以前に輸入されたtypenseを使って、typesenseクライアントの新しいインスタンスを作りました.

私たちの本コレクションのスキーマを作成するには、我々はconstを作成し、それぞれのフィールドの構造には、私たちのデータ内の各書籍を提供します.そして、このスキーマをtypesense.collections().create(schema) コマンド.

最後に、私たちは本をアップロードしました.JSONファイルをTypeSenseデータベースに作成し、このファイルを検索するときにインデックスを作成できます.

この関数を実行するには、パッケージに移動します.JSONファイルと追加"indexer": "node loadData.js" スクリプトオプションに.さて、この関数は、アプリケーションが実行されるたびに実行されます.
上記のコードで、我々は正常に作成して、我々のtypesenseクライアントを構成しました.今、我々はこのデータを照会して、我々がする各々の検索から異なる結果を得るために検索UIを構築するために動くことができます.
それはあなたの反応アプリケーションを使用して設定し、構成する方法の最初の部分のすべてです.
さて、セクションに飛び込みましょう.そこでは、私たちのタイプセンスの問い合わせを始めて、アプリケーションに反応します.

を使用して検索UIを構築する

この節では、検索入力と結果を表示する簡単なUIを作成します.このコードをコピーして貼り付けますApp.js ファイル.

import React from 'react';
import './style.css';
import {
  InstantSearch,
  SearchBox,
  Configure,
  Hits,
  Pagination,
} from 'react-instantsearch-dom';

import TypesenseInstantSearchAdapter from 'typesense-instantsearch-adapter';

const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
  server: {
    nodes: [
      {
        host: procsess.env.TYPESENSE_HOST,
        port: '443',
        protocol: 'https',
      },
    ],
    apiKey: process.env.APIKEY,
  },
  additionalSearchParameters: {
    query_by: 'title',
  },
});

export default function App() {
  const Hit = ({ hit }) => {
    return (
      <div className="hit">
        <div className="hit-image">
          <img alt={hit.authors} src={hit.image_url} />
        </div>
        <div className="hit-content">
          <div className="hit-price">{hit.title}</div>
        </div>
      </div>
    );
  };
  return (
    <div>
      <h1>Search Books</h1>
      <InstantSearch
        indexName="books"
        searchClient={typesenseInstantsearchAdapter.searchClient}
      >

        <SearchBox autoFocus />
        <Configure hitsPerPage={5} />
        <Hits hitComponent={Hit} />
        <Pagination />
      </InstantSearch>
    </div>
  );
}

上のコードを説明しましょう

私たちは、タイプセンスをセットアップして、Instantsearchを使うために、必要な輸入を作りました

設定例TypeSenseInstantSearchAdapterは、任意の検索クエリでTypeSenseを構成するのに役立ちます.
ホスト、ポート、プロトコル、およびapikeyパラメータを設定します.
The additionalSearchParameters は、検索パラメータを設定するために使用されます.I . Eどこで検索するか検索する方法を検索します.

The <InstantSearch /> コンポーネントは、私たちのUIディスプレイを与えるためにすべての私たちの反応instantsearchコンポーネントをラップすることができます:検索ボックスと結果.あなたのアプリケーションに検索コンポーネントを追加し、適切なパラメータを設定します.

シンプルな検索バーを表示し、作成するには<SearchBox /> 我々が以前に輸入したもの.これは私たちのクエリバーを開始する検索バーを表示する必要があります.

The <Hits /> コンポーネントは、検索結果を表示するために使用されます.

あなたがこの点にそれをしたならば、おめでとう、あなたは首尾よくtypesenseで検索アプリケーションを作成して、反応しました.今、すべてがうまく動作するかどうかを確認するために我々のアプリケーションをテストしましょう.あなたの反応アプリを実行し、画面に表示されている場合は、次の参照してください.

我々が見ることができるように、我々が反応InstantSearchによって使用するために提供される検索ボックスを通して検索をするとき、本イメージとタイトルのリストは表示されています.これらのデータ(画像とタイトル)はbooks.json 以前にtypesenseデータベースにアップロードしたファイル.

結論

これにより、我々は正常に我々の反応アプリケーションにtypesenseを統合しており、検索機能や検索アプリケーションを構築した.
Typesenseは、可能な限り最高の時間内にアプリケーション機能を開発するための非常に便利なツールです.私たちが検索エンジンとしてtypenseを行うことができる多くがあります.これは、Typesenseに慣れて取得し、JavaScript(反応)アプリケーションを使用する方法をチュートリアルです.
ドキュメントをチェックアウトhere Synesenseについてもっと学ぶために.