app search javascript

عميل JavaScript من الطرف الأول لإنشاء تجارب بحث ممتازة وذات صلة باستخدام Elastic App Search.

محتويات

• ابدء
• الإصدار
• دعم المتصفح
• الاستخدام
• تشغيل الاختبارات
• تطوير
• التعليمات
• يساهم
• رخصة

---

ابدء ؟

التثبيت من CDN

أسهل طريقة لتثبيت هذا العميل هي ببساطة تضمين التوزيع المدمج من jsDelivr CDN.

 < script src =" https://cdn.jsdelivr.net/npm/@elastic/[email protected]/dist/elastic_app_search.umd.js " > </ script >

سيؤدي هذا إلى جعل العميل متاحًا عالميًا على:

 window . ElasticAppSearch ;

التثبيت من NPM

يمكن أيضًا تثبيت هذه الحزمة باستخدام npm أو yarn .

 npm install --save @elastic/app-search-javascript

يمكن بعد ذلك تضمين العميل في مشروعك كما يلي:

 // CommonJS
var ElasticAppSearch = require ( "@elastic/app-search-javascript" ) ;

// ES
import * as ElasticAppSearch from "@elastic/app-search-javascript" ; 

الإصدار

تم إصدار هذا العميل وإصداره جنبًا إلى جنب مع App Search.

لضمان التوافق، استخدم أحدث إصدار من هذه المكتبة ضمن الإصدار الرئيسي لتطبيق App Search المطابق.

على سبيل المثال، بالنسبة لـ App Search 7.3 ، استخدم 7.3 من هذه المكتبة أو أعلى، ولكن ليس 8.0 .

إذا كنت تستخدم إصدار SaaS المتوفر على Swiftype.com من App Search، فيجب عليك استخدام الإصدار 7.5.x من العميل.

دعم المتصفح

العميل متوافق مع جميع المتصفحات الحديثة.

لاحظ أن هذه المكتبة تعتمد على Fetch API.

وهذا غير مدعوم من قبل Internet Explorer. إذا كنت بحاجة إلى التوافق مع الإصدارات السابقة لبرنامج Internet Explorer، فستحتاج إلى ملء واجهة برمجة تطبيقات Fetch بشيء مثل https://github.com/github/fetch.

الاستخدام

الإعداد: تكوين العميل والمصادقة

يفترض استخدام هذا العميل أن لديك بالفعل مثيلاً لـ Elastic App Search قيد التشغيل.

يتم تكوين العميل باستخدام معلمات searchKey و endpointBase و engineName .

 var client = ElasticAppSearch . createClient ( {
  searchKey : "search-mu75psc5egt9ppzuycnc2mc3" ,
  endpointBase : "http://127.0.0.1:3002" ,
  engineName : "favorite-videos"
} ) ;

* يرجى ملاحظة أنه يجب عليك فقط استخدام مفتاح البحث العام ضمن كود Javascript على المتصفح. افتراضيًا، يجب أن يحتوي حسابك على مفتاح مسبوق بكلمة search- ، وهو للقراءة فقط. يمكن العثور على مزيد من المعلومات في الوثائق.

مستخدمو البحث في تطبيق Swiftype.com:

عند استخدام إصدار SaaS المتوفر على Swiftype.com من App Search، يمكنك تكوين العميل باستخدام hostIdentifier بدلاً من معلمة endpointBase . يمكن العثور على hostIdentifier ضمن قائمة بيانات الاعتماد.

 var client = ElasticAppSearch . createClient ( {
  hostIdentifier : "host-c5s2mj" ,
  searchKey : "search-mu75psc5egt9ppzuycnc2mc3" ,
  engineName : "favorite-videos"
} ) ;

قائمة خيارات التكوين:

