app search javascript

Klien JavaScript pihak pertama untuk membangun pengalaman pencarian yang sangat baik dan relevan dengan Elastic App Search.

Isi

• Memulai
• Pembuatan versi
• Dukungan peramban
• Penggunaan
• Menjalankan tes
• Perkembangan
• Pertanyaan Umum
• Menyumbang
• Lisensi

---

Memulai?

Instal dari CDN

Cara termudah untuk menginstal klien ini adalah dengan menyertakan distribusi yang dibangun dari CDN jsDelivr.

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

Ini akan membuat klien tersedia secara global di:

 window . ElasticAppSearch ;

Instal dari NPM

Paket ini juga dapat diinstal dengan npm atau yarn .

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

Klien kemudian dapat dimasukkan ke dalam proyek Anda seperti berikut:

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

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

Pembuatan versi

Klien ini dibuat versinya dan dirilis bersamaan dengan Penelusuran Aplikasi.

Untuk menjamin kompatibilitas, gunakan versi terbaru pustaka ini dalam versi utama penerapan Penelusuran Aplikasi yang sesuai.

Misalnya, untuk App Search 7.3 , gunakan 7.3 dari pustaka ini atau yang lebih baru, tetapi bukan 8.0 .

Jika Anda menggunakan versi SaaS yang tersedia di Swiftype.com pada Pencarian Aplikasi, Anda harus menggunakan klien versi 7.5.x.

Dukungan peramban

Klien kompatibel dengan semua browser modern.

Perhatikan bahwa perpustakaan ini bergantung pada Fetch API.

Ini tidak didukung oleh Internet Explorer. Jika Anda memerlukan kompatibilitas mundur untuk Internet Explorer, Anda perlu melakukan polyfill pada Fetch API dengan sesuatu seperti https://github.com/github/fetch.

Penggunaan

Setup: Konfigurasi klien dan otentikasi

Menggunakan klien ini mengasumsikan bahwa Anda sudah memiliki instance Elastic App Search yang aktif dan berjalan.

Klien dikonfigurasi menggunakan parameter searchKey , endpointBase , dan engineName .

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

* Harap dicatat bahwa Anda hanya boleh menggunakan Kunci Pencarian Publik dalam kode Javascript di browser. Secara default, akun Anda harus memiliki Kunci yang diawali dengan search- yang bersifat hanya baca. Informasi lebih lanjut dapat ditemukan di dokumentasi.

Pengguna Penelusuran Aplikasi Swifttype.com:

Saat menggunakan versi SaaS yang tersedia di Swiftype.com pada Penelusuran Aplikasi, Anda dapat mengonfigurasi klien menggunakan hostIdentifier Anda, bukan parameter endpointBase . hostIdentifier dapat ditemukan dalam menu Kredensial.

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

Daftar opsi konfigurasi:

Pilihan	Diperlukan	Keterangan
hostIdentifier	TIDAK	Pengidentifikasi Host Anda, harus dimulai dengan host- . Diperlukan kecuali secara eksplisit menyetel endpointBase
kunci pencarian	TIDAK	Kunci Pencarian Publik Anda . Ini harus dimulai dengan search- . CATATAN: Hal ini secara teknis tidak diwajibkan, namun dalam 99% kasus hal ini harus disediakan. Ada kasus kecil karena tidak menyediakan ini, terutama berguna untuk penggunaan Penelusuran Aplikasi internal, di mana hal ini dapat dihilangkan untuk memanfaatkan autentikasi berbasis sesi Penelusuran Aplikasi.
Nama mesin	Ya
titik akhirBase	TIDAK	Menggantikan dasar titik akhir App Search API sepenuhnya. Berguna saat melakukan proksi pada App Search API, mengembangkan terhadap server lokal, atau Self-Managed atau Cloud Deployment. Mantan. "http://localhost:3002"
cacheResponses	TIDAK	Apakah respons API harus di-cache atau tidak. Bawaan: true .
tambahanHeader	TIDAK	Objek dengan kunci dan nilai yang akan dikonversi menjadi nama dan nilai header pada semua permintaan API

Metode API

