Vibe Coding #1: Panduan Lengkap Setup Vibe Coding dengan VSCode + Cline + MCP + MSSQL (Zero to Hero)

Panduan ini ditulis untuk sesiapa yang baru nak mula "vibe coding" — iaitu menulis kod dengan bantuan AI agent yang boleh terus edit fail, jalankan command, dan sambung ke database. Tak perlu pengalaman VSCode sebelum ni. Ikut je step demi step.

📑 Kandungan (Table of Content)

BAHAGIAN 0: Daftar Akaun Claude.ai (AI Pembantu Untuk Bertanya)

Sepanjang panduan ni, setiap bab ada bahagian "🆘 Jika Tersekat" — awak boleh copy-paste soalan preset terus kepada AI Claude untuk dapat bantuan tepat. Ini cara nak dapatkan akaun:

Pergi ke https://claude.ai
Klik Sign Up
Masukkan email awak, atau daftar terus guna akaun Google
Sahkan email (check inbox, klik link pengesahan)
Selesai — awak boleh terus chat dengan Claude percuma (ada had bilangan mesej setiap beberapa jam)

— halaman utama claude.ai dengan kotak chat

Cara Guna Soalan Preset Dalam Panduan Ni

Setiap kali awak nampak kotak "🆘 Jika Tersekat", cukup:

Copy teks dalam kotak tu
Paste dalam kotak chat Claude.ai
Tukar bahagian [...] dengan maklumat/error sebenar awak
Enter, dan Claude akan bantu selesaikan

Apa itu Vibe Coding?

Vibe coding bermaksud awak beri arahan (prompt) kepada AI agent, dan AI tu terus buat kerja — cipta fail, tulis kod, run command, baiki error — bukan sekadar bagi cadangan untuk awak copy-paste. Dalam panduan ni, kita guna Cline (extension VSCode) sebagai "AI agent" tu.

Keperluan Asas (Prerequisites)

Komputer/laptop dengan Windows 11 (Pro atau Home, dua-dua boleh)
Internet (untuk download software dan guna AI cloud)
SQL Server (MSSQL) sudah terpasang — boleh guna versi Express (percuma) kalau belum ada
Kesabaran — nama fail/folder kena tepat, jangan tergesa-gesa

BAHAGIAN 1: Cipta Folder Projek Pertama Anda

Sebelum apa-apa install, kita cipta dulu satu folder yang akan jadi "rumah" untuk projek pertama awak. Ini langkah paling asas tapi sering terlepas pandang.

Buka File Explorer (ikon folder di taskbar, atau tekan Win + E)
Pergi ke lokasi yang senang awak ingat, contoh Local Disk C:
Klik kanan pada ruang kosong → New → Folder
Taip nama folder: test-vibe (nama ni akan digunakan sepanjang panduan ni sebagai contoh nama projek)
Lokasi penuh folder ni sekarang: C:\test-vibe

— File Explorer dengan folder test-vibe baru dicipta dalam C:\

Nota: Awak boleh letak folder ni di lokasi lain (contoh D:\Projects\test-vibe) — asalkan awak ingat lokasi tu, sebab kita akan "buka" folder ni dalam VSCode di langkah seterusnya.

🆘 Jika Tersekat (Bahagian 1)

Saya baru nak mula belajar coding, dan saya cuba cipta folder baru bernama 
"test-vibe" dalam Windows tapi [nyatakan masalah sebenar]. 
Tolong terangkan macam saya tak pernah guna File Explorer, step demi step.

BAHAGIAN 2: Install VSCode

Pergi ke https://code.visualstudio.com
Klik butang Download for Windows
Buka fail .exe yang didownload, install macam software biasa (Next → Next → Finish)
Buka VSCode lepas install selesai
Dalam VSCode, klik File → Open Folder, dan pilih folder C:\test-vibe yang awak cipta di Bahagian 1
VSCode akan "buka" folder tu sebagai workspace — awak akan nampak nama TEST-VIBE di panel Explorer sebelah kiri (kosong buat masa ni, tak apa)

— halaman download code.visualstudio.com

— VSCode dengan folder test-vibe terbuka di Explorer panel

