热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

将Algolia连接到CosmicJS以实现出色的搜索功能

使用CosmicJS的Webhooks,我们可以将Algolia与CosmicJS同步,以为我们的项目提供快速而强大的搜索功能。TL;DR演示版源代码介

使用Cosmic JS的Webhooks,我们可以将Algolia与Cosmic JS同步, 以为我们的项目提供快速而强大的搜索功能。

TL; DR

演示版
源代码

介绍

如果您曾经尝试自己实施搜索,那么您就会知道这很困难。 值得庆幸的是,阿尔戈利亚(Algolia)创造了一种简化产品。 在本文中,我们将介绍如何将Algolia连接到Cosmic JS后端并将其添加到您的Apps。 该演示应用程序是使用React.js和Express.js服务器构建的。 如果您使用的是其他方法,则仍然可以遵循此模式。 只需针对您的用例进行修改。

主要有四个步骤:

  1. 创建一个Algolia应用
  2. 创建Cosmic JS Webhooks
  3. 创建API端点以接收Cosmic JS Webhook POST请求
  4. 将搜索小部件添加到我们的应用

第1部分-创建Algolia应用

导航至https://www.algolia.com 。 登录或注册(免费)帐户。

登录后,导航至仪表板。

在控制台中,单击“新建应用程序”。

为您的应用命名,然后单击“创建”。

下一页将要求您选择一个区域。 选择最接近的一个。 然后点击“继续”。

现在,您应该看到新创建的应用程序的仪表板。 点击屏幕左侧的“ API密钥”。 这是后续步骤所需的API密钥列表。

第2部分-创建Cosmic JS Webhooks

登录到您的Cosmic JS帐户,然后转到“存储桶”。

选择“设置”,然后在“仪表盘”菜单中选择“ Webhooks”。

您应该连接三个不同的Webhooks。 将端点替换为项目所需的任何对象

  1. 事件&#xff1a;对象的创建和发布&#xff1b; 端点https://<__YOUR_DOMAIN__>/api/algolia/create
  2. 对象的编辑和发布&#xff1b; 端点https://<__YOUR_DOMAIN__>/api/algolia/edit
  3. 对象已删除&#xff1b; 端点https://<__YOUR_DOMAIN__>/api/algolia/delete

点击“保存Webhooks”。 现在&#xff0c;无论何时创建&#xff0c;编辑或删除对象&#xff0c;您的服务器都会收到POST请求。 下一步是设置服务器以接收这些请求&#xff0c;并使用它们保持Algolia同步。

第3部分-创建API端点以接收Cosmic JS Webhook POST请求

演示应用程序使用Node.js Express服务器。 这是代码&#xff1a;

/* eslint-disable no-console */
require ( &#39;dotenv&#39; ).config({ path : &#39;./.env.production&#39; });
const express &#61; require ( &#39;express&#39; );
const bodyParser &#61; require ( &#39;body-parser&#39; );
const corser &#61; require ( &#39;corser&#39; );
const next &#61; require ( &#39;next&#39; );
const routes &#61; require ( &#39;./routes&#39; );
const algoliasearch &#61; require ( &#39;algoliasearch&#39; );
const convertDataToAlgoliaObject &#61; require ( &#39;./utils/convertDataToAlgoliaObject&#39; );
const fetch &#61; require ( &#39;isomorphic-fetch&#39; );const port &#61; parseInt (process.env.PORT, 10 ) || 3000 ;
const dev &#61; process.env.NODE_ENV !&#61;&#61; &#39;production&#39; ;
const app &#61; next({ dev });
const handler &#61; routes.getRequestHandler(app);const client &#61; algoliasearch(process.env.ALGOLIA_APPLICATION_ID,process.env.ALGOLIA_ADMIN_API_KEY,
);
const itemsIndex &#61; client.initIndex( &#39;items&#39; );app.prepare().then( () &#61;> {const server &#61; express();server.use(corser.create());server.use(bodyParser.json());// ---------- API endpoints for synchronizing Algolia -----------server.post( &#39;/api/algolia/create&#39; , (req, res) &#61;> {const { data } &#61; req.body;if (data.type_slug &#61;&#61;&#61; &#39;items&#39; ) {const algoliaObject &#61; convertDataToAlgoliaObject(data);itemsIndex.addObject(algoliaObject).catch( err &#61;> console .error(err));}res.status( 200 ).send();});server.post( &#39;/api/algolia/edit&#39; , (req, res) &#61;> {const { data } &#61; req.body;if (data.type_slug &#61;&#61;&#61; &#39;items&#39; ) {const algoliaObject &#61; convertDataToAlgoliaObject(data);itemsIndex.addObject(algoliaObject).catch( err &#61;> console .error(err));}res.status( 200 ).send();});server.post( &#39;/api/algolia/delete&#39; , (req, res) &#61;> {const { data } &#61; req.body;// data is an Array of one or more Object _idsitemsIndex.deleteObjects(data).catch( err &#61;> console .error(err));res.status( 200 ).send();});server.listen(port, (err) &#61;> {if (err) throw err;console .log( &#96;> Ready on http://localhost: ${port} &#96; );});});

首先&#xff0c;创建一个algoliasearch客户。 它使用Algolia应用程序ID和Admin API密钥&#xff08;可以在您的Algolia App仪表板中找到&#xff09;。

然后&#xff0c;为我们希望从Cosmic JS接收的每个Webhook创建端点。 Webhook POST请求包括对象及其主体。 自定义的“ convertDataToAlgoliaObject”实用程序函数用于将该Cosmic JS对象转换为针对Algolia格式化的对象。 这是“ convertDataToAlgoliaObject”的代码&#xff1a;

