Claude Code · Bab 4: Supercharge · 7 Modul · Level Advanced

Supercharge Claude Code

Naik taraf Claude dari pembantu → rakan kerja penuh: memori kekal, akses ke servis sebenar, dan struktur projek yang kemas. Prasyarat: habiskan Bahagian 1 & 2 dulu.

Sebelum mula, baca ni Bahagian ni melibatkan pendaftaran servis luar & token. Untuk latihan sendiri, guna akaun percuma peribadi. Untuk kerja syarikat, SEMUA akaun & token mesti melalui Bro Zaid, jangan daftar bagi pihak syarikat sendiri-sendiri.

Modul 1 — 3 cara bagi Claude "kuasa"

Ingat Bahagian 1: AI power sebab dia boleh guna tools. Ini 3 jenis "palam" untuk tools.

Cara	Apa dia	Analogi kedai
API	Pintu rasmi setiap servis, program bercakap sesama program, guna kunci rahsia	Nombor telefon supplier, boleh order, tapi kena tahu protokol
MCP	Standard baru khas untuk AI, servis bungkus kemampuannya jadi tools siap guna	Supplier yang datang sendiri dengan katalog & borang siap isi
CLI	Arahan dalam terminal (contoh: `netlify`, `gh`)	Staf yang berdiri sebelah kau, arah je terus

Kelebihan rahsia Claude Code Sebab Claude Code hidup dalam terminal, semua tool CLI automatik jadi kuasa dia, tak perlu setup istimewa. Ini yang app AI lain tak ada.

Langkah 1 — Faham 3 palam kuasa

Boleh sebut beza API / MCP / CLI dengan analogi sendiri? Tick.

Modul 2 — Corak sambungan servis

Corak 3 langkah 1. Daftar servis (biasanya percuma) → 2. Jana token (kunci akses, ditunjuk SEKALI sahaja, salin terus) → 3. Suruh Claude simpan dalam .env ("Aku ada token [servis]: xxx. Tolong simpan dalam .env"). Lepas tu Claude terus boleh guna servis tu.

Servis	Fungsi	Status untuk staf
Supabase	Database + memori AI	Modul 3 — praktikal
GitHub	Simpan & jejak kod	Modul 4 — praktikal
Netlify	Hosting laman web	Modul 5 — praktikal
Cloudflare / GoDaddy	Domain & DNS	Modul 6 — faham konsep dulu

Langkah 2 — Hafal corak

Daftar → Token → Simpan .env. Boleh ulang tanpa tengok? Tick.

Modul 3 — Supabase: otak memori kekal

Bahagian 1 Modul 3 & 6: Claude lupa bila sesi baru, dan penyelesaian asas ialah nota .md. Level seterusnya: simpan ingatan dalam database Supabase dengan pgvector, Claude boleh recall ikut makna, walau beribu ingatan. Ini teknologi sama di sebalik Brain Bro Zaid & "Tanya AI" dalam POS.

Langkah 3 — Daftar Supabase & jana token

Pergi supabase.com → Sign up (percuma, tak perlu kad). Klik avatar → Account → Access Tokens → Generate new token, namakan claude-code. Salin token sbp_... tu (ditunjuk sekali je!) dan suruh Claude simpan dalam .env.

Langkah 4 — Suruh Claude bina sistem memori

Dalam Claude Code

Guna Supabase token dalam .env, buat project baru nama '[NAMA KAU] AI Brain' dan setup sistem memori pgvector. Aku nak kau boleh simpan memory dan recall memory setiap sesi. Guna embedding gte-small yang percuma.

Tukar [NAMA KAU] dengan nama sendiri. Lepas siap, test: suruh dia ingat sesuatu, tutup sesi, buka semula, tanya balik.

Nota embedding gte-small = enjin percuma terbina dalam Supabase yang tukar ayat jadi "nombor makna". Cukup untuk mula. Bila memori dah beribu & recall mula tersasar, boleh upgrade ke enjin berbayar yang lebih faham BM (OpenAI / Gemini).

Modul 4 — GitHub: bilik simpan kod

GitHub simpan kod projek di cloud. Kelebihannya: setiap perubahan direkod (boleh undo bila-bila), kod selamat walau laptop rosak, dan ramai orang (termasuk AI) boleh kerja projek sama. Semua projek Bro Zaid, POS, website, duduk kat sini.

Langkah 5 — Daftar GitHub + token, sambung ke Claude

Daftar di github.com (pilih username elok-elok, ia jadi identiti korang). Kemudian: Settings → Developer settings → Personal access tokens → Generate (scope: repo). Suruh Claude simpan dalam .env, lepas tu test: "Buatkan repo baru nama latihan-claude dan push folder latihan aku."

Modul 5 — Netlify: terbitkan laman web

Dari fail dalam laptop → URL live yang seluruh dunia boleh buka. Dalam masa seminit.

Langkah 6 — Daftar Netlify + token

Daftar di netlify.com (free tier cukup). User settings → Applications → Personal access tokens → New token. Suruh Claude simpan dalam .env.

Langkah 7 — Deploy laman pertama korang! 🚀

