Labs Feed

Untuk hari keempat, kita setup authentication. Saya plan nak tunjuk step by step cara setup authentication ni, tapi rupanya dengan model macam GPT-5.3-Codex atau Claude Opus 4.6, kita simply bagitau je authentication jenis apa kita nak guna, dan lepas tu AI akan buat semua, 5 minit dah boleh siap.

Kita cuma kena faham, zaman sekarang ada 2 kategori authentication.

1. 100% dekat code kita. Tak perlu integrate dengan servis luar. Yang ni, AI boleh buatkan semua sampai siap.
2. Code kita + perlu integrate dengan servis luar. Yang ni, AI akan buatkan dekat part code kita, lepastu kita perlu setup API key, callback dan sebagainya dekat servis luar. Tapi jangan risau sebab untuk buat benda ni, AI boleh guide kita step by step.

2 kategori authentication

Kategori 1 — Buat sendiri, tak perlu servis luar

Sebenarnya dalam kategori ni, satu je pilihan yang betul-betul standalone.

Email & Password — user daftar guna email dan password, semua data simpan dalam database kita sendiri. Tak ada pihak ketiga terlibat langsung. AI akan buatkan semua dari form registration, login, sampai reset password sekali.

Kategori 2 — Perlukan servis luar

OAuth (Google, Apple, Facebook) — user tekan butang "Login with Google", diaorang masuk guna akaun Google sedia ada. Kita tak perlu simpan password langsung. Untuk setup, kita perlu create credentials dekat Google Console atau platform berkenaan.

OTP — user masukkan nombor telefon atau email, dapat kod 6 digit, guna kod tu untuk login. Kalau OTP via SMS, kita perlu servis seperti Twilio. Kalau via email, kita perlu email provider seperti Resend.

Magic Link — lebih kurang sama dengan OTP tapi instead of kod, user dapat link terus dalam email. Klik je terus masuk. Pun perlu email provider.

Passkeys / Biometric — user login guna fingerprint atau Face ID. Cara paling moden sekarang, tapi masih baru jadi tak semua platform support lagi.

SSO (Single Sign-On) — satu login untuk akses banyak sistem sekaligus. Ni lebih sesuai untuk app B2B atau syarikat. Kalau buat app untuk orang ramai, boleh skip dulu.

Perbandingan Semua Jenis Authentication

Tips untuk Vibe Coder

Kalau baru start dan tak tahu nak pilih yang mana, ikut je panduan ni:

• Baru belajar / projek simple → Email & Password. Paling straightforward, AI boleh buatkan sampai habis tanpa kena setup apa-apa luar.
• Nak user experience yang smooth → Tambah OAuth (Google login). Ramai user prefer ni sebab tak perlu buat akaun baru.
• App yang handle duit atau data sensitif → Tambah OTP atau Magic Link sebagai verification step.
• Nak paling moden → Passkeys. Tapi prepare untuk handle edge case kalau user guna device lama.
• Buat app untuk syarikat / B2B → SSO. Kalau tidak, skip dulu.

Untuk platform all-in-one yang paling senang nak start, cuba Clerk atau Supabase Auth — dua-dua ada dokumentasi yang mesra pemula dan support hampir semua jenis auth dalam satu tempat.

Untuk projek ni, saya guna Email & Password sebab paling straightforward dan tak perlu setup apa-apa dekat luar. Sesuai untuk kita yang nak fokus belajar flow authentication dulu tanpa distract dengan benda lain. Kemudian saya tambah Google Auth sebab berdasarkan pengalaman, ramai user prefer cara ni.

Salah satu masalah yang mesti anda jumpa bila nak buat webapp ialah: macam mana nak dapat data?

Contohnya:
- App compare harga kereta → perlukan data model, harga, spec, gambar
- App cari restoran halal → perlukan data restoran, lokasi, menu, gambar

Ramai orang stuck dekat sini sebab tak tahu cara yang sesuai. Ada yang spend masa berbulan-bulan buat crawler yang super complex, padahal data dia cuma 20 items je. Ada yang manual copy paste 5000 items sebab tak tahu ada cara lain yang lebih senang.

