Özel bir JavaScript yer imi yazmak için ChatGPT'yi nasıl kullandım?
Kodlama günlüğü: Bu hafta sonu, bana her gün kesinlikle zaman kazandıracak ve fare tıklamalarından tasarruf sağlayacak çok güzel küçük bir yazma yardımcısı oluşturmak için yapay zekayı kullandım. İşte nasıl.
Geçtiğimiz birkaç ay boyunca ChatGPT'nin kod yazmamıza nasıl yardımcı olabileceğini araştırmaya çok zaman ayırdık. Bu makalede size tam da bunu yapmak için ChatGPT'yi kullanma sürecini anlatacağım.
Günlük akışımın bir parçası olarak ele almak istediğim bir sıkıntı var. ZDNET makalelerimde "Ayrıca" referanslarını oluşturmak bir dizi adım gerektirir. Referans olması açısından işte böyle bir Ayrıca bağlantısı:
Bunu yapmak, ortadan kaldırmak istediğim bir dizi adımı (aşağıda gösterilmektedir) gerektirir. Çoğu makalede bunlardan birçoğunu yapıyorum ve bu sadece sinir bozucu değil aynı zamanda bileğimi de zorluyor.
Ancak bu sıkıntıyı ortadan kaldırmak için tek bir satır gerçek kod yazmadan bir JavaScript yer imi oluşturmak mümkün müdür? Programcı olmayanlar bunun gibi küçük projeleri başarabilir mi?
Cevap Evet. Ancak istediğiniz kadar hızlı veya sezgisel değil.
Bu yeteneği oluşturmak için attığım adımların her birini bir dizi günlük benzeri günlük girişine kaydettim. Bunun gibi projeler üzerinde biraz çalışarak, düşüncelerimi ve gözlemlerimi kaydederek, sonra diğer son teslim tarihi ödevleri üzerinde çalışırken bunların beynime süzülmesine izin vererek çalışma eğilimindeyim. Sonra geri dönüyorum, biraz daha yapıyorum ve biraz daha yazıyorum.
Günlük girişlerini okuyarak, ChatGPT'nin istem yoluyla programlama süreci hakkında fikir edinebileceksiniz. Sonunda, sürecin keşfetmeme yardımcı olduğu içgörüleri tartışacağım.
Başlayalım.
Günlük Girişi 001 - Cuma, 14:10
Bu yüzden ChatGPT'nin benim için bazı kodlar yazmasının zamanının geldiğine karar verdim. Gün içerisinde defalarca yaptığım, tekrarlayan bir görev var ve artık adım atmamı sağlayacak bir düğmeye sahip olmanın zamanı geldi. Başka bir makale üzerinde çalışırken bunun üzerinde düşüneceğim.
Günlük Girişi 002 - Cuma, 14:45
Her şeyin o kadar da kolay olmadığı ortaya çıktı. ChatGPT'ye öylece "bana adımları kaydetmemi sağlayacak bir düğme yaz" diyemezsiniz. Aslında ne yapmak istediğinizi açıklayabilmeniz gerekir. Bu başlı başına bir beceridir.
Neyse ki onlarca yıldır kod yazıyorum, bu yüzden nasıl bir spesifikasyon oluşturulacağını ve hatta ne istediğimi nasıl tanımlayacağımı biliyorum. Düşünme zamanı. Geri döneceğim.
Günlük Girişi 003 - Cuma, 16:02
Tamam, öncelikle ne istediğimi tarif edebilmem gerekiyor. Bunu açıkladıktan sonra gidip ChatGPT'nin bu süreci otomatikleştirmek için bana kod vermesini sağlayabilirim. Ayrıca bağlantılarımızı oluştururken gereken tıklamaları azaltacak bir şey istiyorum.
Bu bağlantı birkaç unsurdan oluşur:
- "Ayrıca:" dizesi. İki nokta üst üste ve ardından boşluk geldiğini unutmayın
- Bir makalenin adı, köprüye dönüştürüldü
- Tamamı kalın harflerle yazılmıştır
Yeterince basit görünüyor, ancak bunlardan birini her yapmak istediğimde attığım adımlar burada.
- "Ayrıca" yapmak istediğim makaleyi bulun. Her seferinde farklı olduğu için bunu otomatikleştirmeyeceğim.
- O makalenin sayfasına gidin. Bunu da otomatikleştirmeyeceğim. Ancak takip eden her şeyi otomatikleştirmek istiyorum.
- Makalenin başlığını kopyalayın
- ZDNET CMS'ye geçin ve Ayrıca eklemek istediğim satıra tıklayın.
- "Ayrıca:" dizesini yazın
- "Ayrıca:" seçeneğini tıklayın ve Düzen Menüsü'nden Stili Yapıştır ve Eşleştir'i seçin. ^V klavye kısayolunu kullanamıyorum çünkü aksi takdirde büyük bir başlık yazı tipiyle karşılaşacağım. Ayrıca Yapıştır ve Stili Eşleştir klavye kısayolunu kullanamıyorum çünkü her seferinde güvenilir bir şekilde yapmak için çok fazla tuşa aynı anda basmak gerekiyor.
- Şimdi makaleye geri dönün ve URL'yi kopyalayın.
- CMS'ye geri dönün
- Az önce yapıştırılan başlığı seçin
- Bağlantı ekleme iletişim kutusunu açan kısayol olarak ^K yazın.
- URL'yi yapıştırın ve Tamam'ı tıklayın.
- Tüm satırı seç
- Metni kalın yazı tipiyle yazın.
Bu temelde 11 adımdan, bir dizi fare tıklamasından, bir miktar tıklama ve sürükleme işleminden ve bir dizi tuşa basmadan oluşur. Bunu tek tıklama ve tek yapıştırmaya indirmek istiyorum.
Günlük Girişi 004 - Cuma, 16:57
Bu kesinlikle benim sürecimin bir açıklamasıydı ve aynı zamanda birkaç sorunu da anlatıyor. Ancak yeni bir araçta tam olarak ne istediğime dair hiçbir şey söylemiyor. ChatGPT'nin kodu yazabilmesi için ne yapmasını istediğimi bilmesi gerekiyor. Daha fazla düşünme zamanı.
Günlük Girişi 005 - Cuma, 19:12
Bir Chrome uzantısı yerine bir JavaScript yer imi yapmaya karar verdim. Bunları yer imi çubuğuna eklemek kolaydır ve çok fazla ekstra kurulum zorluğu gerektirmez. Tek yapmanız gereken yer işareti çubuğuna sağ tıklayıp Sayfa ekle'yi seçmek ve (1) başlığı girmek. JavaScript'in kendisi URL alanına (2) yapıştırılır.
İşte bu yeni yer iminin yapmasını istediğim şeyin ilk taslağı.
Bir JavaScript yer imi oluşturmak istiyorum. Basıldığında geçerli sayfanın geçerli URL'sini alır. Ayrıca sayfanın başlığını da alır. Panoya "Ayrıca:" dizesinden ve ardından bağlantının başlığını ve alınan URL'yi içeren zengin metin bağlantısından oluşan bir parça zengin metin yerleştirir. Zengin metin bloğunun tamamının kalın harflerle yazılması gerekir.
ChatGPT'nin bana işe yarayan bir şey vermesini sağlayabilirsem tek yapmam gereken düğmeye tıklamak, CMS'ye geçmek, yerimi bulmak ve yapıştırmak. Çok daha hızlı.
Şimdi yapmam gereken tek şey... her şey.
Günlük Girişi 006 - Cumartesi, 08:30
Ben cesurum. Yukarıdaki açıklamanın tamamını ChatGPT'ye aktarmaya ve bana işe yarayan kodu verip vermeyeceğini görmeye karar verdim. Hey, denemeye değer.
Günlük Girişi 007 - Cumartesi, 08:41
Bu kesinlikle işe yaramadı. Yaptığı tek şey daha önce panomda olanı tutmaktı. Ancak ChatGPT'nin yanıtının bir kısmı beni biraz duraklattı.
Ayrıca, Clipboard API'sinin kullanılmasını önerdikleri için document.execCommand('copy') dosyasının modern tarayıcılarda (ör. Chrome, Firefox) eski olarak işaretlendiğini, ancak 2021'deki bilgi kesintiminden itibaren Clipboard API'sinin kullanıldığını belirtmek de önemlidir. zengin metnin doğrudan panoya kopyalanmasını desteklemez.
Yani bildiği kod eski olabilir. ChatGPT Plus'ın eklentilerini WebSearchG eklentisi ile kullanıp kullanamayacağımızı görmeye çalışalım.
Bu da işe yaramadı. Kod yerine, pano verilerinin nasıl yönetileceğine ilişkin makaleleri okumak için Stack Overflow gibi sitelere gönderildim.
Bu işe yaramaz. Programlamamı benim için ChatGPT'nin yapmasını sağlamaya çalışıyorum. ChatGPT Plus eklenti Kod Yorumlayıcısını deneyelim ve yardımcı olup olamayacağını görelim.
Günlük Girişi 008 - Cumartesi, 9:08
Bu da işe yaramadı. Şöyle cevap verdi:
Maalesef Eylül 2021'deki bilgi birikimim itibarıyla, zengin metni JavaScript kullanarak panoya kopyalamanın doğrudan ve evrensel olarak desteklenen bir yolu yok.
Fareler! Yine engellendi! Daha fazla kahve içme zamanı.
Günlük Girişi 009 - Cumartesi, 10:27
Bir süredir bunun üzerinde düşünüyorum (ve daha fazla kahve dolduruyorum). Belki de "evrensel olarak desteklenir" ifadesinin ele alınması gerekiyor. İlk satırımı "JavaScript yer imi oluşturmak istiyorum" olarak değiştiriyorum. "Chrome'da bir JavaScript yer imi oluşturmak istiyorum."
Bunun ne işe yaradığını görelim.
Günlük Girişi 010 - Cumartesi, 10:33
Hayır. Bu bana HTML'yi metin biçiminde geri verdi. Bu doğrudan CMS'ye yapıştırabileceğim bir şey değil. Panoya zengin metin döndürmek için buna ihtiyacım var.
Günlük Girişi 011 - Cumartesi, 11:20
ChatGPT Plus'ın etkin olmasına rağmen Kod Yorumlayıcıyı kullanmadığını düşünüyorum. Eklentileri kullanmak için bazen ChatGPT'ye açıkça bunu yapmasını söylemeniz gerekir. Bunu açılış cümlem olarak deneyelim:
Mevcut tarayıcı API çağrıları için kod yorumlayıcısını kullanın. Bir JavaScript yer imi oluşturmak istiyorum.
Ah evet. Bu işe yarıyor! Buna bir bak. Bu, yer işaretime tek bir tıklamayla oluşturuldu:
Günlük Girişi 012 - Cumartesi 13:04
Bunun bu kadar iyi çalışması gerçekten çok havalı.
Bununla birlikte, dizenin sonundaki " | ZDNET" ifadesini sevmiyorum. Bu yüzden onu kaldırmaya ikna edip edemeyeceğimi göreceğim.
Günlük Girişi 013 - Cumartesi 14:27
Öğle yemeği güzeldi. Kuzeybatı Pasifik'ten, doğadan yakalanmış taze kaya balığı. Yerel bir av olduğu için oldukça ucuz. Biraz limon ve Old Bay. Beyin yemeği. Ve bununla…
İlginç bir karar noktasındayım. Devam edebileceğim üç yol var.
Bunlardan biri, istediğim yeni özellikleri eklemek için orijinal istemi değiştirmeye çalışmak. Tamamen yeni bir oturuma başlamam gerekiyorsa en iyi seçim budur.
Bu yaklaşımın sonucu, ChatGPT'nin aynı soru sorulduğunda her zaman aynı sonuçları vermemesidir. Yani eğer ona uzun bir ipucu verirsem, işe yarayan bir şeyi geri alabilirim, kısmen işe yarayan bir şeyi geri alabilirim ya da tamamen başka bir yere gidip William Shakespeare'in eserlerinin başlıklarını bana konuşma amaçlı Klingon dilinde anlatmaya karar verebilir.
İkinci yaklaşım, ChatGPT'den önceden sağlanan kodu yeni özellikle değiştirmesini isteyen bir istem yazmaktır. Oturum hala aktifse bu işe yarayacaktır.
Üçüncü bir yaklaşım, ChatGPT'ye daha önce oluşturduğu kodu beslemek ve ondan değişiklik yapmasını istemektir. Bu yaklaşımı seviyorum ama biraz daha karışık.
Şimdilik ikinci yaklaşımı deneyeceğim. Başlığın sonuna " | ZDNET" dizesini bırakmaya ikna edip edemeyeceğimi göreceğim. Bunu bir bilgi istemi olarak deneyelim:
Lütfen önceden oluşturulan kodu değiştirin ve bulunduğu tüm başlıkların sonundaki " | ZDNET" dizesini kaldırın. Bu özelliği büyük/küçük harfe duyarlı hale getirin.
Tamam, bu senaryoyu bozdu. Daha önceki zamanlarda işe yaramadığı gibi, daha önce panomda ne varsa onu tutuyorum.
Komut isteminin tamamını değiştirerek ilk seçeneği deneyelim. Mini istemi ana istemin sonuna ekleyeceğim, yeni bir oturum başlatacağım ve herhangi bir keyif alıp alamayacağıma bakacağım.
İlk denememde başarısız oldu. Ancak daha sonra "Chrome için bir JavaScript yer imi" oluşturmasını istediğimi belirttim ve işe yaradı!
Buna bir bak. Burada yapay zeka tarafından yazılan yer işareti uygulamamla oluşturulan iki bağlantı da var.
…Ve..
Son kod
İşlevsel olarak kodum tamamlandı. İşte ChatGPT tarafından sağlanan son kod bloğu:
Ve işte kullandığım son komut. Bunun ChatGPT Plus, GPT-4 ve Code Interpreter eklentisini gerektirdiğini unutmayın.
Mevcut tarayıcı API çağrıları için kod yorumlayıcıyı kullanın. Chrome için bir JavaScript yer imi oluşturmak istiyorum.
Basıldığında geçerli sayfanın geçerli URL'sini alır. Ayrıca sayfanın başlığını da alır. Sayfanın başlığı " | ZDNET" (büyük/küçük harfe duyarlı) ile bitiyorsa, başlığın sonundaki o dizeyi kaldırır.
Panoya "Ayrıca:" dizesinden ve ardından bağlantının başlığını ve alınan URL'yi içeren zengin metin bağlantısından oluşan bir parça zengin metin yerleştirir. Zengin metin bloğunun tamamının kalın harflerle yazılması gerekir.
İçgörüler ve gözlemler
Bu proje ben başladıktan neredeyse tam 24 saat sonra tamamlandı. Tabii ki 24 saat çalışmadım. Muhtemelen yaklaşık 90 dakikalık fiili çalışma, diğer işlerin, aile hafta sonu zamanlarının ve biraz düşünme zamanının arasına serpiştirildiğini söyleyebilirim.
Bu çok fazla düşünmeyi gerektiriyordu.
Çok fazla JavaScript yazdım. Zengin metinlerle çok fazla uğraşmamış olsam da bunu sıfırdan yazacak kodlama deneyimine kesinlikle sahibim. Yazmak sadece 90 dakikamı almazdı ama muhtemelen bir hafta sonunda tamamlayabilirdim.
Yapay zeka odaklı kodlama çok farklı bir zihniyettir. Hem kendi kodlamanızı yapmak hem de yapay zekayı kullanmak, kodun ne yapmasını istediğinizi çok net bir şekilde anlamayı gerektirse de, son ürünü oluşturmanın yolu çok farklıdır.
Bunu daha önce de söyledim ama burada kanıtlandı: Yapay zekayı kullanarak kodlama yapmak, başka bir programcıyı yönetmeye çok benziyor. Kodlama, sözdizimi ve algoritmalardan oluşur; beynim ile geliştirme sistemim arasındaki zihin birleşimidir.
Kodla, özellikle de bunun gibi küçük bir projeyle, bir şeyin neden işe yaramadığını anlamak oldukça kolaydır. Ancak yapay zeka tarafından oluşturulan kodla kim bilir? Çok fazla tahmin var. Yapay zeka bile gerçekten bilmiyor. Bir dakika size "bunu yapamam" der ve sonra yapar.
Bu, üretilen ham ASCII'den çalışma kodunu yontmaktan çok Star Trek'ten Scotty ile müzakere etmeye benziyor (Kaptan Kirk'e her zaman bunun yapılamayacağını söylerdi ya da daha sonra iyi görünmesi için aşırı bir geri dönüş süresi söylerdi). her klavye tarafından.
Kodun nasıl çalıştığını bilmenin yapay zekaya talimat vermede yardımcı olduğu yerler var. Örneğin, ZDNET'i filtrelemesini ancak büyük/küçük harf dikkate alınmamasını söyledim. Bunun nedeni ZDNET, ZDNet ve muhtemelen diğer formatları bulabileceğimizi biliyorum. Bir vaka bağımlılığı yüzünden kaç kez sokulduğumu size anlatamam.
Ayrıca üretilen çıktının "zengin metin" olarak adlandırıldığını da bilmem gerekiyordu. Bu, programlama deneyimi olmayan birinin bilmesi muhtemel bir şey değil. Dolayısıyla böyle bir kişi için yapay zekanın doğru verileri panoya yerleştirmesi çok daha fazla hayal kırıklığı yaratabilirdi.
Bu deneyin bir parçası olarak koda dokunmama izin vermedim. Bunu ChatGPT'den kopyalayıp yer imlerime yapıştırmak dışında JavaScript koduna dokunmadım, değiştirmedim, değiştirmedim veya geliştirmedim.
Yine de, şüphesiz beni (ve editörlerimi) zamandan ve sıkıntıdan kurtaracak olacak, çalışan bir yer imi aldım. Ve bu çok hoş. Bu özelliğe sahip olduğum için gerçekten çok heyecanlıyım. Bu Ayrıca satırlarını çok yaptığım ve çok sıkıcı oldukları için bu yeni iki tıklama özelliği beni çok mutlu ediyor. Bu noktayı ChatGPT'nin kodlama ekibine vereceğim.
ChatGPT'nin çok küçük, kesin bir uygulama yazmasını sağlamakla, büyük bir projenin üstesinden gelebileceğini düşünmekle karıştırmayın. Proje yönetimi, ürün spesifikasyonu, ekip yönetimi, üretim ve test gibi tüm becerilere ihtiyaç vardır. Bunların yerini kolayca bir yapay zeka alamaz.
Kendi kullanımınız için bir şeyler inşa etmek istiyorsanız, bunu yapın ve bize bundan bahsedin. ChatGPT'nin sizin için ne oluşturmasını istersiniz? Bir yer imi uygulaması size zaman kazandırabilecek hangi işlevleri sunabilir? Aşağıdaki yorumlarda bize bildirin.
Günlük proje güncellemelerimi sosyal medyadan takip edebilirsiniz. Substack'taki haftalık güncelleme bültenime abone olmayı ve beni Twitter'da @DavidGewirtz adresinden, Facebook'ta Facebook.com/DavidGewirtz adresinden, Instagram'da Instagram.com/DavidGewirtz adresinden ve YouTube'da YouTube.com/DavidGewirtzTV adresinden takip etmeyi unutmayın.