frontend sdk
vu
مع SDK الجديد من Klevu ، يمكنك سحب قوة اكتشاف منتج الذكاء الاصطناعي إلى أي شيء.
موقع ويب تقليدي ، تطبيق صفحة واحدة (SPA) ، تطبيق الويب التدريجي (PWA) ، تطبيق للجوال ، موقع على شبكة الإنترنت ، كشك في المتجر ، سفينة فضاء ... أيا كان.
أبسط للمطورين ، أسرع للابتكار.
فيما يلي روابط لمشاريع مختلفة.
يجلب Klevu SDK البحث الذكي ، وحل التجارة والتوصيات الفئة لمتجر التجارة الإلكترونية الخاصة بك. يسهل Klevu إنشاء أفضل تجربة لتصفح المنتجات لعملائك.
لدى Klevu بالفعل مكتبة JavaScript التي تعتبر مثالية لمعظم المستخدمين ، فمن تكون هذه المكتبة جيدة؟
تتم كتابة Klevu SDK في TypeScript التي تمنحك:
تدعم هذه المكتبة جميع مكتبات الواجهة الأمامية الرئيسية مثل React و Vue. ومع ذلك ، يمنحك هذا SDK القدرة على البحث الذكي Klevu بالمكونات الإضافية ، وترسيج الفئة والتوصيات بأي طريقة تريدها. بما في ذلك تتبع الأحداث لنقرات المنتج وعمليات البحث والمشتريات التي تدفع الذكاء الاصطناعي في قلب Klevu.
تم تصميم PWAS لمنح المستخدمين تجربة على قدم المساواة مع التطبيقات الأصلية. مع Klevu SDK ، يمكنك أيضًا إحضار قوة Klevu AI إلى PWA.
سرعان ما أصبحت SSR & SSG ميزات قياسية في جميع أطر عمل الواجهة الأمامية الأكثر شعبية مثل NextJs و NuxtJS. مع Klevu SDK ، يمكنك زيادة كبار المسئولين الاقتصاديين في متجرك وتجربة المستخدم عن طريق طلب نتائج البحث وصفحات الفئات والتوصيات قبل تحميل الصفحة.
يمنح Klevu SDK التحكم في أقصى قدر من التحكم في الطريقة التي يريدون عرضها والسماح للمستخدمين بالتفاعل مع كتالوج المنتج الخاص بك. عند إضافة مكتبة SDK إلى مشروعك ، يكون لديك جميع اللبنات الأساسية اللازمة لإنشاء تجارب مستخدم فريدة من نوعها تناسب علامتك التجارية تمامًا.
لقد قمنا بتعبئة الكثير من الميزات في مثال React المتضمن مع SDK. فيما يلي العديد من الميزات وأين يمكن العثور على مثال عمل. يمكنك أيضًا إلقاء نظرة على مثال React Readme لمزيد من المعلومات حول ما يتم تنفيذه في المثال وانقر هنا إلى:
| ميزة | وصف | مثال |
|---|---|---|
| البحث السريع | مثال يستخدم لعرض نتائج البحث أثناء الكتابة في حقل نص. | QuickSearch.tsx |
| نتائج البحث الصفحة المقصودة | مثال لإظهار نتائج البحث بناءً على كلمة رئيسية مرت في عنوان URL. | SearchResultPage.tsx |
| فئة الملاحة | مثال عرض المنتجات في فئة/مجموعة. | الفئة |
| البحث عن منتج واحد | مثال على استخدام البحث للاستعلام عن البيانات لمنتج واحد. | productpage.tsx |
| المرشحات | أمثلة على المرشحات لتضييق المنتجات القائمة على جوانب المنتج. | SearchResultPage.tsx الفئة |
| تحميل المزيد من النتائج | مثال على زر تحميل المزيد لطلب المزيد من المنتجات. | SearchResultPage.tsx |
التحليلات تدفع التعلم الآلي الذي تستخدمه Klevu لتزويد المستخدمين بأفضل النتائج.
| ميزة | وصف | مثال |
|---|---|---|
| البحث | تتبع ما تم تفتيشه. | QuickSearch.tsx |
| بحث المنتج انقر فوق حدث | تتبع المنتجات التي يتم النقر عليها من نتائج البحث. | SearchResultPage.tsx |
| فئة التنقل منتج انقر فوق حدث | تتبع المنتجات التي يتم النقر عليها من صفحات الفئة. | الفئة |
| شراء/شراء حدث | تتبع المنتجات التي تم شراؤها. | checkoutpage.tsx |
| ميزة | وصف | مثال |
|---|---|---|
| توصيات مركز Klevu Merchant Center | إضافة توصيات تم إنشاؤها داخل KMC. 1 | الصفحة الرئيسية الفئة productpage.tsx |
| منتجات مماثلة | productpage.tsx |
| ميزة | وصف | مثال |
|---|---|---|
| التخصيص | إضافة بسهولة إلى عمليات البحث في Klevufetch عن طريق إضافة معدل. | الصفحة الرئيسية |
| ميزة | وصف | مثال |
|---|---|---|
| klevukmcsettings | قم بتحميل إعدادات مركز Klevu Merchant Center في LocalStorage للمتصفح. | index.tsx |
يجب تثبيت Node.js و NPM على نظامك قبل البدء. يجب أن يتم ذلك مرة واحدة قبل بدء التنمية.
لتشغيل البناء واختبار @klevu/core تحتاج أولاً إلى الانتقال إلى packages/klevu-core .
قبل البدء ، تحتاج إلى تثبيت جميع الحزم مع npm install
npm run build ينشئ نسخة إنتاج من @klevu/core . يقوم ببناء نظيف في كل مرة يتم تشغيلها.
لإصدار بالفعل هناك ci/cd script utils/release-klevu-core.js . استخدم node.js لتشغيله.
NPM Run Build: Watch
build:watch Runs Build في تطبيق إعادة بناء وضع الساعة في كل مرة تكون هناك تغييرات. إنه لا يقوم ببناء نظيف ، ولكن التصميمات الإضافية ولا تفعل كل الحيل المطلوبة للإصدار. من الجيد إذا كنت ترغب في إجراء تغييرات على المكتبة أثناء تطوير حزمة أخرى مثل @klevu/ui التي تتطلب تغييرات على Core.
NPM Run QOC
هذا يتحقق من أن جودة التعليمات البرمجية جيدة بما فيه الكفاية. سيتم تشغيله تلقائيًا بواسطة Github.
اختبار تشغيل NPM
يدير مجموعة كبيرة من الاختبارات للنواة. لا يتطلب البناء. يمكن أن يكون من الممكن فقط تطوير وتشغيل الاختبار مرة واحدة كل فترة لرؤية كل شيء يعمل بشكل مثالي. سيتم تشغيله تلقائيًا بواسطة Github.
للبدء في بناء @klevu/ui ، تحتاج أولاً إلى الذهاب إلى مجلد packages/klevu-ui وإجراء npm install . لجعل Build Work بشكل صحيح ، تحتاج إلى تشغيل npm install أيضًا في packages/klevu-ui-react و packages/klevu-ui-vue .
لا تحتاج حزم React و Vue إلى أي تغييرات أخرى. يتم إنشاء Contens تلقائيًا بواسطة مشروع klevu-ui .
npm run build ينشئ نسخة موزعة من @klevu/ui . ولكن لإنشاء إصدار مناسب وإصدار جميع مكتبات واجهة المستخدم الثلاث ، يوجد نص عقدة CI/CD في utils/update-klevu-ui.js .
أسهل طريقة لتطوير واختبار المكونات هي عن طريق تشغيل القصص القصيرة. لذلك ، تحتاج إلى مشاهدة مشروع واجهة المستخدم وتشغيل كتاب القصص.
NPM Run Build: Watch
وفي نافذة منفصلة
NPM Run Storybook
هذا يجب أن يفتح بيئة التنمية.
لإنشاء مكونات إنشاء يمكنك استخدام الأمر:
NPM تشغيل توليد
تم التوصية بتثبيت امتدادات ESLint Prettier من أجل إنتاج رمز نظيف.
يتيح لك مركز Merchant Center في Klevu إنشاء توصيات لاستخدامات محددة تأخذ في الاعتبار سياق الصفحات التي تمت إضافتها فيها. ↩
