Perjalanan Saya Membuat Plugin WordPress Dengan ChatGPT: 120 Jam Kerja, Tanpa Pengalaman Sebelumnya
Diterbitkan: 2024-08-28Jujur saja: Saya sebenarnya berpikir saya bisa membuat plugin WordPress dengan ChatGPT hanya dalam beberapa jam. Atau, setidaknya, itulah yang membuat saya percaya pada semua tutorial YouTube dan thread Twitter.
Tapi izinkan saya memberi tahu Anda, cerita-cerita itu tidak menyertakan beberapa detail penting – tepatnya sekitar 120 jam untuk detailnya. Ya, itulah waktu yang saya perlukan untuk membuat plugin dari awal hingga selesai: 120 jam!
Untuk konteksnya, saya tidak memiliki pengalaman sebelumnya dengan plugin atau pengembangan WordPress, namun saya memutuskan untuk tetap mendalaminya. Meskipun saya menyukai tantangan ini, ternyata tantangannya jauh lebih sulit daripada yang saya perkirakan. Di setiap langkah, saya menemui hambatan demi hambatan, yang banyak di antaranya bahkan tidak saya sadari keberadaannya. Itu membuat frustrasi, tetapi juga merupakan pengalaman belajar yang sangat – sangat besar (!).
Dengan asumsi Anda berencana mengikuti jejak saya, saya sangat menyarankan Anda untuk membaca artikel ini secara keseluruhan sebelumnya. Saya tidak mengatakan itu sebagai semacam promosi diri. Saya mengatakannya karena ini benar-benar akan menghemat waktu berjam-jam – bahkan berhari-hari – dari pekerjaan ekstra. Ada begitu banyak hal yang saya temukan dalam proses ini sehingga saya tidak tahu apakah itu penting sampai kejadiannya terjadi. Sayangnya, hal ini menyebabkan revisi kode yang tak terhitung jumlahnya (dipenuhi dengan banyak rasa frustrasi) yang sebenarnya bisa dicegah. Dengan membaca ini, Anda tidak akan mengalami masalah itu.
Ini untuk siapa dan bukan untuk 🙋♂️
Tergantung pada latar belakang dan keahlian Anda, Anda mungkin bertanya-tanya apakah Anda “cukup memenuhi syarat” untuk melakukan hal ini. Saya akan mengatakan sebanyak ini:
Meskipun Anda tidak perlu memiliki pengetahuan pengkodean apa pun, Anda harus antusias mempelajari beberapa kode dan proses umum pengembangan plugin. Ada banyak fase yang harus dilalui, dan sering kali, satu fase tidak ada hubungannya dengan fase lainnya dalam hal keterampilan (atau bahkan alat) yang Anda perlukan untuk menyelesaikannya. Singkatnya, bersiaplah untuk belajar – BANYAK .
Bergantung pada sifat plugin dan tujuan akhir Anda, Anda mungkin membutuhkan waktu satu bulan atau lebih untuk menghasilkan produk akhir.
Memiliki perhatian yang kuat terhadap detail dan mengenali pola akan sangat membantu, begitu pula mengetahui apa yang dilakukan PHP, JavaScript, dan CSS. Anda tidak perlu mengetahui cara membuat kode dengannya, tetapi memahami tujuan dan cara penggunaannya akan menjadi keuntungan.
Jika semua hal di atas tidak menggambarkan Anda – terutama kemauan untuk belajar – dan Anda sedang mencari solusi yang cepat dan mudah, maka ini bukan solusi yang tepat untuk Anda. Ini tidak cepat dan tidak mudah. Namun, hal itu mungkin terjadi jika Anda berusaha.
Jika Anda setuju dengan itu, mari kita mulai.
Fase pertama: petakan plugin Anda secara detail 📝
Pertanyaan pertama yang perlu Anda tanyakan pada diri sendiri – dan jawab – adalah jenis plugin apa yang ingin saya buat dan apa yang ingin saya lakukan?
Anda mungkin tergoda untuk terburu-buru melakukan hal ini sehingga Anda dapat mulai benar-benar membangun dan membuat kode, tetapi saya mendorong Anda untuk meluangkan waktu melakukannya. Apa yang Anda lakukan di sini akan meletakkan dasar bagi perintah Anda dan memungkinkan Anda membangun dengan cara yang terorganisir, daripada menambahkan sesuatu dengan cepat. Untuk melewati fase ini secara efektif, pertimbangkan hal berikut:
- Fungsi apa yang Anda ingin plugin Anda miliki?
- Anda ingin sisi wp-adminnya terlihat seperti apa?
- Buat wireframe atau diagram alur untuk memvisualisasikan alur kerja plugin.
- Petakan dan jelaskan hingga ke detail terkecil.
- Putuskan apakah Anda menginginkannya untuk penggunaan pribadi atau apakah Anda ingin membuatnya tersedia di repositori WordPress untuk akses publik.
Fungsi
WP-admin
Selanjutnya, pertimbangkan bagaimana Anda ingin plugin Anda muncul dan berfungsi di area admin WordPress. Ini termasuk:
- Halaman pengaturan : Opsi apa yang ingin Anda berikan? Bagaimana Anda mengaturnya?
- Menu : Dimana plugin Anda akan muncul di menu admin? Apakah akan ada submenu?
- Metabox : Jika plugin Anda berinteraksi dengan postingan atau halaman, apakah plugin tersebut memerlukan metabox khusus?
- Tabel : Jika Anda menyimpan data, bagaimana Anda menampilkannya agar dapat ditinjau oleh admin?
Dalam kasus saya, saya memilih halaman pengaturan utama dengan tab untuk setiap kode pendek saya, halaman terpisah untuk dokumentasi, dan juga halaman dengan formulir kontak jika pengguna ingin menghubungi saya. Inilah yang saya temukan:
Sayangnya bagi saya – tetapi tidak bagi Anda karena Anda sedang membaca ini – saya terlalu fokus pada fungsi front-end plugin saya selama tahap perencanaan, sehingga saya benar-benar mengabaikan sisi wp-admin.
Hal ini membuat proses ini memakan waktu lebih lama dibandingkan jika saya merencanakannya terlebih dahulu karena saya terus-menerus harus merevisi kode ketika saya menyadari bahwa apa yang saya miliki tidak lengkap atau memiliki UX yang buruk. Jika saya memetakannya terlebih dahulu, atau lebih baik lagi, jika saya menggunakan wireframe, maka fase ini akan berjalan jauh lebih lancar – yang merupakan peralihan sempurna ke poin berikutnya.
Wireframe atau diagram alur
Gabungkan semuanya dan jelaskan secara detail
Penggunaan pribadi vs akses publik melalui repositori WordPress
Ada satu keputusan lagi yang harus Anda ambil sebelum melanjutkan ke tahap kedua. Keputusan itu berkaitan dengan untuk siapa Anda akan membuat plugin ini.
Apakah Anda ingin membuatnya hanya untuk diri Anda sendiri (atau klien)? Atau, Anda ingin mengirimkannya ke repositori WordPress untuk disetujui agar tersedia untuk masyarakat umum?
Secara teknis, Anda belum perlu mengambil keputusan sepenuhnya. Namun, jika dipikir-pikir, saya berharap saya bisa melakukannya lebih awal dalam prosesnya. Oleh karena itu mengapa saya menyarankan Anda melakukannya sekarang.
Alasannya karena tujuan saya dari awal adalah mengirimkan plugin saya ke repositori, namun awalnya saya membangun plugin saya tanpa mengikuti standar pengkodean WordPress. Saya hanya fokus pada fungsionalitas dan membawanya ke titik di mana ia berfungsi tanpa bug.
Akibatnya, saya akhirnya harus melakukan banyak penyesuaian kode tambahan agar kode saya sesuai dengan standar. Tentu saja, hal ini memakan banyak waktu dan sebenarnya bisa dihindari.
Oleh karena itu, meskipun Anda berencana hanya membuat plugin untuk penggunaan pribadi, saya tetap menyarankan untuk menggunakan standar pengkodean. Ini akan mengurangi kemungkinan plugin Anda tidak berfungsi pada rilis WordPress selanjutnya. Dari segi proses, perbedaan utamanya adalah Anda tidak perlu terlalu analitis mengenai aspek non-fungsional dari standar tersebut.
Misalnya, ketika Anda membuat komentar sebaris seperti // Use global default. Anda diharuskan memberi titik di akhir. Periode tersebut tidak memiliki tujuan fungsional, namun jika tidak ada, periode tersebut akan ditandai sebagai “kesalahan” menurut standar. Untuk bangunan pribadi, Anda dapat mengabaikan “kesalahan” jenis ini.
Fase kedua: berikan ChatGPT perintah mendetail untuk memulai pengembangan 🗣️
Ide utamanya di sini adalah memberi GPT gambaran umum tentang plugin Anda dengan instruksi yang jelas. Sebagai saran umum, saya menyarankan Anda untuk menghindari mencoba membangun seluruh rumah sekaligus. Lebih baik mengambil pendekatan bata demi bata.
Katakanlah Anda membuat plugin saya sebagai contoh.
Meskipun memiliki delapan efek, saya sarankan memberi tahu GPT bahwa Anda ingin memulai dengan satu efek. Hampir seperti Anda sedang membuat plugin satu efek , bukan plugin delapan efek . Kemudian periksa untuk memastikan efeknya berfungsi – termasuk area pengaturan back end. Perbaiki bug apa pun, dan setelah semuanya terlihat bagus, tambahkan efek berikutnya. Kemudian ikuti saja proses ini, satu per satu.
Alasan melakukan hal ini dengan cara ini adalah untuk mempermudah perbaikan bug apa pun yang mungkin masuk ke dalam kode Anda seiring dengan bertambahnya kompleksitas kode Anda. Jika GPT menghasilkan semua kode Anda sekaligus dan banyak hal yang tidak berfungsi, perbaikannya akan jauh lebih sulit.
Anda tetap ingin memberi GPT gambaran umum tentang keseluruhan visi Anda untuk plugin tersebut, namun akhiri permintaan dengan berfokus pada beberapa hal spesifik terlebih dahulu.
Untuk menghemat waktu Anda, saya telah membuat contoh template yang dapat Anda berikan kepada ChatGPT untuk membantu Anda memulai.
Bagian dalam tanda kurung [X] memerlukan masukan Anda untuk diselesaikan. Anda mungkin perlu atau tidak perlu mengeditnya lebih lanjut, tergantung pada jenis plugin yang ingin Anda buat.
Jika Anda tidak memahami semua yang diminta, jangan khawatir, saya juga tidak memahaminya. Anda akan belajar sambil menjalani prosesnya.
Perintah saya 🤖
I want to build a WordPress plugin called [name] that does the following: [General overview but don't give GPT the specifics yet] I'd like it to work via [Refer back to the section "combine everything and describe it in detail" from phase one; think about how you want your plugin to function - if you're not sure, then you can delete this part] . I would also like to create a settings menu in wp-admin so that users can [Explain what you want your settings menu to look like and do, including any specific UI/UX considerations; if you create any wireframes, upload those as well] I plan on using the following tools for this process: - Docker and/or Local by Flywheel {Choose one or use both} - Terminal (MAC) {if you're using a PC, substitute with Command Prompt} - Sublime Text - Chrome and Chrome inspector tool Also, I want to use GitHub for version control to track changes and collaborate effectively. I will use the default WordPress template provided by GitHub to generate the code for the .gitignore file. However, I will need your help to walk me through how to set up a repository and how to commit my files to it. For the main PHP file, the author name should be [your name] and the author URI should be [your website if you have one] . For any code you generate, please use tabs for indentation and not spaces. {important if you plan on submitting your plugin to the WordPress repository} If you need to enqueue any scripts, please ask me questions to help me figure out whether we should use conditional loading or if we should enqueue globally. In addition, when generating CSS, please follow BEM (Block Element Modifier) methodology. Let's begin with [insert which feature you'd like to build first] Please [Optional: help me setup Local by Flywheel and then] generate the initial PHP file and advise on next steps after that.Setelah Anda memberikan perintah kepada ChatGPT, itu akan memandu Anda melalui langkah-langkah selanjutnya, yang saya uraikan di bawah. Perlu dicatat bahwa tergantung pada suasana hati ChatGPT atau keinginan Anda sendiri untuk mengikuti proses seperti yang saya jelaskan, cara saya membuat daftar semuanya mungkin tidak linier seperti yang disajikan.
Untuk memberi Anda gambaran tentang apa yang saya maksud, saya menguji sendiri perintah tersebut tiga kali berbeda. Selain membantu saya mengatur Local by Flywheel dan membuat file PHP awal, ia memilih untuk melakukan langkah-langkah lain dengan cara yang berbeda setiap kali.
Upaya pertama
Dalam upaya pertama saya, ChatGPT tidak lebih dari sekadar membuat file PHP dan memberi saya dua opsi tentang bagaimana saya ingin melanjutkan selanjutnya. Khususnya, ia mengikuti instruksi tentang memasukkan skrip dengan pemuatan bersyarat dan menyebutkannya juga.
Upaya kedua
Percobaan kedua menghasilkan file PHP yang paling sederhana, namun respon keseluruhan yang paling menyeluruh dalam hal pengerjaan langkah-langkahnya. Ia langsung menggunakan Terminal untuk menyiapkan direktori proyek dan menginisialisasi Sublime. Bahkan sampai melatih saya tentang cara mengatur repositori Git.
Upaya ketiga
Upaya ketiga agak mirip dengan upaya pertama. Meskipun, tidak seperti percobaan pertama, ChatGPT tidak menyiapkan pemuatan bersyarat untuk skrip, juga tidak menanyakan hal itu kepada saya. Itu hanya menjadikannya sebagai global secara default.
Kesimpulannya
Alasan saya menyampaikan secara singkat ketiga upaya ini kepada Anda adalah untuk tidak hanya memperkuat apa yang saya katakan sebelumnya tentang bagaimana alur kerja belum tentu distandarisasi, namun juga untuk menunjukkan bahwa perintah tersebut berlaku untuk Anda dan juga untuk GPT .
Maksud saya adalah terserah Anda untuk memperhatikan apa yang dilakukan ChatGPT – dan tidak dilakukan – dan mengembalikannya ke jalurnya jika gagal. Jadi saat Anda menjalani perjalanan ini, jangan lupa untuk merujuk kembali ke prompt dan juga petunjuk yang akan saya bagikan nanti di bagian debugging. Ingatkan dan arahkan ulang ChatGPT untuk melakukan apa yang Anda inginkan sebanyak yang Anda perlukan.
Unduh plugin saya dan ujilah 📥
Jika Anda ingin mencoba “versi kerja” plugin saya, file zipnya ada di bawah. Saya akan memperbaruinya dalam waktu dekat untuk menyertakan versi repositori WP, tetapi ini memungkinkan Anda menggunakannya untuk saat ini.
Fase ketiga: alat, skrip, direktori, dan Git 👩💻
Pada fase ini Anda akan menetapkan dasar untuk membangun plugin Anda. Di sinilah kurva pembelajaran akan meningkat dengan cepat, terutama setelah Anda menginstal skrip dan menggunakan Terminal (atau Command Prompt jika Anda menggunakan PC). Berikut rinciannya:
- Putuskan alat lingkungan lokal mana yang ingin Anda gunakan (misalnya, Lokal oleh Flywheel, Docker).
- Siapkan direktori proyek Anda.
- Instal skrip Anda (misalnya, npm, Komposer).
- Siapkan repositori Git (“repo”) dan komit (unggah) file plugin Anda ke dalamnya
Membangun lingkungan lokal
Siapkan direktori proyek
Instal skrip
Buat repositori Git (“repo”) dan komit file Anda
Setelah semua langkah sebelumnya selesai, sekarang saatnya membuat repositori Git dan memasukkan file awal Anda ke dalamnya. Langkah ini membuat gambaran titik awal proyek Anda.
Saya pribadi menggunakan GitHub karena itulah yang kami gunakan di Themeisle jadi saya sudah punya akun di sana, tetapi ada platform lain (misalnya GitLab, Bitbucket) juga. Jika Anda akhirnya menggunakan platform selain GitHub, jangan lupa untuk menyesuaikan template prompt di fase ketiga .
Agar singkatnya, saya tidak akan memandu Anda bagaimana melakukan hal ini. Setelah Anda mencapai langkah ini, ChatGPT dapat memandu Anda melalui proses langkah demi langkah, termasuk perintah apa yang perlu Anda ketik di Terminal/Command Prompt.
Saat melakukan file awal Anda, ingatlah hal-hal berikut:
- Tinjau apa yang Anda lakukan: Pastikan Anda hanya menyertakan file yang diperlukan. Gunakan file
.gitignoreAnda untuk mengecualikan file sementara atau file yang dihasilkan. - Tulis pesan komit yang jelas: Sesuatu seperti “Komitmen awal: Struktur dan konfigurasi proyek dasar” berfungsi dengan baik.
- Jangan khawatir tentang kesempurnaan: Ini hanyalah titik awal Anda. Anda akan membuat lebih banyak komitmen saat mengembangkan plugin Anda.
Sekali lagi, ChatGPT kemungkinan besar akan memberi Anda panduan tentang perintah khusus yang digunakan untuk penerapan awal ini. Jika tidak, minta saja. Pastikan untuk menulis bahwa Anda memerlukan langkah-langkah yang tepat berdasarkan pengaturan dan platform Git Anda.
Dengan menyelesaikan langkah ini, Anda secara resmi akan memulai proyek pengembangan plugin Anda dengan dasar yang kuat untuk kontrol versi. Mulai saat ini, Anda akan dapat melacak setiap perubahan yang Anda buat, bereksperimen dengan fitur baru dengan aman, dan berkolaborasi dengan orang lain jika Anda memilih untuk melakukannya.
Fase empat: waktu bermain plugin 🖱️
Dari semua fase, menurut saya fase ini dan fase berikutnya mungkin yang paling menyenangkan karena saat itulah Anda benar-benar mulai melihat semuanya bersatu. Untuk memulai, Anda ingin masuk ke instalasi WordPress lokal Anda. Jika Anda akhirnya menggunakan Local by Flywheel, caranya sangat mudah, Anda cukup mengklik tombol WP Admin di dekat kanan atas:
Jika Anda akhirnya menggunakan Docker atau alat pengembangan lokal lainnya dan tidak yakin bagaimana cara masuk ke situs Anda, tanyakan saja pada ChatGPT.
Setelah Anda masuk, aktifkan plugin Anda dengan masuk ke Plugins → Installed Plugins . Kemudian temukan plugin Anda di daftar dan klik Aktifkan :
⚠️ Penting : Jika Anda tidak melihat plugin Anda di sini, jangan panik. Kemungkinan besar ini adalah ketidakcocokan direktori, namun terlepas dari itu, Anda dapat mengetuk ChatGPT untuk membantu Anda mengetahuinya. Jika Anda masih mengalami kebuntuan setelah mencoba berulang kali dan ChatGPT tidak menyarankan Anda untuk mencoba mode debug WordPress, mintalah untuk memberi Anda cuplikan kode untuk mode tersebut. Mereka akan terlihat seperti ini:
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );Setelah Anda mengaktifkan plugin Anda, mulailah menggunakannya dan buat catatan:
- Apakah semuanya berjalan sebagaimana mestinya? Sangat tidak mungkin .
- Apa yang tidak berfungsi? Dalam hal apa itu tidak berhasil?
- Apa saja hal kecil yang Anda abaikan sepenuhnya dalam deskripsi awal yang tidak berfungsi dengan baik?
Setelah Anda membuat catatan, Anda siap untuk melanjutkan ke fase berikutnya: debugging dan linting.
Fase lima: debugging dan linting 💻
Kompleksitas plugin dan bug memiliki hubungan korelasional: semakin kompleks plugin Anda, semakin besar potensi bug . Tetapi plugin yang lebih sederhana pun memerlukan linting dan debugging.
Linting
Jika artikel ini adalah pertama kalinya Anda melihat kata “linting” dan Anda tidak yakin apa artinya, sederhananya, artikel ini memeriksa kode plugin Anda terhadap seperangkat aturan dan standar untuk jenis kode tersebut. Ini kemudian memberi tahu Anda jika ditemukan kesalahan atau ketidakkonsistenan, jalur apa yang ada, dan cara mengatasinya.
Linting cukup mudah. Pastikan Anda menggunakan alat linting yang tepat untuk jenis kode/file yang akan Anda kerjakan:
- PHP_CodeSniffer dengan Standar-Coding-WordPress untuk linting PHP.
- ESLint untuk linting JavaScript.
- StyleLint untuk linting CSS.
Untuk JavaScript, Anda mungkin juga ingin menambahkan:
- ESLint Unicorn: Lebih dari 100 aturan ESLint yang kuat.
- ESLint Promise: Berguna untuk mengelola tugas asinkron seperti panggilan API, kueri database, penanganan file, atau operasi apa pun yang memerlukan waktu untuk diselesaikan.
Men-debug
Berbeda dengan linting, proses debug sama seperti yang Anda lakukan pada fase sebelumnya, yaitu Anda menggunakan plugin sendiri, mengidentifikasi masalah yang perlu diperbaiki, lalu memperbaikinya sendiri atau meminta ChatGPT untuk membantu Anda.
Saya pribadi menemukan proses debug lebih rumit daripada linting. Salah satu alasan utamanya adalah ketika Anda lint, output dari proses linting memberi tahu Anda secara pasti apa masalahnya, dan di mana lokasi masalah tersebut dalam kode Anda. Dengan debugging, Anda tidak mendapatkan kemewahan itu. Terserah Anda dan ChatGPT untuk mencari tahu.
Namun, ChatGPT mengalami kesulitan untuk tetap fokus pada baris kode yang bermasalah, yang berarti Anda harus menjaga "siap, setel" sebelum membiarkannya "diaktifkan".
Untuk mempermudah Anda, saya menyusun daftar berbagai nasihat yang akan saya berikan kepada diri saya sendiri sebelum memulai fase debugging.
Jangan samar-samar dan jangan serahkan pada ChatGPT
Jika Anda tidak memberikan instruksi yang sangat spesifik kepada ChatGPT, itu akan mulai mengeluarkan baris kode yang tak ada habisnya kepada Anda dan sering kali kode tersebut bahkan tidak berbeda dari apa yang telah diberikannya kepada Anda. Ia ingin Anda “memeriksa ulang” apakah itu benar, tetapi yang dilakukan hanyalah membuang-buang waktu. Tidak ada yang lebih membuat frustrasi daripada ini:
Yang harus Anda lakukan adalah memberikan instruksi yang sangat spesifik kepada ChatGPT untuk tidak hanya menghasilkan kode, namun secara khusus mengisolasi baris kode mana yang diyakini menyebabkan masalah dan menunjukkannya kepada Anda. Katakan kepada perusahaan untuk menjelaskan bagaimana perusahaan berencana mengubah garis-garis tersebut dan mengapa perusahaan menganggap perubahan ini akan menyelesaikan masalah. Terakhir, mintalah pemerintah untuk memberi tahu Anda apa hasil yang diharapkan setelah perubahan ini diterapkan.
Petunjuk ini akan membantunya tetap fokus pada masalah dan meminimalkan bug limpahan yang mungkin memperbaiki satu masalah Anda namun menyebabkan masalah baru dalam prosesnya.
CSS Reguler versus BEM CSS
Terkait dengan hal di atas tetapi khusus untuk CSS, Anda harus ingat bahwa untuk cuplikan CSS apa pun, ChatGPT akan menghasilkan CSS standar, atau yang saya sebut “CSS kelas” secara default.
Ini adalah CSS dasar yang akan Anda pelajari saat mengikuti kursus pemula tentang subjek tersebut. Sangat mudah untuk memahaminya, dan secara teknis tidak ada yang salah dengan hal itu, tetapi ketika mengembangkan plugin WordPress, hal ini dapat menyebabkan konflik dengan plugin atau tema lain.
Sebaliknya, lebih baik memberitahu GPT untuk menggunakan metodologi BEM (Block Element Modifier). BEM membantu mengurangi risiko konflik CSS dengan memberikan konvensi penamaan yang jelas dan terstruktur. Hal ini memastikan bahwa gaya Anda lebih mudah diprediksi dan dikelola, karena setiap blok, elemen, dan pengubah memiliki nama kelas deskriptif yang berbeda yang meminimalkan kemungkinan dampak gaya yang tidak diinginkan. Selain itu, BEM meningkatkan kemudahan pemeliharaan dengan mempermudah menemukan dan memperbarui gaya tertentu tanpa memengaruhi gaya lainnya.
Saya sudah menyertakan penyebutan ini dalam contoh prompt di fase dua, tapi saya menyorotnya di sini agar Anda selalu ingat untuk memberikan instruksi ini ke ChatGPT untuk cuplikan CSS Anda.
Pemuatan bersyarat versus antrean global
Perilaku default lain dari ChatGPT ada hubungannya dengan skrip enqueueing. Jangan khawatir jika Anda belum mengetahui apa arti frasa ini. Yang penting adalah Anda mengenalinya dalam kode Anda saat melihatnya. Ini akan terlihat seperti ini:
function enqueue_my_scripts() { wp_enqueue_script('my-plugin-script', plugin_dir_url( FILE ) . 'js/my-script.js', array('jquery'), '1.0.0', true); } add_action('admin_enqueue_scripts', 'enqueue_my_scripts');Pada contoh di atas, kode akan mengantrekan skrip secara global untuk semua halaman admin, yang seringkali tidak diperlukan dan dapat menyebabkan masalah kinerja. Sayangnya, itulah yang akan diberikan ChatGPT kepada Anda kecuali Anda angkat bicara dan melarangnya. Untuk lebih jelasnya, dalam beberapa kasus, hal ini sebenarnya sepenuhnya tepat, namun dalam banyak kasus, hal ini tidak tepat.
Oleh karena itu, segera setelah Anda melihat ChatGPT menghasilkan kode apa pun dengan kata "enqueue", pastikan Anda membicarakannya. Tanyakan kepada ChatGPT apakah masuk akal untuk memasukkan skrip Anda secara global, atau hanya pada halaman tertentu yang memerlukan skrip – yang dikenal sebagai “pemuatan bersyarat.”
Ingatkan dan ingatkan sesering mungkin
ChatGPT cenderung pelupa dan terlebih lagi jika Anda menggunakannya untuk membuat kode. Jadi, meskipun Anda mungkin memberikan instruksi spesifik, kemungkinan dia mengikuti instruksi tersebut selama durasi proyek Anda adalah nol .
Kadang-kadang ia bahkan mengabaikan apa yang Anda minta. Jika ini terjadi, bersikaplah lebih tegas dan beri tahu bahwa ia tidak melakukan apa yang Anda inginkan:
Selain itu, dalam beberapa interaksi, ia akan dengan cepat kembali ke perilaku standarnya yaitu mencoba menenggelamkan Anda dalam sejumlah besar kode yang tidak ada hubungannya dengan bagian kode yang Anda coba debug.
Jika ini terjadi, cukup tekan tombol stop pada keluaran GPT dan ingatkan untuk mengikuti instruksi Anda. Ini juga membantu untuk menyalin dan menempelkannya ke jendela obrolan saat Anda memberikan pengingat.
Dan berbicara tentang menghasilkan baris kode yang panjang…
Hindari ChatGPT membuat ulang seluruh file untuk Anda
Jika Anda tidak terbiasa bekerja dengan kode dan merasa terintimidasi olehnya, meminta ChatGPT untuk membuat ulang seluruh file untuk Anda setelah setiap penyesuaian kode mungkin tampak menarik pada awalnya.
Yang harus Anda lakukan hanyalah “salin dan tempel”, bukan?
Walaupun terlihat menggoda, sebenarnya itu adalah ide yang buruk . Dalam jangka panjang, hal ini akan menimbulkan lebih banyak masalah bagi Anda. Anda tidak hanya akan membuang banyak waktu untuk melakukan hal ini – terutama jika Anda sedang men-debug file PHP Anda, yang bisa memakan waktu cukup lama, namun ChatGPT mungkin menimbulkan kesalahan baru pada kode yang ada dalam prosesnya. Ini akan memperbaiki masalah yang sedang Anda kerjakan, tetapi kemudian secara tidak sengaja mengubah beberapa bagian lain dari file dan merusak sesuatu.
Lebih baik mengisolasi bagian tertentu dari kode yang menyebabkan masalah dan hanya menangani bagian tersebut.
Ambillah satu bug pada satu waktu
Sejalan dengan hal di atas, meskipun Anda memiliki banyak bug – kecuali bug yang sangat kecil – hanya beri tahu ChatGPT tentang salah satunya dalam satu waktu. Perbaiki setiap bug sebelum melanjutkan ke bug berikutnya.
Perhatikan baik-baik baris cuplikan kode paling atas dan paling bawah
Saat ChatGPT memberi Anda cuplikan kode, terkadang – namun tidak selalu – merangkumnya dengan menunjukkan baris paling atas dari keseluruhan file yang sedang Anda kerjakan, dan juga baris paling bawah. Oleh karena itu, Anda perlu berhati-hati untuk tidak selalu menyalin dan menempelkan seluruh cuplikan karena ini akan membuat kode Anda rusak.
⚠️ Perhatikan baik-baik baris teratas:
Jika tidak relevan dengan cuplikan kode spesifik yang Anda coba debug, abaikan saja.
Hal yang sama berlaku untuk keuntungannya, meskipun hal ini mungkin lebih sulit dikenali. Terkadang bisa sesederhana seperti }); yang menyebabkan kode Anda rusak karena menutup cuplikan induk yang belum dimaksudkan untuk ditutup.
Setelah beberapa saat, Anda akan menjadi lebih baik dalam memahaminya, tetapi ketika Anda memulai perjalanan pengembangan plugin, jika Anda melihat banyak hal yang rusak setelah Anda menambahkan cuplikan, coba hapus baris terakhir itu untuk melihat apakah itu “secara ajaib ” memperbaiki semuanya.
Konsol adalah teman terbaik Anda
Jika ChatGPT mencoba men-debug masalah yang sama namun tidak berhasil dan Anda mendapati diri Anda berputar-putar, mintalah untuk menambahkan baris console.log ke bagian kode yang diyakini menyebabkan masalah. Kemudian buka konsol saat Anda membuat ulang bug. Ini akan menjelaskan apa yang terjadi. Anda kemudian dapat mengambil screenshot penjelasan ini dan memberikannya ke ChatGPT sehingga dapat mengetahui cara memperbaikinya.
Untuk mengakses konsol di Google Chrome, klik kanan pada halaman dan pilih Inspect :
Jika konsol tidak memberikan jawaban, periksa database Anda
Konsolnya luar biasa dan sering kali memberikan jawaban yang Anda butuhkan. Namun, pada beberapa kesempatan, ini hanya akan mengkonfirmasi apa yang Anda alami, tetapi tanpa benar-benar memberi Anda arahan apa pun tentang cara memperbaikinya.
Misalnya, ketika saya mencoba menambahkan efek pengetikan ke plugin saya, kecepatan pratinjau default efek di wp-admin disetel ke 23 milidetik. Saya menghabiskan banyak waktu untuk merevisi file PHP dan JavaScript saya untuk mencoba memperbaiki masalah ini, tetapi tidak berhasil.
Konsol mengkonfirmasi bahwa itu dimuat pada 23, tetapi lebih dari itu, itu tidak memberi saya informasi berharga lainnya:
Akhirnya, saya memeriksa database, dan menyadari bahwa nilai yang salah berasal dari sana:
Saya mengganti 23 ke 60, yang saya inginkan, dan itu memecahkan masalah.
Jika Anda akhirnya menggunakan Local by Flywheel, Anda dapat mengakses database Anda dengan mudah melalui antarmuka dengan mengklik tab Database:
Setelah Anda mendapatkan akses, tempat yang baik untuk mulai mencari adalah tempat yang sama seperti yang Anda lihat pada tangkapan layar di atas: wp_options. Seringkali pengaturan plugin Anda akan ditemukan di sana.
⚠️ Namun, penting juga untuk menunjukkan bahwa masalah mendasar yang lebih besar di sini adalah kode saya sebenarnya tidak memiliki petunjuk aktivasi. Saat plugin Anda pertama kali diaktifkan, plugin tersebut akan memeriksa apakah ada pengaturan tertentu di database. Jika tidak, plugin Anda harus menambahkannya dengan nilai default yang Anda inginkan. Ini memastikan bahwa setiap instalasi baru plugin Anda dimulai dengan pengaturan yang benar. Saya mempelajarinya dengan cara yang sulit sehingga Anda tidak perlu melakukannya.
Sebuah topik baru dapat memberi Anda terobosan
Seiring bertambahnya kode Anda dan thread Anda dengan ChatGPT semakin panjang, maka akan rentan terjadi kesalahan atau kelupaan. Pada titik tertentu, ada baiknya untuk memulai thread baru. Unggah file plugin utama Anda ke thread baru dan jelaskan kepada ChatGPT apa yang Anda lakukan dan di mana Anda tinggalkan.
Berikut ini contoh prompt yang dapat Anda gunakan:
Saya sedang mengerjakan debugging plugin WordPress dengan Anda di thread lain tapi menurut saya threadnya terlalu panjang dan Anda mulai bingung. Mari kita mulai dari awal.
Lihatlah file plugin di sini dan mari kita coba memecahkan masalah [deskripsikan bug Anda] .
Selain itu, dan ini SANGAT PENTING, ketika membuat cuplikan kode versi baru dalam upaya memecahkan masalah, mohon jangan hanya membuat cuplikan tersebut, tetapi juga berikan penjelasan tentang baris mana yang Anda ubah dari yang sudah ada. Selain itu, jelaskan alasan di balik perubahan tersebut, dan apa yang dapat kami harapkan dari perubahan yang Anda buat.
[Jika membuat CSS, jangan lupa ingatkan ChatGPT untuk mengikuti metodologi BEM (Block Element Modifier).]
Jangan takut untuk menggunakan otak Anda
Semakin kompleks plugin Anda, semakin besar potensi GPT mengacaukan kode Anda. Meskipun ini membantu Anda melakukan debug, terkadang Anda akan merasa lebih baik mencari solusi sendiri. Sejujurnya, hal ini cukup sering terjadi pada saya, terutama pada tahap akhir pembangunan saya di mana file PHP utama saya telah bertambah hingga lebih dari 500 baris (dengan versi yang lebih baru melebihi 1.000).
Tergantung pada keakraban dan kenyamanan Anda dengan membaca kode, hal ini bisa menjadi penghalang, namun jika Anda mahir dalam pengenalan pola dan menemukan ketidakkonsistenan maka Anda bisa melakukannya.
Saya jelas bukan programmer yang terampil, meskipun saya memiliki pemahaman tentang apa yang dilakukan berbagai bahasa pemrograman dan beberapa keakraban dengan kode, yang membantu saya.
Namun, meskipun Anda seorang pemula, Anda dapat melihat baris kode yang menurut GPT mungkin menyebabkan masalah. Kemudian temukan elemen identik dalam kode Anda yang berfungsi dengan baik. Bandingkan kodenya dengan kode elemen yang rusak dan coba lihat apa bedanya. Seringkali hal ini akan menyelesaikan masalah:
Simpan cadangan file plugin Anda (opsional jika menggunakan Git)
Meskipun menggunakan Git memberikan cara yang ampuh untuk mengelola dan mengembalikan perubahan pada kode Anda, menyimpan cadangan manual juga merupakan ide yang baik. Setiap kali Anda mencapai tonggak sejarah dengan kode Anda, saya sarankan menyimpan salinan file kode utama Anda di folder lain:
Ini dapat berfungsi sebagai jaring pengaman tambahan, memungkinkan Anda dengan mudah kembali ke versi sebelumnya yang lebih baik jika Anda menemukan bug serius saat terus membangun.
Jangan mudah menyerah, namun ketahuilah batas kemampuan Anda
Mungkin ada beberapa fungsi atau penyesuaian yang tidak dapat Anda terapkan, sekeras apa pun Anda mencoba. Bersiaplah untuk menyesuaikan ekspektasi Anda dan mengatasinya . Ini tidak berarti menyerah jika Anda menemui jalan buntu. Namun, ini berarti bahwa jika Anda telah melakukan 100 kali percobaan dan menghabiskan waktu berjam-jam (atau berhari-hari) untuk mencapai sesuatu namun tidak berhasil, maka hal tersebut mungkin tidak mungkin dilakukan atau di luar kemampuan Anda dan ChatGPT.
Terakhir, jika Anda bertanya-tanya apakah Anda harus melakukan debug atau lint terlebih dahulu, menurut pemahaman saya, tidak ada jawaban yang jelas. Saya telah melakukan debug sebelum melakukan linting, namun Anda dapat memilih preferensi ChatGPT secara default saat Anda menjalani prosesnya, atau memberi tahu proses mana yang ingin Anda lakukan terlebih dahulu.
Fase enam (opsional): pengujian 🔬
Jika Anda membuat plugin yang relatif sederhana dan yakin dengan fungsinya berdasarkan pengujian manual Anda sendiri, maka Anda tidak perlu mengambil langkah ini. Saya mengatakan itu karena masih memerlukan banyak pekerjaan untuk mengkode pengujian ini, dan dengan cara yang sama Anda tidak akan mendapatkan plugin yang berfungsi dengan ChatGPT, Anda juga tidak mungkin mendapatkan pengujian fungsional tanpa adanya bug.
Sederhananya, ada trade-off antara investasi waktu dan nilai praktis .
Berdasarkan pengalaman saya sendiri, saya berhasil membuat satu pengujian yang memeriksa apakah plugin saya dapat menjalankan fungsi utamanya saat pengguna berinteraksi dengannya – tetapi saya memerlukan waktu seharian penuh untuk melakukan debugging!
Dari sudut pandang praktis, saya telah memeriksa fungsionalitas plugin saya secara manual, tetapi senang melihat bahwa tes tersebut mengonfirmasi bahwa semuanya berfungsi.
Jika Anda akan mencoba membuat plugin yang lebih kompleks daripada yang saya lakukan, atau jika fungsi plugin Anda akan terfokus pada bagian belakang (di mana Anda tidak dapat memeriksa secara manual apakah plugin berfungsi atau tidak), maka luangkan waktu untuk melakukannya menjalankan tes dengan benar sepadan dengan kerja manual.
Jenis tes
Alat yang perlu dipertimbangkan
Tahap tujuh (opsional): kirimkan plugin Anda ke repositori WordPress 🥳
Jika Anda berhasil mencapai titik ini, maka Anda telah berhasil mendaki gunung plugin pepatah. Satu-satunya hal yang perlu dilakukan adalah menanam bendera Anda agar bergabung dengan 59.650 plugin lainnya di repositori WordPress.
Itu memiliki prosesnya sendiri yang terpisah, yang disertai dengan daftar periksa di halaman Tambahkan plugin Anda:
- Baca Pertanyaan Umum.
- Patuhi semua Pedoman Pengembang Plugin.
- Pastikan Anda memiliki izin untuk mengunggah plugin Anda ke WordPress.org agar orang lain dapat menggunakan dan membagikannya.
- Plugin Anda, termasuk semua perpustakaannya, dan aset lain yang disertakan dilisensikan sebagai GPL atau kompatibel dengan GPL.
- Anda melakukan pengujian putaran terakhir dengan plugin Plugin Check , dan Anda menyelesaikan semua masalah yang terindikasi (tidak termasuk apa yang menurut Anda merupakan positif palsu).
Pemeriksaan Plugin (PCP)Versi Saat Ini: 1.1.0
Terakhir Diperbarui: 28 Agustus 2024
plugin-periksa.1.1.0.zip
Anda mungkin berpikir bahwa setelah semua debugging, linting, dan pengujian yang Anda lakukan, plugin yang mereka minta untuk Anda gunakan tidak akan menangkap apa pun. Namun, sebagai pengembang plugin pemula, Anda mungkin masih memiliki beberapa masalah yang belum terselesaikan – terutama jika Anda tidak menghapus file pengujian dari build Anda sebelum menjalankan pemeriksaan.
Untuk melanjutkan, buka Alat → Pemeriksaan Plugin :
Kemudian centang kelima kategori dan jalankan pemeriksaan:
Anda kemudian dapat menyampaikan masalah yang belum terselesaikan tersebut ke ChatGPT dan menyelesaikannya. Setelah selesai, jalankan pemeriksaan lagi untuk memastikan hasil yang bersih. Lakukan sebanyak yang Anda perlukan. Setelah Anda mendapatkan pemeriksaan yang benar-benar bersih (tidak termasuk positif palsu), Anda dapat mengirimkan plugin Anda ke tim pengembangan WordPress. Kemudian tunggu dengan sabar sampai mereka meninjaunya.
Pikiran terakhir 🧠
Meskipun membangun plugin dengan ChatGPT merupakan proses yang menyenangkan dan bermanfaat, ini bukanlah proses yang cepat. Anda perlu mengeluarkan banyak keringat untuk membuat produk akhir yang berfungsi dengan baik. Namun pada akhirnya, Anda akan menghargai semua keterampilan baru yang akan diajarkan oleh proyek ini kepada Anda.
Berikut beberapa hal yang saya pelajari (dan Anda mungkin juga):
- Saya belajar cara menavigasi hard drive saya menggunakan perintah Terminal dan juga mempelajari perintah lain yang terkait dengan proses pembuatan plugin.
- Saya sekarang cukup nyaman dengan Docker dan Local by Flywheel, keduanya belum pernah saya gunakan sebelum percobaan ini.
- Saya juga akrab dengan banyak alat pengembang dan skrip yang saya bahkan tidak pernah tahu keberadaannya sebelumnya.
- Saya pernah mengikuti beberapa kelas di Free Code Camp dan Codecademy, dan meskipun keduanya bagus, saya merasa mendapat lebih banyak pengetahuan langsung dengan menyelesaikan proyek ini.
- Terkait dengan hal di atas, saya sekarang memiliki banyak informasi pengkodean acak yang akan berguna jika saya mengerjakan hal serupa lagi.
- Kesenjangan antara plugin nol hingga plugin yang berfungsi jauh lebih kecil daripada kesenjangan antara plugin yang berfungsi dan plugin siap pengiriman. Saya menyelesaikan versi plugin saya yang berfungsi dalam beberapa hari, tetapi perlu beberapa minggu lagi sebelum saya mengerjakan semua penyesuaian agar cukup baik untuk dikirimkan ke repositori WordPress.
Secara keseluruhan, ini adalah salah satu kegiatan paling keren yang pernah saya lakukan dalam waktu yang lama. Terima kasih telah meluangkan waktu untuk membaca. Jika Anda akhirnya menggunakan informasi ini untuk membuat plugin pertama Anda, silakan beri saya komentar di bawah. Saya ingin melihat hasil akhir Anda.