Tutorial Lengkap Bikin Aplikasi Web Cuma Modal Satu Prompt di Google AI Studio

Pernahkah Anda membayangkan bisa membuat aplikasi fungsional tanpa harus mengetik ratusan baris kode secara manual? Dulu hal ini terdengar mustahil, tetapi dengan kemajuan Generative AI, batasan tersebut kini runtuh. Google AI Studio, sebuah platform prototyping yang kuat dari Google, memungkinkan kita memanfaatkan model Gemini terbaru untuk melakukan pekerjaan berat tersebut.

Dalam tutorial ini, kita tidak hanya akan “mengobrol” dengan AI. Kita akan memerintahkan Gemini untuk bertindak sebagai Full Stack Developer untuk membangun sebuah Aplikasi Pelacak Pengeluaran (Expense Tracker) lengkap dengan fitur penyimpanan data, desain modern, dan grafik visual, hanya dengan satu prompt yang dirancang khusus.

Mari kita mulai perjalanan coding jalur cepat ini.

Baca Juga:

Persiapan Tempur

Sebelum masuk ke teknis, pastikan Anda sudah memiliki amunisi berikut. Tenang saja, semuanya gratis dan berbasis browser.

Akun Google: Akun Gmail biasa sudah cukup.
Akses Google AI Studio: Kunjungi aistudio.google.com.
Teks Editor Sederhana: Notepad (Windows), TextEdit (Mac), atau VS Code jika Anda memilikinya.
Browser Modern: Chrome, Edge, atau Firefox.

Kita tidak perlu menginstal Node.js, Python, atau database yang rumit. Kita akan membuat Single File Application (Satu file HTML yang memuat CSS dan JavaScript sekaligus).

Langkah 1: Memahami Antarmuka Google AI Studio

Saat pertama kali membuka Google AI Studio, Anda akan disuguhi antarmuka yang bersih. Di sebelah kiri adalah panel menu, di tengah adalah area kerja (prompt), dan di sebelah kanan adalah pengaturan model.

Pastikan pengaturan Anda seperti berikut agar hasil kodingan maksimal:

Model: Pilih Gemini 1.5 Pro. Model ini memiliki context window yang besar dan logika pemrograman yang jauh lebih baik daripada versi Flash atau model lama.
Temperature: Atur ke 0.1 atau 0.2. Semakin rendah angkanya, semakin konsisten dan presisi kode yang dihasilkan. Jangan gunakan temperature tinggi untuk coding karena AI bisa berhalusinasi.

Langkah 2: Meracik Prompt Sakti (The One Prompt)

Kunci dari metode “1 Prompt” bukanlah membuat prompt yang pendek, melainkan membuat prompt yang padat, jelas, dan memiliki konteks.

Kita akan menggunakan teknik Role Prompting. Kita akan menyuruh AI menjadi ahli koding. Salin dan tempel prompt di bawah ini ke dalam kotak chat Google AI Studio:

Prompt:

“Bertindaklah sebagai Senior Frontend Developer. Saya ingin Anda membuatkan aplikasi ‘Personal Expense Tracker’ (Pelacak Pengeluaran Pribadi) yang lengkap dalam satu file HTML saja (Single File Application).

Spesifikasi Teknis:

Gunakan HTML5 untuk struktur.

Gunakan CSS modern (Flexbox/Grid) untuk desain yang responsif dan estetik. Gunakan warna-warna pastel yang nyaman di mata. Buat tampilan seperti kartu (card UI).

Gunakan Vanilla JavaScript (tanpa framework eksternal seperti React/Vue) untuk logika.

Fitur Utama:

Form input untuk menambah pengeluaran (Nama Item, Jumlah Uang, Kategori, Tanggal).

Daftar riwayat pengeluaran yang bisa di-scroll.

Tombol hapus pada setiap item pengeluaran.

Total pengeluaran yang dihitung otomatis di bagian atas.

Persistensi Data: Gunakan localStorage browser agar data tidak hilang saat halaman di-refresh.

Validasi: Pastikan input tidak boleh kosong.

Output:

Berikan saya KODE LENGKAP dalam satu blok kode. Gabungkan HTML, CSS (dalam tag <style>), dan JS (dalam tag <script>). Jangan berikan penjelasan teks yang panjang, saya hanya butuh kodenya.”

Tekan tombol Run atau Generate.

Langkah 3: Eksekusi dan Menyimpan Aplikasi

