Cara Membuat Sendiri Komentar Situs Web Dengan Supabase Dan JS

Sat, 30 Nov 2024

Setelah berselancar di internet dan mencoba berbagai macam comment system, akhirnya aku menemukan cara membuatnya dengan menggunakan Supabase dan JavaScript. Terima kasih kepada MCNAVEEN untuk karya yang luar biasa. Baik tanpa berpanjang-lebar, mari kita mulai.

Membuat Database di Supabase

Buatlah akun di Supabase.
Setelah itu, buatlah project dan database baru.
Buatlah tabel baru dengan nama comments dan tambahkan kolom seperti di bawah.

Name	Type	Default Value
id	int8	-
name	text	-
email	text	-
postURL	text	-
comment	text	-
created_at	timestampz	now()
show	boolean	true

Buat auth policies dengan isi seperti di bawah:

CREATE POLICY "Allow users to view comments" ON public.comments FOR
SELECT
  TO authenticated,
  anon USING (
    SHOW = TRUE
  );

CREATE POLICY "Allow users to add comments" ON public.comments FOR INSERT TO authenticated,
anon
WITH
  CHECK (TRUE);

Database sudah siap, selanjutnya buka menu Project Settings > Configuration > API. Copy Project URL dan Project API Keys pada bagian anon public yang nanti akan kita pakai untuk comment system.

Membuat System Comment

Clone supacomments dari github

git clone https://github.com/mcnaveen/SupaComments && cd supacomments

Install dependencies

yarn install

Buat file konfigurasi

cp .env.example .env

Buka file .env dengan text editor favorit kalian lalu isikan nama domain kita (tanpa https://), Project URL dan Project API Keys dari supabase seperti di bawah:

SUPACOMMENT_HOST_URL=domainanda.site
SUPACOMMENT_SUPABASE_URL=https://xxxxxxxxxxxx.supabase.co
SUPACOMMENT_SUPABASE_ANON_KEY=falsdfadskfjaksdfj.hakdsfhlaksdjfhaklsdjhfaksdjf:jfkajdsfakjdshf

Kita juga bisa mengedit layout comment system dengan mengubah semua isi file dalam directory src/components.
Build comment system dengan perintah:

yarn build

Perintah di atas akan membuat file comments.js dan comments.css di dalam directory pubic/build.
Copy paste file tersebut ke situs anda misalnya /asset/js/comments.js. Oh iya, karena situsku menggunakan tailwind, aku tidak memerlukan comments.css. Sesuaikan saja.
Tambahkan baris berikut di layout post blog anda, jangan lupa ganti yoursite.com dengan domain situs kita (tanpa https://). Sesuaikan pula src="/asset/js/comment.js" dengan path file comments.js di situs kita.

<div id="comments" data-url="yoursite.com" clickToLoad="false"></div>
<script src="/asset/js/comments.js">

Push ke github dan deploy ke situs kita. Beres...

Untuk demo, klik tombol comment pada navbar di atas ya.

Terimakasih sudah mampir