visearch sdk javascript
5.0.0 Release
يوفر برنامج Javascript SDK الخاص بـ ViSenze واجهات برمجة التطبيقات للبحث عن الصور دقيقة وموثوقة وقابلة للتطوير ضمن كتالوجاتنا. تهدف واجهات برمجة التطبيقات المضمنة في SDK إلى تزويد المطورين بنقاط نهاية تنفذ البحث عن الصور بكفاءة مع تسهيل التكامل في تطبيقات الويب أيضًا.
ملاحظة: من أجل استخدام أي من حزم SDK الخاصة بنا، يجب أن يكون لديك حساب مطور ViSenze. ستتمكن من الوصول إلى لوحة التحكم الخاصة بك لإدارة مفاتيح التطبيقات والكتالوجات الخاصة بك. زيارة هنا لمزيد من المعلومات.
اتبع هذه الخطوات البسيطة للتعرف على كيفية دمج SDK وكيف يعمل بالفعل من خلال استكشاف عروضنا التوضيحية المضمنة في الريبو الرئيسي.
إذا كنت تستخدم المشروع المقدم مباشرة من الريبو الرئيسي، فيمكنك ببساطة تشغيل الأمر التالي من الدليل الجذر لهذا المشروع:
npm install
إذا كنت تحاول تضمين SDK هذا في مشروعك الخاص عبر npm، فقم بتشغيل الأمر التالي من الدليل الجذر لمشروعك:
npm install visearch-javascript-sdk
في العقدة
import ViSearch from 'visearch-javascript-sdk' ;
...
const visearch = ViSearch ( ) ;إذا كانت لديك مواضع متعددة أو إذا كنت تريد تشغيل مواضع بتكوينات مختلفة، فستحتاج إلى إنشاء مثيلات ViSearch متعددة.
const visearch1 = ViSearch ( ) ;
const visearch2 = ViSearch ( ) ;في المتصفح
إذا كنت ترغب في تضمين SDK مباشرةً على صفحة الويب الخاصة بك، فأضف هذا إلى رأس موقعك
< script type =" text/javascript " >
! function ( e , t , r , s , a ) { if ( Array . isArray ( a ) ) for ( var n = 0 ; n < a . length ; n ++ ) o ( e , t , r , s , a [ n ] ) ; else o ( e , t , r , s , a ) ; function o ( e , t , r , s , a ) { var n = e [ a ] || { } ; e [ a ] = n , n . q = n . q || [ ] , n . factory = function ( e ) { return function ( ) { var t = Array . prototype . slice . call ( arguments ) ; return t . unshift ( e ) , n . q . push ( t ) , n } } , n . methods = [ "set" , "setKeys" , "sendEvent" , "sendEvents" , "productMultisearch" , "productMultisearchAutocomplete" , "productSearchByImage" , "productSearchById" , "productRecommendations" , "productSearchByIdByPost" , "productRecommendationsByPost" , "setUid" , "getUid" , "getSid" , "getLastQueryId" , "getSessionTimeRemaining" , "getDefaultTrackingParams" , "resetSession" , "resizeImage" , "generateUuid" , ] ; for ( var o = 0 ; o < n . methods . length ; o ++ ) { var i = n . methods [ o ] ; n [ i ] = n . factory ( i ) } if ( e . viInit ) viInit ( e , a ) ; else { var c , d , u , f , g , m = ( c = t , d = r , u = s , ( f = c . createElement ( d ) ) . type = "text/javascript" , f . async = ! 0 , f . src = u , ( g = c . getElementsByTagName ( d ) [ 0 ] ) . parentNode . insertBefore ( f , g ) , f ) ; m . onload = function ( ) { viInit ( e , a ) } , m . onerror = function ( ) { console . log ( "ViSearch Javascript SDK load fails" ) } } } } ( window , document , "script" , "https://cdn.visenze.com/visearch/dist/js/visearch-5.0.0.min.js" , "visearch" ) ;
script >انسخ نفس الرمز ولكن قم بتغيير الكلمة الأساسية "visearch" إلى مجموعة من أسماء المثيلات المطلوبة.
< script type =" text/javascript " >
... ( window , document , "script" , 0 , [ "visearch" , "visearch2" ] ) ;
script > قبل أن تتمكن من البدء في استخدام SDK، ستحتاج إلى إعداد . يمكن العثور على معظم هذه المفاتيح في لوحة معلومات حسابك.
يرجى إلقاء نظرة على الجدول أدناه لفهم ما يمثله كل مفتاح:
| مفتاح | أهمية | وصف |
|---|---|---|
| app_key | إلزامي | تعتمد جميع وظائف SDK على مفتاح app_key صالح يتم تعيينه. يحد مفتاح التطبيق أيضًا من ميزات واجهة برمجة التطبيقات (API) التي يمكنك استخدامها. |
| place_id | إلزامي | معرف الموضع للموضع الحالي |
| نقطة النهاية | ظرفية | الافتراضي هو https://search.visenze.com/ |
| نفذ الوقت | خياري | تخلف عن 15000 |
| uid | خياري | إذا لم يتم توفير ذلك، فسنقوم تلقائيًا بإنشاء المعرف الفريد (uid). |
قم بإعداد مثيل (مثيلات) ViSearch باستخدام المفاتيح من وحدة التحكم.
visearch . set ( 'app_key' , 'YOUR_APP_KEY' ) ;
visearch . set ( 'placement_id' , 'YOUR_PLACEMENT_ID' ) ;
visearch . set ( 'timeout' , TIMEOUT_INTERVAL_IN_MS ) ;أو
visearch . setKeys ( {
'app_key' : 'YOUR_APP_KEY' ,
'placement_id' : 'YOUR_PLACEMENT_ID'
} ) ;
visearch2 . setKeys ( {
'app_key' : 'YOUR_APP_KEY_2' ,
'placement_id' : 'YOUR_PLACEMENT_ID_2'
} ) ;أو
إذا كنت في Node env، فيمكنك تمرير التكوينات مباشرة عند إنشاء عميل ViSearch.
const visearch = ViSearch ( {
'app_key' : 'YOUR_APP_KEY' ,
'placement_id' : 'YOUR_PLACEMENT_ID'
} )العرض التوضيحي ينطبق فقط على أولئك الذين يعملون مباشرة خارج الريبو الرئيسي. يجب أن يكون لديك بيئة Node.js وتذكر ملء الملفات ذات الصلة .
قم بإنشاء ملف
.envواملأ مفتاح التطبيق ومعرف الموضع ذي الصلة
SEARCH_APP_KEY =
SEARCH_PLACEMENT_ID =
SEARCH_IM_URL =
REC_PID =
REC_APP_KEY =
REC_PLACEMENT_ID =
ENDPOINT =
لتشغيل العرض التوضيحي لصفحة الويب:
npm run start - demo بعد الأمر أعلاه، يجب أن ترى أن الخادم يعمل محليًا على جهازك. يمكنك بعد ذلك الوصول إلى صفحات الويب التجريبية المختلفة في متصفحك باستخدام هذا التنسيق http://localhost:3000/examples/*.html .
http://localhost:3000/examples/product_search_by_id.html
http://localhost:3000/examples/product_search_by_image.html
http://localhost:3000/examples/tracking.html
بوست /المنتج/search_by_image
يمكن أن يتم البحث بالصور بثلاث طرق مختلفة - عن طريق عنوان url أو المعرف أو الملف.
باستخدام معرف الصورة:
const parameters = {
im_id : 'your-image-id'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productSearchByImage ( parameters , onResponse , onError ) ;باستخدام عنوان URL للصورة:
const parameters = {
im_url : 'your-image-url'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productSearchByImage ( parameters , onResponse , onError ) ;باستخدام ملف الصورة:
< form >
Upload image: < input type =" file " id =" fileUpload " name =" fileInput " > < br >
< input type =" submit " value =" Submit " >
form > const parameters = {
image : document . getElementById ( 'fileUpload' )
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productSearchByImage ( parameters , onResponse , onError ) ;يمكن العثور على معلمات الطلب الخاصة بواجهة برمجة التطبيقات (API) هذه في ViSenze Documentation Hub.
الحصول على /المنتج/التوصيات/{product_id}
ابحث عن منتجات متشابهة بصريًا في قاعدة بيانات المنتج مع توفير المعرف الفريد للمنتج المفهرس.
const product_id = 'your-product-id' ;
const parameters = {
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productRecommendations ( product_id , parameters , onResponse , onError ) ;يمكن العثور على معلمات الطلب الخاصة بواجهة برمجة التطبيقات (API) هذه في ViSenze Documentation Hub.
ما بعد / المنتج / البحث المتعدد
يمكن أن يتم البحث المتعدد بأربع طرق مختلفة - عن طريق النص أو عنوان URL أو المعرف أو الملف.
استخدام النص:
const parameters = {
q : 'your-text-query'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearch ( parameters , onResponse , onError ) ;باستخدام معرف الصورة:
const parameters = {
im_id : 'your-image-id'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearch ( parameters , onResponse , onError ) ;باستخدام عنوان URL للصورة:
const parameters = {
im_url : 'your-image-url'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearch ( parameters , onResponse , onError ) ;باستخدام ملف الصورة:
< form >
Upload image: < input type =" file " id =" fileUpload " name =" fileInput " > < br >
< input type =" submit " value =" Submit " >
form > const parameters = {
image : document . getElementById ( 'fileUpload' )
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearch ( parameters , onResponse , onError ) ;يمكن العثور على معلمات الطلب الخاصة بواجهة برمجة التطبيقات (API) هذه في ViSenze Documentation Hub.
POST /المنتج/البحث المتعدد/الإكمال التلقائي
يمكن أن يتم الإكمال التلقائي للبحث المتعدد بأربع طرق مختلفة - عن طريق النص أو عنوان URL أو المعرف أو الملف.
استخدام النص:
const parameters = {
q : 'your-text-query'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearchAutocomplete ( parameters , onResponse , onError ) ;باستخدام معرف الصورة:
const parameters = {
im_id : 'your-image-id'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearchAutocomplete ( parameters , onResponse , onError ) ;باستخدام عنوان URL للصورة:
const parameters = {
im_url : 'your-image-url'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearchAutocomplete ( parameters , onResponse , onError ) ;باستخدام ملف الصورة:
< form >
Upload image: < input type =" file " id =" fileUpload " name =" fileInput " > < br >
< input type =" submit " value =" Submit " >
form > const parameters = {
image : document . getElementById ( 'fileUpload' )
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearchAutocomplete ( parameters , onResponse , onError ) ;يمكن العثور على معلمات الطلب الخاصة بواجهة برمجة التطبيقات (API) هذه في ViSenze Documentation Hub.
لا تحتوي Javascript على تعريفات للأنواع وستقوم استجابة REST API لجميع واجهات برمجة التطبيقات الخاصة بنا بالتحويل مباشرةً إلى كائنات Javascript. فيما يلي بعض مفاتيح كائن استجابة واجهة برمجة التطبيقات (API) التي يجب مراعاتها:
| اسم | يكتب | وصف |
|---|---|---|
| حالة | خيط | حالة الطلب إما OK أو warning أو fail |
| imId | خيط | معرف الصورة. يمكن استخدامها للبحث مرة أخرى دون إعادة التحميل |
| im_id | خيط | |
| خطأ | هدف | رسالة خطأ ورمز إذا لم يكن الطلب ناجحًا، أي عندما تكون الحالة warning أو fail |
| أنواع_المنتجات | هدف[] | تم اكتشاف أنواع المنتجات ودرجاتها والمربع المحيط بها بتنسيق (x1,y1,x2,y2). |
| نتيجة | هدف[] | قائمة المنتجات في نتائج البحث. حقول مهمة للإصدار الأول. إذا كان مفقودًا، فسيتم تعيينه على أنه فارغ. لاحظ أننا نقوم بعرض حقول الكتالوج الأصلية للعميل في حقل "البيانات". |
| أشياء | هدف[] | عندما يتم تعيين المعلمة search_all_objects على true |
| catalog_fields_mapping | هدف | تعيين حقول الكتالوج الأصلي |
| جوانب | هدف[] | قائمة بقيمة حقول الواجهة والاستجابة للتصفية |
| صفحة | رقم | رقم صفحة النتيجة |
| حد | رقم | عدد النتائج في كل صفحة |
| المجموع | رقم | العدد الإجمالي لنتائج البحث |
| معرف الطلب | خيط | المعرف المخصص للطلب المقدم |
| اسم | يكتب | وصف |
|---|---|---|
| شفرة | رقم | رمز الخطأ، على سبيل المثال 401، 404 الخ... |
| رسالة | خيط | رسالة استجابة الخادم. |
| اسم | يكتب | وصف |
|---|---|---|
| صندوق | رقم[] | إحداثيات مساحة الصورة لمربع الكشف الذي يمثل المنتج. |
| يكتب | خيط | نوع المنتج الذي تم اكتشافه. |
| اسم | يكتب | وصف |
|---|---|---|
| معرف_المنتج | خيط | معرف المنتج الذي يمكن استخدامه في التوصيات. |
| main_image_url | خيط | عنوان URL للصورة. |
| بيانات | هدف | يعتمد حقل البيانات هذا على البيانات الوصفية التي يطلبها المستخدم هنا. |
تعتمد الحقول التي يتم إرجاعها هنا على بيانات تعريف المنتج المطلوبة من خلال معلمات attrs_to_get والحقول المفهرسة في الكتالوج الخاص بك.
بخلاف ذلك، نعيد حقلين افتراضيين.
| حقول كتالوج ViSenze المحددة مسبقًا | الأسماء الأصلية لكتالوج العميل X |
|---|---|
| معرف_المنتج | SKU |
| main_image_url | Medium_image |
عند تعيين استخدام search_all_objects على true ، ستعيد استجابة البحث النتائج في قائمة ProductObject بدلاً من قائمة المنتج مباشرةً. الفرق هو أن ProductObject سيقوم بتقسيم المنتجات حسب النوع.
| اسم | يكتب | وصف |
|---|---|---|
| نتيجة | هدف[] | قائمة المنتجات التي تنتمي إلى هذا النوع. |
| المجموع | رقم | العدد الإجمالي للنتائج في هذا النوع. |
| يكتب | خيط | نوع المنتج الذي تم اكتشافه. |
| صندوق | رقم[] | إحداثيات مساحة الصورة لمربع الكشف الذي يمثل المنتج. |
تُستخدم الأوجه لإجراء التصفية المحتملة للنتائج.
| اسم | يكتب | وصف |
|---|---|---|
| مفتاح | خيط | |
| أغراض | هدف[] | |
| يتراوح | هدف |
للتحقق من إرشادات الاستخدام، يرجى الرجوع هنا
واجهة لتصفية القيمة المميزة.
| اسم | يكتب | وصف |
|---|---|---|
| قيمة | خيط | |
| عدد | رقم |
واجهة لتصفية نطاق القيمة.
| اسم | يكتب | وصف |
|---|---|---|
| دقيقة | خيط | |
| الأعلى | خيط |
هناك العديد من المعلمات التي تدعمها واجهة برمجة التطبيقات لدينا وسنعرض لك بعض الأمثلة حول كيفية استخدامها في هذا القسم.
يمكنك العثور على جميع معلمات البحث المتقدم المدعومة لواجهة برمجة تطبيقات ProductSearch هنا.
لاسترداد البيانات التعريفية لنتائج الصور الخاصة بك، قم بتوفير قائمة مفاتيح البيانات التعريفية لقيمة البيانات التعريفية التي سيتم إرجاعها في خاصية attrs_to_get :
visearch . productSearchByImage ( {
im_url : 'your-image-url' ,
attrs_to_get : [ 'price' , 'brand' , 'im-url' ] , // list of fields to be returned
} , ( res ) => {
// TODO handle response
} , ( err ) => {
// TODO handle error
} ) ;لاحظ أنه يمكن استرداد السمات المفهرسة فقط باستخدام هذه المعلمة. يمكنك الانتقال إلى صفحة تحرير التطبيق في وحدة تحكم Discovery Suite لمراجعة السمات التي تم تضمينها في فهرس التطبيق.
لتصفية نتائج البحث بناءً على قيم البيانات التعريفية، قم بتوفير مصفوفة سلسلة من مفتاح البيانات التعريفية لتصفية القيمة في خاصية filters . فقط السعر والفئة والعلامة التجارية ومعلمة مرشح دعم original_price.
visearch . productSearchByImage ( {
im_url : 'your-image-url' ,
filters : [ 'brand:my_brand' ] ,
} , ( res ) => {
// TODO handle response
} , 
