将Algolia搜索整合到风中—一个漂亮的RSS和Podcast应用程序

今年早些时候, Stream推出了Winds 2.0 ,这是我们流行的针对macOS,Windows和Linux的开源和本机应用程序的第二次迭代,它提供了一种全新的消费RSS feed和Podcast的方式。 如果您尚未使用Winds,则可以在https://getstream.io/winds进行注册 或者,如果您只想要视觉效果,则下面是Winds的屏幕截图:

有了我们正在编译和查询的所有内容,我们需要一种直观的方式来显示内容以供用户搜索。 那就是阿尔戈利亚出现的地方。 Algolia是一个易于使用的插件,允许像我们这样的开发人员为我们的用户创建独特的搜索和发现体验。 最重要的是,Algolia的闪电般快速,可从后端仪表板或前端代码进行配置,并且返回给用户的结果非常相关。

在本文中,我们将对如何处理Winds的安装和配置进行快速的技术深入研究。 如果您想继续,那么Winds是一个开源项目,可以在GitHub找到

入门😇

Algolia通过了解传统开发人员希望在对付费计划做出长期承诺之前先试用产品来完善其开发人员的入职流程。 考虑到这一点,他们通过为开源选项提供免费套餐来支持社区。 唯一的要求是您在搜索栏中显示Algolia徽标(如下图所示)。

如果您有兴趣使用Algolia,请开始使用他们的免费开源计划,该计划可提供10,000条记录和100,000条操作。 只需在此处填写表格,阿尔戈利亚团队将尽快与您联系-他们的支持团队也很快!

注意:此职位不需要帐户。 我们仅讨论Winds集成,而不会谈论项目的常规安装。 但是,本文可以用作在您自己的应用程序中安装Algolia的指南。

阿尔及利亚一体化👨‍💻

与Algolia集成非常简单。 因为我们使用的是Node.js,所以我们安装了Algolia (algoliasearch) 提供的JavaScript客户端。 并且,为了使事情变得更加简单,我们创建了一个帮助程序文件,可以轻松地将搜索结果(作为对象)传递给:

if语句的第一部分用于生产或开发环境,因为它检查有效的Algolia密钥和机密。 后半部分用于向Algolia伪造请求以进行测试。

当我们需要添加单个对象时,在我们的一个控制器内部调用以下代码:

要添加多个对象,Algolia支持使用以下代码进行批量插入:

添加完所有内容后,它们就会显示在我们的索引中(见下文)!

从Algolia获取搜索结果🔎

在应用程序方面,可以使用多种方法搜索和浏览来自Algolia的数据。 一个示例可能是JavaScript客户端algoliasearch 您还可以选择使用基于组件的更高级别的抽象,例如InstantSearch.js 无论使用哪种方法,要注意的一件事是,您应始终尝试从客户端获取结果,以减少延迟。

在我们的React应用程序中,我们获取结果并使用以下代码填充下拉菜单:

与Algolia集成的好处在于,您可以构建一个界面,以多种方式搜索和浏览数据。 由于显示搜索结果所需的所有数据已经​​在我们的Algolia记录内,因此渲染时的复杂性很小,因此我们可以避免使用可能会大大降低其他工具的速度或效率的方法。

与Algolia的表演🏃‍

如前所述,我们正在从客户端获取结果。 这是为了避免通过API将结果传递给API时可能遇到的任何延迟。 无论查询如何,来自Algolia的搜索响应都应在低毫秒范围内。 这是由于位于阿尔及利亚后面的基础设施而实现的。 这是一本非常有趣的文章,如果您像我一样,则需要阅读这篇文章 ,其中涉及对Algolia vs Elasticsearch的速度测试。

这是一个截图,显示了Algolia的搜索功能在具有70,000多个记录的数据集上的运行速度(以毫秒为单位):

最后的想法🤔

无论您的搜索需求如何,我们在GetStream.io都强烈建议您使用Algolia 它由像您一样热情的开发人员快速,轻松地配置和构建。 最后,我可以自信地说,我们在使用和讨论所有可能使我们能够提供最终用户搜索体验的过程中玩得很开心。

有关Winds的更多信息,请继续关注有关技术和Winds的未来博客文章 ,并在Twitter上通过@nickparsons关注我。 如果您认为我错过了什么,请在下面的评论中添加一行。 搜索愉快! 🎉

From: https://hackernoon.com/integrating-algolia-search-in-winds-a-beautiful-rss-podcast-application-f231e49cdab5