Membuat Aplikasi Web dengan AI Lengkap untuk Pemula

Tutorial kali ini akan membahas tentang Membuat Aplikasi Web dengan AI. Dengan memanfaatkan tools canggih seperti Gemini dan Google AI Studio, proses pembangunan web yang tadinya rumit menjadi sangat cepat dan intuitif. Panduan ini akan membawa Anda langkah demi langkah, mulai dari ide hingga aplikasi Anda live di internet. 

Persiapan Tool yang kita gunakan:

1. Google Gemini: Digunakan untuk brainstorming konsep aplikasi yang kita akan buat.
2. Google AI Studio: Digunakan untuk membuat aplikasi web
3. Github: Untuk menyimpan hasil web yang sudah dibuat (repositori)
4. Vercel: Sebagai hosting, yang mengambil hasil web yang sudah dibuat dari Github
5. Studi Kasus: Membuat aplikasi web Slip Gaji Generator (pembuat slip gaji otomatis)

1. Memanfaatkan Gemini untuk Brainstorming Ide

Langkah pertama dalam bikin web pakai AI adalah menentukan ide. Untuk pemula, fokuslah pada aplikasi sederhana namun fungsional. Dalam tutorial kali ini kita akan menggunakan Gemini untuk mengembangkan konsep aplikasi “Slip Gaji Generator”.

Merumuskan Kebutuhan Aplikasi

Sebelum meminta kode, Anda harus mendefinisikan fitur inti. Aplikasi kita membutuhkan:

• Input Gaji Pokok dan Tunjangan.
• Perhitungan PPH 21 (Pajak Penghasilan Pasal 21) sederhana.
• Penggunaan mata uang Indonesia (IDR).
• Teknologi yang digunakan

Prompt untuk Gemini

Gunakan prompt yang spesifik agar Gemini dapat memberikan implementasi plan dan prompt yang akurat. Salin prompt berikut:

Bertindaklah sebagai Expert Prompt Engineer untuk coding.

Saya punya ide aplikasi web SaaS bernama 'Slip Gaji Generator'. Tolong ubah ide kasar saya di bawah ini menjadi sebuah 'Mega Prompt' (Instruksi Teknis Lengkap) yang sangat detail, terstruktur, dan siap saya copy-paste ke AI Coding Assistant (seperti Cursor atau Windsurf) agar dia bisa langsung menulis kodenya dengan sempurna.

Berikut Ide Aplikasi Saya: 'Saya mau buat web app pakai Next.js 15, TypeScript, dan Tailwind CSS. Desainnya harus pakai Shadcn/UI biar modern. Konsepnya: layar dibagi dua (Split View), kiri buat input data karyawan, kanan buat preview slip gaji real-time.

Fitur kuncinya:

Harus ada Logic Payroll Indonesia (PPh 21 TER terbaru & BPJS) yang hitungannya otomatis akurat.

Fitur Export: Bisa download PDF biasa, DAN bisa download mode IG Story (Rasio 9:16) dengan desain keren buat flexing gaji di sosmed.

State management harus rapi, mungkin pakai Zustand.'

Tolong buatkan output Prompt-nya dalam Bahasa Inggris Teknis. Struktur outputnya harus mencakup: Role, Task, Tech Stack yang strict, Struktur Database/Schema (Zod), Logic PPh 21, dan Step-by-Step Implementation yang modular.

dari prompt diatas, akan menghasilkan Implementation Plan / Prompt seperti ini :

# Role & Context
You are a Senior Frontend Architect and SaaS Expert. You are tasked to build "SlipGaji.id", a modern, high-performance Salary Slip Generator specifically tailored for Indonesian Payroll Regulations (PPh 21 TER 2024 & BPJS).

# Project Goal
Create a single-page application (SPA) where users input employee data and instantly see a live preview of a professional salary slip, with capabilities to export as PDF or Instagram Story format.

# Tech Stack (Strict Enforcement)
- **Framework:** Next.js 15 (App Router).
- **Language:** TypeScript (Strict mode).
- **Styling:** Tailwind CSS + `clsx` + `tailwind-merge`.
- **Components:** Shadcn/UI (Radix Primitives).
- **Icons:** Lucide React.
- **State Management:** Zustand (for handling form data globally).
- **Validation:** Zod (for form schema).
- **Math Logic:** `big.js` or `decimal.js` (CRITICAL for financial accuracy).
- **Export:** `html-to-image` and `jspdf`.