Nota: VSCode ni percuma dan berbeza dari Visual Studio (VS2022/VS2026) yang ramai developer .NET biasa guna. VSCode lebih ringan, sesuai untuk vibe coding.

💡 Tips & Trick: Kalau semua teks/menu dalam VSCode nampak terlalu KECIL (biasa berlaku pada laptop resolusi tinggi), tekan Ctrl + = berulang kali untuk zoom in KESELURUHAN aplikasi (bukan sekadar teks kod). Tekan Ctrl + 0 untuk reset semula.

🆘 Jika Tersekat (Bahagian 2)

Saya baru install VSCode di Windows 11 tapi [nyatakan masalah sebenar, 
contoh: "VSCode tak boleh buka", "keluar error semasa install", 
"tak tahu macam mana nak buka folder test-vibe"]. 
Ni error yang saya dapat: [paste error]. Tolong bantu saya selesaikan 
step demi step, saya baru pertama kali guna VSCode.

BAHAGIAN 3: Install Cline Extension

Dalam VSCode, klik ikon Extensions di sidebar kiri (nampak macam 4 kotak kecil bertindih)
Dalam kotak carian, taip: Cline
Cari extension dengan nama "Cline" (publisher: saoudrizwan), klik Install
Lepas install, ikon Cline (kepala robot) akan muncul di Activity Bar (bar tegak paling kiri VSCode)

— hasil carian "Cline" dalam Extensions panel, dengan butang Install

💡 Tips & Trick: Jangan install banyak extension AI serupa serentak (contoh Cline + Continue + lain-lain agent AI) — mereka boleh "bertembung" dan buat VSCode keliru. Mula dengan SATU extension dulu, kuasai dia, baru explore yang lain.

🆘 Jika Tersekat (Bahagian 3)

Saya dah search "Cline" dalam Extensions VSCode tapi [nyatakan masalah, 
contoh: "tak jumpa", "install tapi ikon tak muncul"]. 
Keadaan sekarang: [terangkan apa awak nampak]. 
Tolong bantu saya pastikan Cline betul-betul terpasang.

BAHAGIAN 4: Setup "Otak" AI untuk Cline

Cline perlukan "otak" (model AI) untuk berfikir dan buat kerja.

4.1 Install Ollama (Local AI — Percuma, Jalan di Laptop Sendiri)

Pergi ke https://ollama.com
Download versi Windows, install macam biasa
Lepas install, buka PowerShell (tekan Win, taip "PowerShell", Enter)
Download satu model AI untuk coding:
```
ollama pull qwen2.5-coder:14b
```
Tunggu sehingga selesai download

Test ia berfungsi:

ollama run qwen2.5-coder:14b "hello"

Contoh hasil sebenar yang patut keluar:

>>> helloHello! How can I assist you today?

Taip /bye untuk keluar.

Nota: Kalau laptop awak tiada GPU (kad grafik khas), guna model lebih kecil contoh qwen2.5-coder:7b atau qwen2.5-coder:1.5b — lebih laju pada CPU sahaja.

💡 Tips & Trick: Model AI local yang KECIL (7B ke bawah) memang berfungsi untuk kerja coding asas, tapi untuk hasil "cantik"/"wow" (contoh design UI profesional), model local biasanya KURANG mengagumkan berbanding AI cloud berbayar. Jangan kecewa — ini had fizikal (saiz model), bukan salah setting awak. Rujuk Bahagian 10 untuk faham bila patut guna yang mana.

4.2 Sambungkan Cline ke Ollama

Dalam VSCode, klik ikon Cline di sidebar
Klik ikon ⚙️ (Settings) di panel Cline
Cari bahagian API Configuration
Isi macam ni (ini contoh sebenar yang berfungsi):

Field	Nilai
API Provider	`Ollama`
Base URL	`http://localhost:11434`
Model ID	`qwen2.5-coder:14b`

Save

— panel API Configuration Cline dengan setting Ollama terisi

🆘 Jika Tersekat (Bahagian 4)

