このオープンソースツールを使用してWebアプリケーションにファジィ検索を追加

開発者の提唱者として、私はもう生産コードを書いていません.私の目標は少なくとも週に2回コード化することです.私はこの問題を解決することができました.

オープンソースに貢献する

フリーランスプロジェクトの完了

マネージャーも自分のプロジェクトを作ることを提案しました.
私のマネージャーとブレーンストーミングの後、私はCuthuMemoryを検索することができます静的なWebアプリケーションCutemMomoを構築しました.私は以前の静的なWebアプリケーションのトンを構築したので、私は、次のようななどの経験が少ない技術を使用します.JSは、風のCSS、SWR、およびGithubアクション.

私の問題
数時間後に、私は検索バーで静的なウェブページを持っていました、そして、あなたが正確な語を捜したならば、絵文字は現れます.しかしながら、私はこれが悪いユーザー経験であると理解しました.どのような場合は、ユーザーが単語スペルミス?
ユーザーエラーを処理するために独自のアルゴリズムを構築することを考えました.私がアルゴリズムを構築するならば、私はより多くの時間を実際のウェブアプリケーションより多くの時間を費やすかもしれなくて、改善するかもしれません.
また、AntiticSearchやAlgoliaなどの検索を処理する他のツールを見ましたが、必要なセットアップは私のユースケースを超えていました.
一日後、私は完全な、軽量、オープンソースのソリューションに遭遇した.jsこれはゼロ依存性を持ち、フロントエンドとバックエンドで動作する.

ファジィ探索とは
ファジー検索は、Googleのような検索エンジンで入力すると、検索エンジンが動的に提案された結果を入力するときに発生します.これは、アルゴリズムは、検索結果に類似した結果を返すことを意味する近似文字列のマッチングを実装するアルゴリズムですが、彼らは正確な一致する必要はありません.

コンポーネントの設定
つの空のコンポーネントから始めました.

サーチバーこれは、ユーザーが検索している特定のemojisを入力する検索バーとして動作します.

import React from 'react';

const SearchBar = () => {
   return (
       <div className="p-8">
           <div className="bg-white flex items-center rounded-full shadow-xl">
               <input name="search"
                   type="search"
                   placeholder="Search for an emoji. Ex: heart"
                   autoComplete="off"
                   className="rounded-l-full w-full py-4 px-6 text-gray-700 leading-tight focus:outline-none"
                   id="search"
               />
               <div className="p-4">
               </div>
           </div>
       </div>
   );
}

export default SearchBar;

顔文字.これはすべての絵文字の結果が表示されます返されます.私は、私が示したより多くの結果、より関連性が低いので、Emojisの量を制限する予定でした.

import React from 'react';

const EmojiCards = () => {
   return (
       <div>
       </div>
   );
}

export default EmojiCards;

私はこれらのコンポーネントの両方を親コンポーネントに入れました.js

import SearchBar from './SearchBar';
import EmojiCards from './EmojiCards';

const SearchWithEmojiCards = () => {

   return (
       <div className="w-3/6">
           <SearchBar />
           <EmojiCards />
       </div>
   );
}

export default SearchWithEmojiCards;

私はヒューズをインポートし、インスタンス化することを選んだ.親コンポーネントのJSと、ヒューズから受信した必要なデータを渡します.絵文字にJS.jsとサーチバー.小道具としてのjs

ヒューズの実装js
手順:
NPMパッケージをインストールしました.npm install fuse.js2 .私は、Fusejsパッケージをsearchwithemojicardsにインポートしました.jsコンポーネント.

import React, { useState } from 'react';
import SearchBar from './SearchBar';
import EmojiCards from './EmojiCards';
import Fuse from 'fuse.js';

3 .私のデータセットは当初オブジェクトでしたが、ヒューズです.JSはオブジェクトの配列を予想します.私はオブジェクトを使いました.エントリのメソッドとマップを希望する結果を生成します.私も明示的に各キーの名前を定義emoji_name and emoji_url .

const formattedData = Object.entries(data).map((entry) => ({ emoji_name: entry[0], emoji_url: entry[1] }));

私のデータがどのように見えたかの例

 {
  "+1": "https://github.githubassets.com/images/icons/emoji/unicode/1f44d.png?v8",
  "-1": "https://github.githubassets.com/images/icons/emoji/unicode/1f44e.png?v8",
  "100": "https://github.githubassets.com/images/icons/emoji/unicode/1f4af.png?v8",
  "1234": "https://github.githubassets.com/images/icons/emoji/unicode/1f522.png?v8",
}

再フォーマット後のデータの例

[
  {
    "emoji_name": "+1",
    "emoji_url": "https://github.githubassets.com/images/icons/emoji/unicode/1f44d.png?v8",
  }
  {
    "emoji_name": "-1",
    "emoji_url": "https://github.githubassets.com/images/icons/emoji/unicode/1f44e.png?v8",
  }
]

**** * * * * * *フォーマットされたAPIデータをSearchemJiwithWiカードに渡しました.jsコンポーネント.その後、コンポーネントの上部に新しいヒューズ検索インスタンスを作成しました.

以下の例では、新たにフォーマットされた絵文字APIデータをフューズインスタンスに渡し、オプションオブジェクトを渡します.

options object 1 iユーザが検索するキーを指定するemoji_name .

