Paling banyak satu email per minggu. Berhenti kapan saja dengan satu klik.
Transkrip
Narasi lengkap video ini. Kalimat yang sedang diucapkan disorot saat video diputar; klik kalimat untuk melompat ke sana.
Tampilkan transkrip
Pembuka
Halo, selamat datang kembali. Landing page Kopi Senja sudah tayang di komputer Raka, dan Laras punya permintaan baru. Seperti website sungguhan, halaman ini akan terus bertambah dan sesekali bermasalah. Di episode ini kita menambah dua fitur, lalu belajar melaporkan dan memperbaiki bug bersama Claude dengan cara yang rapi dan teruji.
Langkah 1: Fitur pertama: penanda buka atau tutup
Permintaan pertama Laras: pengunjung langsung tahu kedai sedang buka atau tidak. Raka menulisnya dengan jelas, termasuk jam buka, teks, dan warnanya. Claude menjelaskan caranya: membuat file baru bernama script yang membaca jam di perangkat pengunjung, lalu menambahkan tempat penanda di halaman. File script berisi JavaScript, yaitu perintah kecil yang dijalankan browser. Kalau index adalah isi halaman dan style adalah tampilannya, script adalah bagian yang membuat halaman bisa bereaksi. Lalu Claude mengubah file index, menambah dua baris. Kotak perubahan menunjukkan dua baris hijau di bawah judul. Baris pertama adalah tempat penanda bernama status buka. Baris kedua menyambungkan halaman ke file script. Hanya tambahan, tidak ada baris merah, dan letaknya tepat di bawah judul. Raka memilih Yes, begitu juga untuk file script yang ditanyakan sebelumnya. Sebelum lanjut, Raka ingin paham apa yang baru saja disetujuinya. Ia meminta Claude menjelaskan isi file script per bagian, dengan bahasa sederhana. Claude membaca file itu lebih dulu. Membaca tidak perlu izin. Penjelasannya terdiri dari tiga bagian. Pertama, mengambil jam dari perangkat pengunjung. Kedua, membandingkannya dengan jam buka. Ketiga, menuliskan penanda hijau atau abu-abu. Claude juga memberi catatan jujur: jam diambil dari perangkat pengunjung, jadi kalau jam di HP-nya salah, penandanya ikut salah. Keterbatasan seperti ini penting diketahui sebelum fitur tayang.
Langkah 2: Fitur kedua: tombol WhatsApp melayang
Setelah fitur pertama selesai, barulah Raka meminta fitur kedua: tombol WhatsApp bulat yang selalu tampil di pojok kanan bawah. Satu perintah untuk satu fitur membuat perubahan mudah dibaca. Claude menambahkan satu baris tombol di file index, yaitu bagian isi halaman. Lalu sembilan baris di file style untuk mengatur posisinya: tetap menempel di pojok kanan bawah walaupun halaman digulir. Raka menyetujui kedua perubahan setelah membaca nama filenya. Ringkasannya menyebut tiga hal, termasuk bahwa tujuan tombol mengikuti aturan WhatsApp di CLAUDE.md. Aturan yang kita catat di episode sebelumnya kini terpakai tanpa perlu diingatkan. Raka membuka halaman di browser. Saat itu pukul sepuluh lewat lima belas, dan penanda hijau bertuliskan buka sekarang tampil di bawah judul. Raka menggulir ke bawah, dan tombol WhatsApp tetap ada di pojok. Ia mengekliknya, dan WhatsApp usaha terbuka. Terakhir, Raka memeriksa bagian lama: menu, harga, dan warna tidak berubah. Kebiasaan ini penting, karena fitur baru kadang merusak bagian yang sebelumnya sudah benar.
Langkah 3: Bug datang: melaporkan dengan jelas
Beberapa hari kemudian, Laras mengirim pesan WhatsApp. Pukul delapan tiga puluh pagi ia membuka website di HP, dan penandanya bertuliskan sedang tutup. Padahal kedai sudah buka sejak pukul delapan. Laras juga menambahkan detail berharga: pukul sembilan ia cek lagi, dan tulisannya sudah benar. Inilah bug, yaitu kesalahan pada program yang membuat hasilnya tidak sesuai harapan. Raka berterima kasih, karena laporan Laras sangat lengkap. Perhatikan catatan di kiri: dicek jam berapa, seharusnya apa, dan apa yang terjadi. Dari pesan Laras, kita bisa belajar empat unsur laporan bug. Pertama, apa yang dilakukan: membuka website di HP. Kedua, apa yang diharapkan: tampil buka sekarang. Ketiga, apa yang terjadi: tampil sedang tutup. Tulis persis seperti yang terlihat di layar, jangan diringkas menjadi kata error. Keempat, kapan dan di perangkat apa: pukul delapan tiga puluh di HP, sedangkan pukul sembilan sudah benar. Unsur keempat ini sering terlupa, padahal justru petunjuk paling kuat. Bandingkan dengan laporan samar seperti websitenya error. Kalimat itu tidak menyebut bagian mana yang salah, sedangkan laporan jelas langsung menyebut apa yang tampil. Laporan samar juga tidak punya petunjuk waktu. Laporan jelas menyebut bahwa pukul sembilan sudah benar. Akibatnya berbeda jauh. Dengan laporan samar, Claude harus menebak-nebak dan bisa mengubah bagian yang tidak bermasalah. Dengan laporan jelas, penyebabnya cepat ketemu.
Langkah 4: Mencari penyebab, lalu memperbaiki
Raka menyalin keempat unsur laporan Laras ke Claude Code, lalu menambahkan permintaan penting: cari penyebabnya dan jelaskan dulu, jangan ubah apa pun. Claude membaca file script, tempat aturan jam buka ditulis. Penjelasannya mudah dipahami. Kode memeriksa apakah jam lebih dari delapan, bukan mulai dari delapan. Akibatnya, pukul delapan sampai delapan lewat lima puluh sembilan dianggap tutup. Itu sebabnya pukul sembilan sudah benar. Penjelasan ini cocok dengan petunjuk dari Laras. Raka menilai masuk akal, lalu mengizinkan perbaikan. Kotak perubahannya kecil sekali. Tanda lebih dari diganti menjadi lebih dari atau sama dengan. Satu tanda saja, tetapi dampaknya satu jam penuh setiap pagi. Raka memilih Yes. Karena penyebabnya sudah dijelaskan lebih dulu, ia benar-benar paham apa yang disetujuinya. Perbaikan belum selesai sebelum diuji. Raka meminta Claude menguji empat jam di sekitar batas jam buka, lalu melaporkan hasilnya. Claude menjalankan uji kecil, dan hasilnya empat dari empat sesuai harapan. Mari lihat rinciannya. Pertama, pukul tujuh lima puluh sembilan: sedang tutup. Benar, karena kedai belum buka. Kedua, pukul delapan tepat: buka sekarang. Inilah kasus yang tadinya salah, kini sudah benar. Ketiga, pukul delapan malam lewat lima puluh sembilan: masih buka sekarang. Keempat, pukul sembilan malam tepat: sedang tutup. Bug sering bersembunyi di batas seperti ini, jadi selalu uji tepat di batasnya, bukan hanya di tengah jam buka.
Langkah 5: Simpan versi dan kebiasaan baik
Semua lolos uji, jadi Raka menyimpan versi baru dengan catatan yang jelas: dua fitur baru dan perbaikan bug jam delapan. Kotak izin muncul karena ini menjalankan perintah. Raka membaca isinya, yaitu menyimpan versi baru dengan git, lalu memilih Yes. Riwayat proyek kini punya dua catatan. Bila suatu saat fitur baru menimbulkan masalah, kita tahu persis versi mana yang masih aman. Mari rangkum kebiasaan baiknya. Pertama, satu fitur untuk satu perintah, supaya perubahan mudah dibaca dan mudah dibatalkan. Kedua, periksa bagian lama setiap kali menambah fitur. Fitur baru tidak boleh merusak yang sudah berjalan. Ketiga, minta penjelasan penyebab sebelum memperbaiki bug. Kalau penjelasannya tidak masuk akal, jangan setujui perbaikannya. Keempat, uji tepat di batas nilai, seperti jam buka dan jam tutup, atau batas gratis ongkir dua ratus ribu yang akan kita temui di episode berikutnya. Kelima, simpan versi setelah lolos uji. Tampilan di video ini simulasi, tetapi kebiasaan ini berlaku untuk proyek apa pun, termasuk milik Anda.
Selesai!
Website Kopi Senja kini punya penanda buka atau tutup dan tombol WhatsApp melayang. Kita juga memperbaiki bug jam delapan dengan melaporkan, memahami penyebab, memperbaiki, lalu menguji di batas jam. Di episode berikutnya kita membuat formulir pesanan yang menghitung total dan ongkir otomatis, lalu mengirim pesanan ke WhatsApp Kopi Senja. Sampai jumpa!
Latihan mandiri
Kerjakan sendiri setelah menonton supaya materinya benar-benar melekat.
Tambahkan satu fitur kecil ke halaman Anda, satu perintah untuk satu fitur
Tulis satu laporan bug dengan empat unsur: dilakukan, diharapkan, terjadi, perangkat
Minta Claude menjelaskan penyebab sebelum memperbaiki, lalu uji di batas nilai
Tanya materi kelas
Ketik pertanyaan atau kata kunci; kami carikan bagian episode ini yang menjelaskannya dan lompatkan videonya ke sana.
Catatan saya
Catatan disimpan bersama menit video saat ini dan hanya terlihat oleh Anda.
Tanya jawab
Bingung di salah satu langkah? Tanyakan di sini; pengajar dan peserta lain bisa menjawab.
Belum ada pertanyaan.
Pengajar
Tim Cerdas Inovasi Digital
Pengembang software, engineer BIM & 3D, dan praktisi AI
53 kelas video1.286 episode
Sehari-hari kami mengerjakan software, model BIM, game, dan otomasi AI untuk klien, lalu menjadikan pengalaman praktik itu kelas langkah demi langkah: setiap langkah diperlihatkan di layar dan dilengkapi panduan PDF.