Saya dah setup Ollama dengan Base URL http://localhost:11434 dan Model ID 
[nama model saya], tapi Cline [nyatakan masalah: "tak respond", 
"keluar error connection refused", dll]. Ni error sebenar: [paste error]. 
Tolong diagnosa punca dan bagi fix step by step.

BAHAGIAN 5: Sambungkan Cline ke MSSQL (MCP)

MCP (Model Context Protocol) membolehkan Cline terus baca struktur database dan jalankan SQL query.

5.1 Install .NET SDK (kalau belum ada)

dotnet --version

Kalau keluar nombor versi (contoh 10.0.301), dah ada. Kalau tidak, download dari https://dotnet.microsoft.com/download.

5.2 Install MSSQL MCP Server

dotnet tool install --global Ave.McpServer.MsSqlClient

Hasil sebenar yang patut keluar (contoh):

You can invoke the tool using the following command: ave-mcpserver-mssqlclient
Tool 'ave.mcpserver.mssqlclient' (version '0.1.0') was successfully installed.

⚠️ PENTING: Nama command untuk panggil tool ni (ave-mcpserver-mssqlclient) selalunya BERBEZA dari nama package (Ave.McpServer.MsSqlClient). Catat nama command sebenar dari output install awak — ia diperlukan di step seterusnya.

5.3 Daftar MCP Server dalam Cline

Dalam panel Cline, cari ikon MCP Servers (ikon plug/server kecil di header panel)
Klik "Configure MCP Servers" — ini buka fail cline_mcp_settings.json

— panel MCP Servers dengan butang Configure

Tambah entry ni (contoh SEBENAR yang telah diuji berjaya — tukar bahagian bertanda sahaja):

{
  "mcpServers": {
    "mssql": {
      "command": "ave-mcpserver-mssqlclient",
      "env": {
        "MSSQL_CONNECTIONSTRING": "Server=localhost\\SQLEXPRESS;Database=NamaDatabaseAwak;Trusted_Connection=True;TrustServerCertificate=True;",
        "EnableExecuteQuery": "true",
        "EnableExecuteStoredProcedure": "true"
      },
      "autoApprove": []
    }
  }
}

Komen penerangan setiap baris (baca ni sebelum tukar apa-apa):

"command": "ave-mcpserver-mssqlclient"
    ← TUKAR ikut nama command sebenar dari step 5.2 tadi (mungkin lain untuk awak)

"Server=localhost\\SQLEXPRESS"
    ← TUKAR "SQLEXPRESS" ikut nama instance SQL Server awak.
    ← Kalau guna default instance (bukan named instance), cukup "localhost" 
      sahaja TANPA "\SQLEXPRESS"
    ← Perhatikan DUA backslash (\\) dalam JSON — ini WAJIB, satu backslash akan error

"Database=NamaDatabaseAwak"
    ← TUKAR ke nama database SEBENAR awak, contoh "Database=TokoOnline"

"Trusted_Connection=True"
    ← Ini guna akaun Windows semasa untuk login (paling senang untuk local dev)
    ← Kalau server awak guna SQL Authentication (username/password), tukar baris
      ni kepada: "User Id=NamaUser;Password=********;"
      (jangan letak password sebenar dalam blog/repo AWAK — mask dengan ********)

"EnableExecuteQuery": "true"
    ← Bagi Cline kebenaran JALANKAN query (SELECT/INSERT/UPDATE/DELETE)
    ← TUKAR ke "false" kalau nak Cline HANYA BACA struktur (lebih selamat untuk 
      permulaan, terutama kalau database ni ada data penting)

"autoApprove": []
    ← Kosong bermaksud SETIAP query perlukan awak klik Approve manual
    ← JANGAN isi ni dengan "execute_query" melainkan awak SANGAT yakin — auto-approve 
      untuk execute_query bermakna AI boleh ubah data TANPA tanya awak dulu

Save fail tu
Restart VSCode sepenuhnya (tutup, buka semula — bukan sekadar reload window)

💡 Tips & Trick: Biar autoApprove KOSONG ([]) dan EnableExecuteQuery set "false" dulu untuk beberapa hari pertama. Bila dah rasa yakin dan faham tabiat AI awak, baru pertimbang enable execute query. Untuk database yang ada data PENTING, jangan sekali-kali auto-approve query yang boleh ubah/padam data.