Hari ni kita breakdown 4 cara untuk dapatkan data, bila nak guna mana satu, dan macam mana nak decide.

1. API
2. Web crawling
3. AI-assisted
4. Manual input

1. API (Cara Paling 'Proper')

Apa itu API? API macam pintu belakang yang owner data sediakan untuk developer ambik data mereka secara teratur. Contohnya Twitter ada API untuk ambik tweets, Google Maps ada API untuk ambik location data.

Ada dua jenis API yang anda patut tahu:

Official API - Company sendiri yang provide. Twitter API, Google Maps API, Stripe API, YouTube API. Kalau website besar biasanya ada official API.

Unofficial API - Third party yang buat. Macam apify.com, dekat sini ada macam-macam API yang orang dah buat, kebanyakannya perlu bayar untuk guna.

Bila nak guna API ni?

Guna bila website tu ada provide API. Senang cerita, check dulu ada ke tak. Kalau ada, guna je. Jangan complicated kan.

API ni bagus sebab data tersusun (biasanya format JSON), reliable sebab company maintain, dan legal sebab official permission. Tapi downside dia, ramai charge (free tier limited), dan ada rate limits. Contohnya cuma boleh guna 10 kali sehari je.

Tips untuk API:

1. Bagitau je dekat Claude Code / Codex / Cursor / Antigravity API apa yang anda nak guna.
2. Kalau tak jadi, bagi link documentation API tu sekali.
3. Kalau tak jadi jugak, copy paste je documentation tu terus bagi dekat dia.

2. Web Crawling (Cara Power User)

Okay ni cara yang lebih advanced. Crawling ialah automated process untuk baca website dan extract data yang anda nak. Macam anda buka 1000 pages manually, tapi ada code yang buat.

Ada beberapa tools yang popular:

Beautiful Soup - Paling simple untuk start, Python based. Bagus untuk static websites yang tak banyak JavaScript. Saya sendiri guna ni untuk simple scraping sebab senang.

Selenium & Puppeteer - Ni lagi power sebab boleh kawal browser sebenar. Boleh handle JavaScript websites yang complex. Kelemahan dia slow sikit. Kebanyakan anda tengok AI agent yang boleh buka website, klik sana sini tu guna tool ni la.

Bila nak guna crawling?

Guna bila anda perlukan data yang banyak, website tak ada API, dan data yang perlu selalu update. Sebab crawling ni akan ambil masa untuk setup, jadi perlu make sure proses tu berbaloi.

Kelemahan crawling:

• Website boleh detect dan block kalau anda crawl terlalu agresif
• Structure website boleh berubah bila-bila masa → code anda mungkin perlu diupdate selalu
• Dari segi legal, sebenarnya ini grey area → cek terms of service dulu sebelum mula

Satu lagi yang penting - respect website owner. Kalau dia clearly tak bagi orang crawl, jangan buat.

3. AI-Assisted (Cara Paling Underrated)

Ni cara yang paling underrated dan saya paling suka guna untuk quick validation. Dengan AI tools sekarang, anda boleh dapat data dengan cepat tanpa coding. Perfect untuk MVP atau one-time setup.

Tools yang anda boleh guna:

ChatGPT Deep Research - Dia akan search web untuk anda, compile information, dan buat format yang baik. Super powerful untuk research-heavy data.

Gemini dengan Search - Google punya AI, ada live search. Free tier pun permurah.

Grok - X punya, bagus untuk real-time data atau trending info.

Macam mana nak guna?

Senang je. Minta je AI research dan format data untuk anda. Contoh prompt:

"Saya nak buat car comparison app. Tolong research dan listkan semua model Proton yang current (2024-2025) dengan details:
- Model name
- Starting price (RM)
- Engine type
- Fuel type
- Key features (list)

Output dalam format JSON supaya senang copy paste ke dalam database."

AI akan research, compile, format. Anda copy paste je.

