Implementasi Algolia dengan Claude Code

Membangun Full-Text Search Algolia dengan Claude Code

Algolia adalah search engine SaaS yang memiliki kecepatan respons tingkat milidetik. Pengalaman pencarian canggih seperti toleransi typo, facet search, dan personalisasi bisa diimplementasikan dengan mudah. Dengan Claude Code, kamu bisa maju secara efisien dari desain index hingga pembangunan search UI.

Desain Index dan Memasukkan Data

> Desain index Algolia dan buat script untuk memasukkan data produk.
> Dukung juga pencarian bahasa Jepang.

// src/scripts/index-products.ts
import algoliasearch from 'algoliasearch';

const client = algoliasearch(
  process.env.ALGOLIA_APP_ID!,
  process.env.ALGOLIA_ADMIN_KEY!
);

const index = client.initIndex('products');

// Pengaturan index
await index.setSettings({
  searchableAttributes: [
    'name',
    'description',
    'category',
    'brand',
    'tags',
  ],
  attributesForFaceting: [
    'searchable(category)',
    'searchable(brand)',
    'price_range',
    'filterOnly(in_stock)',
  ],
  customRanking: ['desc(popularity)', 'asc(price)'],
  queryLanguages: ['ja', 'en'],
  indexLanguages: ['ja', 'en'],
  // Tokenisasi bahasa Jepang
  ignorePlurals: true,
  removeStopWords: true,
});

// Memasukkan data
interface Product {
  objectID: string;
  name: string;
  description: string;
  category: string;
  brand: string;
  price: number;
  price_range: string;
  in_stock: boolean;
  tags: string[];
  popularity: number;
  image_url: string;
}

const products: Product[] = await fetchProductsFromDB();

// Masukkan ke index secara batch (1000 record sekaligus)
const batchSize = 1000;
for (let i = 0; i < products.length; i += batchSize) {
  const batch = products.slice(i, i + batchSize);
  await index.saveObjects(batch);
  console.log(`Indexed ${i + batch.length} / ${products.length}`);
}

Membangun Search UI dengan React InstantSearch

> Buat halaman pencarian dengan React InstantSearch.
> Dengan facet, highlighting, dan pagination.

// src/components/SearchPage.tsx
import {
  InstantSearch,
  SearchBox,
  Hits,
  RefinementList,
  Pagination,
  Highlight,
  Stats,
  Configure,
} from 'react-instantsearch';
import algoliasearch from 'algoliasearch/lite';

const searchClient = algoliasearch(
  process.env.NEXT_PUBLIC_ALGOLIA_APP_ID!,
  process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_KEY!
);

function Hit({ hit }: { hit: any }) {
  return (
    <article className="p-4 border rounded-lg">
      <img
        src={hit.image_url}
        alt={hit.name}
        className="w-full h-48 object-cover rounded"
      />
      <h3 className="text-lg font-bold mt-2">
        <Highlight attribute="name" hit={hit} />
      </h3>
      <p className="text-gray-600 text-sm mt-1">
        <Highlight attribute="description" hit={hit} />
      </p>
      <div className="flex justify-between items-center mt-2">
        <span className="text-indigo-600 font-bold">
          ¥{hit.price.toLocaleString()}
        </span>
        <span className="text-sm text-gray-500">{hit.brand}</span>
      </div>
    </article>
  );
}

export default function SearchPage() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <Configure hitsPerPage={12} />
      <div className="max-w-6xl mx-auto p-6">
        <SearchBox
          placeholder="Cari produk..."
          className="mb-6"
        />
        <Stats />
        <div className="grid grid-cols-4 gap-6 mt-4">
          <aside>
            <h4 className="font-bold mb-2">Kategori</h4>
            <RefinementList attribute="category" />
            <h4 className="font-bold mt-4 mb-2">Brand</h4>
            <RefinementList attribute="brand" searchable />
            <h4 className="font-bold mt-4 mb-2">Rentang Harga</h4>
            <RefinementList attribute="price_range" />
          </aside>
          <main className="col-span-3">
            <Hits hitComponent={Hit} className="grid grid-cols-3 gap-4" />
            <Pagination className="mt-6" />
          </main>
        </div>
      </div>
    </InstantSearch>
  );
}

Sinkronisasi Index

Diperlukan mekanisme untuk menyinkronkan perubahan database ke Algolia.

// src/services/algolia-sync.ts
import algoliasearch from 'algoliasearch';

const client = algoliasearch(
  process.env.ALGOLIA_APP_ID!,
  process.env.ALGOLIA_ADMIN_KEY!
);
const index = client.initIndex('products');

export async function onProductCreated(product: Product) {
  await index.saveObject({ ...product, objectID: product.id });
}

export async function onProductUpdated(product: Product) {
  await index.partialUpdateObject({
    objectID: product.id,
    ...product,
  });
}

export async function onProductDeleted(productId: string) {
  await index.deleteObject(productId);
}

Summary

Dengan menggabungkan pencarian berkecepatan tinggi Algolia dan Claude Code, fungsionalitas pencarian tingkat produksi bisa dibangun dalam waktu singkat. Lihat juga Panduan Implementasi Fungsionalitas Pencarian dan Optimasi Performa.

Untuk detail Algolia, lihat Dokumentasi Resmi Algolia.