5.4 Test Sambungan MSSQL

Buka panel Cline → Configure (dalam MCP Servers)
Cari entry mssql — status patut hijau (connected)

— status mssql hijau/connected dengan senarai 8 tools

Dalam chat Cline, taip:

Tunjukkan semua table dalam database ni

Cline minta kebenaran untuk guna tool list_tables — klik Approve
Kalau keluar senarai table sebenar, confirm berjaya!

🆘 Jika Tersekat (Bahagian 5)

Saya cuba sambungkan Cline ke MSSQL guna MCP server "ave-mcpserver-mssqlclient" 
tapi dapat error ini: [paste error sebenar, contoh: "spawn ENOENT", 
"Connection closed", "MSSQL_CONNECTIONSTRING is not set"]. 
Sistem saya: Windows 11, SQL Server [nyatakan versi/Express/Standard], 
nama instance: [nyatakan]. 
Tolong diagnosa langkah demi langkah punca error ni dan bagi fix.

BAHAGIAN 6: Struktur Fail Projek (Best Practice)

Untuk setiap projek baharu (termasuk test-vibe yang kita cipta di Bahagian 1), letak fail-fail ni dalam root folder projek.

6.1 `.clinerules` — Peraturan untuk Cline

Cipta folder (bukan fail) bernama .clinerules dalam root projek. Cara: klik kanan folder projek dalam Explorer VSCode → New Folder → taip .clinerules.

Dalam folder tu, cipta fail .md, contoh 00-universal.md (klik kanan folder .clinerules → New File):

# Peraturan Umum

## Keselamatan
- JANGAN DROP DATABASE atau DELETE tanpa WHERE clause tanpa pengesahan eksplisit
- SENTIASA backup database dulu sebelum ALTER/DROP table besar

## Git
- Commit selepas setiap feature siap
- JANGAN git push tanpa kebenaran eksplisit

## Tabiat
- Kalau arahan tak jelas, TANYA dulu sebelum bertindak
- Bahasa Malaysia untuk comment code, English untuk nama variable/function

— struktur folder Explorer VSCode dengan folder .clinerules kelihatan

Cline akan baca peraturan ni automatik setiap kali awak beri arahan.

6.2 `.vscode/settings.json` — Setting Khusus Projek

Cipta folder .vscode, dalam tu cipta fail settings.json:

{
  "files.autoSave": "afterDelay",
  "editor.formatOnSave": true,
  "files.exclude": {
    "**/bin": true,
    "**/obj": true
  }
}

6.3 `.gitignore` — Elak Commit Fail Yang Tak Patut

*.mdf
*.ldf
.env
bin/
obj/
node_modules/
.vs/

6.4 `.editorconfig` — Format Konsisten

root = true

[*]
indent_style = space
indent_size = 4
end_of_line = crlf
charset = utf-8-bom
trim_trailing_whitespace = true
insert_final_newline = true

🆘 Jika Tersekat (Bahagian 6)

