# Tips: Menambahkan Algolia DocSearch di Vuepress
(source docsearch.algolia.com)
# Introduction
Search (Pencarian) adalah sebuah fitur vital dalam penyimpanan. Tak hayal Google dikenal dengan mesin pencarinya yang andal. Berjuta-juta dokumen yang ada di internet dikenalinya supaya memudahkan orang untuk mencari dokumen yang ingin dicarinya. Pada artikel kali ini kita akan bahas Algolia DocSearch dan cara implementasinya di Vuepress.
Vuepress menyebut dirinya static-site generator yang fungsi nya menghasilkan website statis menggunakan Framework Vue. Vuepress sendiri banyak dipakai untuk membuat sebuah website dokumentasi pada project atau library. Bahkan saat artikel ini ditulis, website https://blog.nyan.my.id ini bangun diatas Vuepress.
Vuepress sendiri menyediakan fitur search built-in yang hanya meng-index judul tiap halaman. Jadi, ketika pengunjung ingin mencari kata yang ada dalam artikel (content) maka tidak akan ada sugesti yang muncul. Untuk mengatasi permasalahan ini kita bisa menggunakan fitur search Algolia DocSearch yang sudah tersedia plugin (build-in functionality) pada Vuepress untuk mempermudah kita meng-implementasikannya.
# Table of Contents
# Persiapan
Adapun hal-hal yang perlu kita persiapkan terlebih dahulu yaitu:
- Alogila Active Account.
- Docker
v19.03.8
ataulatest
. - Vuepress
# Algolia DocSearch Sraper
Untuk melakukkan menambahkan object pada index, kita bisa melakukkan sraping menggunakan module yang tersedia dari Algolia DocSearch. Alogila secara secara gratis telah menyediakan layanan indexing yang bernama DocSearch. Namun layanan ini diperuntunkan untuk website resmi dokumentasi suatu program atau layanan yang open-source. Layanan tersebut melakukkan indexing pada halaman keseluruhan website tiap 24 jam.
Untuk website pribadi atau bukan dokumentasi kamu tetap bisa menggunakan layanan tersebut namun dengan catatan dijalankan sendiri (Run your own). Terima kasih kepada Docker yang membuat semuanya mudah tanpa memperdulikan kesalahan env dan version conflict suatu dependency.
GitHub - algolia/docsearch-scraper: DocSearch - Scraper
DocSearch - Scraper. Contribute to algolia/docsearch-scraper development by creating an account on GitHub.
github.com
Kita bisa menjalankan nya dari code-base (dengan setup project python dan install beberapa dependency) atau menggunakan docker. Pada artikel kali ini kita akan menggunakan docker, kenapa docker? karena docker membuat aplikasi tersebut berjalan didalam container terisolasi yang tujuan utamanya menghindari bentrok pada versi library atau package yang dibutuhkan. Alasan lainnya kita hanya melakukkan satu perintah maka docker yang akan mengurus sisanya sehingga aplikasi dapat berjalan dengan baik (otomatis) tanpa melakukkan konfigurasi apapun.
# Instalasi DocSearch
Untuk memasang atau menjalankan docsearch kita perlu terlebih dahulu mengunduh docker image nya supaya dapat berjalanan sebagai docker container nantinya.
Kita tinggal jalankan perintah docker pull, seperti di bawah ini:
$ docker pull algolia/docsearch-scraper
Catatan
Perlu diketahui bahwa prosess mengunduh docker image tersebut memakan disk dan penggunaan data internet yang lumayan banyak. Jika kamu menggunakan hotspot atau data selular (modem), pastikan kuota anda terpenuhi dan cukup untuk melakukkan pengunduhan image.
# Konfigurasi Scraper
Kita membutuhkan 2 file konfigurasi yaitu config.json
dan .env
. File config.json
berisi konfigurasi url dan element apa saja yang akan si scrape, sedangkan file .env
berisi informasi sensitif berupa ID Aplikasi dan API Key.
# File config.json
Loading
# File .env
Loading
# Menjalankan Scraper
Sebelum menjalankan kita install terlebih dahulu jq
(JSON Command-line processor).
$ sudo apt install jq
Untuk Sistem operasi Mac dan Windows bisa kunjungi langkah install nya di web wiki dokumentasi resmi jq.
Installation · stedolan/jq Wiki · GitHub
Command-line JSON processor. Contribute to stedolan/jq development by creating an account on GitHub.
github.com
Selanjutnya kita bisa menjalankan DocSearch untuk melakukkan prosess indexing pada website kita. Untuk me-running DocSearch kita tinggal mengetikkan perintah dibawah ini.
$ docker run -it --env-file=.env -e "CONFIG=$(cat /path/to/your/config.json | jq -r tostring)" algolia/docsearch-scraper
Setelah prosess indexing berjalan kita tinggal cek apakah indexing sudah dibuat di Algolia, caranya buka Dashboard Aloglia kalian.
# Integrasi Vuepress
Selanjutnya kita konfigurasi vuepress agar ter-integrasi dengan algolia yang nantinya default search kita adalah Alogila tersebut. Sebelumnya kita perlu mempersiapkan API Key khusus untuk search saja. API Key yang dibuat untuk scraping jangan digunakan pada tahap ini, karena privilege di API tersebut bukan untuk pencarian.
- Buka halaman dashboard Alogila.
- Pilih Menu API Keys.
- Pilih tab All API Keys.
- Kita buat API Key baru dengan klik New API Key.
- Selanjutnya isi Description dengan "Search API" atau deskripsi API kalian.
- Indices dengan nama Index.
- ACL pilih search.
- Lalu Update.
Simpan API Key yang dihasilkan yang nantinya akan kita gunakan. Selanjutnya kita setting vuepress kita, buka file config vuepress kalian. Lalu sesuaikan dengan konfigurasi berikut.
module.exports = {
themeConfig: {
algolia: {
appId: 'YOUR_APPLICATION_ID',
apiKey: 'YOUR_SEARCH_API_KEY',
indexName: 'YOUR_INDEX_NAME'
}
}
}
Lalu coba jalankan npm run dev
atau vuepress dev
.
# Referensi
How do we build a DocSearch index? | DocSearch
import useBaseUrl from '@docusaurus/useBaseUrl';
docsearch.algolia.com