使用Cosmic JS的Webhooks,我们可以将Algolia与Cosmic JS同步, 以为我们的项目提供快速而强大的搜索功能。
TL; DR
演示版
源代码
介绍
如果您曾经尝试自己实施搜索,那么您就会知道这很困难。 值得庆幸的是,阿尔戈利亚(Algolia)创造了一种简化产品。 在本文中,我们将介绍如何将Algolia连接到Cosmic JS后端并将其添加到您的Apps。 该演示应用程序是使用React.js和Express.js服务器构建的。 如果您使用的是其他方法,则仍然可以遵循此模式。 只需针对您的用例进行修改。
主要有四个步骤:
- 创建一个Algolia应用
- 创建Cosmic JS Webhooks
- 创建API端点以接收Cosmic JS Webhook POST请求
- 将搜索小部件添加到我们的应用
第1部分-创建Algolia应用
导航至https://www.algolia.com 。 登录或注册(免费)帐户。
登录后,导航至仪表板。
在控制台中,单击“新建应用程序”。
为您的应用命名,然后单击“创建”。
下一页将要求您选择一个区域。 选择最接近的一个。 然后点击“继续”。
现在,您应该看到新创建的应用程序的仪表板。 点击屏幕左侧的“ API密钥”。 这是后续步骤所需的API密钥列表。
第2部分-创建Cosmic JS Webhooks
登录到您的Cosmic JS帐户,然后转到“存储桶”。
选择“设置”,然后在“仪表盘”菜单中选择“ Webhooks”。
您应该连接三个不同的Webhooks。 将端点替换为项目所需的任何对象
- 事件:对象的创建和发布; 端点
https://<__YOUR_DOMAIN__>/api/algolia/create
- 对象的编辑和发布&#xff1b; 端点
https://<__YOUR_DOMAIN__>/api/algolia/edit
- 对象已删除&#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