Skip to main content

Siri Vibe Coding S01E01: Panduan Lengkap: VSCode + Cline: Cinta Pandang Pertama (Zero to Hero) Rev.#2

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.

📸 Nota pasal screenshot dalam panduan ni: Setiap bahagian penting ada penanda 📸 [AMBIL SCREENSHOT DI SINI] — ambil gambar skrin awak SENDIRI di titik tu semasa ikut langkah, dan sisipkan dalam blog post awak. Ini lebih baik dari guna gambar orang lain — versi UI awak akan tepat sama dengan apa pembaca nampak di skrin mereka, dan awak elak isu hak cipta guna gambar orang lain.

😄 Amaran kecil: Panduan ni panjang — bukan sebab saya "tak reti" ringkaskan, tapi sebab vibe coding ni ada BANYAK moving parts (editor, AI, database, semua kena "kenal" antara satu sama lain). Saya selit sikit jenaka sepanjang jalan supaya mata tak "freeze" macam program yang hang. Kalau jenaka tak sampai, skip terus ke arahan teknikal — yang penting projek jalan, bukan lawak jalan. 😅

📑 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:

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

📸 [AMBIL SCREENSHOT DI SINI] — halaman utama claude.ai dengan kotak chat

Cara Guna Soalan Preset Dalam Panduan Ni

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

  1. Copy teks dalam kotak tu
  2. Paste dalam kotak chat Claude.ai
  3. Tukar bahagian [...] dengan maklumat/error sebenar awak
  4. 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) — panduan ni khusus ditulis untuk Windows, bukan Mac/Linux
  • 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 0.5: Semakan Prasyarat Sistem (WAJIB, JANGAN SKIP!)

Ramai pembaca terus lompat ke install software dan tersangkut kemudian sebab 3 benda asas ni belum disemak. Ambil masa 5 minit sekarang — jimat berjam-jam frust nanti.

0.5.1 Confirm Versi Windows Anda

  1. Tekan Win + R (bukaan "Run")
  2. Taip winver, tekan Enter
  3. Satu tetingkap kecil akan muncul — confirm ia tertulis "Windows 11" (atau "Windows 10", panduan ni masih boleh diikuti, cuma sesetengah menu Windows mungkin nampak sedikit berbeza)

📋 Expected Result: Tetingkap "About Windows" terbuka, tunjuk versi dan build number.

0.5.2 Confirm Akaun Anda Ada Kebenaran "Administrator"

Sesetengah langkah install (contoh Docker, Git) perlukan kebenaran admin.

  1. Tekan Win, taip "Control Panel", buka
  2. Pergi ke User Accounts
  3. Confirm akaun awak tertera "Administrator" (bukan "Standard User")

Kalau akaun awak "Standard User" dan tiada akses ke akaun Administrator lain (contoh laptop pejabat/syarikat), beberapa langkah dalam siri ni mungkin perlukan bantuan Admin IT — nyatakan ni awal-awal supaya tak terkejut nanti.

0.5.3 Semak & Set PowerShell Execution Policy SEKARANG (Bukan Nanti)

Windows secara default sekat sesetengah script .ps1 — kita perlukan ni diselesaikan awal, bukan tunggu sampai Bahagian akhir.

  1. Tekan Win, taip "PowerShell"
  2. Klik kanan pada "Windows PowerShell" → Run as Administrator
  3. Dalam tetingkap PowerShell (biru/hitam) yang terbuka, taip: 
    Get-ExecutionPolicy
  4. Kalau hasil Restricted, taip: 
    Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
  5. Taip Y, tekan Enter untuk confirm

📋 Expected Result: Tiada error, kembali ke prompt PowerShell biasa.

😄 Ini macam pastikan kunci rumah berfungsi SEBELUM balik rumah pukul 2 pagi — buat sekarang, elak drama nanti.

🆘 Jika Tersekat (Bahagian 0.5)