Ingat laporan HTML dari Bahagian 2 Latihan B? Suruh Claude: "Deploy laporan HTML tu ke Netlify, bagi aku URL live." Dalam seminit korang akan ada laman web sendiri yang boleh share. Ini moment paling syok, nikmatinya.

Modul 6 — Domain & DNS: alamat laman kau

Laman Netlify dapat URL hodoh (contoh: nama-1234.netlify.app). Untuk alamat sendiri:

Dalam dunia sebenar Sebuah bisnes boleh ada banyak subdomain atas SATU domain (pos, hr, meeting, analytics...), semuanya konsep ni. Site training ni sendiri: domain brozaidtodak.com → subdomain training → hosting Netlify.

Langkah 8 — Faham aliran domain

Boleh lukis (atas kertas pun boleh) aliran: Domain → DNS → Hosting, dengan contoh brozaidtodak.com/training? Tick.

Modul 7 — Struktur projek pro + penjagaan memori

7.1 Satu rumah untuk semua projek

Buat SATU folder induk projects/. Setiap projek = satu subfolder dengan CLAUDE.md sendiri ("otak" projek tu). Jangan bersepah atas Desktop.

Dalam Claude Code

Buatkan folder induk 'projects'. Mulai sekarang setiap projek baru, buat subfolder dalam projects/ dengan struktur kemas dan satu CLAUDE.md untuk projek tu.

7.2 planning.html, pelan yang hidup

Sebelum bina benda besar, suruh Claude buat planning.html, dokumen interaktif yang kumpulkan idea, fasa, milestone & checklist projek. Korang & AI rujuk pelan yang sama. (Bro Zaid guna teknik ni untuk semua projek besar dia.)

7.3 Jaga memori, spring cleaning

Memori pun perlu dicuci Memori & nota yang bertimbun lama-lama ada yang expired, bertindih atau bercanggah, dan AI boleh keliru dibuatnya. Sebulan sekali, suruh Claude: "Semak memori kau, buang yang dah tak relevan atau bercanggah."

Langkah 9 — Setup struktur projects/

Jalankan prompt folder induk atas ni. Pindahkan folder latihan-claude korang ke dalam projects/.

Modul 8 — Claude ↔ Google: rclone & Gmail

Dua "tangan" yang Claude guna untuk capai dunia Google: satu untuk fail, satu untuk email.

Selepas Supabase, GitHub dan Netlify, ada satu lagi dunia yang Claude boleh capai: akaun Google kita. Ada dua tangan berbeza, dan penting faham beza dia.

Definisi rclone: rclone ialah program kecil dalam terminal yang berfungsi macam kabel USB antara komputer kita dengan cloud: Google Drive, dan banyak lagi servis simpanan. Sekali dipasang dan diberi kebenaran, Claude boleh salin fail dua hala tanpa buka browser langsung.

Tangan	Kerja dia	Contoh sebenar kita
rclone	Kerja FAIL: salin turun / salin naik dari Google Drive.	Tarik foto buku dari Google Doc untuk bina site training ni; hantar backup database naik ke Drive setiap malam; salin resit ikut folder projek.
Gmail API	Kerja EMAIL: baca, cari, dan hantar email dari akaun kita.	Suruh Claude: "email invoice ni dekat akaun@syarikat.com". Claude hantar terus dari email kau, siap dengan lampiran PDF.

Cara mudah ingatFail = rclone. Email = Gmail API. Dua-dua cuma perlu approve sekali. Lepas tu Claude boleh buat kerja tu bila-bila disuruh, tak payah approve lagi.

Senario sebenar yang selalu berlaku: supplier hantar PDF invoice dalam WhatsApp, kau taip satu ayat je, "nak email invoice ni dekat akaun@syarikat.com". Claude buka kebenaran hantar email (approve sekali kat browser), lepas tu terus hantar: email kemas dengan ringkasan invoice + lampiran PDF, dari akaun kau sendiri.

Peraturan penting Kebenaran ni kuasa besar. Claude boleh hantar email atas nama kita. Sebab tu: hanya akaun bisnes rasmi, dan Claude WAJIB tunjuk kandungan email sebelum hantar kalau ia pergi ke orang luar. Untuk rekod dalaman (macam contoh invoice ke accounts). Terus hantar takpe.

Langkah 10 — Faham beza dua tangan

Boleh jawab tanpa tengok nota: kalau nak Claude ambil fail dari Google Drive, tangan mana? Kalau nak hantar laporan ke email siapa-siapa, tangan mana? Tick bila boleh.

Langkah 11 — Faham konsep "approve sekali"

Tengok balik screenshot contoh. Kenapa Claude minta approval kat browser dulu, dan kenapa lepas tu tak perlu lagi? (Jawapan: kebenaran disimpan selamat dalam vault.) Tick bila faham.

Langkah 12 — Graduasi! 🎓

Semua tiga bab habis? Korang kini rasmi jadi CLAUDERS, geng yang tahu guna AI bukan untuk borak, tapi untuk bina. Roger Bro Zaid untuk raikan & dapatkan tugasan sebenar pertama korang.

Sumber & kredit Bahagian ni diadaptasi daripada AI Training by LAN TODAK (Seksyen 03 & 04), ditulis semula dengan konteks bisnes kedai supaya senang difahami.