开始使用 Algolia 获取您的 API 密钥 连接您的数据源 为 Algolia 准备数据 将数据发送到 Algolia 设置您的设置 连接前端

2025-06-08

Algolia 入门

获取您的 API 密钥

连接数据源

为 Algolia 准备数据

发送数据至 Algolia

设置您的设置

连接前端

哦，嘿，你好👋！你有没有经历过从零开始做搜索的痛苦？或者当你的产品经理说“你知道什么会很棒吗？如果我们能在网站上有个搜索栏就好了！”时，你的第一个念头是……

awwcmon

是的，这种痛苦我以前体验过太多次了。说实话，有几次我像躲避瘟疫一样躲避它，因为即使我把搜索都整理好了，我也觉得它不太好，而且最重要的是，我每次看到文档一半的时候都会纳闷，那个模块到底应该放哪儿？真的，一点也不好玩。

不过，如今我们有了一些很棒的工具和服务，让我们的生活轻松多了。告别从零开始构建搜索的日子吧。啊，我热爱科技。科技让我的生活一天天变得更轻松。

这就是我开始使用并最终加入 Algolia 团队的原因之一。我不希望这篇文章让你读起来感觉“哦天哪，她在向我推销”。不，我真心想和你分享我在 Algolia 入门过程中学到的东西，以及如何快速上手并开始编写代码。那么，让我们深入探讨一下你需要的一些步骤，让你的搜索功能准备就绪。

获取您的 API 密钥

已标记的 Algolia 键

首先在Algolia创建一个帐户。然后从仪表板获取您的凭据。您需要复制您的App Id、Search Only API Key和Admin API Key。

完成后，将它们添加到您正在使用的任何内容中，.env file以便您的应用知道如何连接到您的 Algolia 应用程序并进行索引。Boom！这才是最难的部分。

连接数据源

如果你的数据已经准备好了，我们可以先创建一个函数来调用该 URL 并将其推送到索引中。这里我们使用 JavaScript 作为语言。

const data_url = "https://raw.githubusercontent.com/algolia/datasets/master/movies/actors.json"

function indexData(data_url){
  return axios.get(data_url,{})
  .then(function(response){
    console.log(response.data[0]);
    return;
  })
  .catch(function(error) {
      console.warn(error)
  })
}
Enter fullscreen mode Exit fullscreen mode

我们将在此函数的基础上进行构建，但目前我们只需data_url传递它，记录数据中的第一条记录并退出循环即可。这里我们使用 Axios 进行 API 调用。Axios 是一个 JavaScript 库，用于从 Node.js 发出 http 请求或从浏览器发出 XMLHttpRequests，并且它支持 JS ES6 原生的 Promise API。与其他库相比，使用 Axios 的优势在于它可以自动转换 JSON 数据。

为 Algolia 准备数据

现在我们已经开始调用，让我们开始使用之前设置的 Algolia 账户，并将数据上传到我们的索引！我们将分两步完成。首先，我们将迭代从 axios.get 调用返回的数据，并创建一个对象数组。这样，我们就可以只使用想要在索引中突出显示的数据。然后，完成后，我们就可以将其发送到 Algolia 的索引了。

步骤 1：我们不仅仅返回成功响应，还创建一个函数，通过传递 axios.get 调用的响应来处理该上传。

function indexData(data_url){
  return axios.get(data_url,{})
  .then((response) => {
      return dataToAlgoliaObject(response.data)
    })
  .then(function(response){
    return;
  })
  .catch(function(error) {
      console.warn(error)
  })
}
Enter fullscreen mode Exit fullscreen mode

现在在这个函数中，我们要遍历我们的数据点并创建我们的算法对象，这应该是一个非常直接的循环。

function dataToAlgoliaObject(data_points){
  var algoliaObjects = [];
  for (var i = 0; i < data_points.length; i++) {
    var data_point = data_points[i];
    var algoliaObject = {
        objectID: data_point.objectID,
        name: data_point.name,
        rating: data_point.rating,
        image_path: data_point.image_path,
        alternative_name: data_point.alternative_name
      };
    algoliaObjects.push(algoliaObject);
  }

  return algoliaObjects;
}
Enter fullscreen mode Exit fullscreen mode

第 2 步：现在我们已经构建了对象，可以将它们发送到 Algolia 了！

科米特派对

让我们对 indexData 函数进行一些修改。.then由于 axios 的 Promise 结构和使用方式async，我们可以在调用时使用 a 链式调用，await以确保在上传数据之前不会出现任何异常。 

function indexData(data_url){
  return axios.get(data_url,{})
  .then((response) => {
      return dataToAlgoliaObject(response.data)
    })
  .then(async (response) => {
     await sendDataToAlgolia(response);
     return;
  })
  .then(function(response){
    return;
  })
  .catch(function(error) {
      console.warn(error)
  })
}
Enter fullscreen mode Exit fullscreen mode

发送数据至 Algolia

现在，让我们编写该sendDataToAlgolia函数。在这里，我们将使用之前放入.env文件中的键。我们还需要确保有一个函数可以初始化索引，并将我们想要用于存储数据的索引名称传递给它。由于我们使用的数据集是关于电影演员的，所以这个名称似乎足够了。