خيار	مطلوب	وصف
معرف المضيف	لا	يجب أن يبدأ معرف المضيف الخاص بك بـ host- . مطلوب ما لم يتم تحديد endpointBase بشكل صريح
searchKey	لا	مفتاح البحث العام الخاص بك . يجب أن يبدأ search- . ملحوظة: هذا ليس مطلوبًا من الناحية الفنية ، ولكن في 99% من الحالات يجب توفيره. هناك حالة هامشية صغيرة لعدم توفير هذا، وهو مفيد بشكل أساسي لاستخدام بحث التطبيقات الداخلي، حيث يمكن حذف ذلك من أجل الاستفادة من المصادقة المستندة إلى جلسة بحث التطبيقات.
اسم المحرك	نعم
endpointBase	لا	يتجاوز قاعدة نقطة نهاية App Search API بالكامل. يكون مفيدًا عند إنشاء وكيل لـ App Search API، أو التطوير مقابل خادم محلي، أو النشر ذاتي الإدارة أو النشر السحابي. السابق. "http://localhost:3002"
cacheResponses	لا	ما إذا كان يجب تخزين استجابات واجهة برمجة التطبيقات مؤقتًا أم لا. الافتراضي: true .
extraHeaders	لا	كائن يحتوي على مفاتيح وقيم سيتم تحويلها إلى أسماء وقيم رؤوس في جميع طلبات واجهة برمجة التطبيقات

طرق واجهة برمجة التطبيقات

هذا العميل عبارة عن واجهة رفيعة لواجهة برمجة تطبيقات Elastic App Search. يمكن العثور على تفاصيل إضافية للطلبات والاستجابات في الوثائق.

البحث

بالنسبة لمصطلح الاستعلام lion ، يتم إنشاء استدعاء بحث على النحو التالي:

 var options = {
  search_fields : { title : { } } ,
  result_fields : { id : { raw : { } } , title : { raw : { } } }
} ;

client
  . search ( "lion" , options )
  . then ( resultList => {
    resultList . results . forEach ( result => {
      console . log ( `id: ${ result . getRaw ( "id" ) } raw: ${ result . getRaw ( "title" ) } ` ) ;
    } ) ;
  } )
  . catch ( error => {
    console . log ( `error: ${ error } ` ) ;
  } ) ;

لاحظ أن options تدعم جميع الخيارات المدرجة هنا: https://swiftype.com/documentation/app-search/guides/search.

بالإضافة إلى الخيارات المدعومة أعلاه، فإننا ندعم أيضًا الحقول التالية:

اسم	يكتب	وصف
disjunctiveFacets	صفيف [سلسلة]	مجموعة من أسماء الحقول. يجب أيضًا توفير كل حقل مدرج هنا كواجهة في حقل facet . ويشير إلى أنه يجب اعتبار الوجه منفصلاً. عند إرجاع الأعداد للأوجه المنفصلة، ​​سيتم إرجاع الأعداد كما لو لم يتم تطبيق مرشح على هذا الحقل، حتى لو تم تطبيق واحد.
disjunctiveFacetsAnalyticsTags	صفيف [سلسلة]	يتم استخدامه مع المعلمة disjunctiveFacets . سيتم وضع علامة على الاستعلامات بعلامة "الوجه فقط" في لوحة تحكم Analytics ما لم يتم تحديد ذلك هنا.

إجابة

تقوم طريقة البحث بإرجاع الاستجابة المغلفة بنوع ResultList :

 ResultList {
  rawResults : [ ] , // List of raw `results` from JSON response
  rawInfo : { // Object wrapping the raw `meta` property from JSON response
    meta : { }
  } ,
  results : [ ResultItem ] , // List of `results` wrapped in `ResultItem` type
  info : { // Currently the same as `rawInfo`
    meta : { }
  }
}

ResultItem {
  getRaw ( fieldName ) , // Returns the HTML-unsafe raw value for a field, if it exists
  getSnippet ( fieldName ) // Returns the HTML-safe snippet value for a field, if it exists
} 

اقتراح الاستعلام

 var options = {
  size : 3 ,
  types : {
    documents : {
      fields : [ "name" ]
    }
  }
} ;

client
  . querySuggestion ( "cat" , options )
  . then ( response => {
    response . results . documents . forEach ( document => {
      console . log ( document . suggestion ) ;
    } ) ;
  } )
  . catch ( error => {
    console . log ( `error: ${ error } ` ) ;
  } ) ; 

بحث متعدد

من الممكن تشغيل استعلامات متعددة مرة واحدة باستخدام أسلوب multiSearch .

للبحث عن مصطلح lion tiger يتم إنشاء استدعاء البحث على النحو التالي:

 var options = {
  search_fields : { name : { } } ,
  result_fields : { id : { raw : { } } , title : { raw : { } } }
} ;