Saya semak prasyarat sistem tapi [nyatakan: "winver tak jalan", "tiada 
akses Administrator", "Execution Policy masih Restricted lepas cuba 
tukar"]. Sistem saya: [Windows 10/11, Home/Pro]. Tolong bantu selesaikan 
SEBELUM saya teruskan ke langkah install software.

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.

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

📸 [AMBIL SCREENSHOT DI SINI] — 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.

🎮 Cheat Code: Nama folder projek jangan ada spasi/aksara pelik (contoh Projek Saya! — elak). Guna huruf kecil, sambung dengan - (contoh test-vibe, kedai-online). Ini elak 90% masalah "path error" yang pemula selalu hadapi.

😄 Fikir macam bina rumah — folder projek ni "tapak" awak. Kalau tapak tak stabil dari awal, rumah (kod) yang dibina atas dia pun akan "senget".

🆘 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

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

📸 [AMBIL SCREENSHOT DI SINI] — halaman download code.visualstudio.com 📸 [AMBIL SCREENSHOT DI SINI] — 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.

🎮 Cheat Code: Ctrl + ` (backtick) = buka/tutup terminal. Ctrl + Shift + P = "Command Palette" (cari apa-apa command VSCode, hafal ni satu je pun dah cukup untuk survive). Ctrl + = / Ctrl + - = zoom.

😄 Ctrl+Shift+P ni macam "jin dalam lampu" VSCode — taip apa awak nak buat, ia carikan untuk awak. Tak perlu hafal semua menu, cukup hafal SATU shortcut ni.

🆘 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

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

📸 [AMBIL SCREENSHOT DI SINI] — 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.

😄 Bayangkan install 5 GPS dalam satu kereta — semua sekali arah suara "belok kiri", "belok kanan" dengan destinasi lain-lain. Confusing kan? AI extension pun sama.

⚠️ PENTING: Extension mungkin masih guna nama lama "claude-dev" — kalau carian "Cline" tak jumpa apa-apa, cuba cari "claude-dev" pula. Nama produk berubah dari asal, tapi ID dalaman (saoudrizwan.claude-dev) kekal sama.

⚠️ WAJIB SEMAK: 8 Perkara Ni SEBELUM Awak Teruskan (Sila Baca!)

Ramai pembaca (termasuk yang berpengalaman dalam dunia dev Windows!) tersangkut di sini — bukan sebab awak buat silap, tapi sebab 8 perkara ni senang terlepas pandang untuk sesiapa baru pertama kali guna Cline. Semak SEMUA 8, satu-satu, sebelum risau "setup saya rosak":

  1. Mod Plan vs Act (kadang dilabel "Build"): Cari toggle/butang berhampiran/di atas kotak taip chat Cline (bahagian bawah panel Cline) — ada dua pilihan: "Plan" dan "Act". WAJIB pilih "Act" — mod "Plan" HANYA bincang/rancang, ia TIDAK akan cipta fail walau apa pun awak taip.

  2. Model AI MESTI ada ciri "Tools"/"Function Calling": Ini PALING kerap punca "Cline tak boleh cipta fail". Rujuk Bahagian 4 di bawah — kita akan bagi nama model konkrit yang confirm ada ciri ni.

  3. Popup "Approve" mungkin awak terlepas: Bila Cline nak cipta fail/jalankan command, ia tunjuk popup minta kebenaran. Kalau tak nampak, scroll ke atas dalam panel chat Cline — mungkin popup tu "tersorok" di atas skrin.

  4. Shell Integration (khusus isu Windows): Kalau Cline tak boleh jalankan command sama sekali (bukan sekadar lambat), ini mungkin isu "Shell Integration Unavailable". Pastikan VSCode versi terkini (Help → Check for Updates). Kalau masih gagal, install Git Bash (dari git-scm.com) dan tukar default terminal VSCode kepadanya (Ctrl+Shift+P → taip "Terminal: Select Default Profile" → pilih "Git Bash").

  5. Model Ollama kena "panaskan" dulu: Kalau guna Ollama (Artikel 2), run ollama run nama-model SEKALI dalam PowerShell sebelum guna dalam Cline — elak Cline "nampak hang" tunggu model loading kali pertama.

  6. Sabar 60 saat: Cline yang nampak "diam"/tak bergerak mungkin sekadar memproses (terutama fail besar). Tunggu sampai 60 saat sebelum anggap ia stuck. Ada butang Stop (■) berhampiran kotak chat kalau betul-betul perlu batalkan.

  7. Ikon Cline hilang selepas install: Pergi ke panel Extensions → cari "Cline" dalam senarai "Installed" → klik Disable, kemudian klik Enable semula. Kalau masih tiada, tutup VSCode sepenuhnya (bukan reload), buka semula.

  8. Command yang Cline cadangkan "pelik"/nampak untuk OS lain: Kadang AI (terutama model yang kurang kuat) boleh tersilap cadang command Mac/Linux (contoh open) untuk pengguna Windows (yang patut start). Penyelesaian: SENTIASA nyatakan "saya guna Windows 11" dalam prompt awak bila minta Cline jalankan command sistem — rujuk format prompt yang kita guna di Bahagian 9 nanti.

😄 8 benda ni nampak banyak, tapi check sekali sahaja (2 minit), lepas tu confirm SEMUA settle — jauh lebih pantas dari cuba teka-teka kenapa "tak jalan" untuk berjam-jam.

🆘 Jika Tersekat (Bahagian 3)

Saya dah semak SEMUA 8 perkara dalam senarai "WAJIB SEMAK" tapi Cline 
masih [nyatakan masalah tepat]. Ni yang saya dah confirm: [senaraikan 
yang mana dah OK dari 8 tu]. Tolong bantu diagnosa lebih lanjut.

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)

  1. Pergi ke https://ollama.com
  2. Download versi Windows, install macam biasa
  3. Lepas install, buka PowerShell (tekan Win, taip "PowerShell", Enter)
  4. Download satu model AI untuk coding: 
    ollama pull qwen2.5-coder:14b
  5. Tunggu sehingga selesai download
  6. 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.

✅ CONFIRM PENTING — Ciri "Tools" Model Ni: qwen2.5-coder:14b (dan 7b/1.5b) CONFIRM ada ciri "Tools"/"Function Calling" — ini bermakna Cline BOLEH guna model ni untuk cipta fail, jalankan command, dll. JANGAN tukar ke model lain (contoh model chat generik yang bukan varian "-coder") buat kali pertama — sesetengah model TIADA ciri ni langsung, dan Cline akan cuma boleh berbual, TAK BOLEH buat apa-apa kerja — walaupun sambungan nampak "berjaya".

💡 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

  1. Dalam VSCode, klik ikon Cline di sidebar
  2. Klik ikon ⚙️ (Settings) di panel Cline
  3. Cari bahagian API Configuration
  4. Isi macam ni (ini contoh sebenar yang berfungsi):
Field Nilai
API Provider Ollama
Base URL http://localhost:11434
Model ID qwen2.5-coder:14b
  1. Save

📸 [AMBIL SCREENSHOT DI SINI] — 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.0 Cari Nama Instance SQL Server Anda (WAJIB Tahu Dulu)

Ramai pemula tak tahu nama instance SQL Server mereka sendiri — jom cari sebelum teruskan:

  1. Tekan Win, taip "SQL Server Configuration Manager", buka (kalau tak jumpa, taip "Services" dan buka app "Services" sebagai gantinya)
  2. Cari dalam senarai perkhidmatan (services) yang bermula dengan "SQL Server (" — contoh: SQL Server (SQLEXPRESS) atau SQL Server (MSSQLSERVER)
  3. Nama dalam kurungan tu (SQLEXPRESS dalam contoh ni) ialah nama instance awak — catat, kita perlukan di step 5.3 nanti
  4. Confirm servis tu "Running" — kalau status "Stopped", klik kanan → Start

📋 Expected Result: Awak dapat satu nama (contoh SQLEXPRESS), atau confirm ia "default instance" (tiada nama khas, terus guna localhost sahaja tanpa apa-apa selepasnya).

💡 Tips & Trick: Kalau tiada langsung servis "SQL Server" dalam senarai, bermakna SQL Server belum terpasang — download SQL Server Express (percuma) dari laman rasmi Microsoft dulu sebelum teruskan Bahagian ni.

5.0.5 Cipta Database Test (Kalau Belum Ada Satu Pun)

Pembaca baru biasanya belum ada database sendiri lagi — jom cipta satu khas untuk latihan.

  1. Kalau belum ada, download SQL Server Management Studio (SSMS) — percuma dari laman rasmi Microsoft (search "Download SSMS")
  2. Buka SSMS, dalam kotak "Connect to Server", masukkan nama server awak (contoh localhost\SQLEXPRESS dari step 5.0 tadi), pilih "Windows Authentication", klik Connect
  3. Dalam panel Object Explorer (kiri), klik kanan pada "Databases" → New Database...
  4. Taip nama (contoh test-vibe), klik OK

📋 Expected Result: Database baharu test-vibe muncul dalam senarai di bawah "Databases" dalam Object Explorer.

Ini nama database (test-vibe) yang akan kita guna sebagai NamaDatabaseAwak di step 5.3 nanti.

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

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

📸 [AMBIL SCREENSHOT DI SINI] — panel MCP Servers dengan butang Configure

  1. 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
  1. Save fail tu
  2. 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.

🎮 Cheat Code: Ingat formula ni — Trusted_Connection=True = guna akaun Windows (senang, tiada password dalam config). EnableExecuteQuery=false = "AI boleh BACA je, tak boleh UBAH" (mod paling selamat untuk pemula). Naikkan ke true HANYA bila dah confident.

😄 autoApprove: [] yang kosong tu jangan pandang rendah — itu "pengawal keselamatan" awak. Kosongkan dulu, biar setiap tindakan AI kena "tepuk pintu" dulu sebelum masuk bilik database awak.

5.4 Test Sambungan MSSQL

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

📸 [AMBIL SCREENSHOT DI SINI] — status mssql hijau/connected dengan senarai 8 tools

  1. Dalam chat Cline, taip: 
    Tunjukkan semua table dalam database ni
  2. Cline minta kebenaran untuk guna tool list_tables — klik Approve
  3. 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.

⚠️ Kalau GUI "New Folder" tak boleh terima nama bermula titik: Guna terminal sebagai gantinya (Ctrl + ` untuk buka terminal VSCode), taip:

mkdir .clinerules

Ini sentiasa berfungsi, tak kira isu GUI — cara paling selamat kalau ragu-ragu.

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

📸 [AMBIL SCREENSHOT DI SINI] — struktur folder Explorer VSCode dengan folder .clinerules kelihatan

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

🎮 Cheat Code: 4 fail "titik" untuk setiap projek baharu — hafal singkatan CVGE: Clinerules, Vscode/settings.json, Gitignore, Editorconfig. Copy 4 ni dari projek lama, edit sikit, siap.

😄 .clinerules ni macam bagi AI baca "buku panduan pekerja baru" hari pertama masuk kerja — sekali dia baca, dia ingat SELAMANYA (setiap sesi), tak payah ulang cakap "jangan buat itu, jangan buat ini" setiap hari.

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.

  1. Buka terminal dalam VSCode: Ctrl + ` (backtick)
  2. 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.

🎮 Cheat Code: 3 command Git untuk survive minggu pertama:

git add .              ← "tandakan" semua perubahan
git commit -m "..."    ← "simpan" checkpoint dengan nota
git log --oneline      ← tengok senarai checkpoint yang dah simpan

😄 Git tu macam butang "Save Game" dalam video game lama — sebelum cuba "boss battle" (perubahan besar), SAVE dulu. Kalau kalah/silap, boleh load balik, bukan mula dari awal.

🆘 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: Semakan Semula PowerShell (Checkpoint)

✅ Nota: Kalau awak dah ikut Bahagian 0.5 di awal panduan ni, langkah PowerShell DAH SIAP — boleh skip terus ke Bahagian 9!

Kalau awak terlepas Bahagian 0.5 (atau baru sertai di tengah-tengah panduan ni), buat sekarang:

  1. Buka PowerShell as Administrator (klik kanan ikon PowerShell → Run as Administrator)
  2. Taip: 
    Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
  3. 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.

📋 Expected Result: Jawapan ringkas memperkenalkan diri sebagai AI coding assistant, sedia membantu. Ayat exact berbeza, tapi mesej patut koheren (bukan teks pelik/rosak). Kalau ini berjaya, sambungan AI awak confirm hidup.

😄 Kalau AI awak jawab "Saya Cline, saya sedia membantu awak" — itu bukan sekadar sopan-santun, itu bukti sambungan awak hidup. Anggap macam "hello world" versi vibe coding.

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

📋 Expected Result: Fail baharu hello.html muncul dalam Explorer panel (kiri VSCode). Buka fail tu — patut ada <title>Ujian Pertama Saya</title> dan background-color biru muda dalam CSS. Kalau tiada fail baharu tercipta langsung (Cline cuma "cakap" tanpa buat), rujuk kotak 🆘 di bawah.

Ujian 3: Test Jalankan Command

Saya guna Windows 11. Buka fail hello.html tadi dalam browser guna 
command 'start hello.html' (BUKAN 'open', sebab itu untuk Mac).

📋 Expected Result: Browser default awak (Chrome/Edge) terbuka automatik, papar "Hello World" atas latar belakang biru muda.

⚠️ PENTING — Kenapa kita nyatakan "Windows 11" dan "BUKAN open" terus dalam prompt: AI (terutama model local yang kurang kuat) kadang tersilap cadang command untuk OS lain — contoh open (patut untuk Mac) bukan start (patut untuk Windows). Dengan nyatakan terus OS awak dan command yang betul dalam prompt, kita elak kekeliruan ni terus, bukan tunggu ia berlaku dulu baru fix.

😄 Ini bahagian yang selalu bagi orang "goosebumps" kali pertama — AI bukan sekadar tulis kod, dia run kod tu sendiri, dan browser terbuka SENDIRI di depan mata awak. Rasa macam ada "hantu baik" dalam laptop.

🆘 Jika Tersekat (Ujian 3 — Command Silap OS)

Cline cadangkan/jalankan command "[nyatakan command yang keluar, contoh 
open/xdg-open]" tapi saya guna Windows 11 — patutnya "start". Tolong 
betulkan dan terangkan kenapa ini berlaku.

Ujian 4: Test MCP MSSQL — Baca Database

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

📋 Expected Result: Kalau awak baru sahaja cipta database test-vibe (Bahagian 5.0.5) dan belum ada table lagi, Cline akan balas dengan senarai KOSONG — ini NORMAL dan BUKAN error, ia sekadar bukti sambungan berjaya, cuma database tu memang belum ada apa-apa lagi. Kalau awak guna database sedia ada yang dah ada data, awak akan nampak senarai nama table sebenar, diikuti struktur column (nama + jenis data, contoh Id (int), Name (varchar)) untuk table pertama. Ujian 8 nanti akan cipta table pertama kita — jadi database kosong sekarang tu okay sahaja.

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).

📋 Expected Result: Fail index.html dengan header (nama kedai), 3 "kad produk" (gambar placeholder + nama + harga + butang), warna dominan navy blue/putih. Buka dalam browser — patut nampak macam laman kedai ringkas yang berfungsi (walaupun butang "Beli" belum ada logik sebenar).

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.

📋 Expected Result: Papan 3x3 boleh diklik, X dan O bertukar giliran automatik, ada mesej "X Menang!"/"O Menang!"/"Seri!" bila permainan tamat, dan butang "Main Semula" reset papan kosong.

😄 Kalau ini berjaya dalam masa 2 minit, itu tanda awak dah "lepas tangan dari handle basikal" — istilah yang saya sendiri guna bila pertama kali rasa vibe coding. Selamat datang ke dunia baru!

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.

📋 Expected Result: Kalkulator berfungsi — cuba 5 + 3 = patut papar 8. Butang C kosongkan paparan. Design ada grid butang kemas (bukan senarai bertaburan).

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.

📋 Expected Result: Table Contacts wujud dalam database (boleh confirm guna Ujian 4). Borang dalam contacts.html ada field Name/Phone/Email + butang Save. Lepas isi dan klik Save, buka semula halaman — data yang awak masukkan tadi muncul dalam senarai (bukti data betul-betul tersimpan dalam database, bukan sekadar "hilang" lepas refresh).

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.

📋 Expected Result: Dashboard lengkap dengan sidebar, 4-6 KPI card berwarna dengan icon, table status, dan chart interaktif — semua dalam satu fail HTML, siap dalam kurang 1 minit. Kalau bandingkan dengan Ujian 5 (kedai online ringkas), perbezaan tahap "kecantikan" dan kelengkapan patut sangat ketara.

😄 Ini "moment of truth" — kalau rahang awak tak jatuh sikit pun tengok hasil ni, cuba semak balik Base URL/API Key AI cloud awak, mungkin masih guna local AI tanpa sedar!

💡 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.

🎮 Cheat Code: Formula 9 ujian ni — 1-4 = "adakah sambungan hidup", 5-8 = "adakah AI boleh buat kerja", 9 = "adakah AI boleh buat kerja CANTIK". Kalau semua 1-8 lepas tapi 9 "kurang wow", itu bukan kegagalan — itu tanda AI local awak dah buat kerja dia, sekarang giliran AI cloud (Ujian 9) tunjuk kelas dia pula.

🆘 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: https://github.com/tashfeenahmed/freellmapi (rujuk Artikel 3 untuk panduan setup penuh)

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

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

Paste ke Blogspot

  1. Dalam Blogspot, semasa tulis post baharu, cari suis/toggle di penjuru atas editor — ada dua mod: "Compose" dan "HTML"
  2. Tukar ke mod "HTML" (BUKAN Compose)
  3. Paste kandungan HTML dari langkah tadi
  4. Tukar balik ke mod "Compose" untuk preview — sepatutnya heading, code box, table semua terpapar dengan kemas
  5. 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)

  1. 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.
  2. 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.
  3. Belajar Vibe Coding (Indonesia) — https://belajarvibecoding.id/ — Panduan berstruktur dari asas, roadmap pembelajaran.
  4. 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!).
  5. 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)

  1. 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).
  2. 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.
  3. Ollama — Laman Rasmi — https://ollama.com — Senarai penuh model AI local yang boleh awak pull, termasuk model coding lain selain qwen2.5-coder.
  4. Dokumentasi Rasmi VSCode — https://code.visualstudio.com/docs — Kuasai VSCode lebih mendalam (shortcut, extension lain, tips produktiviti).
  5. 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

  1. Mula kecil — jangan terus minta "buat sistem lengkap", pecahkan kepada langkah kecil
  2. Auto-approve — biar OFF dulu (setiap tindakan perlu awak klik Approve) sehingga awak yakin dengan tabiat AI tu
  3. Backup dulu sebelum minta AI buat perubahan besar pada database/kod sedia ada
  4. .clinerules ialah kawan baik awak — letak semua "peraturan projek" di situ supaya tak perlu ulang arahan sama
  5. Jangan takut buat silap — dengan git dan checkpoint Cline, hampir semua perubahan boleh di-undo
  6. 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.

Labels:

Comments

Post a Comment

Popular posts from this blog

AI Tools 12 For Marketing

 AI Tools 12 For Marketing
Post a Comment
Read more

AI Tools 10

 AI Tools 10
Post a Comment
Read more