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

使用Cosmic JS的Webhooks，我们可以将Algolia与Cosmic JS同步，以为我们的项目提供快速而强大的搜索功能。TL; DR演示版源代码介绍如果您曾经尝试自己实施搜索，那么您就会知道这很困难。值得庆幸的是，阿尔戈利亚（Algolia）创造了一种简化产品。在本文中，我们将介绍如何将Algolia连接到Cosmic JS后端并将其添加到您的Apps。该...

dfsgwe1231

199人浏览 · 2020-03-12 10:09:11

dfsgwe1231 · 2020-03-12 10:09:11 发布

使用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
对象的编辑和发布；端点https://<__YOUR_DOMAIN__>/api/algolia/edit
对象已删除；端点https://<__YOUR_DOMAIN__>/api/algolia/delete

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

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

演示应用程序使用Node.js Express服务器。这是代码：

/* eslint-disable no-console */
require ( 'dotenv' ).config({ path : './.env.production' });
const express = require ( 'express' );
const bodyParser = require ( 'body-parser' );
const corser = require ( 'corser' );
const next = require ( 'next' );
const routes = require ( './routes' );
const algoliasearch = require ( 'algoliasearch' );
const convertDataToAlgoliaObject = require ( './utils/convertDataToAlgoliaObject' );
const fetch = require ( 'isomorphic-fetch' );

const port = parseInt (process.env.PORT, 10 ) || 3000 ;
const dev = process.env.NODE_ENV !== 'production' ;
const app = next({ dev });
const handler = routes.getRequestHandler(app);

const client = algoliasearch(
  process.env.ALGOLIA_APPLICATION_ID,
  process.env.ALGOLIA_ADMIN_API_KEY,
);
const itemsIndex = client.initIndex( 'items' );

app.prepare()
  .then( () => {
    const server = express();

    server.use(corser.create());
    server.use(bodyParser.json());

    // ---------- API endpoints for synchronizing Algolia -----------

    server.post( '/api/algolia/create' , (req, res) => {
      const { data } = req.body;
      if (data.type_slug === 'items' ) {
        const algoliaObject = convertDataToAlgoliaObject(data);
        itemsIndex.addObject(algoliaObject)
          .catch( err => console .error(err));
      }
      res.status( 200 ).send();
    });

    server.post( '/api/algolia/edit' , (req, res) => {
      const { data } = req.body;
      if (data.type_slug === 'items' ) {
        const algoliaObject = convertDataToAlgoliaObject(data);
        itemsIndex.addObject(algoliaObject)
          .catch( err => console .error(err));
      }
      res.status( 200 ).send();
    });

    server.post( '/api/algolia/delete' , (req, res) => {
      const { data } = req.body;

      // data is an Array of one or more Object _ids
      itemsIndex.deleteObjects(data)
        .catch( err => console .error(err));
      res.status( 200 ).send();
    });

    server
      .listen(port, (err) => {
        if (err) throw err;
        console .log( `> Ready on http://localhost: ${port} ` );
      });
  });

首先，创建一个algoliasearch客户。它使用Algolia应用程序ID和Admin API密钥（可以在您的Algolia App仪表板中找到）。

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

const convertDataToAlgoliaObject = ( data ) => {
  let asin;
  let brand;
  let categories;
  let featured;
  let price;
  let thumbnail;

  data.metafields.forEach( ( metafield ) => {
    switch (metafield.key) {
      case 'asin' :
        asin = metafield.value;
        break ;
      case 'brand' :
        brand = metafield.value;
        break ;
      case 'categories' :
        categories = metafield.value && metafield.value.split( ',' );
        break ;
      case 'options' :
        featured = metafield.value.includes( 'Featured' );
        break ;
      case 'price' :
        price = metafield.value;
        break ;
      case 'thumbnail' :
        thumbnail = 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-dangle
    price,
    publishedAt : data.published_at,
    slug : data.slug,
    thumbnail,
    title : data.title,
  };
};

module .exports = convertDataToAlgoliaObject;

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

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

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

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

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

结论

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