client
  . multiSearch ( [ { query : "node" , options } , { query : "java" , options } ] )
  . then ( allResults => {
    allResults . forEach ( resultList => {
      resultList . results . forEach ( result => {
        console . log (
          `id: ${ result . getRaw ( "id" ) } raw: ${ result . getRaw ( "title" ) } `
        ) ;
      } ) ;
    } ) ;
  } )
  . catch ( error => {
    console . log ( `error: ${ error } ` ) ;
  } ) ; 

تتبع النقرات

 client
  . click ( {
    query : "lion" ,
    documentId : "1234567" ,
    requestId : "8b55561954484f13d872728f849ffd22" ,
    tags : [ "Animal" ]
  } )
  . catch ( error => {
    console . log ( `error: ${ error } ` ) ;
  } ) ;

يمكن تتبع عمليات النقر عن طريق ربط مكالمات client.click للنقر على الأحداث الموجودة على روابط نتائج البحث الفردية.

يوضح المثال التالي كيف يمكن تنفيذ ذلك بشكل تعريفي من خلال إضافة تعليقات توضيحية إلى الروابط مع سمات الفئة والبيانات.

 document . addEventListener ( "click" , function ( e ) {
  const el = e . target ;
  if ( ! el . classList . contains ( "track-click" ) ) return ;

  client . click ( {
    query : el . getAttribute ( "data-query" ) ,
    documentId : el . getAttribute ( "data-document-id" ) ,
    requestId : el . getAttribute ( "data-request-id" ) ,
    tags : [ el . getAttribute ( "data-tag" ) ]
  } ) ;
} ) ; 

 < a
  href =" /items/1234567 "
  class =" track-click "
  data-request-id =" 8b55561954484f13d872728f849ffd22 "
  data-document-id =" 1234567 "
  data-query =" lion "
  data-tag =" Animal "
>
  Item 1
</ a > 

تشغيل الاختبارات

تستخدم المواصفات الموجودة في هذا المشروع إعادة تشغيل العقدة لالتقاط الاستجابات.

يتم بعد ذلك التحقق من الردود ومقارنتها بلقطات Jest.

لالتقاط استجابات جديدة ولقطات التحديث، قم بتشغيل:

 nvm use
REPLAY=record npm run test -u

لتشغيل الاختبارات:

 nvm use
npm run test

تطوير

العقدة

ربما تريد تثبيت مدير إصدار العقدة، مثل nvm.

نحن نعتمد على إصدار العقدة المحددة في .nvmrc.

لتثبيت واستخدام إصدار العقدة الصحيح مع nvm:

 nvm install

خادم التطوير

تثبيت التبعيات:

nvm use
npm install

بناء القطع الأثرية في الدليل dist :

 # This will create files in the `dist` directory
npm run build

قم بإضافة ملف index.html إلى دليل dist الخاص بك

 < html >
  < head >
    < script src =" elastic_app_search.umd.js " > </ script >
  </ head >
  < body >

  </ body >
</ html >

تشغيل خادم التطوير:

 # This will serve files in the `dist` directory
npm run dev

انتقل إلى http://127.0.0.1:8080 وقم بتنفيذ أوامر JavaScript من خلال Dev Console في المتصفح.

يبني

 nvm use
npm run build

نشر

 nvm use
npm run publish

التعليمات ؟

ماذا لو كنت بحاجة إلى عمليات الكتابة؟

يحتوي تطبيق App Search على عميل Node.js للطرف الأول والذي يدعم عمليات الكتابة مثل الفهرسة.

أين يمكنني الإبلاغ عن المشكلات مع العميل؟

إذا كان هناك شيء لا يعمل كما هو متوقع، يرجى فتح قضية.

أين يمكنني معرفة المزيد حول بحث التطبيقات؟

أفضل رهان لك هو قراءة الوثائق.

أين يمكنني الذهاب للحصول على المساعدة؟

يمكنك التحقق من منتديات مناقشة مجتمع Elastic App Search.

يساهم

نحن نرحب بالمساهمين في المشروع. قبل البدء هناك بعض الملاحظات...

• قبل فتح طلب السحب، يرجى إنشاء مشكلة لمناقشة نطاق الاقتراح الخاص بك.
• يرجى كتابة رمز بسيط ووثائق موجزة، عندما يكون ذلك مناسبا.

رخصة ؟

أباتشي 2.0 © مطاطا

شكرا لجميع المساهمين!