Menggunakan Ferret

Proyek dan URL

Proyek adalah sebuah folder (biasanya root repo Anda). Setiap proyek menyimpan URL-nya sendiri, sehingga lingkungan local, dev, dan production hanya berjarak satu klik.

#Menambahkan proyek

  1. Pilih File → Buka Folder Proyek… (⌘O / CtrlO), Tambah Proyek di sidebar, atau Tambah Proyek… di menu proyek pada bilah judul.
  2. Pilih asal proyek:
    • Di komputer ini: pilih folder.
    • Clone dari GitHub / GitLab: pilih salah satu repositori Anda (didaftar melalui login gh atau glab Anda) atau tempel URL, pilih folder induk, lalu Ferret akan meng-clone dan membukanya.
    • Buka lewat SSH: pilih host dari ~/.ssh/config. Terminal dan agent berjalan di mesin remote; tinjauan tetap tersimpan di komputer ini.

Nama bawaannya adalah nama folder. Menambahkan folder yang sudah terdaftar akan membukanya (path dibandingkan tanpa membedakan huruf besar-kecil di macOS dan Windows). Dari menu sidebar, Anda bisa memilih Ganti Nama untuk proyek atau Hapus dari Daftar. Menghapus dari daftar tidak pernah menghapus foldernya.

Terminal dibuka di folder proyek, dan tinjauan disimpan di bawah <project>/.ferret/.

#Menyimpan URL

  1. Buka halamannya di browser bawaan.
  2. Klik + (Simpan URL saat ini) di toolbar browser. URL saat ini sudah terisi.
  3. Masukkan Nama lalu klik Simpan.

Setiap URL tersimpan memiliki jenis di Yang ditinjau: Aplikasi (aplikasi yang sedang Anda bangun), Desain (Figma, Penpot, Canva, prototipe) atau Dokumen / spesifikasi (Google Docs, Notion, Confluence, spesifikasi Markdown di GitHub, PDF). Jenisnya ditebak dari URL dan bisa Anda ubah. Lihat Meninjau desain dan dokumen, bukan hanya kode.

Hanya URL http:// dan https:// yang diterima. Untuk URL aplikasi, jika Anda membiarkan nama sesuai saran, nama ditebak dari host-nya:

HostNama
localhost, 127.*, ::1, 0.0.0.0, *.localhostlocal
mengandung dev, develop, developmentdev
mengandung stg, stage, stagingstg
lainnyaprd
URL tersimpan di toolbar browser
URL tersimpan di toolbar browser

#Panel target tinjauan

Berpindah target tinjauan dan halaman tanpa menghentikan rekaman.

Dalam mode Umpan Balik, panel Target tinjauan di kanan mencantumkan semua yang bisa Anda tinjau untuk proyek saat ini. Berpindah target tidak menghentikan rekaman. Tampilkan atau sembunyikan panel dengan Tampilan → Tampilkan/Sembunyikan Target Tinjauan (⌘⇧K / CtrlShiftK) atau Sembunyikan panel.

  • Target: URL tersimpan milik proyek. Di bawah masing-masing ada pohon halaman yang pernah Anda kunjungi di situs tersebut. Situs yang Anda kunjungi tetapi tidak tersimpan muncul sebagai grup tersendiri.
  • File: folder proyek. File dibuka sebagai pratinjau (Markdown dan Mermaid dirender, teks lain hanya-baca), sehingga Anda juga bisa meninjau dokumen. Ikon pensil (Buka di editor) membukanya di editor.

Filter target menyaring target, halaman, dan file sekaligus, dengan pencocokan fuzzy yang sama seperti Buka File…. Di dalam daftar, ↑ ↓ Enter atau 1–9 berpindah target. Buka URL… membuka URL sekali pakai, dan Simpan ke URL proyek menyimpannya.