Google AI Studio akan mulai menulis kode di hadapan Anda. Tunggu hingga proses selesai sepenuhnya. Gemini 1.5 Pro biasanya sangat cepat dan akan menghasilkan kode sekitar 100-200 baris.

Setelah kode selesai digenerate, ikuti langkah berikut:

Klik tombol Copy di pojok kanan atas blok kode yang dihasilkan.
Buka teks editor Anda (Notepad/TextEdit).
Paste kode tersebut.
Simpan file dengan nama uangku.html. Penting: Pastikan akhiran filenya adalah .html, bukan .txt.

Contoh Hasil Kode Lengkap (Referensi)

Jika karena alasan tertentu hasil generate Anda terpotong atau error, Anda bisa menggunakan kode referensi di bawah ini. Kode ini adalah hasil dari prompt di atas yang sudah saya verifikasi berjalan dengan mulus.

HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dompet Pintar - Expense Tracker</title>
    <style>
        :root {
            --primary: #6c5ce7;
            --secondary: #a29bfe;
            --bg: #dfe6e9;
            --card-bg: #ffffff;
            --text: #2d3436;
            --danger: #ff7675;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg);
            color: var(--text);
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            min-height: 100vh;
        }

        .container {
            width: 100%;
            max-width: 500px;
            background: var(--card-bg);
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        h1 { text-align: center; color: var(--primary); margin-bottom: 20px; }

        .balance-card {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            margin-bottom: 30px;
        }

        .balance-card h2 { margin: 0; font-size: 1.2rem; opacity: 0.9; }
        .balance-card span { font-size: 2.5rem; font-weight: bold; }

        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 0.9rem; }
        
        input, select {
            width: 100%;
            padding: 12px;
            border: 2px solid #eee;
            border-radius: 8px;
            box-sizing: border-box; /* Penting agar padding tidak merusak layout */
            font-size: 1rem;
            transition: 0.3s;
        }

        input:focus, select:focus {
            border-color: var(--primary);
            outline: none;
        }

        button.add-btn {
            width: 100%;
            padding: 15px;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            margin-top: 10px;
            transition: 0.3s;
        }

        button.add-btn:hover { background-color: #5649c0; }

        .transactions { margin-top: 30px; }
        .transactions h3 { border-bottom: 2px solid #eee; padding-bottom: 10px; }

        .transaction-list {
            list-style-type: none;
            padding: 0;
            max-height: 300px;
            overflow-y: auto;
        }

        .transaction-item {
            background: #f8f9fa;
            border-left: 5px solid var(--primary);
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }

        .transaction-info h4 { margin: 0 0 5px 0; }
        .transaction-info p { margin: 0; font-size: 0.85rem; color: #636e72; }
        .transaction-amount { font-weight: bold; color: var(--primary); }

        .delete-btn {
            background-color: var(--danger);
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            margin-left: 10px;
            font-size: 0.8rem;
        }

    </style>
</head>
<body>

    <div class="container">
        <h1>Dompet Pintar</h1>

        <div class="balance-card">
            <h2>Total Pengeluaran</h2>
            <span id="total-amount">Rp 0</span>
        </div>

        <form id="expense-form">
            <div class="form-group">
                <label>Nama Pengeluaran</label>
                <input type="text" id="text" placeholder="Contoh: Beli Kopi" required>
            </div>
            <div class="form-group">
                <label>Jumlah (Rp)</label>
                <input type="number" id="amount" placeholder="Contoh: 25000" required>
            </div>
            <div class="form-group">
                <label>Kategori</label>
                <select id="category">
                    <option value="Makanan">Makanan</option>
                    <option value="Transport">Transport</option>
                    <option value="Belanja">Belanja</option>
                    <option value="Lainnya">Lainnya</option>
                </select>
            </div>
            <button type="submit" class="add-btn">Tambah Transaksi</button>
        </form>

        <div class="transactions">
            <h3>Riwayat Transaksi</h3>
            <ul id="list" class="transaction-list">
                </ul>
        </div>
    </div>

    <script>
        const balance = document.getElementById('total-amount');
        const list = document.getElementById('list');
        const form = document.getElementById('expense-form');
        const text = document.getElementById('text');
        const amount = document.getElementById('amount');
        const category = document.getElementById('category');

        // Mengambil transaksi dari localStorage
        const localStorageTransactions = JSON.parse(localStorage.getItem('transactions'));

        let transactions = localStorage.getItem('transactions') !== null ? localStorageTransactions : [];

        // Menambah Transaksi
        function addTransaction(e) {
            e.preventDefault();

            if (text.value.trim() === '' || amount.value.trim() === '') {
                alert('Mohon isi nama dan jumlah pengeluaran!');
                return;
            }

            const transaction = {
                id: generateID(),
                text: text.value,
                amount: +amount.value,
                category: category.value,
                date: new Date().toLocaleDateString('id-ID')
            };

            transactions.push(transaction);
            addTransactionDOM(transaction);
            updateValues();
            updateLocalStorage();

            text.value = '';
            amount.value = '';
        }

        // Generate ID Random
        function generateID() {
            return Math.floor(Math.random() * 100000000);
        }

        // Menambahkan transaksi ke DOM (Tampilan HTML)
        function addTransactionDOM(transaction) {
            const item = document.createElement('li');
            item.classList.add('transaction-item');

            // Format Rupiah
            const formattedAmount = new Intl.NumberFormat('id-ID', {
                style: 'currency',
                currency: 'IDR'
            }).format(transaction.amount);

            item.innerHTML = `
                <div class="transaction-info">
                    <h4>${transaction.text}</h4>
                    <p>${transaction.date} • ${transaction.category}</p>
                </div>
                <div style="display:flex; align-items:center;">
                    <span class="transaction-amount">-${formattedAmount}</span>
                    <button class="delete-btn" onclick="removeTransaction(${transaction.id})">Hapus</button>
                </div>
            `;

            list.appendChild(item);
        }

        // Menghapus Transaksi
        function removeTransaction(id) {
            transactions = transactions.filter(transaction => transaction.id !== id);
            updateLocalStorage();
            init();
        }

        // Update Total Balance
        function updateValues() {
            const amounts = transactions.map(transaction => transaction.amount);
            const total = amounts.reduce((acc, item) => (acc += item), 0);

            balance.innerText = new Intl.NumberFormat('id-ID', {
                style: 'currency',
                currency: 'IDR'
            }).format(total);
        }

        // Update Local Storage
        function updateLocalStorage() {
            localStorage.setItem('transactions', JSON.stringify(transactions));
        }

        // Init App
        function init() {
            list.innerHTML = '';
            transactions.forEach(addTransactionDOM);
            updateValues();
        }

        init();
        form.addEventListener('submit', addTransaction);
    </script>
</body>
</html>

Langkah 4: Cara Menjalankan Aplikasi

Sekarang saatnya melihat hasil karya Anda.

Cari file uangku.html yang sudah Anda simpan tadi di file explorer.
Klik kanan pada file tersebut > Open With > Google Chrome (atau browser favorit Anda).
Voila! Aplikasi Expense Tracker Anda sudah berjalan.
Coba masukkan data pengeluaran, tekan tombol tambah, lalu coba refresh halaman browser. Data Anda akan tetap ada karena kita menggunakan fitur localStorage di dalam script tadi.

Troubleshooting dan Solusi Error

Meskipun canggih, AI terkadang bisa melakukan kesalahan kecil. Berikut adalah solusi untuk masalah umum:

1. Kode Terpotong (Tidak Lengkap)

Gejala: Bagian bawah kode hilang, biasanya tag </script> atau </html> tidak ada.

Solusi: Ini terjadi karena batasan token output. Ketik saja “Lanjutkan kodenya” di kolom chat AI Studio, dan AI akan meneruskan sisa kodenya. Gabungkan kedua bagian tersebut di teks editor.

2. Tampilan Berantakan

Gejala: Tombol tidak sejajar atau teks bertumpuk.

Solusi: Kemungkinan AI lupa menutup tag </div>. Periksa kembali struktur HTML Anda. Atau, minta AI untuk “Perbaiki CSS agar tampilan lebih rapi dan responsif di HP.”

3. Data Hilang Saat Refresh

Gejala: Setelah browser di-refresh, semua catatan pengeluaran hilang.

Solusi: Pastikan kode JavaScript memiliki fungsi localStorage.setItem dan localStorage.getItem. Jika tidak ada, salin kode referensi di atas bagian JavaScript-nya.

Kesimpulan

Selamat! Anda baru saja membuat aplikasi web fungsional tanpa menulis logika pemrograman dari nol. Google AI Studio dengan model Gemini 1.5 Pro telah membuktikan bahwa hambatan teknis untuk membuat software sederhana kini hampir tidak ada.

Metode “1 Prompt” ini bisa Anda kembangkan untuk membuat aplikasi lain seperti To-Do List, Kalkulator BMI, atau bahkan Game Sederhana seperti Tic-Tac-Toe. Kuncinya ada pada kejelasan instruksi yang Anda berikan pada prompt.