angular search experience

角度搜尋體驗

供電

免責聲明

此參考應用程式使用低階 Algolia 搜尋庫。如果您正在建立類似的應用程序，請使用官方 Angular InstaSearch 庫。

設定項目

克隆原始檔

為了在您的電腦上下載（克隆）該項目，您需要安裝git 。閱讀有關如何在系統上安裝 Git 的更多資訊。

安裝後，打開終端機 shell 並使用以下命令克隆此儲存庫：

 > git clone https://github.com/manekinekko/angular-search-experience.git

安裝依賴項

您將需要npm install來安裝該專案的依賴項。接下來，使用終端，您需要將目錄變更為先前克隆該專案的資料夾；預設（如果您從上面複製了命令列）這將是angular-search-experience ：

 > cd angular-search-experience
> npm install

開發伺服器

我們決定保護雲端功能（這是一個很好的做法）。因此，為了請求search API，您必須在請求中附加一個Authorization標頭。這是必備的標頭Authorization: SearchToken this-is-a-fake-token 。請參閱下面的 cURL 命令範例。

在啟動伺服器之前，您需要在/functions資料夾中的 .env 檔案中新增幾個環境變數。您可以使用此 env 範本檔案作為範例（將其重新命名為 .env，即 gitignored），並設定：

• algolia_applicationid= YOUR_ALGOLIA_APPLICATION_ID
• algolia_apikey= YOUR_ALGOLIA_API_KEY

您可以在 https://www.algolia.com/apps 的 API 金鑰部分找到您的應用程式 ID 和 API 金鑰。您需要建立一個帳戶才能取得您的 api 金鑰。

選項 1（建議）：Express

若要在本機電腦上試用伺服器，請執行下列命令： npm run start:backend

方案2（進階）：後端（雲端功能）

此選項要求您登入您的 Firebase 帳戶並有權存取此項目（在 Firebase 上）。只有管​​理員才能存取 firebase 專案！

後端的另一個版本則依賴使用 Cloud Functions for Firebase 實現的無伺服器架構。

此專案附帶firebase-tools作為本地依賴項。該工具是一組 Firebase 命令列介面 (CLI) 工具，可產生、執行和部署 Firebase 專案。請注意，此依賴項通常是全域安裝的。

此外，Firebase 執行時期使用舊版的 Node.js： v6.11.5 。我們在/functions下包含了一個.nvmrc資料夾。這個特殊檔案是NVM使用的設定文件，用於輕鬆切換到特定資料夾內所需的 Node.js 版本。如果您尚未安裝NVM ，請閱讀安裝指南。

使用NVM安裝所需的 Node.js 版本，然後使用它（僅在/functions資料夾內）：

 > nvm install 6.11.5
> nvm use

現在您正在使用 Node.js v6.11.5 ，您可以在本地運行（即模擬） search雲端功能。為此，運行npm run start:backend:firebase 。該指令將執行兩件事：

1. 將目錄變更為/functions資料夾（位於專案的根目錄）。該資料夾包含所有後端程式碼。
2. 在http://localhost:5000/angular-search-experience/us-central1/search上本地提供search雲功能

重要提示：請注意， search功能僅實作POST和DELETE HTTP 方法，可讓您新增和刪除實體，因此您需要 HTTP 用戶端（例如cURL或Postman ）才能要求雲端功能。

前端應用程式

在專案根目錄下，執行npm start啟動前端開發伺服器。導覽至http://localhost:4200/ 。如果您更改任何來源文件，該應用程式將自動重新載入。

前端應用程式是使用 Angular CLI 版本 6.1.2 產生的。

建造

運行npm run build來建立專案。建置工件將儲存在dist/angular-search-experience/目錄下。使用npm run build:prod腳本進行生產建置。

部署

我們使用 Firebase 託管來發布前端應用程式。在部署新版本之前，我們需要使用以下命令建置生產包：

 > npm run build

然後，我們可以將新版本部署到 firebase：

 > npm run deploy

重要提示：部署到 firebase 需要存取權限（firebase 專案）。

生產環境

後端

生產端點（雲端功能）可用於：

1. 發布：/api/1/apps
2. 刪除：/api/1/apps/:id

為了請求生產雲端功能，您可以使用以下 cURL 命令：

在 Algolia 索引新增條目

 > curl -H "Authorization: SearchToken this-is-a-fake-token" -H "Content-Type: application/json" -X POST -d '{}' https://example.com/api/1/apps

{"createdAt":"2018-04-19T13:17:10.343Z","taskID":29343382,"objectID":"10788302"}

注意：我們不會故意驗證application物件。

從 Algolia 索引中刪除條目

 > curl -H "Authorization: SearchToken this-is-a-fake-token" -X DELETE https://example.com/api/1/apps/10788302

{"deletedAt":"2018-04-19T13:30:42.190Z","taskID":29353102,"objectID":"10788302"}

前端

架構和可用功能 (UI)

元件架構

1. 元件： <app-search></app-search>
2. 元件： <app-search-input></app-search-input>
3. 元件： <app-category></app-category>
4. 元件： <app-search-result></app-search-result>
5. 組件： <mat-nav-list></mat-nav-list>
6. 指令： [appRating]
7. 管道： freePriceLabel

在此閱讀 API 文件的更多資訊：https://manekinekko.github.io/angular-search-experience/index.html

特徵

搜尋框

帶有亮點的搜尋結果

排序選項

刻面選項

延遲載入

深層連結

危險區域：復活節彩蛋就在眼前！

裡面有復活節彩蛋！

我們在此應用程式中包含了一個聊天機器人。它可以幫助您使用語音搜尋應用程式。只需要求它幫助您搜尋天氣應用程式或查找遊戲。

要啟用機器人，您需要打開麥克風和揚聲器。只需點擊應用程式徽標（標題）6 次即可。

注意：此機器人的實現是實驗性的（並且是為了好玩！），並且沒有針對大量用戶的話語進行訓練！

已知問題

發現不相容的模組

錯誤[email protected]：引擎「節點」與此模組不相容。預期版本“~8.0”。

 yarn install v1.5.1
[1/4] ?  Resolving packages...
[2/4] ?  Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version "~8.0".
error An unexpected error occurred: "Found incompatible module".
info If you think this is a bug, please open a bug report with the information provided in "/Users/vvo/Dev/Algolia/angular-search-experience/functions/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

解決方法：

• 在/functions資料夾中執行nvm use 8.0 。
• 運行npm install 。
• 運行cd ..然後npm run start:backend 。