Target berasal dari projects[].urls di settings.json (lihat contohnya). Setiap entri memerlukan url, launchCommand (dijalankan di terminal, misalnya untuk memulai aplikasi desktop), atau windowMatch (jendela yang direkam), dan dapat memiliki purpose (app, design atau doc). Memilih target jendela akan menjadikannya sumber perekaman, jadi tidak bisa dilakukan saat sedang merekam. Halaman yang dikunjungi diingat per proyek, hanya di mesin ini (hingga 200).

#Membuka dan berpindah lingkungan

Klik URL tersimpan untuk membukanya. Jika halaman saat ini berada di bawah URL tersimpan lain, Ferret mempertahankan path, query, dan hash, lalu hanya mengganti origin-nya. Misalnya, di http://localhost:3000/pricing?plan=pro, mengklik prd akan membuka https://example.com/pricing?plan=pro.

Chip yang cocok dengan halaman saat ini (prefiks terpanjang) disorot. Klik kanan chip atau gunakan ikon pensilnya untuk mengedit atau Hapus. Saat proyek dibuka dan belum ada URL sebelumnya, URL tersimpan pertamanya akan dimuat.

Chip dikelompokkan menurut jenis: URL aplikasi lebih dulu, lalu desain, lalu dokumen, dengan pemisah dan ikon untuk setiap jenis. Berpindah ke atau dari desain atau dokumen akan membuka URL tersimpannya apa adanya, tanpa membawa path.

#Meninjau desain dan dokumen, bukan hanya kode

Umpan balik tidak harus tentang kode. Apa pun yang terbuka di browser bawaan bisa direkam dan ditandai dengan pena dengan cara yang sama: desain Figma atau Penpot, prototipe, spesifikasi di Google Docs atau Notion, dokumen desain di GitHub, PDF. Simpan URL tersebut ke proyek sebelum tinjauan, di samping local dan dev.

  1. Buka Edit Proyek… dari menu sidebar (atau klik + di toolbar browser), lalu Tambah Target.
  2. Tempel URL-nya. Tautan figma.com menjadi Desain, dan tautan docs.google.com atau notion.so menjadi Dokumen / spesifikasi, dengan nama Figma atau Spec. Ubah jenisnya di Yang ditinjau jika tebakannya salah (misalnya prototipe di server Anda sendiri).
  3. Buka target tersebut dan masuk sekali di browser bawaan jika situsnya memerlukannya. Browser menyimpan cookie-nya antar peluncuran, sehingga Anda tetap masuk.
  4. Rekam seperti biasa: bicara, tunjuk, dan gambar di atas desain atau dokumen.

Temuan yang direkam pada desain atau dokumen diberi label jenis tersebut di Temuan dan di feedback.md, dan instruksi yang dikirim ke agent juga menyebutkannya. Agent lalu mengubah desain atau dokumen, bukan kode:

  • Jika dokumennya ada di dalam proyek (spesifikasi Markdown, ADR), agent mengedit file tersebut.
  • Jika agent tidak bisa mengeditnya (file Figma, Google Doc), agent menandai temuan itu sebagai Pertanyaan agent beserta perubahan persis yang perlu dibuat, sehingga Anda bisa menerapkannya atau meneruskannya.

Contoh: saat membaca spesifikasi harga di Google Docs, Anda melingkari tabel paket dan berkata "paket Pro sekarang 9.800 yen, bukan 8.800". feedback.md mencantumkan temuan tersebut di bawah target Spec dengan Kind: document, dan agent menjawab dengan kalimat yang sudah dikoreksi untuk spesifikasi, alih-alih menyentuh kode halaman harga. Rekam spesifikasi dan aplikasi yang berjalan dalam rekaman yang sama, maka temuan dipisahkan per target, sehingga agent bisa memperbarui spesifikasi lebih dulu, lalu kode yang mengimplementasikannya.

Halaman yang tidak tersimpan di figma.com, docs.google.com, notion.so dan host serupa juga dikenali. File di folder proyek (Markdown, Mermaid) ditinjau dari daftar File di panel Target tinjauan.

Bantu terjemahkan halaman ini di GitHub (terbuka di tab baru)