Cara Membuat Website dengan OpenAI Codex: Workflow dari Repository ke Preview

OpenAI Codex adalah coding agent untuk membantu memahami dan mengubah codebase. Dokumentasi OpenAI saat ini mencantumkan beberapa cara penggunaan, termasuk Codex app, CLI, dan integrasi IDE/cloud tertentu. Antarmuka, paket, batas penggunaan, serta ketersediaan dapat berbeda menurut akun dan wilayah. Gunakan halaman produk/dokumentasi terkini untuk memilih pintu masuk; jangan menyamakan agent Codex dengan API model atau perintah CLI bernama serupa.

Mulai dari ticket yang bisa diuji

Contoh: website katalog studio foto memerlukan halaman paket, form permintaan jadwal, dan navigasi mobile. Sebelum memakai agent, jelaskan apa yang sudah ada, halaman mana yang disentuh, hal apa yang di luar scope, serta bukti bahwa tugas selesai. Jika repository punya instruksi `AGENTS.md`, baca dan ikuti.

Task: tambah section paket foto di halaman layanan yang sudah ada.
Tujuan: pengunjung membandingkan 3 paket lalu membuka WhatsApp dengan nama paket terisi.
Batas: gunakan komponen dan gaya project; jangan ubah homepage, metadata global, analytics, atau dependency. Harga placeholder harus tetap dilabeli [ISI HARGA].
Selesai jika: tampilan responsif, tiga CTA punya nomor placeholder, tidak ada link mati, dan build yang ada lolos.
Sebelum edit, laporkan file yang akan disentuh dan informasi yang belum tersedia. Jangan commit atau deploy.

Pilih antarmuka yang sesuai pekerjaan

Nama dan ketersediaan antarmuka dapat berubah. Buka panduan OpenAI Codex sebelum mengikuti tutorial lama; jangan menganggap setiap paket menyertakan cara pakai dan batas yang sama. Codex bekerja pada codebase, jadi developer tetap menentukan apakah perubahan sesuai arsitektur dan kebijakan proyek.

App, CLI, dan cloud mengubah konteks operasional

Sebelum menjalankan task, konfirmasikan repository, branch/worktree, serta environment yang sedang aktif. Interface yang bekerja di cloud mungkin tidak melihat service lokal atau file yang belum disimpan, sedangkan CLI lokal dapat membaca file dalam folder kerja dan menjalankan command yang tersedia di shell. Jangan menyalin prompt persetujuan terminal secara refleks: baca path dan efek command, terutama untuk penghapusan, perubahan database, atau publikasi.

Untuk website, beri Codex konteks desain yang sudah digunakan: komponen, route, token, konten yang telah disetujui, dan komponen yang tak boleh disentuh. Minta file delta yang diperlukan dan alasan tiap perubahan. Jika task hanya mengubah artikel, batas eksplisit terhadap homepage, konfigurasi global, dan halaman komersial membantu agent menjaga scope. Review hasil tetap harus mengecek konsistensi konten dan struktur metadata.

Bila memakai worktree, berikan task yang dapat ditutup dalam satu branch: satu bug atau satu section, bukan target samar “selesaikan semua SEO”. Bandingkan status sebelum dan sesudah task. Jika build gagal karena kegagalan yang sudah ada, simpan output baseline agar jangan keliru mengaitkan masalah itu dengan Codex. Minta ringkasan file, perubahan perilaku, sisa asumsi, dan langkah menjalankan preview sebelum menggabungkan hasil.

Jangan menyimpan ukuran keberhasilan hanya sebagai “assistant menjawab selesai”. Kriteria yang lebih baik mencatat file yang berubah, perubahan perilaku yang tampak, command yang berhasil dijalankan, dan pemeriksaan yang masih perlu dilakukan manusia. Untuk website, tinjau title/H1/canonical ketika konten dibuat, dan pastikan teks yang dirender tidak hanya tersedia setelah client-side event.

Pada task yang menyentuh banyak halaman, minta daftar route yang terdampak dan buka minimal satu route representatif sebelum menggabungkan hasil.

Simpan task yang berhasil sebagai template internal bersama batas keamanan dan format laporan review. Template membuat workflow tim lebih konsisten meskipun operator Codex berbeda.

Alur kerja yang menjaga perubahan tetap terbaca

1. Buka repository yang benar dan simpan perubahan lokal; periksa status serta branch.
2. Minta ringkasan arsitektur dan rencana file sebelum tugas berisiko.
3. Kerjakan satu fungsi atau halaman dan setujui batasannya.
4. Baca diff, cek teks, link, responsivitas, metadata, dan perilaku yang berubah.
5. Jalankan script build/check yang digunakan repository dan pahami kegagalan.
6. Uji preview, lalu siapkan deployment melalui workflow tim setelah review.

Prompt untuk meninjau perubahan sebelum menerima

Tinjau diff tugas ini terhadap kriteria penerimaan. Jangan membuat perubahan baru. Laporkan: file di luar scope, asumsi isi yang tidak berasal dari brief, risiko secret/security, aksesibilitas keyboard, tautan/CTA yang belum bisa diuji, dan pemeriksaan lokal yang tersedia. Pisahkan blocker dari saran opsional.

Dari preview lokal ke deploy

Jalankan perintah yang tercatat pada `package.json` atau dokumentasi repo—contohnya server development Next.js—bukan tebakan agent. Pastikan environment lokal tidak memakai production data. Build lokal memberi bukti kompilasi untuk konfigurasi yang diuji, tetapi tidak membuktikan DNS, email, payment, browser semua perangkat, atau indexing Google berfungsi.

Sebelum publish, cek branch yang akan dideploy, secret yang disimpan pada host, domain, HTTPS, redirects, sitemap, error log, dan rollback. Jangan memasukkan API key ke source frontend. Bila site memproses lead, lakukan tes dengan alamat dan data simulasi lalu pastikan pesan benar-benar diterima oleh tujuan yang ditetapkan.

Batasan dan biaya penggunaan

Codex merupakan bagian dari produk ChatGPT pada paket yang berlaku, dan batas penggunaan dapat berbeda menurut paket, fitur, task, dan beban. Harga yang tertera pada situs OpenAI dapat berubah dan tidak selalu menggambarkan pajak atau ketersediaan regional. Periksa halaman pricing resmi saat merencanakan penggunaan rutin; jangan mengasumsikan semua pekerjaan agent tidak terbatas atau bahwa pembelian API memberi akses antarmuka yang sama.

• Agent bisa salah memahami instruksi dan menghasilkan kode yang lolos build namun salah secara produk.
• Repository besar perlu petunjuk scope dan konteks yang spesifik.
• Perubahan dependencies, database, auth, atau file config layak ditinjau ekstra.
• Fitur yang tersedia dalam app/CLI/cloud dapat berbeda dan berubah; ikuti docs yang sesuai dengan interface aktif.

Codex membantu mempercepat pekerjaan yang dapat dijelaskan dan diperiksa. Ia tidak menggantikan keputusan pemilik konten, reviewer, atau proses deployment. Jika ingin memahami perbedaan gaya agent, lihat Codex vs Claude Code; untuk menghasilkan potongan awal tanpa repository, baca cara membuat website dengan ChatGPT.

Sumber: OpenAI Developers — Learn Codex

Sumber: OpenAI — Codex

Sumber: OpenAI Help Center — ChatGPT plans and Codex