Aloha！我是少女人妻Uerica！終於度過三分之一啦！剛剛在寫文章前想說烤個雞腿排來吃吃，烤了40分鐘終於烤出兩片香噴噴脆滋滋的雞腿排，想說來去房間整理一下再來吃，結果從房間出來看到盤子裡面只剩一塊拇指大一點的雞腿排，我整個傻眼，偷吃我雞腿排就算了至少留一片給我吧，結果問了老公他眼神驚恐的說他只吃兩小塊阿！然後我們一起看向我家的狗狗，

只看他耳朵開飛機眼神一直看地板，好像希望自己能隱形一樣...還好我沒調味，幫自己QQ

嗚我的雞腿排，我們開始吧

前面10天都已經把App Search 的線上介面介紹得差不多了，但實際上的應用方式呢？如何串接API，怎麼運用在自己的網頁上也是很重要的呢～我們在 Day 6 的時候有提到 Search UI ，所以這幾天就教大家如何運用Search UI 架一個自己的搜尋頁面吧～

來用 Search UI 架自己的搜尋頁面啦

什麼是 Search UI ～

Search UI 以前是 Swiftype 的產品，Swiftype當初就是做了一個底層是由 ElasticSearch 運作的線上搜尋管理介面與Search ui搭配，讓使用者可以輕鬆又簡單的架出自己的搜尋網站。之後Elastic將Swiftype收購後，現在Search ui是由Elastic在維護，而Search ui是用React框架寫的。這邊可以看到Search UI 在 Github 的開放程式碼

讓我們先開個 Engine 先！

首先我們來去線上創一個Engine，取名為video-games，語言選擇 English ，如果不會創先去把前面的文章看完唷 XD ，這裡就不多加贅述啦～

然後這裡有一份官方提供的測試文件games-array.json，把他載下來唷，當然你有自己的也可以用自己的啦～

然後把資料導入Engine中吧！不會用去看前面的文章喔！哈哈，好了這步做完就要來架環境了～

辣個環境先弄起來阿～

開個資料夾取個你喜歡的名字，打開你的編輯器！打開那個資料夾！打開 Terminal ！放開那隻狗狗！

在這邊我們會使用npm套件管理系統 ，以及 create-react-app 來創建一個 React 應用

create React App 並不會處理 backend 邏輯或資料庫；它只會建立一個 frontend build pipeline，以便你配合任何 backend 來使用。

• 下載 create React App
• 建立一個video-game-search資料夾

npm install -g create-react-app
create-react-app video-game-search --use-npm
cd video-game-search

再來安裝 Search UI 跟 Search UI app search connector

npm install --save @elastic/react-search-ui @elastic/search-ui-app-search-connector

都好了，阿、啟動他！

npm start

啟動後會看到 React 圖示轉轉轉 XD

打開編輯器，點進src/App.js，把下面這行貼上

// Step #1, import statements
import React from "react";
import AppSearchAPIConnector from "@elastic/search-ui-app-search-connector";
import { Layout } from "@elastic/react-search-ui-views";
import "@elastic/react-search-ui-views/lib/styles/styles.css";
import {
  PagingInfo,
  ResultsPerPage,
  Paging,
  Facet,
  SearchProvider,
  Results,
  SearchBox,
  Sorting
} from "@elastic/react-search-ui";

// Step #2, The connector
const connector = new AppSearchAPIConnector({
  searchKey: "search-t7fyvg2fcyzy1naceo8g3sac",
  engineName: "video-games",
  endpointBase: "https://8f28a854da934497b11b48fc67029b89.ent-search.asia-east1.gcp.elastic-cloud.com"
});

// Step #3: Configuration options
const configurationOptions = {
  apiConnector: connector,
  searchQuery: {
    search_fields: {
      name: {}
    },
    result_fields: {
      name: {
        snippet: {
          size: 75,
          fallback: true
        }
      },
      genre: {
        snippet: {
          size: 50,
          fallback: true
        }
      },
      publisher: {
        snippet: {
          size: 50,
          fallback: true
        }
      },
      critic_score: {
        raw: {}
      },
      user_score: {
        raw: {}
      },
      platform: {
        snippet: {
          size: 50,
          fallback: true
        }
      },
      image_url: {
        raw: {}
      }
    },
    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: 2 },
      publisher: { type: "value", size: 100 },
      platform: { type: "value", size: 100 }
    }
  }
};

// Step #4, SearchProvider: The finishing touches
export default function App() {
  return (
    <SearchProvider config={configurationOptions}>
      <div className="App">
      <Layout
        header={<SearchBox/>}
        bodyContent={<Results titleField="name" urlField="image_url" />}
        sideContent={
          <div>
            <Sorting
              label={"Sort by"}
              sortOptions={[
                {
                  name: "Relevance",
                  value: "",
                  direction: ""
                },
                {
                  name: "Name",
                  value: "name",
                  direction: "asc"
                }
              ]}
            />
            <Facet field="user_score" label="User Score" />
            <Facet field="critic_score" label="Critic Score" />
            <Facet field="genre" label="Genre" />
            <Facet field="publisher" label="Publisher" isFilterable={true} />
            <Facet field="platform" label="Platform" />
          </div>
        }
        bodyHeader={
          <>
            <PagingInfo />
            <ResultsPerPage />
          </>
        }
        bodyFooter={<Paging />}
      />

      </div>
    </SearchProvider>
  );
}

1. import statements

   我們需要導入 Search UI 的核心組件、連接器、畫面組件以及 Search UI 寫好的 css，與React

2. The connector

   這部分就是定義跟哪個主機溝通，需要輸入自己的 API Endpoint 與 search-key ，Key都可以在App Search的Credentials頁面中找到喔，這部分參考官方教學有錯誤，要把 hostIdentifier 改成 endpointBase 才能成功喔～

3. Configuration options

   Configuration options 專門定義數據呈現、如何被搜尋，以及哪些數據要排序、過濾等等，這部分後面會做更詳細的說明～

4. SearchProvider

   與畫面顯示有關，後面會詳細說明～不過ConfigurationOptions與SearchProvider是息息相關低～

今天就先到這邊啦～ 感謝大家閱讀，等等要來去跟姊妹聚會了XD，我要點個雞翅來吃吃哈哈，大家可以先玩看看，看能不能成功連結到自己的App Search主機瞜，明天再進入更詳細的介紹，掰掰！