# Feature Specifications & Business Logic

## 1. Data Structure (Zod Schema)
Define a `SalarySchema` that includes:
- **Employee:** Name, Position, Join Date, PTKP Status (TK/0 - K/3).
- **Company:** Name, Logo (URL/Upload), Period (Month/Year).
- **Earnings:** Base Salary, Fixed Allowances, Variable Allowances, THR/Bonus.
- **Settings:** Toggle BPJS Kesehatan (1%), Toggle BPJS Ketenagakerjaan (JHT 2%, JP 1% capped).

## 2. Indonesian Payroll Engine (`lib/payroll-engine.ts`)
You must implement a robust calculation engine:
- **Gross Salary:** Sum of all earnings.
- **BPJS Kesehatan:** 1% of wages (Cap at IDR 12.000.000 wage base).
- **BPJS Ketenagakerjaan:** JHT (2%), JP (1% with cap at IDR 10.042.300 wage base).
- **PPh 21 TER (Tarif Efektif Rata-Rata) 2024:**
  - Logic: Determine Category (A, B, C) based on PTKP.
  - Logic: Lookup tariff rate based on Gross Income range for that Category.
  - Formula: `Gross Income * TER Rate`.
- **Take Home Pay:** Gross - (PPh 21 + BPJS Deductions).

## 3. User Interface (Split Layout)
- **Left Panel (Editor):** Accordion-style form (Personal, Income, Settings). Use `react-hook-form` linked to the Zod schema.
- **Right Panel (Preview):**
  - **Standard Mode:** A4 paper look-alike, professional, tabular data.
  - **Social Mode (IG Story):** Toggle button to switch view to 9:16 aspect ratio. Use gradient backgrounds, bold typography, and simplified numbers for "Flexing" on social media.

## 4. Export Capabilities
- Button: "Download PDF" (Standard layout).
- Button: "Share to Story" (Generates PNG from the Social Mode view).

# Implementation Steps (Chain of Thought)
1. **Setup:** Initialize Next.js 15 with Shadcn/UI.
2. **Logic First:** Create `lib/tax-tables.ts` (containing TER A/B/C arrays) and `lib/calculator.ts` (pure functions for math).
3. **Store:** Create `store/useSalaryStore.ts` using Zustand.
4. **Components:** Build atomic components first (`InputCurrency`, `TaxBadge`), then the complex `SalaryPreview` component.
5. **Integration:** Connect Form -> Store -> Calculator -> Preview.

# Constraints
- DO NOT use `useEffect` for calculations; use derived state or pure functions.
- Ensure all currency inputs auto-format to IDR (e.g., Rp 10.000.000).
- The code must be modular. Separate the tax logic from the UI components completely.

2. Eksekusi Kode: Menggunakan Google AI Studio (Vibe Coding)

Setelah Gemini memberikan respons, termasuk implementasi plan dan blok kode, saatnya beralih ke lingkungan pengembangan. Kita akan menggunakan Google AI Studio, yang sering disebut sebagai lingkungan vibe coding, untuk menguji dan memodifikasi kode.

Tampilan Google AI Studio

Akses link berikut untuk ke Google AI Studio: Buat Aplikasi di Google AI Studio

Memasukkan Prompt ke Google AI Studio

1. Buka Google AI Studio dan mulai sesi baru (misalnya, menggunakan model Gemini Pro).
2. Salin prompt yang sudah Anda kembangkan bersama Gemini ke dalam kolom input.
3. Tunggu hingga AI Studio menghasilkan aplikasi sesuai prompt

Copy Prompt ke Google AI Studio

Tips Pemula: Google AI Studio memungkinkan Anda melihat dan mengedit kode secara langsung. Ini adalah tempat terbaik untuk melakukan vibe coding—mencoba-coba perubahan kecil dan melihat dampaknya secara instan.

3. Memperbaiki dan Menguji Aplikasi (Fixing Bug)

Meskipun bikin web AI sangat cepat, kode yang dihasilkan AI (terutama untuk logika kompleks seperti perhitungan pajak) mungkin mengandung bug atau ketidakakuratan, seperti gambar diatas ada beberap bug visual (UI/UX) yang saya alami, nah cara fixnya cukup ketikkan instruksi agar Google AI Studio bisa memperbaiki.

Aplikasi Slip Gaji Generator

Langkah Cek dan Debugging