const convertDataToAlgoliaObject &#61; ( data ) &#61;> {let asin;let brand;let categories;let featured;let price;let thumbnail;data.metafields.forEach( ( metafield ) &#61;> {switch (metafield.key) {case &#39;asin&#39; :asin &#61; metafield.value;break ;case &#39;brand&#39; :brand &#61; metafield.value;break ;case &#39;categories&#39; :categories &#61; metafield.value && metafield.value.split( &#39;,&#39; );break ;case &#39;options&#39; :featured &#61; metafield.value.includes( &#39;Featured&#39; );break ;case &#39;price&#39; :price &#61; metafield.value;break ;case &#39;thumbnail&#39; :thumbnail &#61; metafield.value;break ;default :// Do nothing}});return {asin,brand,categories : categories || [],content : data.content,createdAt : data.created_at,featured,modifiedAt : data.modified_at,objectID : data._id, // eslint-disable-line no-underscore-dangleprice,publishedAt : data.published_at,slug : data.slug,thumbnail,title : data.title,};
};module .exports &#61; convertDataToAlgoliaObject;

每个项目的此功能将有所不同。 您基本上只想提取将是“可搜索的”信息。

现在&#xff0c;可以使用Algolia的algoliaseasrch库上载&#xff0c;编辑或删除Algolia中的相应条目。

后端设置完成&#xff01; 但是&#xff0c;您应该注意&#xff0c;在部署应用程序之前&#xff0c;不会进行任何同步。 您创建的自定义API端点尚不存在&#xff0c;因此Algolia Webhook POST请求将不会被拦截。

第4部分-将搜索小部件添加到我们的应用

Algolia不仅提供了很棒的搜索功能&#xff0c;还提供了许多可用于显示数据的库。 我将他们的React Instant Search库用于演示项目。 它提供了本质上即插即用的React组件。 您可以使用自己的CSS自定义样式。 该文档写得很好&#xff0c;因此无需在此处重复。

结论

希望本文对您有所帮助。 如果不清楚&#xff0c;请查看Cosmic JS或Algolia文档。 他们俩都很棒&#xff01;

本文最初出现在Cosmic JS网站上 。

From: https://hackernoon.com/connecting-algolia-to-cosmic-js-for-awesome-search-functionality-ca435b1f8326



推荐阅读
  • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
  • [译]技术公司十年经验的职场生涯回顾
    本文是一位在技术公司工作十年的职场人士对自己职业生涯的总结回顾。她的职业规划与众不同,令人深思又有趣。其中涉及到的内容有机器学习、创新创业以及引用了女性主义者在TED演讲中的部分讲义。文章表达了对职业生涯的愿望和希望,认为人类有能力不断改善自己。 ... [详细]
  • ZSI.generate.Wsdl2PythonError: unsupported local simpleType restriction ... [详细]
  • 在重复造轮子的情况下用ProxyServlet反向代理来减少工作量
    像不少公司内部不同团队都会自己研发自己工具产品,当各个产品逐渐成熟,到达了一定的发展瓶颈,同时每个产品都有着自己的入口,用户 ... [详细]
  • web.py开发web 第八章 Formalchemy 服务端验证方法
    本文介绍了在web.py开发中使用Formalchemy进行服务端表单数据验证的方法。以User表单为例,详细说明了对各字段的验证要求,包括必填、长度限制、唯一性等。同时介绍了如何自定义验证方法来实现验证唯一性和两个密码是否相等的功能。该文提供了相关代码示例。 ... [详细]
  • 在springmvc框架中,前台ajax调用方法,对图片批量下载,如何弹出提示保存位置选框?Controller方法 ... [详细]
  • 本文记录了在vue cli 3.x中移除console的一些采坑经验,通过使用uglifyjs-webpack-plugin插件,在vue.config.js中进行相关配置,包括设置minimizer、UglifyJsPlugin和compress等参数,最终成功移除了console。同时,还包括了一些可能出现的报错情况和解决方法。 ... [详细]
  • 本文介绍了一个React Native新手在尝试将数据发布到服务器时遇到的问题,以及他的React Native代码和服务器端代码。他使用fetch方法将数据发送到服务器,但无法在服务器端读取/获取发布的数据。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • Android日历提醒软件开源项目分享及使用教程
    本文介绍了一款名为Android日历提醒软件的开源项目,作者分享了该项目的代码和使用教程,并提供了GitHub项目地址。文章详细介绍了该软件的主界面风格、日程信息的分类查看功能,以及添加日程提醒和查看详情的界面。同时,作者还提醒了读者在使用过程中可能遇到的Android6.0权限问题,并提供了解决方法。 ... [详细]
  • Linux服务器密码过期策略、登录次数限制、私钥登录等配置方法
    本文介绍了在Linux服务器上进行密码过期策略、登录次数限制、私钥登录等配置的方法。通过修改配置文件中的参数,可以设置密码的有效期、最小间隔时间、最小长度,并在密码过期前进行提示。同时还介绍了如何进行公钥登录和修改默认账户用户名的操作。详细步骤和注意事项可参考本文内容。 ... [详细]
  • javascript  – 概述在Firefox上无法正常工作
    我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观:而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
  • 如何用UE4制作2D游戏文档——计算篇
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了如何用UE4制作2D游戏文档——计算篇相关的知识,希望对你有一定的参考价值。 ... [详细]
  • http:my.oschina.netleejun2005blog136820刚看到群里又有同学在说HTTP协议下的Get请求参数长度是有大小限制的,最大不能超过XX ... [详细]
  • 本文介绍了在使用vue和webpack进行异步组件按需加载时可能出现的报错问题,并提供了解决方法。同时还解答了关于局部注册组件和v-if指令的相关问题。 ... [详细]
author-avatar
像天使一样的笑着_917
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有