リアルタイムの技術コースのFintSearch、Pythonを使用して作成された、反応+ redux、Docker、およびKubernetes.


ギタブレポhttps://github.com/dineshsonachalam/tech-courses-search-engine

デモ


  • Live demo

  • Video demo
  • このプロジェクトは何ですか。


    このプロジェクトでは、Google、Coursera、Mediaなどのリアルタイム検索エンジンを構築する方法を紹介します.
  • 1. Understanding all significant components in ElasticSearch and its Auto completion feature.
  • 2. Building an API service that interacts with ElasticSearch to be used by the UI.
  • 3. Testing API using Pytest.
  • 4. Building UI using React and Redux.
  • 5. Testing UI using Cypress.
  • アプリケーションアーキテクチャ




    1 .エラスティックサーチのすべての重要なコンポーネントを理解し、自動補完機能です。


    何が弾性検索ですか?
    無料およびオープン、分散、RESTful検索エンジン.エラスティックサーチを使用して、次のデータを格納、検索、管理できます.
  • ログ
  • 計量
  • 検索バックエンド
  • アプリケーション監視
  • エンドポイントセキュリティ
  • どのように、AntiticSearchは動きますか?
    いくつかの基本的なコンポーネントを理解しましょう.
    論理コンポーネント
  • 書類
  • 文書は、世界的なインターネットデータ交換形式であるJSONで表現されたエラスティックサーチでインデックス化される情報の低レベル単位です.リレーショナルデータベースの行のようなドキュメントを考えることができます.エラスティックサーチでは、文書は単なるテキスト以上であり、JSONでエンコードされた任意の構造化データである.そのデータは、数字、文字列、日付のようなものです.各々のドキュメントはユニークなIDと与えられたデータタイプを持ちます.そして、それは文書の実体がどんな種類であるかについて説明します.たとえば、ドキュメントは、Webサーバーから百科事典記事またはログエントリを表すことができます.
  • インデックス
  • インデックスは、類似した特性を持つドキュメントのコレクションです.インデックスは、AntiticSearchで照会することができる最高レベルのエンティティです.インデックスをリレーショナルデータベーススキーマのデータベースと同じように考えることができます.索引のどんな文書も、典型的には論理的に関連します.例えば、eコマースウェブサイトの文脈では、顧客のためのインデックス、製品のための1、注文のための1、などを持つことができます.インデックスはインデックスを参照するために使用される名前によって識別されます.索引、検索、更新、およびその中のドキュメントに対する削除操作を実行します.
  • インデックステンプレート
  • インデックステンプレートは、どのように作成されたときにインデックスを設定するかをエラスティックサーチに伝える方法です.テンプレートは、新しいインデックスが一致するパターンで作成されるたびに自動的に適用されます.
    バックエンドコンポーネント
  • クラスタ
  • エラスティックサーチクラスタは、一緒に接続される一つ以上のノードインスタンスのグループである.
  • ノード:
  • ノードはクラスタの一部である単一のサーバーです.ノードはデータを格納し、クラスタのインデクシングと検索機能に参加します.エラスティックサーチノードは、さまざまな方法で構成できます.
    ( i )マスターノード-エラスティックサーチクラスタを制御し、インデックスを作成/削除し、ノードを追加/削除するような、すべてのクラスタ全体の操作に対して責任があります.
    ( ii )データノードはデータを格納し、検索や集約などのデータ関連の操作を実行する.
    (iii)クライアントノード−マスタノードへのクラスタ要求とデータノードへのデータ関連要求を転送する.
  • シャード
  • FlashSearchは、シャードと呼ばれる複数の部分にインデックスを細分化する機能を提供します.各シャード自体はクラスタ内の任意のノードにホストすることができる完全に機能的で独立した“インデックス”です.複数のシャードの向こう側にインデックスにドキュメントを分配して、複数のノードの向こう側にそれらのシャードを分配することによって、エラスティックサーチは冗長性を確実にすることができます.
  • 複製
  • FlashSearchを使用すると、レプリカシャードまたはちょうどレプリカと呼ばれるあなたのインデックスの破片の1つまたは複数のコピーをすることができます.
    自動補完エラスティックサーチ機能を実装する方法?
  • エラスティックサーチDockerコンテナ
  • mkdir -p ES_DATA && docker run -v $(pwd)/ES_DATA:/usr/share/elasticsearch/data -e "discovery.type=single-node" -e "ES_JAVA_OPTS=-Xms750m -Xmx750m" -p 9200:9200 elasticsearch:7.12.0 
    
  • クラスタのヘルス状態を確認します.
  • dineshsonachalam@macbook ~ % curl --location --request GET 'http://elasticsearch:9200/_cat/health'
    1629473241 15:27:21 docker-cluster green 1 1 0 0 0 0 0 0 - 100.0%
    
  • 次のプロパティトピック、タイトル、URL、ラベル、およびupvotesを含むインデックステンプレートを作成します.
  • curl -X PUT "elasticsearch:9200/_index_template/template_1?pretty" -H 'Content-Type: application/json' \
    -d'{
        "index_patterns": "cs.stanford",
        "template": {
            "settings": {
                "number_of_shards": 1
            },
            "mappings": {
                "_source": {
                    "enabled": true
                },
                "properties": {
                    "topic": {
                        "type": "text"
                    },
                    "title": {
                        "type": "completion"
                    },
                    "url": {
                        "type": "text"
                    },
                    "labels": {
                        "type": "text"
                    },
                    "upvotes": {
                        "type": "integer"
                    }
                }
            }
        }
    }'
    
  • インデックステンプレートが利用可能であるかどうかを検証します.
  • dineshsonachalam@macbook ~ % curl --location --request GET 'http://elasticsearch:9200/_index_template/template_1'
    {
        "index_templates": [
            {
                "name": "template_1",
                "index_template": {
                    "index_patterns": [
                        "cs.stanford"
                    ],
                    "template": {
                        "settings": {
                            "index": {
                                "number_of_shards": "1"
                            }
                        },
                        "mappings": {
                            "_source": {
                                "enabled": true
                            },
                            "properties": {
                                "upvotes": {
                                    "type": "integer"
                                },
                                "topic": {
                                    "type": "text"
                                },
                                "title": {
                                    "type": "completion"
                                },
                                "url": {
                                    "type": "text"
                                },
                                "labels": {
                                    "type": "text"
                                }
                            }
                        }
                    },
                    "composed_of": []
                }
            }
        ]
    }
    
  • csという新しいインデックスを作成します.スタンフォード
  • dineshsonachalam@macbook ~ % curl --location --request PUT 'http://elasticsearch:9200/cs.stanford/'
    {
        "acknowledged": true,
        "shards_acknowledged": true,
        "index": "cs.stanford"
    }
    
  • csを検証します.スタンフォードインデックスが利用可能です.
  • dineshsonachalam@macbook ~ % curl --location --request GET 'http://elasticsearch:9200/cs.stanford/'
    {
        "cs.stanford": {
            "aliases": {},
            "mappings": {
                "properties": {
                    "labels": {
                        "type": "text"
                    },
                    "title": {
                        "type": "completion",
                        "analyzer": "simple",
                        "preserve_separators": true,
                        "preserve_position_increments": true,
                        "max_input_length": 50
                    },
                    "topic": {
                        "type": "text"
                    },
                    "upvotes": {
                        "type": "integer"
                    },
                    "url": {
                        "type": "text"
                    }
                }
            },
            "settings": {
                "index": {
                    "routing": {
                        "allocation": {
                            "include": {
                                "_tier_preference": "data_content"
                            }
                        }
                    },
                    "number_of_shards": "1",
                    "provided_name": "cs.stanford",
                    "creation_date": "1629526849180",
                    "number_of_replicas": "1",
                    "uuid": "NrvQ6juOSNmf0GOPO2QADA",
                    "version": {
                        "created": "7120099"
                    }
                }
            }
        }
    }
    
  • ドキュメントをCSに追加します.スタンフォード指数.
  • cd backend && python -c 'from utils.elasticsearch import Elasticsearch; es = Elasticsearch("cs.stanford"); es.add_documents()' && cd ..
    
  • CSのドキュメントの総数を取得します.スタンフォード指数.文書数は1350である.
  • dineshsonachalam@macbook tech-courses-search-engine % curl --location --request GET 'http://elasticsearch:9200/cs.stanford/_count'
    {
        "count": 1350,
        "_shards": {
            "total": 1,
            "successful": 1,
            "skipped": 0,
            "failed": 0
        }
    }
    
  • 自動補完のためにElasticSearch Spepsters検索を使用してください.提案された特徴は、提示されたテキストに基づいて類似している用語を示します.
  • dineshsonachalam@macbook tech-courses-search-engine % cd backend && python -c 'from utils.filters import SearchFilters; search = SearchFilters("cs.stanford"); print(search.autocomplete(query="python"))' && cd ..
    [
        {
            "id": 1,
            "value": "Python Data Science Handbook"
        },
        {
            "id": 2,
            "value": "Python Game Programming Tutorial: SpaceWar"
        },
        {
            "id": 3,
            "value": "Python for Beginners - Learn Python Programming La"
        },
        {
            "id": 4,
            "value": "Python for Data Science and Machine Learning Bootc"
        },
        {
            "id": 5,
            "value": "Python for Security Professionals"
        }
    ]
    

    2 . UIによって使用されるエラスティックサーチと対話するAPIサービスの構築。

  • 弾性検索、バックエンドとフロントエンドサービスを開始します
  • sh dev-startup.sh
    
  • APIドキュメント
  • オートコンプリート


      GET /autocomplete
    
    パラメータ
    種類
    説明query string必要です.クエリ文字列
    サンプル応答
    dineshsonachalam@macbook ~ % curl --location --request GET 'elasticsearch:8000/autocomplete?query=python'
    [
        {
            "id": 1,
            "value": "Python Data Science Handbook"
        },
        {
            "id": 2,
            "value": "Python GUI with Tkinter Playlist"
        },
        {
            "id": 3,
            "value": "Python Game Programming Tutorial: SpaceWar"
        },
        {
            "id": 4,
            "value": "Python PostgreSQL Tutorial Using Psycopg2"
        },
        {
            "id": 5,
            "value": "Python Programming for the Raspberry Pi"
        }
    ]
    

    クエリ検索


      POST /string-query-search
    
    パラメータ
    種類
    説明query string必要です.クエリ文字列
    サンプル応答
    dineshsonachalam@macbook ~ % curl --location --request POST 'elasticsearch:8000/string-query-search?query=python'
    [
        {
            "id": 1,
            "title": "Google's Python Class",
            "topic": "Python",
            "url": "https://developers.google.com/edu/python/",
            "labels": [
                "Free",
                "Python 2"
            ],
            "upvotes": 213
        },
        {
            "id": 2,
            "title": "Complete Python Bootcamp",
            "topic": "Python",
            "url": "https://click.linksynergy.com/deeplink?id=jU79Zysihs4&mid=39197&murl=https://www.udemy.com/complete-python-bootcamp",
            "labels": [
                "Paid",
                "Video",
                "Beginner",
                "Python 3"
            ],
            "upvotes": 196
        },
        {
            "id": 3,
            "title": "Automate the Boring Stuff with Python",
            "topic": "Python",
            "url": "http://automatetheboringstuff.com/",
            "labels": [
                "Free",
                "Book"
            ],
            "upvotes": 93
        },
        {
            "id": 4,
            "title": "Official Python Tutorial",
            "topic": "Python",
            "url": "https://docs.python.org/3/tutorial/index.html",
            "labels": [
                "Free"
            ],
            "upvotes": 74
        },
        {
            "id": 5,
            "title": "Working with Strings in Python",
            "topic": "Python",
            "url": "https://academy.vertabelo.com/course/python-strings",
            "labels": [
                "Free",
                "Beginner",
                "Python 3"
            ],
            "upvotes": 4
        },
        {
            "id": 6,
            "title": "Learn Python the Hard Way",
            "topic": "Python",
            "url": "https://learnpythonthehardway.org/book/",
            "labels": [
                "Paid",
                "Book",
                "Python 3"
            ],
            "upvotes": 293
        },
        {
            "id": 7,
            "title": "Python for Beginners - Learn Python Programming Language in 2 Hours",
            "topic": "Python",
            "url": "https://www.youtube.com/watch?v=yE9v9rt6ziw",
            "labels": [
                "Free",
                "Video",
                "Beginner",
                "Python 3"
            ],
            "upvotes": 62
        },
        {
            "id": 8,
            "title": "Automate the Boring Stuff with Python",
            "topic": "Python",
            "url": "https://click.linksynergy.com/deeplink?id=jU79Zysihs4&mid=39197&murl=https://www.udemy.com/automate/",
            "labels": [
                "Paid",
                "Video",
                "Beginner"
            ],
            "upvotes": 45
        },
        {
            "id": 9,
            "title": "Introduction to Programming with Python",
            "topic": "Python",
            "url": "https://mva.microsoft.com/en-US/training-courses/introduction-to-programming-with-python-8360",
            "labels": [
                "Free",
                "Video"
            ],
            "upvotes": 41
        },
        {
            "id": 10,
            "title": "A Byte of Python",
            "topic": "Python",
            "url": "http://www.swaroopch.com/notes/python/",
            "labels": [
                "Free"
            ],
            "upvotes": 22
        }
    ]
    

    pytestを使ってAPIをテストする


    PyTestはPythonに基づくテストフレームワークです.これは主にAPIベースのテストケースを書くために使用されます.ここでは、2つのAPI(autocompleteおよびstring query search)をテストします.
    PyTestを起動します.
    dineshsonachalam@macbook tech-courses-search-engine % pytest backend
    =========================================== test session starts ===========================================
    platform darwin -- Python 3.9.5, pytest-6.2.4, py-1.10.0, pluggy-0.13.1
    rootdir: /Users/dineshsonachalam/Desktop/tech-courses-search-engine
    plugins: cov-2.12.1, metadata-1.11.0
    collected 2 items                                                                                         
    
    backend/tests/test_api.py ..                                                                        [100%]
    
    ============================================ 2 passed in 0.35s ============================================
    dineshsonachalam@macbook tech-courses-search-engine % 
    

    4 .反応とreduxを使用したUIのビルド


    何が反応ですか?
    ユーザインタフェイスを構築するための宣言的で効率的で柔軟なJavaScriptライブラリ
    何がreduxですか?
    Reduxアプリケーションのクライアントデータを管理するためのJSライブラリです.Reduxあなたの状態を1つの場所で利用できるようにします.これは、アプリケーションのデータを管理するために使用されます.
    REDUXを使用するときの注意点
  • 状態を識別します.
  • 良い減速機を書きなさい.
  • redux状態は残りを処理しましょう.
  • Reduxの建築部品
  • action -> actionはどのようなアクションを実行するかを指示するタイプフィールドを持ち、他のすべてのフィールドは情報やデータを含んでいます.
  • reducer ->関数(現在の状態と動作)を取得し、新しい状態を返し、どのようにするかをストアに通知します.
  • store -> storeはアプリケーションの状態を保持するオブジェクトです.

  • アプリケーションで使用するコンポーネントを返します.
    何が反応コンポーネントですか?
    コンポーネントは独立して再利用可能なコードのビットです.JavaScript関数と同じ目的で動作しますが、render ()関数でHTMLを分離して返します.
    コンポーネントは、クラス構成要素と機能コンポーネントの2つのタイプに分類されます.
    クラス対機能的なコンポーネントの違いは何ですか
    クラスコンポーネントでは、これを使用して状態の値にアクセスできます.JSXの状態で、setstateを使用して状態の値を更新します.イベント内で関数を設定することができます.
    機能的なコンポーネントでは、私たちは初期状態を割り当てるためにusEstateを使用します、そして、我々は状態を更新するためにSetCount(例では)を使います.状態の値にアクセスしたいなら、これを省略できます.状態の名前を呼び出し、代わりに状態の名前を呼び出します.
    アプリケーションで使用するコンポーネントを返します.
    ここでは、すべての反応コンポーネントはsrc/componentフォルダにあります.
    dineshsonachalam@macbook frontend % tree src/components 
    src/components
    ├── Nav.js
    ├── ResponsiveAntMenu.js
    ├── SearchBar.js
    └── SearchResults.js
    
    0 directories, 4 files
    

    Reduxがこの反応アプリケーションにどのように統合されるか
    ここではすべてのreduxコンポーネントはsrc/reduxフォルダで利用できます.ここでは、ininalizedアクション、検索還元とreduxストア.
    dineshsonachalam@macbook frontend % tree src/redux 
    src/redux
    ├── actionTypes.js
    ├── actions.js
    ├── reducers
    │   ├── index.js
    │   └── searchReducer.js
    └── store.js
    
    1 directory, 5 files
    
    UIを開発モードで起動するには、次の手順に従います
    npm i && npm run start --prefix frontend
    

    サイプレスを使用したUIのテスト。


    サイプレスとは何か
    ブラウザで動作する何かの高速で、簡単で信頼性の高いテスト.サイプレスは、Webアプリケーションの統合テストのための最も人気のある選択です.
    サイプレス機能
  • テストランナー:ので、1つのサイプレスについての最高の機能の手をテストランナーです.これは、エンドツーエンドのテストに全く新しい経験を提供します.
  • テストを設定する:我々はすでにテストを設定しているもう一つの大きな特徴は、非常に簡単です、あなただけのサイプレスをインストールし、すべてがあなたのために設定されます
  • 自動待ち-あなたがかろうじてサイプレスを使用して待つときに使用する必要がありますて
  • スタブ-簡単にアプリケーションの機能の動作とサーバーの応答を抑制することができます.
  • サイプレス統合テストの実行
    我々のアプリケーションのサイプレスの統合テストフロントエンド/サイプレス/インテグレーション/検索コースでご利用いただけます.spec . jsファイルパス
    dineshsonachalam@macbook tech-courses-search-engine % tree frontend/cypress
    frontend/cypress
    ├── fixtures
    │   └── example.json
    ├── integration
    │   └── search-courses.spec.js
    ├── plugins
    │   └── index.js
    └── support
        ├── commands.js
        └── index.js
    
    4 directories, 5 files
    dineshsonachalam@macbook tech-courses-search-engine % 
    
    サイプレステストランナーでサイプレステストを実行する
    サイプレステストランナーを開くには、次のコマンドを実行できます.
    npx cypress open
    
    サイプレステストランナーが開き、次のような結果が表示されるテストを実行できます.
    すべてのcypressコマンドを参照することができます下記などの訪問、URL&タイトル
    すべてのあなたの成功アサーションは緑色で表示され、赤で失敗したアサーション.


    許可


    MIT © dineshsonachalam