Klien ini adalah antarmuka tipis ke Elastic App Search API. Detail tambahan untuk permintaan dan tanggapan dapat ditemukan di dokumentasi.

Mencari

Untuk istilah kueri lion , panggilan pencarian dibuat sebagai berikut:

 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 } ` ) ;
  } ) ;

Perhatikan bahwa options mendukung semua opsi yang tercantum di sini: https://swiftype.com/documentation/app-search/guides/search.

Selain opsi yang didukung di atas, kami juga mendukung bidang berikut:

Nama	Jenis	Keterangan
aspek disjungtif	Array[String]	Serangkaian nama bidang. Setiap bidang yang tercantum di sini juga harus disediakan sebagai faset dalam bidang facet . Ini menunjukkan bahwa suatu segi harus dianggap disjungtif. Saat mengembalikan jumlah untuk aspek disjungtif, jumlah akan dikembalikan seolah-olah tidak ada filter yang diterapkan pada bidang ini, meskipun ada filter yang diterapkan.
disjungtifFacetsAnalyticsTags	Array[String]	Digunakan bersama dengan parameter disjunctiveFacets . Kueri akan diberi tag dengan "Khusus Faset" di Dasbor Analytics kecuali ditentukan di sini.

Tanggapan

Metode pencarian mengembalikan respons yang dibungkus dalam tipe 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
} 

Saran Kueri

 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 } ` ) ;
  } ) ; 

Multi Pencarian

Dimungkinkan untuk menjalankan beberapa kueri sekaligus menggunakan metode multiSearch .

Untuk mencari istilah lion dan tiger , panggilan pencarian dibuat sebagai berikut:

 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 } ` ) ;
  } ) ; 

Pelacakan Klik-tayang

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

Klik-tayang dapat dilacak dengan mengikat panggilan client.click ke peristiwa klik pada masing-masing tautan hasil pencarian.

Contoh berikut menunjukkan bagaimana hal ini dapat diterapkan secara deklaratif dengan memberi anotasi pada tautan dengan atribut kelas dan data.

 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 > 

Menjalankan tes

Spesifikasi dalam proyek ini menggunakan pemutaran ulang node untuk menangkap respons.

Responsnya kemudian diperiksa berdasarkan snapshot Jest.

Untuk mengambil respons baru dan memperbarui snapshot, jalankan:

 nvm use
REPLAY=record npm run test -u

Untuk menjalankan tes:

 nvm use
npm run test

Perkembangan

simpul

Anda mungkin ingin menginstal manajer versi node, seperti nvm.

Kami bergantung pada versi node yang ditentukan di .nvmrc.

Untuk menginstal dan menggunakan versi node yang benar dengan nvm:

 nvm install

Server Pengembang

Instal dependensi:

nvm use
npm install

Bangun artefak di direktori dist :

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

Tambahkan file index.html ke direktori dist Anda

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

  </ body >
</ html >

Jalankan server pengembang:

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

Navigasikan ke http://127.0.0.1:8080 dan jalankan perintah JavaScript melalui Konsol Pengembang browser.

Membangun

 nvm use
npm run build

Menerbitkan

 nvm use
npm run publish

Pertanyaan Umum?

Bagaimana jika saya memerlukan operasi tulis?

Penelusuran Aplikasi memiliki klien Node.js pihak pertama yang mendukung operasi penulisan seperti pengindeksan.

Di mana saya melaporkan masalah dengan klien?

Jika ada sesuatu yang tidak berfungsi seperti yang diharapkan, silakan buka masalah.

Di mana saya dapat mempelajari lebih lanjut tentang Penelusuran Aplikasi?

Taruhan terbaik Anda adalah membaca dokumentasinya.

Ke mana lagi saya bisa mendapatkan bantuan?

Anda dapat memeriksa forum diskusi komunitas Elastic App Search.

Menyumbang

Kami menyambut kontributor untuk proyek ini. Sebelum Anda mulai, beberapa catatan...

• Sebelum membuka pull request, harap buat isu untuk mendiskusikan cakupan proposal Anda.
• Harap tulis kode sederhana dan dokumentasi ringkas, bila perlu.

Lisensi?

Apache 2.0 © Elastis

Terima kasih kepada semua kontributor!