Bagaimana saya menggunakan ChatGPT untuk menulis bookmarklet JavaScript khusus
Coding diary: Akhir pekan ini, saya menggunakan AI untuk membuat alat bantu menulis kecil yang sangat keren yang pasti akan menghemat waktu dan klik mouse saya setiap hari. Begini caranya.
Selama beberapa bulan terakhir, kami telah meluangkan banyak waktu untuk mengeksplorasi bagaimana ChatGPT dapat membantu kami menulis kode. Pada artikel ini, saya akan memandu Anda melalui proses penggunaan ChatGPT untuk melakukan hal itu.
Sebagai bagian dari rutinitas harian saya, ada gangguan yang ingin saya atasi. Membuat referensi "Juga" di artikel ZDNET saya memerlukan banyak langkah. Untuk referensi, inilah salah satu tautannya Juga:
Melakukan hal itu memerlukan serangkaian langkah (ditunjukkan di bawah), yang ingin saya hilangkan. Saya melakukan banyak hal ini di sebagian besar artikel, dan ini tidak hanya mengganggu, tetapi juga kasar di pergelangan tangan saya.
Namun apakah mungkin, tanpa menulis satu baris kode pun, membuat bookmarklet JavaScript untuk menghilangkan gangguan ini? Bisakah non-programmer menyelesaikan proyek kecil seperti ini?
Jawabannya iya. Namun hal ini tidak secepat atau seintuitif yang Anda inginkan.
Saya mencatat setiap langkah yang saya ambil untuk menciptakan kemampuan ini dalam serangkaian entri log seperti buku harian. Saya cenderung mengerjakan proyek seperti ini dengan melakukan sedikit, mencatat pemikiran dan pengamatan saya, lalu menjauh untuk membiarkan hal itu meresap ke dalam otak saya saat mengerjakan tugas tenggat waktu lainnya. Lalu saya kembali, melakukan lebih banyak, dan menulis lebih banyak.
Dengan membaca entri log, Anda akan dapat merasakan proses pemrograman-melalui-prompting ChatGPT. Di bagian akhir, saya akan mendiskusikan wawasan apa pun yang telah membantu saya temukan dari proses tersebut.
Mari kita mulai.
Entri Log 001 - Jumat, 14:10
Jadi, saya memutuskan sudah waktunya ChatGPT menulis beberapa kode untuk saya. Ada tugas berulang yang saya lakukan sepanjang waktu, berkali-kali dalam sehari, dan inilah waktunya untuk memiliki tombol yang menghemat langkah saya. Saya akan memikirkan hal ini sambil mengerjakan artikel lain.
Entri Log 002 - Jumat, 14:45
Ternyata tidak semudah itu semua. Anda tidak bisa begitu saja meminta ChatGPT untuk "menuliskan saya tombol yang menghemat langkah". Anda sebenarnya harus bisa menggambarkan apa yang Anda ingin lakukan. Itu adalah keterampilan tersendiri.
Sekarang, untungnya, saya telah melakukan coding selama beberapa dekade, jadi saya tahu cara membuat spesifikasi dan bahkan cara mendeskripsikan apa yang saya inginkan. Saatnya berpikir. Aku akan kembali.
Entri Log 003 - Jumat, 16:02
Oke, jadi pertama-tama saya harus bisa menjelaskan apa yang saya inginkan. Setelah saya menjelaskannya, saya dapat mencoba membuat ChatGPT memberi saya kode untuk mengotomatiskan proses ini. Saya menginginkan sesuatu yang mengurangi klik yang terlibat dalam pembuatan tautan Juga kami.
Tautan itu terdiri dari beberapa elemen:
- String "Juga:". Perhatikan bahwa ia memiliki titik dua diikuti spasi
- Nama artikel, diubah menjadi hyperlink
- Semuanya dilakukan dengan huruf tebal
Kelihatannya cukup sederhana, namun berikut adalah langkah-langkah yang saya ambil setiap kali saya ingin membuat salah satunya.
- Temukan artikel yang ingin saya "Juga". Ini tidak akan saya otomatiskan, karena selalu berbeda.
- Buka halaman artikel itu. Ini juga, saya tidak akan mengotomatiskannya. Tapi saya ingin mengotomatiskan semua yang berikutnya.
- Salin judul artikel
- Beralih ke ZDNET CMS dan klik pada baris di mana saya ingin menyisipkan Juga.
- Ketik string "Juga:"
- Klik setelah "Juga:" dan pilih Tempel dan Cocokkan Gaya dari Menu Edit. Saya tidak bisa menggunakan pintasan keyboard ^V karena kalau tidak, saya akan mendapatkan font judul yang besar. Dan saya tidak bisa menggunakan pintasan keyboard Tempel dan Cocokkan Gaya karena memerlukan penekanan terlalu banyak tombol sekaligus agar dapat dilakukan dengan andal setiap saat.
- Sekarang, kembali ke artikel dan salin URL-nya.
- Beralih kembali ke CMS
- Pilih judul yang baru saja ditempel
- Ketik ^K sebagai pintasan, yang membuka dialog sisipkan tautan.
- Tempelkan URL-nya, klik OK.
- Pilih seluruh baris
- Cetak tebal teksnya.
Itu pada dasarnya adalah 11 langkah, banyak klik mouse, beberapa klik dan seret, dan banyak penekanan tombol. Saya ingin menguranginya menjadi satu klik dan satu tempel.
Entri Log 004 - Jumat, 16:57
Itu jelas merupakan gambaran proses saya, dan juga menjelaskan beberapa masalah. Tapi itu tidak mengatakan apa pun tentang apa sebenarnya yang saya inginkan dalam alat baru. Agar ChatGPT dapat menulis kodenya, ia harus mengetahui apa yang saya inginkan. Waktu yang lebih berpikir.
Entri Log 005 - Jumat, 19:12
Saya memutuskan bahwa, daripada membuat ekstensi Chrome, saya akan membuat bookmarklet JavaScript. Itu mudah untuk ditambahkan ke bilah bookmark, dan tidak memerlukan banyak kerumitan instalasi tambahan. Yang harus Anda lakukan adalah klik kanan pada bilah bookmark, pilih Tambahkan halaman, dan (1) masukkan judul. JavaScript itu sendiri akan ditempelkan ke kolom URL (2).
Inilah draf pertama dari apa yang saya ingin bookmarklet baru ini lakukan.
Saya ingin membuat bookmarklet JavaScript. Saat ditekan, ia mengambil URL saat ini dari halaman saat ini. Itu juga mengambil judul halaman. Ini menempatkan sepotong teks kaya ke dalam papan klip yang terdiri dari string "Juga:" diikuti dengan tautan teks kaya dengan judul tautan dan URL yang diambil. Seluruh blok teks kaya harus dicetak tebal.
Jika saya bisa mendapatkan ChatGPT untuk memberi saya sesuatu yang berfungsi, yang harus saya lakukan hanyalah mengeklik tombolnya, beralih ke CMS, mencari tempat saya, dan menempelkannya. Lebih cepat.
Sekarang, yang perlu kulakukan hanyalah…segalanya.
Entri Log 006 - Sabtu, 08.30
saya berani. Saya memutuskan untuk memberikan deskripsi persis di atas ke ChatGPT dan melihat apakah itu akan memberi saya kode yang berfungsi. Hei, patut dicoba.
Entri Log 007 - Sabtu, 08:41
Ya, itu sama sekali tidak berhasil. Yang dilakukannya hanyalah menyimpan apa pun yang sebelumnya ada di clipboard saya. Namun sebagian dari tanggapan ChatGPT membuat saya terdiam.
Penting juga untuk menyebutkan bahwa document.execCommand('copy') ditandai sebagai usang di browser modern (misalnya, Chrome, Firefox), karena mereka menyarankan penggunaan Clipboard API, tetapi sepengetahuan saya dihentikan pada tahun 2021, Clipboard API tidak mendukung penyalinan teks kaya ke papan klip secara langsung.
Jadi, kode yang diketahuinya mungkin sudah usang. Mari kita coba melihat apakah kita dapat menggunakan plugin ChatGPT Plus dengan plugin WebSearchG.
Yah, itu juga tidak berhasil. Alih-alih kode, saya dikirim ke situs seperti Stack Overflow untuk membaca artikel tentang cara mengelola data clipboard.
Ini tidak akan berhasil. Saya mencoba membuat ChatGPT melakukan pemrograman untuk saya. Mari kita coba Penerjemah Kode add-on ChatGPT Plus dan lihat apakah ini dapat membantu.
Entri Log 008 - Sabtu, 09:08
Itu juga tidak berhasil. Itu ditanggapi dengan:
Sayangnya, hingga pengetahuan saya terhenti pada bulan September 2021, tidak ada cara langsung dan didukung secara universal untuk menyalin teks kaya ke papan klip menggunakan JavaScript.
Tikus! Gagal lagi! Waktunya minum kopi lagi.
Entri Log 009 - Sabtu, 10:27
Saya sudah memikirkan hal ini beberapa saat (dan mengisinya dengan lebih banyak kopi). Mungkin ungkapan “didukung secara universal” perlu dibenahi. Saya mengubah baris pertama saya dari "Saya ingin membuat bookmarklet JavaScript." menjadi "Saya ingin membuat bookmarklet JavaScript di Chrome."
Mari kita lihat apa fungsinya.
Entri Log 010 - Sabtu, 10:33
Ya, tidak. Itu memberi saya kembali HTML dalam bentuk teks. Itu bukan sesuatu yang bisa langsung saya tempelkan ke CMS. Saya memerlukannya untuk mengembalikan teks kaya di clipboard.
Entri Log 011 - Sabtu, 11:20
Saya berpikir mungkin ChatGPT Plus tidak menggunakan Code Interpreter, meskipun diaktifkan. Untuk menggunakan plugin, terkadang Anda harus memberi tahu ChatGPT secara eksplisit untuk melakukannya. Mari kita coba ini sebagai kalimat pembuka saya:
Gunakan penerjemah kode untuk panggilan api browser saat ini. Saya ingin membuat bookmarklet JavaScript.
Oh ya. Itu bekerja! Coba lihat. Ini dibuat dengan satu klik di bookmarklet saya:
Entri Log 012 - Sabtu 13.04
Fakta bahwa ini berfungsi dengan baik sungguh sangat keren.
Meskipun demikian, saya tidak suka " | ZDNET" di akhir string. Jadi saya akan melihat apakah saya bisa meyakinkannya untuk menghapusnya.
Entri Log 013 - Sabtu 14:27
Makan siangnya enak. Rockfish segar yang ditangkap dari alam di sini, di Pacific Northwest. Harganya cukup murah karena merupakan hasil tangkapan lokal. Sedikit lemon dan Old Bay. Makanan otak. Dan dengan itu…
Saya berada pada titik pengambilan keputusan yang menarik. Ada tiga cara yang bisa saya lakukan.
Salah satunya adalah mencoba memodifikasi prompt asli untuk menambahkan fitur baru yang saya inginkan. Itu pilihan terbaik jika saya harus memulai sesi yang benar-benar baru.
Keuntungan dari pendekatan itu adalah ChatGPT tidak selalu memberikan hasil yang sama ketika ditanya pertanyaan yang sama. Jadi jika saya memberinya prompt yang diperpanjang, saya mungkin mendapatkan kembali sesuatu yang berhasil, saya mungkin mendapatkan kembali sesuatu yang sebagian berfungsi, atau mungkin memutuskan untuk pergi jauh dan menceritakan kepada saya judul-judul karya William Shakespeare dalam percakapan Klingon.
Pendekatan kedua adalah dengan menulis prompt yang meminta ChatGPT untuk mengubah kode yang disediakan sebelumnya dengan fitur baru. Ini akan berfungsi jika sesi masih aktif.
Pendekatan ketiga adalah memberi ChatGPT kode yang dibuat sebelumnya dan memintanya untuk melakukan perubahan. Saya suka pendekatan itu, tapi sedikit lebih berantakan.
Untuk saat ini, saya akan mencoba pendekatan kedua. Saya akan melihat apakah saya dapat meyakinkannya untuk menghilangkan string " | ZDNET" di akhir judul. Mari kita coba ini sebagai prompt:
Harap ubah kode yang dibuat sebelumnya dan hapus string " | ZDNET" di akhir judul mana pun yang ada. Jadikan fitur tersebut tidak peka huruf besar-kecil.
Oke, jadi itu merusak naskahnya. Seperti sebelumnya ketika tidak berfungsi, itu hanya menyimpan apa pun yang sebelumnya ada di clipboard saya.
Mari kita coba opsi pertama, memodifikasi prompt lengkap. Saya akan menambahkan mini-prompt di akhir prompt utama, meluncurkan sesi baru, dan melihat apakah saya mendapatkan kesenangan.
Pada percobaan pertama saya, gagal. Tapi kemudian saya tentukan saya ingin membuat "bookmarklet JavaScript untuk Chrome," dan itu berhasil!
Coba lihat. Berikut adalah dua tautan Juga yang dibuat dengan bookmarklet saya yang ditulis AI.
…Dan..
Kode terakhir
Secara fungsional, kode saya sudah lengkap. Berikut blok kode terakhir yang disediakan oleh ChatGPT:
Dan inilah prompt terakhir yang akhirnya saya gunakan. Perhatikan bahwa ini memerlukan ChatGPT Plus, GPT-4, dan add-on Code Interpreter.
Gunakan penerjemah kode untuk panggilan API browser saat ini. Saya ingin membuat bookmarklet JavaScript untuk Chrome.
Saat ditekan, ia mengambil URL saat ini dari halaman saat ini. Itu juga mengambil judul halaman. Jika judul halaman diakhiri dengan " | ZDNET" (tidak peka huruf besar-kecil), string tersebut akan dihapus dari akhir judul.
Ini menempatkan sepotong teks kaya ke dalam papan klip yang terdiri dari string "Juga:" diikuti dengan tautan teks kaya dengan judul tautan dan URL yang diambil. Seluruh blok teks kaya harus dicetak tebal.
Wawasan dan observasi
Proyek ini selesai hampir tepat 24 jam setelah saya memulainya. Tentu saja, saya tidak bekerja 24 jam. Menurut saya itu mungkin sekitar 90 menit pekerjaan sebenarnya, diselingi dengan pekerjaan lain, waktu akhir pekan keluarga, dan waktu berpikir.
Ini membutuhkan banyak pemikiran.
Saya telah menulis banyak JavaScript. Meskipun saya belum terlalu banyak berurusan dengan teks kaya, saya pasti memiliki pengalaman coding untuk menulis ini dari awal. Saya tidak hanya membutuhkan waktu 90 menit untuk menulisnya, namun saya mungkin dapat menyelesaikannya pada akhir pekan.
Pengkodean berbasis AI adalah pola pikir yang sangat berbeda. Meskipun melakukan pengkodean sendiri dan menggunakan AI memerlukan pemahaman yang sangat jelas tentang apa yang Anda ingin kode lakukan, cara membuat produk akhir sangat berbeda.
Saya sudah mengatakan ini sebelumnya, tetapi terbukti di sini: coding menggunakan AI terasa seperti mengelola programmer lain. Pengkodean adalah sintaksis dan algoritme, perpaduan pikiran antara otak saya dan sistem pengembangan saya.
Dengan kode, terutama proyek kecil seperti ini, cukup mudah untuk mengetahui mengapa ada sesuatu yang tidak berfungsi. Tapi dengan kode yang dihasilkan AI, siapa yang tahu? Ada banyak dugaan. Bahkan AI pun tidak begitu tahu. Satu menit ia akan memberi tahu Anda "tidak bisa melakukan itu", dan di menit berikutnya, ia melakukannya.
Rasanya lebih seperti bernegosiasi dengan Scotty dari Star Trek (yang selalu memberi tahu Kapten Kirk bahwa hal itu tidak dapat dilakukan atau mengutip waktu penyelesaian yang berlebihan agar nantinya dia terlihat bagus) daripada memahat kode kerja dari ASCII mentah yang diproduksi oleh setiap keyboard.
Ada beberapa tempat di mana mengetahui cara kerja kode membantu dalam menginstruksikan AI. Misalnya, saya menyuruhnya memfilter ZDNET tetapi mengabaikan huruf besar-kecil. Itu karena saya tahu kita mungkin menemukan ZDNET, ZDNet, dan mungkin format lainnya. Saya tidak bisa memberi tahu Anda berapa kali saya tersengat oleh ketergantungan kasus.
Saya juga perlu mengetahui bahwa keluaran yang dihasilkan disebut "teks kaya". Itu bukanlah sesuatu yang mungkin diketahui oleh seseorang yang tidak memiliki pengalaman pemrograman. Jadi, bagi orang seperti itu, mungkin akan lebih frustrasi jika AI menempatkan data yang benar di clipboard.
Sebagai bagian dari eksperimen ini, saya tidak akan membiarkan diri saya menyentuh kodenya. Selain menyalinnya dari ChatGPT dan menempelkannya ke bookmarklet saya, saya tidak menyentuh, memodifikasi, mengubah, atau menyempurnakan kode JavaScript.
Namun, saya mendapatkan bookmarklet yang berfungsi dan akan, tanpa diragukan lagi, menghemat waktu dan gangguan saya (dan editor saya). Dan itu sangat keren. Saya sangat bersemangat untuk memiliki fitur ini. Karena saya sering melakukan baris Juga ini, dan sangat membosankan, fitur dua klik baru ini membuat saya sangat senang. Saya akan memberikan poin ini pada bagian pengkodean ChatGPT.
Hanya saja, jangan bingung membuat ChatGPT menulis aplikasi yang sangat kecil dan tepat dengan pemikiran bahwa aplikasi tersebut dapat menangani proyek besar. Semua keterampilan manajemen proyek, spesifikasi produk, manajemen tim, produksi, dan pengujian diperlukan. Itu tidak mudah digantikan oleh AI.
Jika Anda ingin membuat sesuatu untuk Anda gunakan sendiri, lakukanlah dan beri tahu kami. Apa yang Anda minta agar ChatGPT buatkan untuk Anda? Fungsi apa yang ditawarkan bookmarklet yang dapat menghemat waktu Anda? Beri tahu kami di komentar di bawah.
Anda dapat mengikuti pembaruan proyek saya sehari-hari di media sosial. Pastikan untuk berlangganan buletin pembaruan mingguan saya di Substack, dan ikuti saya di Twitter di @DavidGewirtz, di Facebook di Facebook.com/DavidGewirtz, di Instagram di Instagram.com/DavidGewirtz, dan di YouTube di YouTube.com/DavidGewirtzTV.