Di era teknologi kecerdasan buatan saat ini, banyak siswa SMK jurusan Rekayasa Perangkat Lunak (RPL/PPLG) beranggapan bahwa membangun aplikasi AI membutuhkan keahlian matematika doktor atau modal server berharga puluhan juta rupiah. Anggapan ini keliru! Salah satu teknologi AI paling dicari oleh industri saat ini—Retrieval-Augmented Generation (RAG)—dapat dibangun oleh pengembang pemula menggunakan JavaScript dan Python dasar.

Dalam panduan edukatif ini, kita akan membongkar cara kerja arsitektur sistem seperti Google NotebookLM dan mempraktikkannya untuk membuat Asisten Belajar Mandiri Berbasis Dokumen Modul Ajar SMK.

Siswa sedang menulis kode pemrograman di laptop dengan layar monitor ganda

1. Apa Itu RAG dan Mengapa Menjadi Standar Emas?

Secara sederhana, RAG adalah teknik memberikan "buku catatan terbuka" kepada model AI sebelum ia menjawab pertanyaan:

  • Retrieval (Pencarian Dokumen): Sistem mencari 2 atau 3 paragraf paling relevan dari kumpulan modul belajar yang Anda unggah berdasarkan pertanyaan pengguna.
  • Augmented (Pengayaan Konteks): Paragraf yang ditemukan tersebut disisipkan ke dalam prompt sebagai teks instruksi latar belakang.
  • Generation (Pembuatan Respons): Model AI merangkum dan menyusun jawaban hanya berlandaskan paragraf yang diberikan, lengkap dengan nomor rujukan halaman.

2. Tiga Komponen Inti Sistem RAG

Untuk membangun sistem RAG fungsional, kita hanya membutuhkan tiga komponen komputasi:

  1. Document Chunker: Script pemotong naskah panjang (PDF atau Markdown) menjadi potongan kecil berukuran sekitar 300 - 500 kata per bagian.
  2. Embedding Generator: Model ringan (seperti model embedding Gemini atau all-MiniLM-L6-v2) yang mengubah kalimat teks menjadi deretan angka koordinat matematis.
  3. Cosine Similarity Matcher: Rumus aljabar linear sederhana untuk mengukur sudut kemiripan antara vektor pertanyaan siswa dengan vektor paragraf modul.
Diagram aljabar linear dan kalkulasi vektor kemiripan dokumen

3. Implementasi Kode Sederhana: Menghitung Kemiripan Cosine di JavaScript

Berikut adalah contoh implementasi fungsi cosineSimilarity murni menggunakan JavaScript modern yang dapat dijalankan langsung di browser atau lingkungan Node.js tanpa perlu library tambahan:

function dotProduct(vecA, vecB) {
    let product = 0;
    for (let i = 0; i < vecA.length; i++) {
        product += vecA[i] * vecB[i];
    }
    return product;
}

function magnitude(vec) {
    let sum = 0;
    for (let i = 0; i < vec.length; i++) {
        sum += vec[i] * vec[i];
    }
    return Math.sqrt(sum);
}

function cosineSimilarity(vecA, vecB) {
    const dot = dotProduct(vecA, vecB);
    const magA = magnitude(vecA);
    const magB = magnitude(vecB);
    if (magA === 0 || magB === 0) return 0;
    return dot / (magA * magB);
}

// Simulasi: Mencari chunk dokumen dengan skor kemiripan tertinggi
function findMostRelevantChunk(queryVector, documentChunks) {
    let bestScore = -1;
    let bestChunk = null;

    for (const chunk of documentChunks) {
        const score = cosineSimilarity(queryVector, chunk.embedding);
        if (score > bestScore) {
            bestScore = score;
            bestChunk = chunk;
        }
    }

    return { chunk: bestChunk, score: bestScore };
}

4. Merakit Prompt dengan Grounding Context & Sitasi Sumber

Setelah potongan modul terbaik ditemukan, kita merakit System Prompt yang ketat. Ini adalah rahasia mengapa sistem seperti NotebookLM tidak pernah berhalusinasi:

const systemPrompt = `Anda adalah Asisten Belajar Vokasi yang jujur dan presisi.
Tugas Anda adalah menjawab pertanyaan siswa HANYA berdasarkan konteks dokumen di bawah ini.
Aturan Wajib:
1. Cantumkan [Sumber: Judul Modul, Hal. X] di setiap akhir kalimat fakta.
2. Jika jawaban tidak ditemukan di dalam konteks, katakan: "Informasi tersebut tidak tercantum dalam modul ajar yang tersedia."
3. DILARANG KERAS mengarang fakta di luar konteks yang diberikan.

KONTEKS DOKUMEN:
"""
${relevantChunk.content}
"""

PERTANYAAN SISWA:
${studentQuestion}`;
Antarmuka web interaktif asisten belajar dengan kotak obrolan responsif

5. Membangun Antarmuka Chat Web Responsif

Bagi siswa yang sedang menyiapkan proyek Uji Kompetensi Keahlian (UKK) jurusan RPL, antarmuka web dapat dirancang dengan HTML5 semantik dan CSS Flexbox yang ringan:

<div class="chat-container">
    <div id="chatMessages" class="messages-area">
        <!-- Pesan AI akan dirender di sini beserta badge kutipan -->
    </div>
    <form id="queryForm" class="input-form">
        <input type="text" id="userInput" placeholder="Tanyakan materi modul koding..." required>
        <button type="submit" id="sendBtn">Tanya Asisten</button>
    </form>
</div>

6. Kesimpulan & Langkah Pengembangan Lanjutan

Dengan memahami arsitektur RAG di atas, para siswa kejuruan tidak lagi sekadar menjadi konsumen pasif teknologi kecerdasan buatan, melainkan kreator inovasi yang mampu membangun solusi nyata untuk kebutuhan sekolah masing-masing.

Langkah berikutnya yang dapat dieksplorasi adalah menerapkan penyimpanan vektor lokal menggunakan IndexedDB di browser atau SQLite-vec di server sekolah sehingga asisten ajar dapat beroperasi secara cepat, hemat kuota internet, dan aman bagi privasi data seluruh civitas akademika.