返される結果は、関連性によって獲得されます.includeScore は、スコアが含まれてデータ内で返されることを示します.

import React, { useState } from 'react';
import SearchBar from './SearchBar';
import EmojiCards from './EmojiCards';
import Fuse from 'fuse.js';

const SearchWithEmojiCards = ({ apiData }) => {
   const options = {
       keys: [
           "emoji_name",
       ],
       includeScore: true
   };
   const fuse = new Fuse(apiData, options);

   return (
       <div className="w-3/6">
           <SearchBar />
           <EmojiCards />
       </div>
   );
}
export default SearchWithEmojiCards;

5 .検索を行うために、ヒューズを追加しました.search ()メソッド.検索メソッドは、データのコレクション全体を検索し、ユーザーのクエリに基づいて結果を返します.私もuseState フックのユーザーのクエリの結果をキャプチャします.

import React, { useState } from 'react';
import SearchBar from './SearchBar';
import EmojiCards from './EmojiCards';
import Fuse from 'fuse.js';

const SearchWithEmojiCards = ({ apiData }) => {
   const [query, setQuery] = useState('')
   const options = {
       keys: [
           "emoji_name",
       ],
       includeScore: true
   };
   const fuse = new Fuse(apiData, options);
   const results = fuse.search(query);

   return (
       <div className="w-3/6">
           <SearchBar query={query} setQuery={setQuery}/>
           <EmojiCards />
       </div>
   );
}

export default SearchWithEmojiCards;

SearchBarコンポーネントで、ユーザーの入力の状態をsetQuery ()関数で設定し、状態の入力変数を設定します.query , を返します.

import React from 'react';

const SearchBar = ({ setQuery, query }) => {
   function handleOnSearch({ currentTarget = {} }) {
       const { value } = currentTarget;
       setQuery(value);
   }
   return (
       <div className="p-8">
           <div className="bg-white flex items-center rounded-full shadow-xl">
               <input name="search"
                   type="search"
                   placeholder="Search for an emoji. Ex: heart"
                   autoComplete="off"
                   className="rounded-l-full w-full py-4 px-6 text-gray-700 leading-tight focus:outline-none"
                   id="search"
                   value={query}
                   onChange={handleOnSearch} />
               <div className="p-4">
               </div>
           </div>
       </div>
   );
}

export default SearchBar;

データ出力のように、データをAとして印刷しましたconsole.log() ユーザーが絵文字を検索するたびに.
出力の例を示します.

[
  {
    "item": {
      "emoji_name": "+1",
      "emoji_url": "https://github.githubassets.com/images/icons/emoji/unicode/1f44d.png?v8",
    },
    "refIndex": 0,
    "score": 0.03,
  },
  {
    "item": {
      "emoji_name": "-1",
      "emoji_url": "https://github.githubassets.com/images/icons/emoji/unicode/1f44e.png?v8",
    },
    "refIndex": 0,
    "score": 0.04
  }
]

7 .アイテムオブジェクトを取得するために配列をマップします.しかし、ユーザーが検索しなかった場合は、絵文字の結果は表示されません、私のページは裸に見えた!私は条件文を書くことに決めました:ユーザーが値を検索バーに入力するならば、ヒューズ.JSはそれらの特定の検索結果を提供することができました.私はそのデータを私の絵文字に渡した.私がデータをさらに変えることができるように、JSコンポーネント.

import React, { useState } from 'react';
import SearchBar from './SearchBar';
import Fuse from 'fuse.js';
import EmojiCards from './EmojiCards';

const SearchWithEmojiCards = ({ apiData }) => {
   const [query, setQuery] = useState('')

   const options = {
       keys: [
           "emoji_name",
       ],
       includeScore: true
   };
   const fuse = new Fuse(apiData, options);
   const results = fuse.search(query)
   const emojiResult = query ? results.map(result => result.item) : apiData;

   return (
       <div className="w-3/6">
           <SearchBar query={query} setQuery={setQuery} />
           <EmojiCards emojiResult={emojiResult} />
       </div>
   );
}

export default SearchWithEmojiCards;

8 .絵文字で.JSのコンポーネントは、私はデータをマップし、最初の6つの最も関連性の高い結果に制限した.私は必要に応じてカードをスタイリングした.

import React from 'react';

const EmojiCards = ({ emojiResult }) => {
   return (
       <div>
           <ol className="flex row justify-center">
               {emojiResult.slice(0, 6).map((emoji, value) => (
                   <li key={value} className="p-4 rounded-md w-max my-8 mx-3 shadow-2xl text-center" >
                       <img className="m-auto w-16 h-16" src={emoji.emoji_url} alt={emoji.emoji_name.replaceAll('_', ' ')} />
                       <span>{emoji.emoji_name.replaceAll('_', ' ')}</span>
                   </li>
               ))}
           </ol>
       </div>
   );
}

export default EmojiCards;

以下は最終結果のスクリーンショットです.

The site PRUMIを通してAWS S 3バケットに主催されます.お気軽にお試しください!
ヒューズを組み込む.あなたのプロジェクトにofficial documentation .
ヒューズに貢献したい.JS ?チェックアウトrepo .
また、私のチェックアウトすることができますrepo . 私はこのWebアプリに追加することができます改善や機能を提案すること自由に感じなさい.私はこのプロジェクトに追加していると私は行くので、私の学習を文書化するので、チューニングを維持!