探索，你就会发现：Algolia 插件

本文是突出展示社区构建的有趣 NativeScript 插件系列中的第二篇。你正在使用哪些插件？你最喜欢哪个？请在评论中告诉我们。

所以，你已经构建了一个包含大量有趣内容的应用程序，并且需要它能够搜索。无需再四处寻找，Arpit Srivastava 编写的 Algolia 插件就是你的答案。 Algolia 为你的网站和移动应用程序提供了可靠且易于实施的搜索功能，并且是为你的内容创建智能搜索的绝佳补充。该 NativeScript 插件旨在紧密模仿 Algolia 的 JavaScript 库，允许应用程序开发者轻松地整合智能搜索功能。以下是操作方法！

步骤 1：创建 Algolia 账户和应用程序

首先，你需要在 Algolia.com 上创建一个账户并选择一个套餐。有一个优秀的免费社区套餐可用于测试；你随时可以升级到付费套餐。注册后，你会看到一个仪表盘和一个 API 密钥。如果你使用的是免费套餐，则应在搜索页面上显示 Algolia 徽标，如下所示

Simulator Screen Shot Jul 14, 2017, 12.24.30 PM

Simulator Screen Shot Jul 14, 2017, 12.24.30 PM

创建账户后，你需要在 Algolia 中公开可搜索的数据。创建一个新的应用程序，并准备将数据导入其中。你的数据作为索引存储在仪表盘的“索引”选项卡中。此索引是一种数据容器，你可以在仪表盘中对其进行配置，以便以多种不同的方式对其进行切片和切块。

步骤 2：将你的数据上传到 Algolia

Algolia 建议通过 API 客户端将你的数据上传到索引中。我的食谱应用程序 QuickNoms 的工作原理是，用户可以在网站的前端（http://www.quicknoms.com）输入新的食谱，并且在内容在 Firebase 中被批准（通过将数据的“approved”布尔值设置为“true”）后，该食谱会立即出现在 Web 和移动网站上。理想情况下，我会通过 Web 上的 API 调用将每个新食谱上传到 Algolia，或者使用 Firebase 函数来帮我完成此操作。但是，触及外部 API 的 Firebase 函数仅在付费套餐中可用。因此，为了立即获得一些可查询的数据，我使用了一个由 Josh Dzielak 构建的 Node 脚本将数据从我的 Firebase 账户转储到我的 Algolia 仪表盘。现在我可以查看我的数据，我已经将其导入到“recipes”索引中。

请注意，为了简单地测试此服务，你可以通过其仪表盘手动将数据上传到 Algolia，但这并非长期使用的良好策略。

步骤 3：安装并初始化 Algolia-NativeScript 插件

现在你需要查看我们将要使用的插件文档。正如 Arpit 在 ReadMe 中所述，此插件镜像了 Algolia 设计的标准 JavaScript 实现，因此如果你已在 Web 上集成了 Algolia Search，那么使用起来不会有太大区别。

在我的 NativeScript-Angular 应用程序中，我首先安装插件：tns plugin add nativescript-algolia

然后，我在搜索组件中使用我在 Algolia 仪表盘中创建的应用程序 ID 和我的 API 密钥初始化插件。最后，我初始化名为“recipes”的索引，使其准备就绪以供搜索

 import {Algolia} from "nativescript-algolia"; var client = new Algolia('<app-id>', '<api-key>'); var index = client.initIndex("recipes");

步骤 4：准备你的搜索屏幕

在我的搜索组件的 html（recipe-search.component.html）中，我创建了一个布局，其中包含一个搜索栏和一个用于以该应用程序的标准卡片格式显示搜索结果的位置


                              <StackLayout class="green">
    <SearchBar #SearchBar (submit)="search($event)"></SearchBar>
    <ScrollView height="87%">
        <WrapLayout horizontalAlignment="center">      
            <StackLayout style="margin-left: 10" class="card" width="45%" *ngFor="let recipe of recipes">
                <StackLayout horizontalAlignment="center" (tap)="goToRecipe(recipe.id)">
                    <Image [src]="recipe.Image"></Image>            
                    <Label class="name" horizontalAlignment="center" textWrap="true" [text]="recipe.Name"></Label>
                </StackLayout>
            </StackLayout>           
        </WrapLayout> 
    </ScrollView>
    
    <Image src="~/images/search-by-algolia.png" style="margin:5;width:200"></Image>
    
</StackLayout>

提交搜索后，搜索词会搜索准备好的索引。搜索结果中的任何“命中”都会被推送到 this.recipes 数组中，并在卡片界面中显示


                              search(e: any) {
        this.loader.show({ message: 'Finding recipes...' });
        //clear array
        this.recipes = [];
        this.term = "";
        if (e && e.object) {
            this.term = e.object.text;
            index.search(this.term, (results, errors) => {
                for (let id in results.hits) {
                    let result = (Object).assign({id: results.hits[id].objectID, Name: results.hits[id].Name, Image: results.hits[id].Image});
                        this.ngZone.run(() => {
                             this.recipes.push(result);
                        })                       
                      this.loader.hide();
                    }
                })           
            }
            else {
                alert("Sorry, no recipes found!");
                this.loader.hide();
            }
            
    }

与标准 Algolia 搜索一样，该插件支持“智能”搜索以调整搜索行为。你可以添加自定义排序，例如按食谱类型：例如，在零食之前显示早餐食品。你还可以配置要按重要性顺序编制索引的属性列表 - 例如，食谱名称的排名可能高于其成分和方法中的内容


                                index.setSettings({
  'searchableAttributes': [
    'Name',
    'Ingredients',
    'Method'
  ]
}, function(err, content) {
  console.log(content);
});

我强烈建议在你的移动应用程序中使用这个功能强大的搜索功能的优秀插件！它可以为内容丰富的应用程序提供绝佳的体验。你最近使用过这个插件吗？请在评论中告诉我们！