Siri Vibe Coding S02E01 (Part 2): OpenCode — Rancang Dulu, Baru Pecut

S02E01 (Part 2): OpenCode — Rancang Dulu, Baru Pecut

Ini sambungan LANGSUNG dari S02E01 Part 1 (Aider). Kalau belum baca tu, sila baca dulu — kita akan bina semula projek sama dalam artikel ni, supaya awak boleh bandingkan terus pengalaman dua tool.

😄 Nota jenaka: Kalau Aider tu "kawan yang terus buat kerja tanpa banyak cakap", OpenCode ni "kawan yang nak berbincang dulu sebelum mula" — dua-dua ada tempat masing-masing, macam dua jenis rakan kongsi projek kerja group semasa universiti dulu.

📑 Kandungan (Table of Content)

Kenapa OpenCode? Pros & Cons Mendalam

Berbeza sepenuhnya dari Aider (Part 1) — OpenCode agentic penuh, konsepnya dekat dengan Cline yang kita guna sejak S01E01.

	Penjelasan
✅ Paling popular	~172,000 bintang GitHub — lebih dari Gemini CLI dan OpenAI Codex, coding agent open-source paling banyak bintang
✅ Agentic penuh	Tunjuk rancangan dulu, awak approve, baru ia laksana berbilang langkah sendiri — sama falsafah dengan Cline
✅ Sokongan MCP	Boleh sambung terus ke MCP MSSQL yang kita bina S01E01 — kelebihan besar berbanding Aider
✅ 75+ provider disokong	Fleksibiliti model sangat luas
✅ Multi-session selari	Boleh jalankan beberapa task serentak, ciri unik
❌ Lebih perlahan	Loop rancang-laksana-semak lebih kompleks berbanding edit-terus Aider
❌ Lebih baharu	~1 tahun dalam pembangunan (walaupun update setiap hari) — kestabilan kurang teruji berbanding Aider punya 3 tahun
❌ Boleh rasa "overwhelming"	Lebih banyak ciri/konsep untuk pemula faham serentak (pengalaman awak sendiri dulu!)

Kesimpulan

OpenCode sesuai untuk kerja kompleks yang perlukan MCP atau agent buat banyak keputusan sendiri. Kurang sesuai kalau awak nak sesuatu yang ringkas dan laju untuk edit terarah — untuk itu, Aider (Part 1) menang.

BAHAGIAN 1: Prasyarat

Sama macam Aider — pastikan asas terpasang. OpenCode tak perlukan Python (ia Node.js/TypeScript-based), tapi elok ada Node.js untuk sesetengah MCP server (macam MSSQL kita).

node --version

Kalau tiada:

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt install nodejs -y

🆘 Jika Tersekat (Bahagian 1)

Saya cuba pastikan Node.js terpasang di Ubuntu tapi [nyatakan masalah]. 
Tolong bantu diagnosa.

BAHAGIAN 2: Install OpenCode

Di AI Box (Ubuntu, bash) — Cara Rasmi

curl -fsSL https://opencode.ai/install | bash

Alternatif (kalau lebih selesa npm):

npm i -g opencode-ai

Verify:

opencode --version

Untuk Pembaca Windows

Script curl | bash khusus Linux/macOS. Untuk Windows, guna npm:

npm install -g opencode-ai

(Perlukan Node.js terpasang dulu — download dari nodejs.org kalau belum ada)

🆘 Jika Tersekat (Bahagian 2)

Saya cuba install OpenCode di [Ubuntu/Windows] tapi [nyatakan masalah]. 
Ni error sebenar: [paste]. Tolong bantu diagnosa.

BAHAGIAN 3: Konsep Asas — Falsafah "Plan-First Agentic"

Ini beza fundamental dari Aider:

Awak beri arahan — OpenCode RANCANG dulu (tunjuk langkah-langkah yang ia akan buat)
Awak semak rancangan tu, approve (atau minta ubah)
Baru OpenCode laksana — boleh berbilang langkah, berbilang fail, secara berterusan
Lepas siap, ia lapor balik apa yang telah dibuat

😄 Kalau Aider tu "kerja dulu, cerita kemudian", OpenCode tu "cerita rancangan dulu, kerja kemudian". Dua-dua ada penggemar — bergantung awak jenis "just do it" atau "let's plan this properly" punya orang.

🆘 Jika Tersekat (Bahagian 3)

Saya tak faham beza plan-first OpenCode dengan git-first Aider. Tolong 
terangkan dengan contoh mudah.

BAHAGIAN 4: Tour Antara Muka TUI

Mula OpenCode:

opencode

Kali pertama, ia akan minta login/setup provider:

opencode auth login

Ikut arahan untuk pilih provider dan masukkan API key/endpoint.

💡 Tips & Trick: OpenCode default guna model percuma (GLM-4.7) tanpa perlu API key — boleh terus cuba tanpa setup apa-apa dulu untuk rasa antara muka TUI, baru setup provider pilihan awak (Ollama/FreeLLMAPI) di Bahagian 5.