Bila nak guna AI ni?

Guna cara ni bila anda perlukan kurang daripada 50 item, untuk setup sekali sahaja, quick validation, atau data yang memang mudah jumpa secara online. Jangan guna untuk ribuan item sebab tak scalable. Dan sentiasa verify data yang penting — AI kadang-kadang boleh tersalah.

Contoh sebenar dari projek saya: Untuk BeliKereta, saya perlukan data semua model Proton. Mula-mula cuba crawl, tapi tak jadi. Lepas tu guna ChatGPT Deep Research, dapat semua data dalam masa lebih kurang 10 minit. Copy paste masuk Codex, minta dia simpan dalam database, settle.

Tips:
* Spesifik dengan format output yang anda nak
* Minta AI tunjuk sumber supaya boleh verify
* Pecahkan request besar kepada bahagian kecil
Jangan minta 100 item sekaligus, buat sikit-sikit.

4. Manual Input (Kadang-kadang paling sesuai)

Ini option paling basic, tapi dalam banyak situasi, ini sebenarnya paling praktikal.
Manual input maksudnya anda copy-paste atau type sendiri data ke dalam sistem.

“Eh manual? Bukannya slow ke?”
Ya, memang slow. Tapi ada masa manual ni pilihan paling betul.

Bila nak guna manual?

Kurang daripada 10 item
Nak setup crawler untuk 10 item? Overkill.

Data sangat kritikal
Kalau ketepatan data sangat penting, manual lebih selamat. Contoh: harga untuk dokumen legal, info kesihatan, data kewangan.

Testing MVP
Nak validate idea cepat? Masukkan dulu 5–10 sample item secara manual. Kalau idea jadi, baru automate.

Data unik
Data yang anda je ada, tak ada online. Contoh: portfolio sendiri, team anda, produk anda.

Ramai developer buang masa optimize benda yang tak perlu optimize. “Saya nak buat crawler untuk 5 produk.” Tak perlu pun sebenarnya, copy paste je. 10 minit settle. Jangan over-engineer.

Tips untuk manual input:
- Kumpulkan semua data dulu dalam Google Sheets atau Excel
- Lepas tu bagi file tu dekat AI coding tools anda
- Minta AI buatkan admin page supaya senang untuk anda betulkan mana-mana data yang tak tepat

Macam Mana Nak Pilih Cara Dapatkan Data?

Flowchart ni ialah framework ringkas untuk bantu anda decide cara paling sesuai nak dapatkan data untuk webapp anda:

Untuk hari ketiga, kita buat data scraping atau bahasa yang lebih baik ialah data collection.

Untuk micro SaaS kita ni, data yang kena ada ialah:
- detail pasal model kereta
- harga
- features
- gambar

Mula-mula saya try minta Codex untuk scrape je data dari website Proton, tapi tak berjaya, dapat hasil yang mengarut. Mungkin sebab website ni ada some kind of protection untuk halang crawler.

Lepastu apa yang saya buat:
1. Buka page untuk setiap model kereta dalam website Proton
2. Right click → View page source
3. Save HTML untuk setiap model dekat folder projek
4. Minta Codex kumpul data dari setiap page tu

Cuma masih ada data yang tak complete, macam harga etc. So untuk yang ni:
1. Saya guna ChatGPT Agents
2. Minta dia listkan semua data yang perlu
3. Copy output Agent tu
4. Paste dekat Codex
5. Minta dia simpan semua data, settle

Tapi workflow saya ni sesuai kalau produk anda tak perlu banyak data sangat, dan data yang anda perlukan pun available secara meluas. Kalau anda nak build something yang perlukan banyak data, contohnya anda nak buat app untuk bandingkan harga makanan, perlu guna cara lain macam guna API atau buat crawler. Strategi dia ialah boleh bincang dengan AI apa teknik yang sesuai berdasarkan keperluan anda.

Hari ni saya nak share 2 teknik untuk pilih idea pertama yang anda patut build, dan 2 jenis idea yang patut anda elakkan.

