Panduan Lengkap

F1Memulai & Mengenal Editor

Dari daftar akun sampai paham letak setiap tombol di layar.

Daftar & masuk

1. Buka halaman depan rakit.io, klik Daftar. Isi username, email, dan password — atau pilih Lanjutkan dengan Google.
2. Setelah daftar, website pertamamu langsung online di namamu.rakit.io dan editor terbuka otomatis.
3. Akun baru mendapat bonus kredit AI sekali pakai, ditambah kredit gratis setiap hari (lihat Kredit & Paket).

Dua tampilan editor: Simple & Coding

Pilih di tombol tengah atas. Pilihanmu diingat di browser.

Peta layar (tampilan Coding)

Menu avatar (pojok kanan atas)

F2Project — Banyak Website dalam Satu Akun

Setiap project adalah website terpisah: alamat, file, database, riwayat versi, dan percakapan AI sendiri.

F3File, Folder & Gambar

Semua bagian website tersimpan sebagai file di panel kiri. index.html adalah halaman utama.

Memakai gambar di halaman

Klik gambar di panel file untuk melihatnya (ukuran piksel & file), lalu salin path, tag <img>, atau url() CSS.

<img src="/images/logo.png" alt="Logo Toko Kue">

.hero { background-image: url('/images/hero.jpg'); }

F4Editor Kode

Editor ala VS Code untuk mengubah HTML, CSS, dan JavaScript secara langsung.

📖 Baca Alur Kode — AI menjelaskan kodemu (gratis)

Tombol Baca Alur Kode di atas editor (untuk file .html, .css, .js) membuka panel penjelasan di samping editor. AI menjelaskan kode berurutan seperti saat dijalankan, bukan urut baris.

1. Buka file, klik Baca Alur Kode. Tunggu AI menyusun langkah-langkahnya.
2. Setiap langkah berisi judul, jenis (mulai, keputusan, perulangan, menunggu aksi, permintaan…), baris yang terlibat, penjelasan, contoh nilai nyata, dan istilah penting (klik untuk melihat artinya).
3. Klik langkah → barisnya disorot di editor. Klik baris di editor → langkahnya terbuka. Pakai tombol ‹ ›, ▶ (putar otomatis), atau panah keyboard.
4. Langkah yang merujuk file lain (halaman, class CSS, fungsi /api/fn/…) bisa diklik untuk membukanya, lalu ← Kembali.
5. Lihat juga diagram alur, catatan (bug, perlu dicek, saran), dan kecepatan kode. Pakai Tanya AI untuk bertanya tentang langkah yang sedang dibuka.

F5Preview, Pilih Blok & Edit

Lihat website seperti yang dilihat pengunjung, di berbagai ukuran layar.

🎯 Pilih blok — ubah bagian tertentu saja

Daripada menjelaskan “bagian yang di bawah judul kedua…”, tunjuk langsung bagiannya di preview.

1. Klik Pilih blok di atas preview.
2. Arahkan kursor ke halaman, lalu klik bagian yang ingin diubah (maks. 5 blok, boleh dari beberapa halaman — pindah halaman lewat link di preview).
3. Klik Tulis perintah. Blok terpilih muncul di atas kotak AI.
4. Tulis perubahannya, mis. “jadikan 3 kolom dan beri ikon”, lalu kirim. AI fokus ke blok itu dan tidak mengubah bagian lain.
5. Klik Selesai untuk keluar dari mode memilih.

✏️ Edit — ubah tulisan & gambar langsung di preview

Untuk mengganti judul, paragraf, label tombol, isi daftar, atau gambar tanpa membuka kode dan tanpa memakai kredit AI.

1. Klik Edit di atas preview.
2. Arahkan kursor ke halaman — teks yang bisa diubah diberi kotak biru — lalu klik teksnya dan ketik.
3. Tekan Enter atau klik di tempat lain untuk menyimpan. Esc membatalkan.
4. Klik Selesai untuk keluar dari mode edit.