Saya cuba cipta folder ".clinerules" dalam VSCode tapi [nyatakan masalah, 
contoh: "tak boleh cipta folder bermula dengan titik", "Cline tak nampak 
peraturan yang saya letak"]. 
Tolong bantu saya pastikan struktur fail projek saya betul.

BAHAGIAN 7: Setup Git (Version Control)

Git bagi awak "undo" kalau AI buat perubahan yang awak tak suka.

Buka terminal dalam VSCode: Ctrl + ` (backtick)

Pastikan awak dalam folder projek, taip:

git initgit add .git commit -m "Initial commit"

📸 [AMBIL SCREENSHOT DI SINI] — terminal VSCode selepas git commit berjaya

Kalau git "not recognized", download Git dari https://git-scm.com dulu, install, restart VSCode.

🆘 Jika Tersekat (Bahagian 7)

Saya taip "git init" dalam terminal VSCode tapi dapat error: [paste error]. 
Sistem saya Windows 11. Tolong bantu saya pastikan Git terpasang dan 
berfungsi dengan betul.

BAHAGIAN 8: Setting PowerShell (Kalau Perlu Jalankan Script)

Windows secara default sekat script .ps1 daripada dijalankan.

Buka PowerShell as Administrator (klik kanan ikon PowerShell → Run as Administrator)

Taip:

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

Taip Y untuk confirm

Hasil sebenar yang patut keluar: tiada error, terus kembali ke prompt PowerShell.

🆘 Jika Tersekat (Bahagian 8)

Saya cuba run "Set-ExecutionPolicy RemoteSigned -Scope CurrentUser" dalam 
PowerShell tapi dapat error: [paste error]. Tolong terangkan kenapa dan 
bagi cara fix yang selamat.

BAHAGIAN 9: UJIAN — Rasa Sendiri "Vibe Coding" Buat Kali Pertama!

Jom test dengan beberapa senario ringkas dahulu.

Ujian 1: Test Asas — AI Boleh "Cakap"

Hello, boleh perkenalkan diri awak?

Sepatutnya: Cline balas dalam beberapa saat.

Ujian 2: Test Agentic — AI Boleh Cipta Fail

Buat satu fail bernama hello.html yang papar "Hello World" dengan tajuk 
"Ujian Pertama Saya" dan warna latar belakang biru muda.

Sepatutnya: Cline terus cipta fail hello.html. Klik Approve bila diminta.

📸 [AMBIL SCREENSHOT DI SINI] — notifikasi "Cline wants to create a new file" dengan butang Approve

Ujian 3: Test Jalankan Command

Buka fail hello.html tadi dalam browser guna command 'start hello.html'

Ujian 4: Test MCP MSSQL — Baca Database

Tunjukkan senarai table dalam database, dan untuk table pertama, 
tunjukkan struktur column dia

Ujian 5: Test Lebih Mencabar — Buat Satu Halaman Web Ringkas

Buat fail index.html untuk satu laman web ringkas kedai online. 
Perlu ada: header dengan logo, 3 produk contoh dengan gambar placeholder, 
harga, dan butang "Beli". Guna warna profesional (navy blue + putih).

Ujian 6: Game Ringkas — Tic-Tac-Toe (Rasa "Terpesona" Pertama!)

Buat satu fail bernama game.html untuk permainan Tic-Tac-Toe (X dan O) 
2 pemain, guna HTML/CSS/JavaScript sahaja (tiada perlu library luar). 
Papan 3x3, klik untuk letak X/O bergilir, detect bila menang/seri, 
dan ada butang "Main Semula".

Kenapa ujian ni penting: Ramai orang yang pernah cuba belajar coding tradisional habiskan berjam-jam untuk buat game ringkas macam ni (logik menang/kalah, event handler klik). Dengan vibe coding, ini boleh siap dalam beberapa minit. Kalau ujian ni berjaya, awak dah rasa kuasa sebenar AI agent.

Ujian 7: Mini Calculator

Buat fail calculator.html — kalkulator ringkas dengan butang nombor 0-9, 
tambah/tolak/darab/bahagi, butang clear (C), dan paparan hasil di atas. 
Design kemas macam kalkulator telefon.

Ujian 8: Address Book Bersambung Database (Gabungkan Semua Kemahiran!)

Buat satu sistem address book ringkas: 
1) Table MSSQL bernama "Contacts" dengan column Id, Name, Phone, Email 
2) Satu fail contacts.html dengan borang untuk tambah contact baru dan 
   senarai contact sedia ada 
3) Sambungkan borang tu supaya bila "Save" diklik, data terus masuk 
   ke table Contacts dalam database (guna MCP MSSQL yang kita dah setup)

Kenapa ujian ni penting: Ini gabungkan semua yang kita belajar — HTML, database, dan MCP — dalam satu projek kecil. Kalau ujian ni berjaya, awak dah sedia untuk projek sebenar.

Ujian 9: "WOW Test" — Rasa Kuasa Sebenar AI Cloud (PENTING!)

Ujian sebelum ni (6-8) sengaja ringkas supaya boleh berjaya walaupun guna AI local (Ollama) yang kurang pintar. Tapi untuk betul-betul rasa "jaw-drop"/terpesona dengan kemampuan sebenar vibe coding, ujian ni WAJIB guna AI cloud (bukan local Ollama) — sila tukar profile Cline ke AI cloud/berbayar dulu (rujuk Bahagian 10.2 atau 10.4) sebelum cuba:

Buat satu fail bernama admin-dashboard.html untuk interface "Network 
Admin Dashboard" yang FULL FEATURED dan PROFESIONAL. Termasuk: sidebar 
navigation dengan icon, dashboard dengan 4-6 KPI card (contoh: Server 
Uptime, Active Connections, Bandwidth Usage, Alert Count) dengan warna 
dan icon menarik, table senarai server/device dengan status (online/
offline/warning), grafik line chart untuk network traffic (guna 
Chart.js), dan color scheme moden (dark mode kalau boleh). Buat ia 
nampak setanding dashboard produk komersial sebenar — jangan berlengah, 
"suprise me" dengan hasil terbaik awak.

ATAU, kalau awak lebih berminat dengan sistem payment:

Buat satu fail bernama payment-dashboard.html untuk interface "Payment 
System Admin Panel" yang FULL FEATURED dan PROFESIONAL. Termasuk: sidebar 
navigation, dashboard dengan KPI card (Total Transaction, Success Rate, 
Failed Transaction, Total Revenue), table transaksi terkini dengan status 
badge berwarna, chart transaksi ikut masa (Chart.js), dan design yang 
setanding produk payment gateway komersial sebenar (contoh: Stripe, 
PayPal dashboard). "Suprise me" dengan hasil terbaik awak.

Sepatutnya: Dengan AI cloud yang kuat, hasil ujian ni boleh keluar dalam 10-30 saat, dengan design yang betul-betul nampak profesional — inilah momen "terpesona" yang selalunya jadi motivasi untuk terus belajar vibe coding lebih dalam.

💡 Tips & Trick: Kalau hasil dari AI local (Ollama) untuk Ujian 9 nampak "kosong"/asas sahaja (contoh cuma layout ringkas tanpa banyak elemen), ini BUKAN salah setting awak — ini had saiz model local yang kita dah bincang dalam Bahagian 4. Cuba tukar ke AI cloud dan run ujian yang sama — perbezaan hasil akan sangat ketara, dan dari situ awak faham kenapa kombinasi "local + cloud" (Bahagian 10) penting.

🆘 Jika Tersekat (Bahagian 9)

Saya jalankan ujian [nyatakan nombor ujian, contoh "Ujian 6" atau 
"Ujian 9 - WOW Test"] tapi [nyatakan apa berlaku: "tiada apa jadi", 
"Cline stuck loading", "hasil tak seperti dijangka", "hasil nampak 
ringkas/tak cantik"]. Ni yang saya nampak: [terangkan/paste]. 
AI provider yang saya guna sekarang: [local Ollama / cloud AI]. 
Tolong bantu diagnosa dan selesaikan.

BAHAGIAN 10: Pilihan "Otak" AI — Perbandingan 4 Persediaan

Ada 4 cara nak dapatkan "otak" AI untuk Cline, setiap satu ada kelebihan dan kekurangan. Panduan setup terperinci untuk setiap satu akan ditulis dalam post berasingan — di sini cuma sinopsis untuk bantu awak pilih.

10.1 Local AI di Laptop Sendiri (Ollama)

Apa dia: Model AI jalan terus di laptop awak, guna Ollama (yang kita dah setup dalam Bahagian 4).

Kebaikan	Keburukan
Percuma sepenuhnya	Perlukan laptop dengan spec lumayan (RAM 16GB+, elok ada GPU)
Data/kod TIDAK keluar dari laptop — paling selamat untuk kod sulit	Kualiti/kepintaran terhad berbanding cloud AI
Boleh jalan tanpa internet	Lambat kalau laptop tiada GPU

10.2 FreeLLMAPI (Router Percuma untuk Pelbagai Model Cloud)

Apa dia: Tool open-source yang gabungkan free-tier dari banyak provider AI (Google, Groq, dll) di bawah satu API key. Link: cari repo "FreeLLMAPI" di GitHub search (nama pembangun boleh berubah)

Kebaikan	Keburukan
Percuma, akses banyak model sekaligus	BUKAN untuk kod sulit/proprietary — data pergi ke server pihak ketiga
Auto-failover kalau satu provider limit	Kualiti model "sederhana", bukan setanding model flagship berbayar
Senang setup, satu unified key	Bergantung pada free-tier provider luar — boleh berubah bila-bila

10.3 Server GPU Berasingan (Contoh: Aibox Sendiri)

Apa dia: Pasang PC/server berasingan dengan GPU khas (contoh RTX 5060 Ti 16GB), jalankan Ollama di situ, sambung dari laptop guna rangkaian (LAN/Tailscale).

Kebaikan	Keburukan
Model AI jauh lebih besar/pintar berbanding laptop biasa boleh jalan	Kos permulaan (beli GPU + PC) — boleh RM3,000-RM8,000+
Laptop kekal ringan, "otak" berat di server	Perlukan kemahiran setup rangkaian (Tailscale/VPN) untuk akses jauh
Boleh kongsi dengan berbilang device (laptop, telefon)	Tanggungjawab maintain server sendiri (elektrik, cooling, keselamatan)

10.4 AI Berbayar Bijak (Contoh: Claude, GPT Berbayar)

Apa dia: Guna API/subscription berbayar untuk model AI paling canggih.

Kebaikan	Keburukan
Kualiti/reasoning PALING tinggi, hasil paling "wow"	Kos berterusan (bulanan/pay-as-you-go)
Tak perlu risau spec komputer sendiri	Untuk kod SULIT, perlu semak dasar privasi data provider tu (tier berbayar biasanya lebih selamat dari free-tier, tapi SEMAK dulu)
Sokongan/dokumentasi lebih matang	Perlukan internet sentiasa

Cadangan Kombinasi (Ikut Pengalaman Sebenar)

Kerja kod SULIT/proprietary        → Local AI (10.1) atau Server GPU sendiri (10.3)
Kerja perlukan hasil "wow"         → AI Berbayar (10.4)
Eksperimen/belajar tanpa kos       → FreeLLMAPI (10.2) atau Local AI (10.1)
Backup bila takde internet         → Local AI (10.1), WAJIB ada sebagai fallback

BAHAGIAN 11: Cara Upload Panduan Ini ke Blogspot

Blogspot tidak faham format Markdown (.md) secara terus — kalau awak copy-paste teks Markdown mentah ke editor "Compose" Blogspot, tanda #, ```, ** akan terpapar sebagai teks biasa, bukan jadi heading/bold/code box.

Langkah Betul: Convert MD → HTML Dulu

Pergi ke salah satu tool percuma ni: dillinger.io atau stackedit.io
Paste seluruh kandungan fail .md panduan ni ke editor tool tu
Tool akan papar preview HTML di sebelah — cari butang "Export" atau "Download" → pilih HTML
Copy kandungan HTML yang dihasilkan

Paste ke Blogspot

Dalam Blogspot, semasa tulis post baharu, cari suis/toggle di penjuru atas editor — ada dua mod: "Compose" dan "HTML"
Tukar ke mod "HTML" (BUKAN Compose)
Paste kandungan HTML dari langkah tadi
Tukar balik ke mod "Compose" untuk preview — sepatutnya heading, code box, table semua terpapar dengan kemas
Sisip screenshot awak (yang diambil di setiap penanda 📸) terus dalam Blogspot guna butang Insert Image

📸 [AMBIL SCREENSHOT DI SINI] — suis Compose/HTML dalam editor Blogspot

Tip: Table of Content (Kandungan) di atas guna "anchor link" (#bahagian-1-...) — ini berfungsi dalam HTML biasa, tapi Blogspot kadang perlu sedikit adjust ID heading secara manual kalau link "jump" tak jalan. Kalau berlaku macam ni, guna soalan preset di bawah.

🆘 Jika Tersekat (Bahagian 11)

Saya dah convert panduan Markdown ni ke HTML dan paste dalam mod HTML 
Blogspot, tapi [nyatakan masalah: "format still rosak", "Table of Content 
tak boleh jump", "code box tak nampak kemas"]. 
Tolong bantu saya betulkan supaya blog post ni nampak kemas dan profesional.

BAHAGIAN 12: Bacaan Lanjut (Further Reading)

Nak mendalami lagi konsep vibe coding dan tools yang kita guna sepanjang panduan ni? Ini 10 sumber (campuran Bahasa Melayu/Indonesia dan Inggeris) yang berguna untuk teruskan pembelajaran:

Dalam Bahasa Melayu/Indonesia (senang difahami untuk pembaca kita)

AITraining2U — What is Vibe Coding? (Malaysia) — https://www.aitraining2u.com/vibe-coding-malaysia.html — Penerangan konteks Malaysia, termasuk tools popular dan cadangan HRD Corp claimable course.
Brainymation — Vibe Coding vs Traditional Web Dev (Malaysia 2026) — https://www.brainymation.com/blog/vibe-coding-vs-traditional-web-development-malaysia-2026 — Perbandingan jujur bila patut vibe coding, bila patut belajar asas coding tradisional.
Belajar Vibe Coding (Indonesia) — https://belajarvibecoding.id/ — Panduan berstruktur dari asas, roadmap pembelajaran.
Mekari — Apa Itu Vibe Coding? — https://mekari.com/blog/apa-itu-vibe-coding/ — Penerangan konsep, kelebihan, dan senario penggunaan (termasuk contoh game Tic-Tac-Toe seperti Ujian 6 kita!).
Dedi Nugroho — Tips Vibe Coding untuk Pemula — https://dedinugroho.com/tips-vibe-coding-pemula/ — Tips praktikal khas untuk pemula, selari dengan falsafah "mula kecil" dalam panduan ni.

Dalam Bahasa Inggeris (dokumentasi rasmi & rujukan teknikal)

Dokumentasi Rasmi Cline — https://docs.cline.bot — Rujukan LENGKAP semua ciri Cline (Subagents, Hooks, Checkpoints, Skills, dan banyak lagi yang tak sempat kita bahas dalam panduan ni).
Model Context Protocol (MCP) — Laman Rasmi — https://modelcontextprotocol.io — Faham konsep MCP secara mendalam, dan cari MCP server lain (bukan sekadar MSSQL) untuk sambung Cline ke pelbagai tool.
Ollama — Laman Rasmi — https://ollama.com — Senarai penuh model AI local yang boleh awak pull, termasuk model coding lain selain qwen2.5-coder.
Dokumentasi Rasmi VSCode — https://code.visualstudio.com/docs — Kuasai VSCode lebih mendalam (shortcut, extension lain, tips produktiviti).
Anthropic — Panduan Prompt Engineering — https://docs.claude.com/en/docs/build-with-claude/prompt-engineering/overview — Belajar cara tulis arahan/prompt yang lebih tepat untuk dapat hasil AI yang lebih baik (berguna untuk SEMUA AI, bukan sekadar Claude).

Penutup: Tips Untuk Pemula

Mula kecil — jangan terus minta "buat sistem lengkap", pecahkan kepada langkah kecil
Auto-approve — biar OFF dulu (setiap tindakan perlu awak klik Approve) sehingga awak yakin dengan tabiat AI tu
Backup dulu sebelum minta AI buat perubahan besar pada database/kod sedia ada
.clinerules ialah kawan baik awak — letak semua "peraturan projek" di situ supaya tak perlu ulang arahan sama
Jangan takut buat silap — dengan git dan checkpoint Cline, hampir semua perubahan boleh di-undo
Guna soalan preset "🆘 Jika Tersekat" di setiap bahagian bila stuck — itu cara paling cepat dapat bantuan tepat dari AI

Selamat mencuba vibe coding! Kalau ada soalan, boleh tinggalkan komen di bawah post ni.

Panduan ini ditulis berdasarkan pengalaman sendiri setup dari kosong. Environment: Windows 11 Pro, VSCode, Cline extension, Ollama (local AI), MSSQL Express/Server. Semua contoh config dalam panduan ini adalah SEBENAR dan telah diuji berjaya berfungsi.

Developer Mode