1. Cek Tampilan: Pastikan tata letak (layout) sesuai dengan standar slip gaji yang Anda inginkan. Apakah tombol berfungsi? Apakah input terlihat rapi?
2. Cek Logika: Uji perhitungan PPH 21. Masukkan angka gaji yang mudah dihitung dan pastikan hasilnya benar secara matematis sesuai dengan logika yang diminta (misal, 5% dari Gaji Bersih setelah pengurangan).
3. Konsultasi Ulang ke Gemini: Jika Anda menemukan bug, jangan panik. Salin bagian kode yang bermasalah kembali ke Gemini dan tanyakan: “Kode ini menghasilkan output yang salah pada perhitungan PPH 21. Tolong perbaiki bagian fungsi hitungPajak().”

Setelah kode bersih dan berfungsi sempurna di lingkungan AI Studio, saatnya mempersiapkan deployment.

4. Persiapan Deployment: GitHub dan Vercel

Untuk membuat aplikasi Anda dapat diakses publik, Anda memerlukan dua tools utama: GitHub (sebagai repositori kode) dan Vercel (sebagai platform hosting modern).

Mengunggah Kode ke GitHub

GitHub berfungsi sebagai tempat penyimpanan versi (version control) kode Anda. Ini adalah jembatan wajib sebelum deployment ke Vercel. caranya sangat mudah, cukup klik tombol github pojok kanan atas Google AI Studio, ikuti instruksinya hingga aplikasi yang dibuat berhasil disimpan di Github.

Tombol Save to Github

Setelah kode Anda aman di GitHub, sekarang kita siap untuk membuat aplikasi live.

5. Panduan Deployment Praktis di Vercel

Vercel adalah platform hosting yang sangat populer di kalangan pengembang modern karena kemudahan integrasinya dengan GitHub. Proses deployment hanya membutuhkan beberapa klik.

Langkah 1: Daftar dan Masuk ke Vercel

Akses situs Vercel. Karena Anda sudah memiliki akun GitHub, cara termudah adalah menggunakan opsi:

• Klik ‘Sign Up’ atau ‘Log In’.
• Pilih ‘Continue with GitHub’.
• Izinkan Vercel mengakses repositori GitHub Anda.

Langkah 2: Import Proyek dari GitHub

Setelah berhasil masuk, Vercel akan mengarahkan Anda ke dasbor. Ikuti langkah-langkah ini:

1. Klik tombol ‘Add New’ dan pilih ‘Project’.
2. Vercel akan menampilkan daftar repositori GitHub Anda. Cari dan pilih repositori yang baru Anda buat (misalnya, slip-gaji-generator).
3. Klik tombol ‘Import’.

Deploy ke Vercel

Langkah 3: Konfigurasi dan Deploy

Dalam tahap ini biasanya akan ada opsi pengaturan Vercel, kalau kita buat dari Google AI Studio / platform vibe coding lainnya, biasanya akan menggunakan teknologi React / Next.Js, kita cukup ikuti step saja, secara default sudah menyesuaikan konfigurasi

• Root Directory: Biarkan default.
• Build & Output Settings: Biarkan default (Vercel secara otomatis mendeteksi proyek statis).
• Klik tombol besar ‘Deploy’.

Vercel akan memulai proses building (membangun) aplikasi Anda. Dalam waktu kurang dari satu menit, aplikasi Anda akan live dan Vercel akan memberikan tautan (URL) unik. Selamat, Anda telah berhasil membuat aplikasi web dengan AI dan mendeploy-nya secara profesional!

Slip Gaji Generator yang sudah dipublish ke Vercel

Kesimpulan

Proses Membuat Aplikasi Web dengan AI telah mempermudah pengembangan web. Kita telah melihat bagaimana tools AI seperti Gemini dan Google AI Studio dapat mengubah ide menjadi kode fungsional, dan bagaimana GitHub serta Vercel memastikan aplikasi Anda dapat dinikmati oleh siapa saja.

Untuk langkah selanjutnya, jangan berhenti di sini. Coba tingkatkan aplikasinya dengan fitur-fitur yang lebih kompleks, seperti:

• Menambahkan validasi input yang lebih ketat.
• Menambahkan domain custom ke web vercel
• Mengintegrasikan database sederhana untuk menyimpan riwayat perhitungan.
• Mempelajari lebih dalam tentang framework modern (seperti React atau Vue) dengan meminta panduan dari Gemini.

Teruslah bereksperimen dengan bikin web pakai AI. Ikuti terus update dari KREASAI.