iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 12
1
Elastic Stack on Cloud

少女人妻的30天Elastic系列 第 12

【少女人妻的30天Elastic】Day 12 : Elastic App Search_用 Search UI 做搜尋頁面_趴兔

Aloha!我是少女人妻 Uerica !

前幾天在朋友的facebook貼文看到:

《電視上的轉骨方廣告》

小男生:雖然我比你矮,但是我喜歡你,跟我在一起好不好。
小女生:對不起,我媽說,男生不一定要找高的,但一定要找自己喜歡的。
小男生:那你喜歡什麼樣的男生?
小女生:比我高的。


好來!今天就繼續從 Configuration options 配置選項的部分開始講解啦~

configurationOptions

在深入探討之前configurationOptions,讓我們花點時間思考一下,我們將一組數據導入了搜索引擎,但是它是什麼樣的數據?什麼樣的使用者需要他呢?我們對數據了解的越多,我們就會越了解如何將數據呈現給搜索使用者,這將影響如何配置搜索體驗喔!

下列是一筆數據

{ 
  "id":"final-fantasy-vii-ps-1997",
  "name":"Final Fantasy VII",
  "year":1997,
  "platform":"PS",
  "genre":"Role-Playing",
  "publisher":"Sony Computer Entertainment",
  "global_sales":9.72,
  "critic_score":92,
  "user_score":9,
  "developer":"SquareSoft",
  "image_url":"https://r.hswstatic.com/w_907/gif/finalfantasyvii-MAIN.jpg"
}

首先可以先判斷哪些是text型態的 ( 例如 : name ) ,哪些是 Number 型態 ( critic_score 、 global_sales 、 user_score )。

記得先到App Search去更新型態~

Schema

先思考下列三個問題:

  1. 使用者都用什麼關鍵字搜尋呢? ( 使用者用名稱 name 來搜尋 )

  2. 使用者搜尋後希望找到或看到什麼資訊? ( 使用者搜尋後希望看到名稱 name 、類型 genre 、發行商 publisher 、平台 platform 、分數 scores 等資訊 )

  3. 哪些資料需要被過濾 filter 、排序 sort 、分組 facet 等 ( 依照得分 score 、類型 genre 、發行商 publisher 、平台 platform )

好的依照上面的思考,來看看要如何轉化成 Configuration options


const configurationOptions = {
  apiConnector: connector,
  searchQuery: {
	
	// 1. 使用者用名稱 name 來搜尋
    search_fields: {
      name: {}
    },

    // 2. 搜尋結果: name, genre, publisher, platform, and scores.
    result_fields: {
      name: {
        snippet: {
          size: 75, 
          fallback: true
        }
      },
      genre: {
        snippet: {
          size: 50,
          fallback: true
        }
      },
      publisher: {
        snippet: {
          size: 50,
          fallback: true
        }
      },
      critic_score: {
        // Scores are numeric, so we won't snippet.
        raw: {}
      },
      user_score: {
        raw: {}
      },
      platform: {
        snippet: {
          size: 50,
          fallback: true
        }
      },
      image_url: {
        raw: {}
      }
    },

    // 3. Facet by scores, genre, publisher, and platform, which we'll use to build filters later.
    facets: {
      user_score: {
        type: "range",
        ranges: [
          { from: 0, to: 5, name: "Not good" },
          { from: 5, to: 7, name: "Not bad" },
          { from: 7, to: 9, name: "Pretty good" },
          { from: 9, to: 10, name: "Must play!" }
        ]
      },
      critic_score: {
        type: "range",
        ranges: [
          { from: 0, to: 50, name: "Not good" },
          { from: 50, to: 70, name: "Not bad" },
          { from: 70, to: 90, name: "Pretty good" },
          { from: 90, to: 100, name: "Must play!" }
        ]
      },
      genre: { type: "value", size: 100 },
      publisher: { type: "value", size: 100 },
      platform: { type: "value", size: 100 }
    }
  }
};

searchQuery 中分為三個部分 search_fieldsresult_fieldsfacets

search_fields : 定義要被搜尋的欄位有哪些

result_fields : 定義哪些欄位會被回傳以及資料回傳的細節

  1. raw : 預設回傳字串長度無限制,字串長度可在此定義

    • size : 回傳欄位字串長度,可設定範圍 20 - 1000 字符
  2. snippet : 該搜尋字詞如果出現在此欄位資料中,字詞前後會用 <em></em> tags 包起來 (Highlights) 並回傳該攔位資料,預設回傳字串長度 100 字符

    • size : 回傳欄位字串長度,可設定範圍 20 - 1000 字符

    • fallback : 如果是 true ,在未找到相關搜尋字詞情況下回傳原始資料,如果為 false ,僅使用 snippet

facets : 定義查詢分組攔位,分為 Value Facet 與 Range Facet 兩種 Type

Type Value Facet Range Facet
text Yes No
number Yes Yes
date Yes Yes
geolocation No Yes
  • Type : 除了 text 以外的型態都可用 range ,而除了 geolocation 以外的型態都可用 value

  • from to : from 定義值的開始,to 定義值的結束

  • name : 定義 range 的代表名稱

Engines

  • size : 定義選項的長度

size: 10
Engines

size: 2
Engines

好的今天就先跟大家聊到這邊~感謝閱讀!小時候我其實狂吃轉骨湯,我現在身高 156 ,哈哈哈哈哈哈,大家明天見瞜掰掰~


上一篇
【少女人妻的30天Elastic】Day 11 : Elastic App Search_用 Search UI 做搜尋頁面_趴萬
下一篇
【少女人妻的30天Elastic】Day 13 : Elastic App Search_用 Search UI 做搜尋頁面_趴水
系列文
少女人妻的30天Elastic30

尚未有邦友留言

立即登入留言