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 。