Perubahan ditulis ke file HTML halaman itu (mis. index.html) di tempat yang sama persis — format seperti tebal atau tautan di dalam teks tetap ada. File-nya ikut terbuka di tab Code, jadi bisa dibatalkan dengan Ctrl/⌘ Z. Teks yang ditulis JavaScript (mis. pesan 'Password minimal 6 karakter.' di script.js) juga bisa diubah — string-nya diganti di file JS itu. Teks yang dirakit dari data (mis. “Kamu sudah klik 3 kali”) tidak bisa: saat diklik muncul tanda merah, ubah lewat kode atau minta AI. Pindah halaman: Alt+klik link.

Ganti gambar: di mode Edit, klik gambarnya. Pilih gambar lain dari project, klik Upload gambar baru…, atau tempel alamat gambar (https://…). Isi juga teks alternatif (alt) — deskripsi singkat gambar untuk pembaca layar dan mesin pencari — lalu Simpan. Yang bisa diganti di sini hanya gambar <img>; gambar latar dari CSS dan gambar <picture> dengan beberapa versi diubah lewat kode atau AI.

F6Asisten AI (Builder & Plan)

Buka tab AI atau tekan Ctrl/⌘ I. Teknik menulis prompt ada di Bagian 2.

Fitur kotak prompt

Percakapan & riwayat

• 🕘 Riwayat percakapan (ikon jam): buka percakapan lama untuk melanjutkannya.
• ↻ Percakapan baru: mulai topik baru. AI tidak membawa konteks obrolan sebelumnya, jadi lebih hemat dan fokus.
• 🗑 Hapus semua riwayat: menghapus semua percakapan di project ini.
• Riwayat disimpan di server (maks. 50 percakapan, terhapus setelah 90 hari tidak dipakai).

Tombol “✦ … dengan AI” di fitur lain

Banyak fitur punya tombol bertanda ✦ yang mengisi kotak AI dengan permintaan beserta konteksnya (tidak langsung dikirim):

F7Database (Tab Data)

Simpan data pengunjung & konten secara permanen — mirip spreadsheet, langsung bisa dipakai dari halaman website.

Membuat tabel

1. Buka tab Data, klik + (Tabel baru) atau + Buat tabel.
2. Isi nama tabel (mis. ucapan), lalu tambahkan kolom: nama, tipe, centang Wajib bila harus diisi, dan Privat bila tidak boleh terlihat pengunjung.
3. Klik Buat tabel. Kolom id dan created_at dibuat otomatis.

Tipe kolom

Akses: siapa boleh apa

Klik Atur pada tabel. Setiap operasi bisa Publik (semua pengunjung) atau Hanya kamu (pemilik, lewat editor). Bawaannya semua Hanya kamu.

Kolom Privat tidak pernah dikirim ke pengunjung walau list publik — cocok untuk email, nomor HP, alamat.

Mengelola isi tabel

• + Baris menambah data manual. Klik dua kali sel untuk mengubah. Ikon tempat sampah menghapus baris.
• Kolom gambar tampil sebagai thumbnail; klik dua kali untuk upload, ganti, atau kosongkan (bisa juga tempel alamat https://…).
• Data banyak dibagi per halaman — pakai tombol Sebelumnya / Berikutnya.
• Bagian Pakai di websitemu menampilkan contoh kode siap salin (membaca, menambah, mengubah, menghapus, menangani error) dan memberi tanda bila aksesnya belum publik.
• Hapus tabel ada di pengaturan tabel — klik sekali lagi untuk memastikan.

Memakai database dari kode website

// simpan
const res = await fetch('/api/db/ucapan', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ nama, pesan }),
});
if (!res.ok) alert((await res.json()).error);

// tampilkan 20 terbaru
const { rows } = await (await fetch('/api/db/ucapan?sort=-created_at&limit=20')).json();

const up = await fetch('/api/db/produk/upload?column=gambar', { method: 'POST', body: fileInput.files[0] });
const { url } = await up.json();          // mis. "/uploads/produk/lx3k-9f2a.jpg"
await fetch('/api/db/produk', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ nama, gambar: url }),
});

F8Fungsi Serverless (Backend)