Sepanjang 2023–2025, saya dah launch beberapa projek dalam zaman AI.
Ada yang berjaya, ada yang gagal. Itu normal.

Contohnya:
- Aurel → AI writing tool, tapi gagal sebab model AI baru keluar dan tool tu terus tak relevan.
- TenderKit → platform cari tender, dapat 10,000 page views bulan pertama, tapi saya stop sebab saya sendiri tak minat bidang tu.
- LimauLabs & Hundrads → masih jalan sampai sekarang, sebab dua-dua ni berkait dengan kerja harian saya.

Daripada situ, saya nampak dua teknik penting untuk pilih idea pertama:

1. Selesaikan masalah anda sendiri
Kalau anda sendiri hadap masalah tu, anda lebih faham sama ada produk tu betul-betul berguna atau tidak.

2. Fokus pada niche problems
Masalah kecil pun tak apa.
Biasanya syarikat besar takkan sempat nak buat benda yang terlalu niche, jadi peluang untuk anda lebih besar.

Dan dua jenis idea yang saya sarankan elakkan:

1. Marketplace
Marketplace perlukan modal besar sebab ada “chicken and egg problem”:
- Bisnes tak nak masuk kalau tak ada pelanggan
- Pelanggan tak nak datang kalau tak ada bisnes

Kena grow dua-dua side serentak, itu memang susah.

2. Idea nak lawan platform besar
Contohnya nak buat “TikTok versi kita sendiri”.
Bisnes macam ni level billion-dollar. Kalau buat secara part-time atau solo, memang susah nak lawan.

Ringkasnya:
- Mulakan dengan masalah anda sendiri
- Pilih niche yang jelas
- Elakkan marketplace dan idea yang lawan platform besar

Tonton video ni untuk cerita penuh:

Untuk hari kedua, kita setup database & file storage.
Dengan bantuan AI dan pengalaman yang ada, saya spend masa tak sampai 30 minit pun untuk buat kedua-dua benda ni.

Apa itu database?

Memori untuk projek web/app kita.
Contohnya dekat webapp kita ni, kita guna database untuk simpan:
- Detail kereta
- Detail sales advisor
- Dan data lain-lain

Database apa nak guna?

Sebenarnya boleh guna apa-apa sahaja.

Satu je tips untuk zaman AI ni:
Pilih database yang dah established dan ramai orang guna.

Sebab:
- Lagi ramai orang guna → lagi banyak discussion online
- Lagi banyak discussion → AI lagi faham sistem database tu

Biasanya vibe coders suka guna Supabase.
Okay juga sebab ada free tier yang pemurah.

Tapi saya dah biasa guna MongoDB (walaupun ramai kritik itu ini), jadi saya decide untuk stick dengan MongoDB. Ni lagi satu tips untuk orang yang nak build dengan cepat, stick dengan apa yang anda tahu, explore apa yang anda tak tahu kalau perlu je. Tak perlu terpengaruh dengan apa orang lain cakap.

Macam mana nak setup?

Minta je AI setup. Seriously.

Tapi kena faham:
- AI takkan boleh buat semua
- Ada part yang anda kena setup sendiri
Cara paling mudah:
1. Minta AI bagi guide permulaan
2. Ikut step yang AI bagi
3. Bila stuck, screenshot page tu
4. Hantar dekat AI dan minta clarify

Ikut je step by step apa yang AI tu bagitau, biasanya memang jadi. Kalau tak jadi juga, boleh komen dekat bawah.

Take note ya yang tak semua app perlu database. Database cuma perlu kalau anda nak simpan data. Let’s say anda cuma nak buat loan calculator contohnya, tak perlu database pun.

File Storage

Seterusnya kita masuk ke file storage.

Apa itu file storage?

Tak semua benda sesuai untuk simpan dekat database. Contohnya kalau kita nak simpan video, gambar, audio, pdf dan lain-lain, kita perlukan file storage. Dekat database kita, kita cuma simpan link/url ke aset2 ni.