🆘 Jika Tersekat (Bahagian 4)

Saya buka OpenCode tapi [nyatakan masalah: "auth login gagal", "TUI 
tak nampak betul"]. Tolong bantu diagnosa.

BAHAGIAN 5: Sambung ke AI Provider

Sama konsep macam Aider — Ollama local paling senang sebab OpenCode jalan terus di AI Box:

opencode auth login

Pilih "Ollama" dari senarai, masukkan endpoint: http://localhost:11434

Untuk FreeLLMAPI/Cloud, boleh set dalam config (~/.config/opencode/opencode.json):

{
  "$schema": "https://opencode.ai/config.json",
  "provider": {
    "freellmapi": {
      "baseURL": "http://localhost:11500/v1",
      "apiKey": "freellmapi-your-unified-key"
    }
  }
}

🆘 Jika Tersekat (Bahagian 5)

Saya cuba sambungkan OpenCode ke [Ollama/FreeLLMAPI] tapi [nyatakan 
masalah]. Tolong bantu diagnosa.

BAHAGIAN 6: MCP Integration — Sambung ke MSSQL Sedia Ada

Ini bahagian paling bernilai berbanding Aider — kita guna semula setup MCP MSSQL dari S01E01, tanpa perlu bina baru!

Edit/cipta ~/.config/opencode/opencode.json (atau opencode.json dalam folder projek):

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "mssql": {
      "type": "local",
      "command": ["ave-mcpserver-mssqlclient"],
      "enabled": true,
      "environment": {
        "MSSQL_CONNECTIONSTRING": "Server=localhost\\SQLEXPRESS;Database=NamaDatabaseAwak;Trusted_Connection=True;TrustServerCertificate=True;",
        "EnableExecuteQuery": "true",
        "EnableExecuteStoredProcedure": "true"
      }
    }
  }
}

Komen penerangan — perhatikan beza dari format Cline:

"command": ["ave-mcpserver-mssqlclient"]
    ← OpenCode perlukan ARRAY (dalam kurungan siku []), 
      BUKAN string tunggal macam format Cline sebelum ni
"environment" (bukan "env")
    ← nama field SEDIKIT berbeza dari Cline, tapi konsep sama

Verify:

opencode mcp list

📋 Expected Result: mssql patut tersenarai dengan status connected.

😄 Rasa "worth it" install OpenCode dah mula terasa kan? Semua kerja keras kita bina MCP di S01E01 sekarang boleh guna semula, bukan bina dari kosong.

🆘 Jika Tersekat (Bahagian 6)

Saya cuba sambungkan OpenCode ke MCP MSSQL saya tapi [nyatakan masalah]. 
Config saya: [paste opencode.json]. Tolong bantu diagnosa.

BAHAGIAN 7: Guna dengan tmux

Sama konsep macam Aider:

tmux new -s opencode-session
opencode

Ctrl+B, kemudian D untuk detach. Sambung balik:

tmux attach -t opencode-session

BAHAGIAN 8: PROJEK BERPERINGKAT — 4 Kalkulator (Ulangan)

Sekarang bina semula 4 projek sama dari Part 1 — tapi kali ni perhatikan cara OpenCode berbeza bila kerja.

mkdir kalkulator-harian-opencode && cd kalkulator-harian-opencode
opencode

8.A: Kalkulator Suhu

Buat fail suhu.html — kalkulator penukaran suhu 3-hala: Celsius, 
Fahrenheit, Kelvin. Auto-update serentak di mana-mana kotak ditaip. 
Single file HTML+CSS+JS.

Perhatikan: OpenCode akan tunjuk rancangan dulu (contoh: "1. Cipta fail suhu.html, 2. Tulis struktur HTML, 3. Tambah logik JS penukaran, 4. Test formula") — approve sebelum ia teruskan.

8.B: Kalkulator Tayar

Buat fail tayar.html — kalkulator PSI ke Bar dan sebaliknya. 
1 Bar = 14.5038 PSI. Design mudah untuk telefon.

8.C: Kalkulator Gula Darah

Buat fail gula-darah.html — konversi mg/dL ke mmol/L (÷18.0182) dan 
sebaliknya. WAJIB ada disclaimer "rujukan sahaja, bukan nasihat 
perubatan" di atas page.

8.D: Kalkulator Matawang

Buat fail matawang.html — konversi MYR ke USD/SGD/IDR. Kadar tetap: 
1 MYR = 0.21 USD, 0.29 SGD, 3400 IDR. Nota "kadar contoh sahaja".

📋 Expected Result (semua 4): Sama hasil fungsional macam Aider — kalkulator berfungsi, auto-update, disclaimer ada untuk 8.C. Beza hanya pada proses (rancangan ditunjuk dulu), bukan hasil akhir.

🆘 Jika Tersekat (Bahagian 8)