Kode JavaScript yang berjalan di server, bukan di browser pengunjung — untuk kunci API rahasia, perhitungan yang tidak boleh diakali, notifikasi, atau memanggil layanan lain.

Membuat & mencoba fungsi

1. Buka tab Fungsi, klik + Fungsi baru. Beri nama (huruf kecil, angka, - atau _, maks. 40), mis. kirim-pesan.
2. File functions/kirim-pesan.js dibuat dengan kode contoh. Klik Buka kode untuk mengubahnya.
3. Klik Coba: pilih method, isi query & body JSON, lalu jalankan. Hasil, status, waktu, dan console.log tampil langsung.
4. Panggil dari halaman website lewat /api/fn/kirim-pesan. Salin URL menyalin alamat lengkapnya.

export default async function (req, { db, env, fetch, ai }) {
  // req: { method, query, headers, body }
  const row = await db.insert('pesanan', {
    nama: req.body.nama, total: 150000,
  });
  return { ok: true, id: row.id }; // dikirim sbg JSON
}

const res = await fetch('/api/fn/pesan', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ nama: 'Ani' }),
});
const data = await res.json();

Yang tersedia di dalam fungsi

Referensi lengkap

Contoh kode siap pakai

Salin ke functions/<nama>.js, sesuaikan nama tabel/kolom, lalu uji dengan tombol Coba.

export default async function (req, { db, env, fetch }) {
  if (req.method !== 'POST') return Response.json({ error: 'Pakai POST' }, { status: 405 });

  const { nama, email, pesan } = req.body || {};
  if (!nama || !pesan) return Response.json({ error: 'Nama dan pesan wajib diisi' }, { status: 400 });

  // tabel "pesan" cukup "Hanya kamu": db di fungsi bekerja sebagai pemilik
  const row = await db.insert('pesan', { nama, email, pesan });

  // rahasia: TELEGRAM_TOKEN & TELEGRAM_CHAT_ID (tab Fungsi → Rahasia)
  const tg = await fetch(`https://api.telegram.org/bot${env.TELEGRAM_TOKEN}/sendMessage`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: { chat_id: env.TELEGRAM_CHAT_ID, text: `Pesan baru dari ${nama}:\n${pesan}` },
  });
  if (!tg.ok) console.warn('Telegram gagal', tg.status, await tg.text());

  return { ok: true, id: row.id };
}

export default async function (req, { db }) {
  const { nama, telepon, items } = req.body || {};   // items: [{ id: 3, jumlah: 2 }, …]
  if (!Array.isArray(items) || !items.length) {
    return Response.json({ error: 'Keranjang kosong' }, { status: 400 });
  }

  let total = 0;
  const rincian = [];
  for (const it of items) {
    const p = await db.get('produk', it.id);           // harga diambil dari database, bukan dari browser
    const jumlah = Math.max(1, Math.min(99, Number(it.jumlah) || 1));
    if (p.stok < jumlah) return Response.json({ error: `Stok ${p.nama} tidak cukup` }, { status: 409 });
    total += p.harga * jumlah;
    rincian.push(`${p.nama} x${jumlah}`);
    await db.update('produk', p.id, { stok: p.stok - jumlah });
  }

  const order = await db.insert('pesanan', { nama, telepon, item: rincian.join(', '), total, status: 'baru' });
  return { ok: true, nomor: order.id, total };
}