Contohnya dekat app kita ni, kita perlukan file storage untuk simpan video & gambar kereta, gambar dari sales advisor dan juga pdf brochure kereta.

Perlu ke file storage?

Perlu kalau web/app yang anda nak bina ada banyak aset macam yang saya beritahu tadi. Kalau cuma ada beberapa gambar, video, file, tak perlu pun. Boleh je simpan sebagai static file dalam folder projek anda.

Contoh file storage

Antara yang popular ialah Cloudflare R2 (free & bagus). Kalau anda pengguna Supabase, boleh guna Supabase bucket (free 1GB). Untuk projek ni, saya guna DigitalOcean Spaces sebab saya dah biasa guna.
Sama macam database, stick dengan apa yang anda dah tahu, explore benda yang anda perlu tahu je.

Macam mana nak setup file storage?

Sama sahaja dengan database tadi, tak perlu pening-pening. Minta je AI tolong setupkan, lepastu proses yang anda kena buat sendiri minta AI tolong guide. Memang ini je yang saya sendiri buat. Zaman dah berubah, kalau kita masih nak guna cara lama, baca documentation etc. memang kita akan ketinggalan.

Sebelum kita mula build apa-apa, sebenarnya ada satu step penting yang ramai orang skip: validate idea dulu.

Kalau anda build sebab nak solve masalah sendiri, boleh je terus build, boleh skip video ni.
Tapi kalau niat nak jual, idea tu kena make sure dulu logik atau tak.

Dalam teori bisnes, orang selalu cakap: “Talk to your customer.”
Masalahnya, tak semua orang ada akses kepada target market mereka.

Jadi dalam eksperimen ni, saya tunjuk satu cara mudah untuk brainstorm dan validate idea guna AI.
Bukan sebab AI tu confirm betul, tapi untuk dapat point of view yang berbeza dan nampak kelemahan idea kita lebih awal.

Dalam video ni saya share:
- Macam mana saya guna custom prompt untuk buat AI lebih straightforward
- Cara “berbincang” dengan AI sampai jumpa idea yang lebih realistik
- Step seterusnya sebelum kita mula build

Detail penuh ada dalam video, join PandaiTech Labs untuk tonton.

Harini saya spend dalam 3 jam untuk projek ni. Sejam untuk brainstorm dengan AI, dan 2 jam untuk build. Baru siap satu page je, tapi page-page seterusnya nanti lagi senang sebab kita akan minta AI ikut je design language yang sama.

Tengok video untuk cerita penuh.

Ramadhan tahun lepas, kami lancarkan LimauLabs. Alhamdulillah terjual lebih 1000+ copy di Malaysia dan Indonesia. Masa tu, kami cuma fokus build dan jual secara senyap.

Tahun ni, kami nak ubah cara. Kami wujudkan PandaiTech Labs sebab nak kongsi proses behind-the-scenes—bukan sekadar tunjuk hasil akhir.

Eksperimen pertama: Bina & Promote Micro SaaS guna AI sepenuhnya.

Apa itu Micro SaaS?
Ia software simple yang selesaikan satu masalah spesifik. Kali ni, niche pilihan kita: Sales Advisor Kereta.

Ideanya simple: Platform untuk Sales Advisor Kereta
Masalah sekarang, ramai ejen tak ada website sendiri. Jadi kita nak buat platform di mana mereka boleh ada website lengkap (catalog, spec, loan calculator dan pelbagai feature lain) semudah isi nama, nombor phone dan pilih template.

Ini bukan kelas 'vibe coding' semata-mata. Ini adalah eksperimen untuk kita find out: Boleh ke idea simple + AI + execution pantas ni buat duit bulan puasa nanti?

Saya akan update progress eksperimen ni kat sini secara berkala. Kita tengok jadi ke tak.

Tapi kalau anda berminat nak tengok strategy, coding workflow, dan numbers secara detail, pendaftaran keahlian PandaiTech Labs (RM50/bulan) akan dibuka Isnin ni.

Stay tuned.