Làm thế nào để bạn triển khai Algolia trong laravel?

Họ có các thư viện cho các ngôn ngữ lập trình khác nhau để tích hợp tìm kiếm toàn văn vào ứng dụng của bạn

• trên back-end (Symfony, Laravel, Django, v.v. );
• trên giao diện người dùng (VanillaJS, React, Vue, v.v. )

Chẳng hạn, bạn có thể triển khai trang tìm kiếm bằng Vue bằng thư viện mã nguồn mở VueInstantSearch, đồng thời triển khai back-end bằng Laravel Scout để tự động thêm các thực thể mới vào Algolia

Đối với giao diện người dùng Vue, chúng có rất nhiều thành phần được xác định trước như Hộp tìm kiếm, Tự động hoàn thành, Danh sách sàng lọc, Thanh trượt phạm vi, Lượt truy cập, Phân trang, v.v. chúng ta sẽ chạm vào chi tiết hơn về điều này một chút nữa

Bạn có thể xem bản demo đầy đủ của Vue tại đây

Laravel có gói riêng để hỗ trợ công cụ tìm kiếm Algolia, được gọi là Laravel Scout. Gói này đơn giản hóa nhiệm vụ tích hợp tìm kiếm Algolia vào hệ thống của bạn

Để cài đặt Laravel Scout, hãy làm

composer require laravel/scout
php artisan vendor:publish --provider="Laravel\Scout\ScoutServiceProvider"

Về cơ bản, Laravel Scout làm rất nhiều việc nhưng bạn chỉ cần sử dụng đặc điểm Searchable trong mô hình Eloquent của mình mà bạn muốn ánh xạ tới chỉ mục Algolia (chỉ mục trong Algolia giống như một cơ sở dữ liệu)

Ví dụ: tạo mô hình Contact dưới dạng thực thể được ánh xạ Algolia

<?phpnamespace App;use Illuminate\Database\Eloquent\Model;
use Laravel\Scout\Searchable;class Contact extends Model
{
    use Searchable;
}

Bạn cũng có thể viết trình điều khiển công cụ tìm kiếm của riêng mình cho Laravel Scout, hoặc để biết thêm thông tin về nó, bạn có thể kiểm tra

VueInstantSearch là thư viện giao diện người dùng mã nguồn mở do nhóm Algolia xây dựng cho Vue. Thư viện chứa các loại thành phần được xác định trước khác nhau có thể dễ dàng mở rộng nếu cần

Để sử dụng VueInstantSearch, bạn nên cài đặt nó qua npm

npm install --save vue-instantsearch algoliasearch

Sau đó đăng ký Tìm kiếm tức thì trong resources/assets/js/app.js

...
import InstantSearch from 'vue-instantsearch';Vue.use(InstantSearch);
...

Và tạo một thành phần Vue mới trong thư mục resources/assets/js với thành phần gốc được yêu cầu là <ais-instant-search>

<template>
    <ais-instant-search
      index-name="instant_search"
      :search-client="searchClient"
    >
      <!-- Put widgets here -->
</template><script>
    import algoliasearch from 'algoliasearch/lite';    export default {
      data() {
        return {
          searchClient: algoliasearch(
            'YourApplicationID',
            'YourSearchOnlyAPIKey'
          ),
        };
      },
    };
</script>

Các tiện ích Algolia nên được thêm vào phần tử <ais-instant-search>

Ra khỏi hộp, Vue InstantSearch có các tiện ích

• <?phpnamespace App;use Illuminate\Database\Eloquent\Model;
  use Laravel\Scout\Searchable;class Contact extends Model
  {
      use Searchable;
  }

  1 - hiển thị kết quả tìm kiếm;

• <?phpnamespace App;use Illuminate\Database\Eloquent\Model;
  use Laravel\Scout\Searchable;class Contact extends Model
  {
      use Searchable;
  }

  2 - kết quả tìm kiếm với nút "Hiển thị thêm";

• <?phpnamespace App;use Illuminate\Database\Eloquent\Model;
  use Laravel\Scout\Searchable;class Contact extends Model
  {
      use Searchable;
  }

  3 - phân trang của kết quả tìm kiếm;

• <?phpnamespace App;use Illuminate\Database\Eloquent\Model;
  use Laravel\Scout\Searchable;class Contact extends Model
  {
      use Searchable;
  }

  4 - trường tìm kiếm đầu vào;

• <?phpnamespace App;use Illuminate\Database\Eloquent\Model;
  use Laravel\Scout\Searchable;class Contact extends Model
  {
      use Searchable;
  }

  5 - đầu vào phạm vi, rất tốt để sử dụng làm công cụ chọn phạm vi giá;

• <?phpnamespace App;use Illuminate\Database\Eloquent\Model;
  use Laravel\Scout\Searchable;class Contact extends Model
  {
      use Searchable;
  }

  6 - danh sách có các hộp kiểm tiêu chí;

• <?phpnamespace App;use Illuminate\Database\Eloquent\Model;
  use Laravel\Scout\Searchable;class Contact extends Model
  {
      use Searchable;
  }

  7 - sắp xếp kết quả;
• vân vân

Có các thư viện của bên thứ ba để hỗ trợ Tìm kiếm đàn hồi, chúng tôi sẽ đề cập đến chủ đề này trong các bài viết trong tương lai

Trong bài viết này, chúng tôi hy vọng rằng bạn đã học được một chút về cách sử dụng Laravel Scout và VueInstantSearch, để giúp bạn bắt đầu tích hợp tìm kiếm toàn văn vào ứng dụng hiện tại của mình. Mặc dù có một số tùy chọn khi nói đến nền tảng tìm kiếm, nhưng chúng tôi tin rằng Algolia mang lại nhiều chiến thắng dễ dàng, giải phóng thời gian của bạn để xây dựng các tính năng quan trọng khác trong ứng dụng của bạn

laravel trinh sát là gì?

Tìm kiếm Algolia là gì?