Saya buat projek [8.A/8.B/8.C/8.D] dengan OpenCode tapi [nyatakan 
masalah]. Tolong bantu betulkan.

BAHAGIAN 9: Perbandingan Pengalaman — Aider vs OpenCode

Sekarang kita dah bina kedua-dua set, ini perbandingan sebenar (bukan teori):

Aspek	Aider (Part 1)	OpenCode (Part 2)
Langkah sebelum edit	Tiada — terus edit	Tunjuk rancangan, perlu approve
Bilangan "interaksi" untuk 1 kalkulator	Biasanya 1-2 (arahan → siap)	Biasanya 2-3 (arahan → semak plan → approve → siap)
Git history	Automatik, setiap edit = 1 commit deskriptif	Tiada automatik (perlu awak `git add`/`commit` manual, melainkan diminta)
Sesuai untuk MCP (database)	❌ Tidak boleh	✅ Boleh terus
"Rasa" guna	Laju, terus-terang	Lebih "berbual", terasa macam ada "perbincangan"
Sesuai untuk pemula faham AI agentic	Konsep ringkas, senang faham	Lebih dekat dengan Cline (kalau dah biasa VSCode)

Kesimpulan Praktikal

Nak edit CEPAT, terkawal, sejarah git bersih automatik  → Aider
Nak agent buat kerja KOMPLEKS, perlukan MCP/database     → OpenCode
Projek kalkulator ringkas macam kita hari ni              → DUA-DUA setanding

😄 Tiada "pemenang mutlak" di sini — macam bandingkan skru berkepala pipih vs Phillips. Dua-dua "betul", cuma untuk kerja berbeza.

🆘 Jika Tersekat (Bahagian 9)

Saya dah cuba dua-dua Aider dan OpenCode, tapi masih keliru mana nak 
guna untuk projek: [terangkan projek]. Tolong bantu saya putuskan.

BAHAGIAN 10: Multi-Session/Parallel Agents (Intermediate)

Ciri unik OpenCode — jalankan beberapa task serentak dalam session berasingan:

opencode session new --name "kalkulator-suhu"
opencode session new --name "kalkulator-tayar"

Setiap session bebas, boleh tukar antara satu sama lain tanpa "campur konteks".

🆘 Jika Tersekat (Bahagian 10)

Saya cuba guna multi-session OpenCode tapi [nyatakan masalah]. Tolong 
bantu diagnosa.

BAHAGIAN 11: Shareable Session Links (Intermediate)

OpenCode boleh jana link untuk kongsi sesi (berguna untuk minta bantuan/tunjuk kerja):

opencode session share

BAHAGIAN 12: Custom Instructions File (Intermediate)

Setara .clinerules/CONVENTIONS.md — OpenCode guna field instructions dalam config:

{
  "$schema": "https://opencode.ai/config.json",
  "instructions": ["CONVENTIONS.md", "docs/*.md"]
}

🆘 Jika Tersekat (Bahagian 12)

Saya dah setup instructions file OpenCode tapi ia nampak tak diikuti. 
Tolong bantu diagnosa.

BAHAGIAN 13: Had Sebenar OpenCode

Jujur — bila JANGAN guna OpenCode:

Nak kerja super laju, terkawal, tanpa banyak "perbincangan" — Aider lebih sesuai
Bimbang isu kestabilan (projek lebih baharu berbanding Aider) — untuk kerja kritikal, test teliti dulu
Nak sesuatu yang paling ringkas untuk mula belajar TUI — Aider konsep lebih senang faham dulu

🆘 Jika Tersekat (Bahagian 13)

Saya tak pasti OpenCode sesuai untuk projek saya: [terangkan]. Tolong 
nasihatkan OpenCode atau Aider yang lebih sesuai.

BAHAGIAN 14: Bacaan Lanjut

Dokumentasi Rasmi OpenCode — https://opencode.ai/docs
OpenCode Config Guide — https://open-code.ai/en/docs/config
r/ChatGPTCoding (Reddit) — perbandingan komuniti
Rujuk balik S02E01 Part 1 (Aider) untuk perbandingan langsung

Penutup

Tahniah — awak sekarang faham dua falsafah TUI berlawanan (git-first Aider vs plan-first OpenCode), dan bina 4 kalkulator yang sama guna dua-dua untuk lihat beza sebenar. Ini pengalaman yang jarang ditunjuk penuh dalam tutorial lain — kebanyakan hanya tunjuk satu tool, bukan perbandingan langsung macam kita buat.

😄 Dari "OpenCode nampak susah" ke "faham beza dia dengan Aider dan bila nak guna yang mana" — ini kemajuan besar. Season 2 baru je bermula!

Nantikan S02E02 — kita masuk ke "Rahsia Maharaja", cuba orchestration sebenar!

Artikel ini sebahagian dari Season 2, siri "Vibe Coding". Semua arahan diuji di Ubuntu Linux (AI Box) dengan nota tambahan untuk Windows.

Developer Mode