export default async function (req, { env, fetch }) {
  const kota = req.query.kota || 'Jakarta';
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(kota)}`
            + `&units=metric&lang=id&appid=${env.OWM_KEY}`;
  const res = await fetch(url);
  if (!res.ok) return Response.json({ error: 'Data cuaca tidak tersedia' }, { status: 502 });

  const d = await res.json();
  return Response.json(
    { kota: d.name, suhu: d.main.temp, cuaca: d.weather[0].description },
    { headers: { 'cache-control': 'public, max-age=600' } },   // cache 10 menit
  );
}
// dipanggil dari halaman: fetch('/api/fn/cuaca?kota=Bandung')

export default async function (req, { db, env }) {
  // kunci sederhana untuk halaman admin pribadi (rahasia ADMIN_KEY)
  if (req.headers['x-admin-key'] !== env.ADMIN_KEY) {
    return Response.json({ error: 'Tidak diizinkan' }, { status: 401 });
  }

  switch (req.method) {
    case 'GET':
      return db.list('pesanan', { sort: '-created_at', limit: 50, filter: req.query.status ? { status: req.query.status } : {} });
    case 'PATCH':
      return db.update('pesanan', req.query.id, { status: req.body.status });
    case 'DELETE':
      return db.delete('pesanan', req.query.id);
    default:
      return Response.json({ error: 'Method tidak didukung' }, { status: 405 });
  }
}
// dari halaman: fetch('/api/fn/admin-pesanan?status=baru', { headers: { 'X-Admin-Key': kunci } })

export default async function (req, { db, env, fetch }) {
  if (req.method !== 'CRON') return Response.json({ error: 'Hanya untuk jadwal' }, { status: 403 });

  const sejak = Date.now() - 24 * 3600e3;                     // 24 jam terakhir (created_at dalam UTC)
  const hariIni = new Date(Date.now() + 7 * 3600e3).toISOString().slice(0, 10);   // tanggal WIB untuk judul
  const { rows } = await db.list('pesanan', { sort: '-created_at', limit: 100 });
  const baru = rows.filter((r) => Date.parse(r.created_at) >= sejak);
  const omzet = baru.reduce((n, r) => n + (r.total || 0), 0);

  console.log(`Laporan ${hariIni}: ${baru.length} pesanan, Rp${omzet}`);
  await fetch('https://api.resend.com/emails', {                 // kirim email via Resend
    method: 'POST',
    headers: { Authorization: `Bearer ${env.RESEND_KEY}`, 'Content-Type': 'application/json' },
    body: { from: 'toko@domainmu.com', to: env.EMAIL_SAYA, subject: `Laporan ${hariIni}`,
            html: `<p>${baru.length} pesanan, total Rp${omzet}</p>` },
  });
}
// atur di tab Fungsi → Jadwal → "Setiap hari jam 21:00"

export default async function (req, { db, env }) {
  if (req.query.key !== env.ADMIN_KEY) return Response.redirect('/', 302);   // bukan pemilik → ke beranda

  const { rows } = await db.list('pendaftar', { sort: 'id', limit: 100 });
  const csv = ['id,nama,email', ...rows.map((r) => `${r.id},"${r.nama}","${r.email}"`)].join('\n');
  return new Response(csv, {
    headers: {
      'content-type': 'text/csv; charset=utf-8',
      'content-disposition': 'attachment; filename="pendaftar.csv"',
    },
  });
}

export default async function (req, { ai }) {
  const riwayat = (req.body?.messages || []).slice(-10);      // [{ role: 'user'|'assistant', content }]
  const { text } = await ai.chat({
    system: 'Kamu CS Toko Kue Bu Sari. Jam buka 08.00–20.00. Jawab singkat & ramah.',
    messages: riwayat,
    maxTokens: 400,
  });
  return { reply: text };
}

async function kirim(data) {
  const res = await fetch('/api/fn/kontak', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  });
  const hasil = await res.json().catch(() => ({}));
  if (!res.ok) throw new Error(hasil.error || 'Gagal mengirim');   // pesan dari Response.json({ error })
  return hasil;
}

Rahasia, jadwal, dan log

F9AI di Fungsi (Provider AI)

Bangun fitur AI di websitemu — chatbot, ringkasan, ekstraksi data, cek gambar — memakai API key milikmu sendiri.

Menambahkan provider

1. Tab Fungsi → bagian Provider AI → tambah provider.
2. Pilih jenis: OpenAI, Anthropic Claude, Google Gemini, atau kompatibel OpenAI (ada tombol cepat DeepSeek, Groq, OpenRouter, Mistral, Together).
3. Isi nama (dipakai di kode), API key, model chat, dan model embedding (opsional). Tandai satu sebagai default.
4. Klik Simpan & tes untuk memastikan key dan modelnya berfungsi. Maks. 10 provider per project.

export default async function (req, { ai }) {
  const { text } = await ai.chat(req.body.pertanyaan, { system: 'Kamu CS toko kue. Jawab singkat.' });
  const data = await ai.json('Ambil nama & HP dari: ' + req.body.pesan, { nama: 'string', hp: 'string' });
  const cek  = await ai.chat('Apakah ini bukti transfer?', { images: ['/uploads/bukti/abc.jpg'] });
  const [a, b] = await ai.embed(['kue coklat', 'brownies']);
  return { text, data, cek: cek.text, mirip: ai.similarity(a, b) };
}

Batas: maks. 5 panggilan ai.* per eksekusi, 60 detik per panggilan, gambar maks. 4 (5 MB). Waktu menunggu AI tidak dihitung ke batas 10 detik fungsi. Pemakaian per provider tampil di tab Fungsi.

F10Diagram Buatan AI

AI menggambar struktur websitemu dari file & database — untuk memahami gambaran besar, dokumentasi, atau tugas kuliah.

1. Buka tab Diagram, pilih jenisnya.
2. Klik Update diagram — AI menggambar dari kondisi terbaru (memakai 1 kredit, dikembalikan bila gagal). Diagram tersimpan dan tidak berubah sendiri.
3. Baca panel Temuan: catatan AI seperti tabel yang bisa dihapus siapa pun atau link rusak.
4. Bila gambar gagal ditampilkan, klik Perbaiki dengan AI (gratis, maks. 2 kali per diagram).
5. Salin kode Mermaid atau unduh sebagai SVG. Tombol ⓘ menjelaskan cara membaca jenis diagram yang dibuka.

Zoom & geser

F11Riwayat Versi

“Save point” untuk seluruh file project. Bereksperimen tanpa takut merusak.

Riwayat tidak dihitung ke kuota storage.

F12Console — Mencari Penyebab Error

Semua pesan dari websitemu di satu tempat. Angka merah di tab menandakan error baru.

• Saring per sumber, centang Hanya error, atau ketik di Cari log….
• Tombol ↻ memuat ulang preview, 🗑 membersihkan log.
• Pada baris error, klik ✦ Perbaiki dengan AI — pesan error ikut dikirim sebagai konteks.

F13Publikasi: Langsung Tayang atau Dev/Prod

Atur kapan perubahan terlihat oleh pengunjung. Buka menu avatar → Mode publikasi.

Mempublikasikan perubahan

1. Titik pada tombol Publikasikan (kanan atas) menandakan ada perubahan yang belum tayang.
2. Klik tombolnya — tampil daftar file baru, diubah, dihapus, dan perubahan struktur database.
3. Klik Publikasikan. Data & gambar kiriman pengunjung di website publik tetap aman; data uji coba dev tidak ikut.
4. Bila ada tabel/kolom yang akan dihapus, centang konfirmasi dulu — datanya akan hilang dari website publik.

F14Kredit AI, Langganan & Pembayaran

Badge kredit di panel AI menunjukkan sisa kreditmu. Klik badge itu atau menu avatar → Langganan & kredit AI.

Berapa biaya tiap fitur?

Sumber kredit (dipakai berurutan)

1. Kuota langganan — bila berlangganan Pro/Unlimited.
2. Bonus awal untuk akun baru (sekali pakai), lalu kredit gratis harian — reset pukul 00.00 WIB, sisanya tidak menumpuk.
3. Kredit yang dibeli — tidak hangus.

Paket

Harga dan kuota AI terbaru tampil di menu Langganan & kredit AI.

Membayar dengan QRIS

1. Pilih paket kredit atau langganan, lalu klik bayar.
2. Pindai kode QRIS dengan aplikasi bank atau e-wallet mana pun.
3. Biarkan jendela pembayaran terbuka — kredit/paket aktif otomatis begitu pembayaran diterima.

• Langganan 30 hari, sekali bayar tanpa tagihan otomatis.
• Perpanjang paket yang sama: masa aktif ditambah 30 hari dari tanggal berakhir.
• Upgrade Pro → Unlimited: langsung aktif, sisa hari Pro dikonversi sesuai harga.
• Saat langganan berakhir, batas kembali ke Gratis. File tidak dihapus, tetapi file baru/lebih besar ditolak sampai pemakaian di bawah batas.

F15Pengaturan & Pintasan Keyboard

Menu avatar → Pengaturan. Pengaturan disimpan di browser yang sedang dipakai.

F16Masalah Umum & Solusinya

Cek di sini dulu sebelum bingung.

1Dasar — Cara AI Bekerja

Pahami dua mode & tiga aturan emas agar hasilnya tepat sejak percobaan pertama.

Tiga aturan emas

2Struktur & Halaman

Menentukan file, halaman, dan navigasi.

3Desain & Gaya Visual

Cara menyebut warna, font, dan suasana dengan efektif.

4Responsive Design — Desktop / Mobile

Cara meminta tampilan yang berbeda di HP dan desktop, atau mengunci ke salah satu.

Pilih arah tampilan

Desktop-only

Halaman dibuat untuk layar lebar. Pengunjung HP melihat pesan “buka di desktop”.

Mobile-only

Dirancang untuk HP: tombol besar, satu kolom, navigasi bawah.

Perilaku berbeda per ukuran layar

Kalau ingin elemen muncul/hilang atau berubah bentuk di ukuran tertentu:

Ukuran layar (titik henti umum)

Kalau mau menyebut angka pastinya, gunakan acuan ini:

5SEO & Berbagi di Media Sosial

Agar situs muncul di Google dan tampil menarik saat tautannya dibagikan ke WhatsApp/media sosial.

Contoh permintaan SEO lengkap

6Aksesibilitas — Mudah Dipakai Semua Orang

Membuat situs nyaman dipakai siapa saja, termasuk pengguna pembaca layar dan orang dengan gangguan penglihatan.

7Form & Validasi Input

Form yang benar menyimpan data dengan rapi dan memberi tahu pengunjung bila ada yang salah.

8Animasi & Interaksi Lanjutan

Sentuhan dinamis agar situs terasa hidup — tanpa mengganggu.

9Gambar, Media & Ikon

Cara meminta gambar, ilustrasi, peta, video, dan ikon tanpa file sendiri.

10Navigasi & Multi-Halaman

Mengatur banyak halaman dan tautan antar-halaman dengan rapi.

11Kinerja & Kecepatan

Situs yang cepat lebih menyenangkan dan lebih disukai mesin pencari.

12Konten & Tulisan

AI bisa menulis teksnya sekaligus — beri tahu siapa pembacanya.

13Keamanan & Data Pribadi

Melindungi data pengunjung dan menjaga agar tidak disalahgunakan.

14Integrasi Pihak Ketiga (CDN & Layanan)

Menambahkan layanan populer lewat CDN/tautan — tanpa server sendiri.

15Tabel Data & Dashboard

Menampilkan banyak data dengan rapi, plus ringkasan angka dan grafik.

16Pola Prompt Lanjutan

Teknik agar hasil makin tepat, terutama untuk situs yang kompleks.

Iterasi bertahap (dari rencana ke hasil)

Konteks + permintaan

Saat hasil kurang pas

17Database — Simpan & Tampilkan Data

Kekuatan utama rakit: situs bisa menyimpan data tanpa server sendiri. AI akan membuat tabelnya otomatis.

Pola umum: pilih yang sesuai kebutuhan

18Interaksi & Fitur JavaScript

Perilaku dinamis: filter, pencarian, keranjang, kalkulator, dan lainnya.

19Contoh Prompt Lengkap (Siap Pakai)

Tinggal salin, sesuaikan nama & detail, kirim ke mode Builder.

20Memperbaiki & Mengubah

Cara mengoreksi hasil tanpa memulai dari nol.

21Batasan & Tips Teknis

Yang perlu diketahui agar tidak membentur dinding.

★Template Prompt Universal

Salin, isi bagian dalam [ ], lalu kirim.