frontend sdk
vu
Klevuの真新しいSDKを使用すると、AI製品の発見の力を何でも引くことができます。
従来のWebサイト、単一ページアプリケーション（SPA）、プログレッシブWebアプリ（PWA）、モバイルアプリ、キャンペーンWebサイト、店内キオスク、宇宙船など。
開発者にとってよりシンプルで、革新が速くなります。
ここにさまざまなプロジェクトへのリンクがあります。
Klevu SDKは、eコマースストアにスマート検索、カテゴリマーチャンダイジング、推奨ソリューションをもたらします。 Klevuは、顧客にとって最高の製品ブラウジングエクスペリエンスを簡単に作成できます。
Klevuには、ほとんどのユーザーに最適なJavaScriptライブラリを簡単に実装できます。このライブラリは誰に適していますか？
Klevu SDKはTypeScriptで書かれています。
このライブラリは、ReactやVueなどのすべての主要なフロントエンドライブラリをサポートしています。ただし、このSDKは、希望する方法でKlevu Smart Search、カテゴリのマーチャンダイング、および推奨事項をプラグインする機能を提供します。 KlevuのコアでAIを駆動する製品のクリック、検索、購入のイベント追跡を含みます。
PWAは、ネイティブアプリと同等のエクスペリエンスをユーザーに提供するように設計されています。 Klevu SDKを使用すると、Klevu Aiの力をPWAに持ち込むこともできます。
SSR＆SSGは、NextJSやNuXTJSなどの最も人気のあるフロントエンドフレームワークのすべてで標準機能になりつつあります。 Klevu SDKを使用すると、ページがロードされる前に検索結果、カテゴリページ、および推奨事項を要求することにより、ストアのSEOとユーザーのエクスペリエンスを増やすことができます。
Klevu SDKにより、開発者は表示方法を最大限に制御し、ユーザーが製品カタログと対話できるようにします。 SDKライブラリをプロジェクトに追加すると、ブランドに完全に適合するTrullyユニークなユーザーエクスペリエンスを作成するために必要なすべてのビルディングブロックがあります。
このSDKに含まれるReactの例に多くの機能を詰め込みました。多くの機能と、実用的な例を見つける場所があります。また、この例で実装されているものの詳細については、Reackの例を確認することもできます。ここをクリックしてください。
| 特徴 | 説明 | 例 |
|---|---|---|
| クイック検索 | テキストフィールドに入力するときに検索結果を表示するために使用される例。 | QuickSearch.TSX |
| 検索結果のランディングページ | URLで渡されたキーワードに基づいて検索結果を表示する例。 | SearchResultPage.tsx |
| カテゴリナビゲーション | カテゴリ/コレクション内の製品の例の例。 | categorypage.tsx |
| 単一の製品検索 | 検索を使用して、単一の製品のデータを照会する例。 | ProductPage.tsx |
| フィルター | 製品ファセットに基づいて製品を絞り込むためのフィルターの例。 | SearchResultPage.tsx categorypage.tsx |
| より多くの結果をロードします | より多くの製品をリクエストするためのボタンを増やすことの例。 | SearchResultPage.tsx |
分析は、Klevuが使用する機械学習を駆動して、ユーザーに最良の結果を提供します。
| 特徴 | 説明 | 例 |
|---|---|---|
| SearchEvent | 検索されたものを追跡します。 | QuickSearch.TSX |
| 製品クリックイベントを検索します | 検索結果からクリックされた製品を追跡します。 | SearchResultPage.tsx |
| カテゴリナビゲーション製品クリックイベント | カテゴリページからクリックされた製品を追跡します。 | categorypage.tsx |
| 購入/購入イベント | 購入した製品を追跡します。 | checkoutpage.tsx |
| 特徴 | 説明 | 例 |
|---|---|---|
| Klevu Merchant Centerの推奨事項 | KMC内で作成された推奨事項を追加します。 1 | homepage.tsx categorypage.tsx ProductPage.tsx |
| 同様の製品 | ProductPage.tsx |
| 特徴 | 説明 | 例 |
|---|---|---|
| パーソナライズ | 修飾子を追加して、Klevufetch検索に個人化を簡単に追加できます。 | homepage.tsx |
| 特徴 | 説明 | 例 |
|---|---|---|
| Klevukmcsettings | Klevu Merchant Centerの設定をブラウザのLocalStorageにロードします。 | index.tsx |
Node.jsとNPMは、開始する前にシステムにインストールする必要があります。これは、開発を開始する前に1回行う必要があります。
build and test @klevu/coreを実行するには、最初にpackages/klevu-coreに移動する必要があります。
開始する前に、 npm installですべてのパッケージをインストールする必要があります
npm run build @klevu/coreの生産バージョンを作成します。実行するたびにクリーンなビルドを行います。
実際にリリースするには、CI/CDスクリプトutils/release-klevu-core.jsがあります。 node.jsを使用して実行します。
npm run build：監視
build:watch変更が発生するたびに、ウォッチモードの再構築アプリケーションでビルドを実行します。クリーンなビルドではありませんが、インクリメンタルビルドは、リリースに必要なすべてのトリックを実行するわけではありません。コアの変更を必要とする@klevu/uiのような他のパッケージを開発しながらライブラリに変更を加えたい場合は良いことです。
npm run qoc
これは、コードの品質が十分であることをチェックします。 GitHubによって自動的に実行されます。
NPM実行テスト
Coreのテストの大きなスイートを実行します。建物は必要ありません。すべてが完全に機能するのを見るために、たまにテストを開発および実行することが可能です。 GitHubによって自動的に実行されます。
@klevu/ui構築を開始するには、最初にpackages/klevu-uiフォルダーに移動し、 npm install実行する必要があります。ビルドを正しく行うにはpackages/klevu-ui-react and packages/klevu-ui-vueにもnpm installを実行する必要があります。
ReactおよびVueパッケージでは、他の変更は必要ありません。それらのコンテンは、 klevu-uiプロジェクトによって自動的に生成されます。
npm run build @klevu/uiの分散バージョンを作成します。ただし、適切なバージョンを作成して3つのUIライブラリすべてをリリースするにはutils/update-klevu-ui.jsにCI/CDノードスクリプトがあります。
コンポーネントを開発およびテストする最も簡単な方法は、ストーリーブックを実行することです。そのためには、UIプロジェクトの構築を視聴し、ストーリーブックを実行する必要があります。
npm run build：監視
そして別のウィンドウで
NPMランストーリーブック
これにより、開発環境が開かれるはずです。
コンポーネントを生成するには、コマンドを使用できます。
npm run generate
クリーンコードを作成するために、 ESLintとPrettier拡張機能をインストールすることをお勧めします。
KlevuのMerchant Centerを使用すると、追加されたページのコンテキストを考慮した特定の用途に関する推奨事項を作成できます。 ↩
