Siri Vibe Coding S02E01.1: Aider — TUI Git-First di AI Box Anda
Ini artikel KETUJUH (bahagian 1) dalam siri Vibe Coding saya, permulaan "Season 2". Kalau belum baca Artikel 1-6, sila baca dulu. Artikel ni khas untuk pengguna yang dah ada AI Box (Artikel 4) dan Tailscale (Artikel 5) — kita explore dunia TUI (Terminal User Interface), alternatif kepada VSCode+Cline yang jalan terus dalam terminal.
😄 Nota jenaka: TUI ni dunia yang lain — tiada klik-klik cantik, semua keyboard. Rasa macam tukar dari kereta automatik ke manual — sikit "shock" kali pertama, tapi bila dah biasa, ada kepuasan tersendiri.
📑 Kandungan (Table of Content)
- Kenapa Aider? Pros & Cons Mendalam
- Bahagian 1: Prasyarat
- Bahagian 2: Install Aider
- Bahagian 3: Konsep Asas — Falsafah "Git-First"
- Bahagian 4: Command Asas
- Bahagian 5: Sambung ke AI Provider (Ollama, FreeLLMAPI, Cloud)
- Bahagian 6: Guna dengan tmux (Persistent Session)
- Bahagian 7: PROJEK BERPERINGKAT — 4 Kalkulator Harian
- Bahagian 8: Conventions File (Intermediate)
- Bahagian 9: Watch Mode (Intermediate)
- Bahagian 10: Lint & Test Integration (Intermediate)
- Bahagian 11: Had Sebenar Aider
- Bahagian 12: Bacaan Lanjut
- Penutup
Kenapa Aider? Pros & Cons Mendalam
Aider berbeza falsafah sepenuhnya dari Cline yang kita guna sejak Artikel 1. Cline (dan OpenCode, dibahas dalam Artikel 7.2) agentic — ia rancang, laksana berbilang langkah, semak sendiri. Aider TIDAK — ia lebih ringkas: awak minta edit, ia edit, commit ke git secara automatik, dan serah balik kawalan kepada awak.
| Penjelasan | |
|---|---|
| ✅ Lebih ringkas & laju | Tiada "loop" rancang-laksana-semak yang panjang — edit terus, commit, siap |
| ✅ Git-native | Setiap perubahan automatik jadi commit git dengan mesej deskriptif — sejarah lengkap, mudah undo |
| ✅ Matang | ~3 tahun dalam pembangunan, 4.1 juta+ install, dokumentasi established |
| ✅ Model-agnostic | Boleh sambung ke Ollama, FreeLLMAPI, Claude, atau apa-apa provider (sama macam Cline) |
| ❌ BUKAN agentic penuh | Tiada kebolehan "rancang dan laksana berbilang langkah sendiri" macam Cline/OpenCode |
| ❌ TIADA sokongan MCP | Tak boleh sambung terus ke MCP MSSQL yang kita bina dalam Artikel 1 (masih "feature request" terbuka di GitHub) |
| ❌ Dokumentasi model agak "stale" | Panduan rasmi kadang belum update sepenuhnya untuk model AI paling terkini |
Kesimpulan
Aider sesuai untuk kerja edit fail spesifik, terkawal, dengan sejarah git yang bersih. Kurang sesuai kalau projek awak perlukan sambungan MCP — untuk itu, tunggu Artikel 7.2 (OpenCode).
BAHAGIAN 1: Prasyarat
Di AI Box (Ubuntu Linux) — Persekitaran Utama Artikel Ni
python3 --version
pip3 --version
Kalau tiada:
sudo apt update
sudo apt install python3 python3-pip -y
Untuk Pembaca Windows (Nota Tambahan)
Konsep sama, cuma cara install Python berbeza — download dari python.org, atau winget install Python.Python.3.12 dalam PowerShell.
🆘 Jika Tersekat (Bahagian 1)
Saya cuba pastikan Python terpasang di [Ubuntu/Windows] tapi [nyatakan
masalah]. Tolong bantu diagnosa.
BAHAGIAN 2: Install Aider
Di AI Box (Ubuntu, bash)
python3 -m pip install aider-install
aider-install
Verify:
aider --version
Untuk Pembaca Windows (PowerShell)
powershell -ExecutionPolicy ByPass -c "irm https://aider.chat/install.ps1 | iex"
🎮 Cheat Code: Lepas install, command
aidersama sahaja di Linux dan Windows — cuma cara pasang yang beza.
🆘 Jika Tersekat (Bahagian 2)
Saya cuba install Aider di [Ubuntu/Windows] tapi [nyatakan masalah].
Ni error sebenar: [paste]. Tolong bantu diagnosa.
BAHAGIAN 3: Konsep Asas — Falsafah "Git-First"
- Setiap kali Aider edit fail, ia automatik buat git commit dengan mesej yang jelaskan perubahan tu
- Awak boleh minta Aider mula sesi dalam branch git baharu — eksperimen terasing dari kod utama
- Nak "buang" perubahan? Cukup
git revertatau command/undo
😄 Ini macam ada "setiausaha" yang catat SETIAP keputusan dalam buku log rasmi — senang nak "patah balik" kalau perlu.
🆘 Jika Tersekat (Bahagian 3)
Saya tak faham konsep git-first Aider. Tolong terangkan dengan contoh
mudah macam mana commit automatik ni berfungsi.
BAHAGIAN 4: Command Asas
mkdir kalkulator-harian && cd kalkulator-harian
git init
aider
| Command | Fungsi |
|---|---|
/add nama-fail.html |
Tambah fail ke "konteks" |
/drop nama-fail.html |
Buang fail dari konteks |
/diff |
Tunjuk perubahan terkini |
/undo |
Batalkan commit terakhir Aider buat |
/exit |
Keluar dari Aider |
🎮 Cheat Code: Hafal
/add,/diff,/undo— cukup untuk survive 90% kerja harian.
🆘 Jika Tersekat (Bahagian 4)
Saya cuba command "[nama command]" dalam Aider tapi [nyatakan masalah].
Tolong bantu diagnosa.
BAHAGIAN 5: Sambung ke AI Provider (Ollama, FreeLLMAPI, Cloud)
5.1 Setup Ollama (Local — Disyorkan untuk Artikel Ni)
Sebab Aider jalan terus di AI Box (bukan di laptop macam Cline), sambungan ke Ollama local jadi paling senang dan laju — cukup localhost, tiada rangkaian luar terlibat:
aider --model ollama/qwen2.5-coder:14b
Verify Ollama nampak oleh Aider — Aider akan cuba sambung serta-merta bila dimulakan. Kalau berjaya, awak akan nampak prompt Aider (>) sedia terima arahan.
Tukar model tengah sesi (tanpa keluar Aider):
/model ollama/qwen2.5-coder:32b
5.2 (Pilihan) FreeLLMAPI
export OPENAI_API_BASE="http://localhost:11500/v1"
export OPENAI_API_KEY="freellmapi-your-unified-key"
aider --model openai/auto
5.3 (Pilihan) Cloud AI Berbayar
export ANTHROPIC_API_KEY="sk-ant-your-key"
aider --model claude-sonnet
💡 Tips & Trick: Sebab Aider di AI Box sendiri, sambungan ke Ollama local tak perlukan Tailscale langsung — ini lebih laju berbanding Cline di laptop yang perlu "call keluar" melalui rangkaian. Kalau AI box awak spec sederhana, mula dengan model kecil (
qwen2.5-coder:7b) untuk projek dalam artikel ni — semua projek kita ringkas, tak perlukan model besar.
🆘 Jika Tersekat (Bahagian 5)
Saya cuba sambungkan Aider ke [Ollama/FreeLLMAPI/Cloud AI] tapi
[nyatakan masalah]. Ni error sebenar: [paste]. Tolong bantu diagnosa.
BAHAGIAN 6: Guna dengan tmux (Persistent Session)
tmux new -s aider-session
aider --model ollama/qwen2.5-coder:14b
# ... kerja dengan Aider ...
# Tekan Ctrl+B, kemudian D untuk "detach"
Sambung balik bila-bila:
tmux attach -t aider-session
🆘 Jika Tersekat (Bahagian 6)
Saya cuba guna tmux dengan Aider tapi [nyatakan masalah]. Tolong bantu
diagnosa.
BAHAGIAN 7: PROJEK BERPERINGKAT — 4 Kalkulator Harian
4 projek ni disusun mudah ke cabaran — jangan skip terus ke yang sukar, ikut turutan untuk bina keyakinan berperingkat.
cd kalkulator-harian
aider --model ollama/qwen2.5-coder:14b
7.A: Kalkulator Suhu (Celsius ↔ Fahrenheit ↔ Kelvin) — ASAS
Buat fail suhu.html — kalkulator penukaran suhu 3-hala: Celsius,
Fahrenheit, Kelvin. Semua 3 kotak input, taip di MANA-MANA satu,
DUA yang lain auto-update serentak. Formula: F = C×9/5+32, K = C+273.15.
Single file HTML+CSS+JS, tiada library luar, design mudah untuk telefon.
📋 Expected Result: Taip 100 dalam kotak Celsius → Fahrenheit terus tunjuk 212, Kelvin tunjuk 373.15.
Cabaran tambahan: Minta Aider tambah butang "Clear" untuk kosongkan semua kotak sekali gus.
7.B: Kalkulator Tayar (PSI ↔ Bar) — PERSONAL, 2-HALA
Buat fail tayar.html — kalkulator penukaran tekanan tayar PSI ke Bar
dan sebaliknya. Formula: 1 Bar = 14.5038 PSI. Auto-update dua-hala,
design mudah dibaca di skrin telefon (untuk guna di stesen minyak).
Single file HTML+CSS+JS.
📋 Expected Result: Taip 2.2 dalam kotak Bar → PSI terus tunjuk ~32.
😄 Ingat masalah sebenar awak sebut — sekarang dah ada penyelesaian dalam poket, tak payah tunggu carta lama di stesen minyak yang pudar tu.
Cabaran tambahan: Tambah label "Tayar kereta biasa: 30-35 PSI" sebagai rujukan cepat dalam page.
7.C: Kalkulator Gula Darah (mg/dL ↔ mmol/L) — KETEPATAN PENTING
Buat fail gula-darah.html — kalkulator penukaran paras gula darah
mg/dL ke mmol/L dan sebaliknya. Formula: mmol/L = mg/dL ÷ 18.0182.
Auto-update dua-hala. WAJIB letak notis jelas di atas page: "Alat ni
untuk RUJUKAN sahaja, BUKAN nasihat perubatan — sentiasa rujuk doktor
untuk keputusan kesihatan." Single file HTML+CSS+JS.
📋 Expected Result: Taip 100 dalam kotak mg/dL → mmol/L terus tunjuk ~5.55. Confirm notis disclaimer muncul jelas di atas kalkulator.
⚠️ PENTING: Untuk apa-apa projek berkaitan kesihatan (walaupun sekadar konversi unit ringkas), SENTIASA minta AI sertakan disclaimer jelas. Ini bukan sekadar formaliti — alat konversi yang silap boleh bawa kesan serius kalau seseorang guna untuk keputusan kesihatan sebenar.
7.D: Kalkulator Matawang (MYR ↔ USD/SGD/Rupiah) — CABARAN
Buat fail matawang.html — kalkulator penukaran matawang MYR ke USD,
SGD, dan IDR (Rupiah Indonesia) serentak. Guna kadar TETAP untuk versi
ni (letak sebagai constant dalam kod, boleh diubah manual):
1 MYR = 0.21 USD, 1 MYR = 0.29 SGD, 1 MYR = 3400 IDR. Input MYR sahaja,
3 hasil lain auto-tunjuk serentak. Letak nota "Kadar tukar contoh sahaja,
SEMAK kadar semasa sebelum guna sebenar." Single file HTML+CSS+JS.
📋 Expected Result: Taip 100 dalam kotak MYR → USD/SGD/IDR terus tunjuk hasil serentak.
Cabaran EXTRA CREDIT (intermediate, optional): Minta Aider explore guna live exchange rate API percuma (contoh exchangerate-api.com free tier) berbanding kadar tetap — ini perkenalkan konsep fetch API dalam JavaScript, langkah pertama ke arah projek lebih dinamik.
💡 Tips & Trick: Perhatikan trade-off — kadar tetap senang (tiada dependency luar, jalan offline), tapi lapuk cepat (kadar matawang berubah harian). Live API tepat, tapi perlukan internet dan pengurusan API key tambahan. Pilih ikut keperluan sebenar projek awak.
🆘 Jika Tersekat (Bahagian 7)
Saya buat projek [7.A/7.B/7.C/7.D] tapi [nyatakan masalah: "formula
salah", "tak auto-update", "disclaimer tak muncul"]. Tolong bantu
betulkan.
BAHAGIAN 8: Conventions File (Intermediate)
echo "# Peraturan Projek
- Guna Bahasa Malaysia untuk comment kod
- Semua kalkulator kena responsive untuk skrin telefon
- Elak library luar, guna vanilla JS sahaja
- Kalkulator berkaitan kesihatan WAJIB ada disclaimer" > CONVENTIONS.md
Aktifkan dalam sesi:
/read CONVENTIONS.md
🆘 Jika Tersekat (Bahagian 8)
Saya dah buat CONVENTIONS.md tapi Aider nampak tak ikut peraturan tu.
Tolong bantu diagnosa.
BAHAGIAN 9: Watch Mode (Intermediate)
aider --watch-files
Dalam fail kod, tulis comment:
// aider: tambah butang "Reset" untuk kosongkan semua input
Save fail — Aider automatik detect dan buat perubahan.
🆘 Jika Tersekat (Bahagian 9)
Saya cuba watch mode Aider tapi [nyatakan masalah]. Tolong bantu diagnosa.
BAHAGIAN 10: Lint & Test Integration (Intermediate)
aider --lint-cmd "npx eslint ." --test-cmd "npm test" --auto-test
💡 Tips & Trick: Untuk projek HTML/JS ringkas macam 4 kalkulator kita, lint/test tak wajib — lebih berguna untuk projek lebih besar.
🆘 Jika Tersekat (Bahagian 10)
Saya cuba setup lint/test dengan Aider tapi [nyatakan masalah]. Tolong
bantu diagnosa.
BAHAGIAN 11: Had Sebenar Aider
Jujur — bila JANGAN guna Aider:
- Projek perlukan MCP (contoh sambung database terus)
- Task perlukan agent rancang sendiri merentasi banyak fail serentak tanpa arahan terperinci
- Nak satu tool untuk semua — Cline atau OpenCode (Artikel 7.2) lebih sesuai
🆘 Jika Tersekat (Bahagian 11)
Saya tak pasti Aider sesuai untuk projek saya: [terangkan projek].
Tolong nasihatkan sama ada Aider, Cline, atau OpenCode lebih sesuai.
BAHAGIAN 12: Bacaan Lanjut
- Dokumentasi Rasmi Aider — https://aider.chat/docs
- r/ChatGPTCoding (Reddit) — komuniti aktif bincang perbandingan tool
- Nota jujur: tiada channel YouTube khusus Aider yang konsisten dikenal pasti — ikut channel AI coding umum (contoh Luke's Dev Lab) untuk update terkini
Penutup
Awak baru siapkan 4 kalkulator guna TUI — dari suhu (asas) sampai matawang (cabaran) — dan faham falsafah "git-first" Aider. Simpan folder kalkulator-harian ni — kita akan bina semula projek sama dengan OpenCode dalam Artikel 7.2, supaya awak boleh bandingkan terus pengalaman dua tool.
😄 Dari "susah nak faham OpenCode" ke "siap 4 kalkulator dengan Aider" — progress hebat. TUI dah tak semenakutkan sekarang, kan?
Artikel ini sebahagian dari Season 2, siri "Vibe Coding". Semua arahan diuji di Ubuntu Linux (AI Box) dengan nota tambahan untuk Windows.
Comments