Kembali ke Blog
    AI & Automation

    Cara Kami Membuat AI Peramal dengan React & Groq

    Pembahasan mendalam membangun Peramal Oracle di tanyaperamal.com: frontend React, backend Express, Groq AI, sistem kredit token, dan manajemen sesi.

    Konsep AI oracle dengan antarmuka digital mistis
    KayFreyTech Editorial TeamApr 20269 menit baca

    Apa yang terjadi kalau kita kombinasikan AI modern dengan tradisi ramalan kuno? Hasilnya adalah Tanya Peramal (tanyaperamal.com) -- platform di mana pengguna bisa berkonsultasi dengan AI Oracle yang didukung oleh Groq untuk pembacaan Ba Zi, Tarot, I Ching, dan Gui Bu.

    Di atas kertas, briefnya kedengaran sederhana: bangun website ramalan. Kenyataannya, proyek ini berada di persimpangan empat disiplin yang berbeda -- pengetahuan divinasi tradisional, desain prompt AI percakapan, rekayasa backend real-time, dan SEO untuk salah satu niche paling kompetitif di Indonesia. Artikel ini membahas arsitekturnya, keputusan desain yang benar-benar berpengaruh, dan kesalahan yang tidak ingin kami ulangi di produk AI berikutnya.

    Masalah yang Kami Selesaikan

    Kebanyakan demo 'AI peramal' di internet hanyalah wrapper tipis di atas chat model: kotak teks, system prompt generik, lalu balasan berupa tembok teks. Itu cukup untuk halaman iseng, tapi tidak cukup sebagai produk. Brief Tanya Peramal meminta sesuatu yang terasa seperti berkonsultasi dengan praktisi sungguhan -- cepat, konsisten dalam karakter, dengan pengetahuan domain nyata soal Ba Zi, Tarot, I Ching, dan Gui Bu -- sekaligus berkelanjutan secara komersial lewat sistem token, bukan iklan banner.

    Tech Stack yang Digunakan

    Frontend: React + TypeScript + Tailwind CSS

    Frontend menggunakan React SPA standar yang dibangun dengan Vite untuk build cepat dan hot reload saat development. Kami menata dengan Tailwind CSS memakai palet ungu gelap dan emas yang cocok untuk tema ramalan mistis tanpa terasa klise. Situs kini punya 62 halaman yang mencakup berbagai metode divinasi, konten zodiak, dan artikel edukasi, semuanya memakai komponen yang sama sehingga halaman baru bisa dirilis dalam satu sore kerja.

    Backend: Express.js + SQLite

    Backend berjalan di Express.js dengan SQLite untuk data pengguna dan manajemen token. Kami sengaja memilih SQLite dibanding PostgreSQL: model datanya sederhana (users, tokens, sessions), trafiknya lebih banyak read daripada write, dan database satu file berarti satu server lebih sedikit yang harus dipatch, dimonitor, dan dibayar. Kalau nanti platform ini melampaui kapasitas tulis SQLite, migrasi ke PostgreSQL adalah jalur yang sudah dikenal dan terdokumentasi baik -- kami tidak mau membayar kompleksitas itu sejak hari pertama.

    AI Engine: Kenapa Groq, Bukan Langsung ke OpenAI atau Anthropic

    Untuk AI Oracle, kami mengarahkan trafik ke Groq sebagai provider utama, dengan OpenRouter sebagai fallback. Groq menjalankan model open source di atas hardware LPU khusus, bukan GPU, dan perbedaannya langsung terasa di produk: kalau panggilan GPT atau Claude biasa bisa butuh 4-8 detik untuk respons panjang, Groq men-stream panjang yang sama dalam waktu kurang dari 2 detik. Untuk kebanyakan fitur SaaS, selisih itu tidak terlalu penting. Untuk sebuah oracle, itu adalah seluruh pengalamannya -- peramal yang membuat Anda menatap loading spinner selama sepuluh detik berhenti terasa mistis dan mulai terasa seperti aplikasi rusak. OpenRouter berada di belakang Groq sebagai fallback: kalau Groq kena rate limit saat lonjakan trafik atau mengalami outage, permintaan dialihkan ke model setara lewat OpenRouter, bukannya pengguna melihat pesan error.

    Rekayasa System Prompt

    Bagian paling kritis dari proyek ini bukan frontend, melainkan system prompt. Model harus merespons sebagai peramal mistis, bukan asisten yang helpful lengkap dengan bullet point dan disclaimer. Fokus kami:

  1. **Persona**: Oracle berbicara dengan nada bijaksana dan sedikit misterius. Tanpa bahasa korporat, tanpa 'Sebagai model bahasa AI', tanpa daftar bernomor di tengah pembacaan.
  2. **Keahlian domain**: Pengetahuan mendalam dan spesifik tentang Ba Zi (astrologi China berdasarkan tanggal dan jam lahir), makna kartu Tarot beserta posisi dalam spread, heksagram I Ching dan garis yang berubah, serta divinasi Gui Bu (tempurung kura-kura).
  3. **Sensitivitas budaya**: Menghormati tradisi yang menjadi sumber konten sambil membuatnya bisa diakses pengguna Indonesia modern yang mungkin baru pertama kali mengenal sebagian metode ini.
  4. **Pagar keamanan**: Oracle menolak memberikan saran medis, hukum, atau prediksi finansial yang dibungkus sebagai takdir. Filter keyword memblokir query paling berisiko sebelum sampai ke model.
  5. Kami menulis ulang prompt lebih dari selusin kali, kebanyakan dengan cara membaca transkrip percakapan asli dan menandai baris mana pun yang terdengar seperti chatbot, bukan peramal. Frasa seperti 'Berdasarkan informasi yang diberikan' harus dibuang; 'Bintang berbisik tentang perubahan yang datang di bulan kedua' harus dipertahankan. Perubahan semacam itu tidak terlihat besar kalau dilihat sebagai diff baris kode, tapi itulah yang membedakan produk yang dipercaya pengguna dengan produk yang ditutup setelah satu pesan.

    Desain Sistem Kredit Token

    Kami mengimplementasikan sistem berbasis kredit, bukan langganan. Langganan cocok untuk tool yang dipakai harian; ramalan lebih mirip pembelian sesekali dengan intent tinggi, jadi bayar-per-pakai lebih pas dengan pola penggunaan yang sebenarnya. Begini cara kerjanya:

  6. Pengguna baru mendapat 3 token gratis saat registrasi via Google OAuth, cukup untuk mencoba setiap metode divinasi satu kali.
  7. Setiap konsultasi oracle membutuhkan 1 token, yang baru dipotong setelah AI berhasil memberi respons.
  8. Token tambahan bisa dibeli dalam paket bundel, dengan harga per token yang turun di tier lebih besar.
  9. Saldo token dilacak di SQLite dan divalidasi server-side sebelum setiap panggilan AI, jadi pengguna tidak bisa mengakali pengecekan hanya dengan mengubah state di frontend.
  10. Pendekatan ini jauh lebih sederhana untuk dibangun dan diaudit dibanding integrasi langganan/billing penuh, dan memberi pengguna kendali langsung atas pengeluaran mereka, bukan tagihan berulang yang bisa lupa dibatalkan. Integrasi Google OAuth juga berarti nol alur reset password, nol tiket support soal lupa password, dan satu titik kebocoran kredensial lebih sedikit.

    Manajemen Sesi: Kedalaman Jawaban Progresif

    Setiap sesi oracle memungkinkan hingga 3 pertanyaan lanjutan dalam window 5 menit, dan kedalaman jawaban menurun secara progresif:

  11. **Pertanyaan 1**: Pembacaan detail dan komprehensif (respons panjang).
  12. **Pertanyaan 2**: Klarifikasi terfokus (respons sedang).
  13. **Pertanyaan 3**: Panduan akhir singkat (respons pendek).
  14. Desain ini melakukan dua hal sekaligus. Mendorong pengguna bertanya hal terpenting lebih dulu daripada menyicil pertanyaan remeh, dan secara alami membatasi biaya compute AI per sesi tanpa batas kata keras yang terasa sewenang-wenang bagi pengguna. Setelah 5 menit atau 3 pertanyaan, sesi berakhir dan token baru dibutuhkan untuk memulai lagi.

    Filter Keyword untuk Keamanan

    Sebelum query mana pun mencapai model, query itu melewati filter keyword yang mengecek istilah medis (gejala, penyakit, nama obat), istilah finansial (kode saham, saran investasi spesifik), istilah hukum (gugatan, sengketa kontrak), dan konten berbahaya (self-harm, kekerasan). Query yang diblokir mendapat redirect halus yang tetap dalam karakter -- Oracle menjelaskan tidak bisa melihat domain masa depan tersebut dan menyarankan konsultasi ke profesional. Framing ini penting: pesan keras 'Permintaan ini melanggar kebijakan kami' merusak imersi dan terdengar seperti bot korporat, persis yang ingin dihindari persona ini.

    Metode Divinasi yang Harus Kami Kuasai dengan Benar

    Tidak ada satu pun dari metode ini yang bisa dipalsukan dengan prompting generik. Masing-masing punya aturan nyata, dan pengguna yang paham tradisinya akan langsung sadar kalau AI salah.

    Ba Zi (Empat Pilar Nasib)

    Ba Zi memetakan tanggal dan jam lahir menjadi empat pasang Batang Langit dan Cabang Bumi, lalu membaca keseimbangan lima elemen di antaranya. Perhitungan pilar ini adalah soal tanggal/waktu yang deterministik, bukan sesuatu yang boleh diserahkan ke kemampuan berhitung model bahasa -- kami menghitung pilarnya di kode, lalu mengirim hasil terstruktur itu ke prompt, sehingga AI hanya perlu menginterpretasi, bukan menghitung.

    Tarot

    Oracle menarik dari dek 78 kartu penuh, melacak orientasi upright versus reversed, dan menghormati posisi dalam spread (masa lalu/sekarang/masa depan, atau layout Celtic Cross) saat menginterpretasi sebuah kartu. Makna sebuah kartu berubah signifikan tergantung posisi mana ia jatuh, dan prompt harus membawa konteks itu secara eksplisit.

    I Ching

    Kami mensimulasikan metode lempar tiga koin tradisional untuk menghasilkan salah satu dari 64 heksagram, termasuk garis berubah yang menghasilkan heksagram transformasi kedua. AI kemudian menginterpretasi teks heksagram dan garis berubah itu bersamaan, lebih dekat dengan cara kerja pembacaan I Ching sungguhan dibanding sekadar memilih heksagram acak lalu meringkasnya.

    Gui Bu (Divinasi Tempurung Kura-kura)

    Ini metode dengan cakupan paling tipis di data training AI pada umumnya, karena jauh lebih tua dan kurang terdokumentasi secara global dibanding Tarot atau Ba Zi. Kami harus mencari materi referensi tambahan tentang pola retakan dan interpretasi tradisionalnya, lalu memasukkannya ke bagian pengetahuan domain di prompt supaya Oracle tidak sekadar berimprovisasi saat pengguna memilih metode ini.

    SEO untuk Situs Ramalan

    Ramalan adalah niche kompetitif di Indonesia. Kami mengoptimasi untuk keyword long-tail seperti 'ramalan online gratis', 'kalkulator Ba Zi Indonesia', dan 'tarot reading AI' daripada berebut satu keyword head term bervolume tertinggi. Setiap dari 62 halaman punya meta title, description, dan schema markup unik, dan kami mengimplementasikan FAQ schema untuk pertanyaan umum tiap metode divinasi, yang membantu beberapa halaman meraih featured snippet dalam beberapa minggu pertama setelah terindeks.

    Menjaga Oracle Tetap Cepat di Trafik Nyata

    Respons di bawah 2 detik di server yang sepi itu gampang. Menjaga angka itu tetap stabil saat banyak pengguna mengakses Oracle bersamaan butuh beberapa keputusan sengaja: men-stream respons AI token demi token alih-alih menunggu completion penuh, sehingga pengguna melihat pembacaan muncul progresif alih-alih menatap layar kosong; menyetel timeout ketat pada panggilan Groq supaya request yang lambat langsung failover ke OpenRouter alih-alih menggantung; dan menjaga system prompt tetap ringkas, karena setiap token di prompt adalah token latensi tambahan sebelum model mulai menghasilkan bagian yang benar-benar dibaca pengguna.

    Pelajaran yang Didapat

    1. Konsistensi persona AI lebih penting daripada jumlah fitur

    Pengguna sadar dalam satu pesan kalau Oracle keluar karakter. Kami menghabiskan lebih banyak waktu menulis ulang system prompt daripada membangun seluruh frontend, dan waktu itu terpakai dengan tepat.

    2. Kecepatan tidak bisa ditawar untuk kategori produk ini

    Peramal yang membuat Anda menunggu 10 detik kehilangan semua kesan mistis sebelum sempat berkata apa-apa. Respons Groq di bawah 2 detik bukan sekadar nilai tambah di sini, itu adalah produknya sendiri.

    3. Auth sederhana menang

    Google OAuth menghilangkan sebagian besar permintaan support terkait auth dibanding registrasi email/password, dan menghapus satu kategori permukaan keamanan (penyimpanan password, alur reset, credential stuffing) yang tidak perlu kami bangun pertahanannya.

    4. Perhitungan deterministik plus interpretasi AI mengalahkan AI yang mengerjakan semuanya

    Di mana pun metode punya aturan pasti -- pilar Ba Zi, pembangkitan heksagram I Ching, penarikan kartu -- kami menghitung bagian deterministiknya di kode dan menyerahkan hasil terstruktur yang bersih ke AI untuk diinterpretasi. Membiarkan model menghitung sekaligus menginterpretasi mengundang kesalahan aritmatika kecil yang merusak kepercayaan siapa pun yang benar-benar paham metodenya.

    Kesimpulan

    Membangun AI peramal mengajarkan kami bahwa produk AI terbaik bukan soal teknologinya -- tapi soal pengalaman. Frontend React, backend Express, dan inferensi Groq hanyalah alat. Yang membuat Tanya Peramal berhasil adalah persona yang dirancang hati-hati, desain sesi progresif, pembagian deterministik-plus-AI di tiap metode divinasi, dan penghormatan terhadap praktik divinasi tradisional yang sering diabaikan wrapper AI kebanyakan.

    Ingin membangun sesuatu yang serupa untuk niche Anda sendiri? [Dapatkan quote gratis](/get-quote/) dan kami akan memetakan seperti apa produk bertenaga AI untuk bisnis Anda.

    KayFreyTech Editorial Team
    AI Automation & Web Development Specialists · Indonesia · Sejak 2023

    Tim editorial KayFreyTech menulis berdasarkan pengalaman langsung membangun lebih dari 20 website production untuk klien e-commerce, skincare, dan jasa profesional di Indonesia. Spesialisasi: n8n workflow, WhatsApp chatbot, React/Next.js, OWASP-compliant security, PageSpeed 95+ optimization.

    Pertanyaan yang Sering Diajukan

    Apa tech stack di balik Tanya Peramal?

    React + TypeScript + Vite di frontend dengan Tailwind CSS untuk styling, Express.js dengan SQLite di backend, dan Groq sebagai provider AI utama dengan OpenRouter sebagai fallback. Seluruh situs adalah SPA statis dengan validasi token server-side, bukan framework berat.

    Kenapa Groq, bukan langsung ke OpenAI atau Anthropic?

    Kecepatan. Groq menjalankan model open source di atas hardware LPU khusus dan men-stream respons dalam waktu kurang dari 2 detik, sementara panggilan GPT atau Claude biasa bisa butuh 4-8 detik. Untuk produk yang seluruh nilainya terletak pada kesan respons instan dan mistis, selisih itu adalah pembeda antara aplikasi yang terasa ajaib dan yang terasa rusak.

    Berapa biaya menjalankan aplikasi AI seperti ini?

    Lebih murah dari yang kebanyakan orang kira. Harga per token Groq relatif rendah, SQLite menghilangkan biaya server database terkelola, dan sistem kredit token membuat pengeluaran AI mengikuti langsung penggunaan yang membayar, bukannya tagihan langganan tetap terlepas dari trafik.

    Apakah KayFreyTech bisa membangun aplikasi bertenaga AI serupa untuk bisnis saya?

    Bisa. Pola yang sama -- frontend React, backend ringan, inferensi AI cepat, monetisasi berbasis token atau kredit -- berlaku untuk banyak niche di luar ramalan: agen customer support, tool rekomendasi personal, generator konten. Hubungi kami dan kami akan memetakan apa yang dibutuhkan untuk use case Anda.

    Seberapa cepat respons Oracle, dan kenapa itu penting?

    Rata-rata waktu respons di bawah 2 detik berkat Groq, dan kami men-stream jawaban token demi token sehingga terlihat muncul bertahap, bukan memuat sekaligus. Khusus untuk produk ramalan, kecepatan bukan sekadar metrik performa, itu bagian dari ilusi -- respons yang lambat merusak kesan mistis yang menjadi tumpuan seluruh produk.

    Tags:

    AI
    React
    Groq
    Ramalan
    Oracle
    Express.js

    Butuh Bantuan Implementasi?

    Biarkan tim ahli kami membantu membangun dan mengotomatisasi kehadiran digital Anda

    Konsultasi Gratis
    Chat dengan kami!