const algoliaClient = algoliasearch(process.env.ALGOLIA_APP_ID, process.env.ALGOLIA_ADMIN_API_KEY);
const algoliaIndex = algoliaClient.initIndex("movie-actors");  

function sendDataToAlgolia(algoliaObjects){
  return new Promise((resolve, reject) => {
    algoliaIndex.addObjects(algoliaObjects, (err, content) => {
      if(err) reject(err);
      resolve();
    })
  });
}
Enter fullscreen mode Exit fullscreen mode

设置您的设置

数据已经拿到了！现在，我们想告诉 Algolia 如何使用这些数据。我们可以通过仪表盘或代码来实现。我个人更喜欢通过代码来实现，所以这里我们来回顾一下。我们有很多选择，但可以进行一些基本的操作：

searchableAttributes：在此列出您希望从您创建的 algoliaObject 中搜索的内容
。attributesToHighlight：突出显示您正在搜索的文本。customRanking
：选择如何显示数据，desc() 或 asc()。
attributesToRetrieve：返回这些属性以在搜索结果中显示。

async function configureAlgoliaIndex(){
  algoliaIndex.setSettings({
    searchableAttributes: [
      'name'
    ],
    attributesToHighlight: [
      'name'
    ],
    customRanking: [
      'desc(rating)'
    ],
    attributesToRetrieve: [
      'name', 
      'rating',
      'image_path'
    ]
  });
}
Enter fullscreen mode Exit fullscreen mode

一旦我们成功将数据上传到索引，我们就添加此功能。

function indexData(data_url){
  return axios.get(data_url,{})
  .then((response) => {
      return dataToAlgoliaObject(response.data)
    })
  .then(async (response) => {
     await sendDataToAlgolia(response);
     return;
  })
  .then(async () => {
     await configureAlgoliaIndex();
     return;
  })
  .then(function(response){
    return;
  })
  .catch(function(error) {
      console.warn(error)
  })
}
Enter fullscreen mode Exit fullscreen mode

哇，现在索引里的数据已经按我们想要的方式呈现了。所以，后端部分已经完成，现在轮到用户查看并搜索我们可爱的数据了。

连接前端

Algolia 有一个叫做“小部件”的功能，它允许我们快速向 HTML 页面添加部分内容，而无需编写大量新代码。只需几行 JavaScript 代码，我们就可以轻松添加搜索栏以及 Algolia 对象在页面上的显示位置等元素。让我们来看看客户端文件。

我们首先要创建一个可以在应用中使用的即时搜索实例。您可以使用 Cookie 将这些数据从服务器传递到前端，也可以将键值放在其中。为了篇幅限制，我们将键值放在此处。

$(document).ready(function() {
  var instantsearch = window.instantsearch;

  // create an instantsearch instance with our app id and api key
    var search = instantsearch({
      appId: Cookies.get('app_id'),
      apiKey: Cookies.get('search_api_key'),
      indexName: Cookies.get('index_name'),
      urlSync: true,
      searchParameters: {
        hitsPerPage: 3
      }
    });
Enter fullscreen mode Exit fullscreen mode

现在让我们将搜索输入连接到您的 html，以便用户有一个搜索的地方。

search.addWidget(
  instantsearch.widgets.searchBox({
    container: '#search-box',
    placeholder: 'Search your favorite actors'
  })
);
Enter fullscreen mode Exit fullscreen mode

现在我们要添加我们的数据结果，并且在返回语句中您可以更改您想要显示的内容。

  search.addWidget(
    instantsearch.widgets.hits({
      container: '#hits',
      hitsPerPage: 12,
      templates: {
        empty: `<div class="col-md-12" style="text-align: center;"> We didn't find any results for the search <em>\"{{query}}\"</em></div`,
        item: function(hit) {
          try {
            return `
              <div class="col-md-4" style="text-align: center;">
                <p> 
                  <h3 class="hit-text">${hit._highlightResult.name.value}</h3>
                  <img src="https://image.tmdb.org/t/p/w45/${hit.image_path}" height="50" width="50">
                </p>
                <p>
                  Rating: ⭐️ ${hit.rating}
                </p>

              </div>
            `;
          } catch (e) {
            console.warn("Couldn't render hit", hit, e);
            return "";
          }
        }
      }
    })
  );
Enter fullscreen mode Exit fullscreen mode

良好的搜索体验不应该让用户被过多的结果所淹没，因此，让我们为我们得到的结果添加分页功能。

  search.addWidget(
    instantsearch.widgets.pagination({
      container: '#pagination'
    })
  );
Enter fullscreen mode Exit fullscreen mode

最后但同样重要的一点……让我们开始搜索！这将实例化页面上的所有内容。

  search.start();
Enter fullscreen mode Exit fullscreen mode

当然，如果您想跳过所有这些手动工作，您可以查看我们在 Glitch 上的快速启动应用程序，对其进行重新混合，您只需花费大约 5 分钟的时间就可以获得所有这些代码以及一个开箱即用的基本工作应用程序。😉祝您阅读愉快，希望对您有所帮助！

新来的女孩

鏂囩珷鏉ユ簮锛�https://dev.to/algolia/getting-started-with-algolia-4lnp
Devto 翻译
PREV
使用 Kubernetes 中的 Gateway API 进行现代流量管理
NEXT
使用 Autocomplete.js 创建多功能栏