Jak jsem použil ChatGPT k napsání vlastního bookmarkletu JavaScriptu

Kódovací deník: Tento víkend jsem použil AI k vytvoření velmi skvělého malého pomocníka pro psaní, který mi rozhodně ušetří čas a každodenní kliknutí myší. Zde je návod.

Během posledních několika měsíců jsme věnovali spoustu času zkoumání toho, jak nám ChatGPT může pomoci psát kód. V tomto článku vás provedu procesem používání ChatGPT k tomu.

Jako součást mého každodenního toku je tu jedna nepříjemnost, kterou jsem chtěl řešit. Vytvoření referencí „Také“ v mých článcích ZDNET vyžaduje spoustu kroků. Pro informaci je zde jeden takový odkaz:

To vyžaduje řadu kroků (uvedených níže), které jsem chtěl odstranit. Dělám jich spoustu ve většině článků a je to nejen nepříjemné, ale je to drsné na mém zápěstí.

Je však možné bez napsání jediného řádku skutečného kódu vytvořit bookmarklet JavaScriptu, který by tuto nepříjemnost odstranil? Mohou neprogramátoři realizovat malé projekty, jako je tento?

Odpověď je ano. Není to ale tak rychlé ani intuitivní, jak byste si možná přáli.

Každý z kroků, které jsem podnikl k vytvoření této schopnosti, jsem zaznamenal do řady záznamů v deníku. Mám tendenci pracovat na projektech, jako je tento, tím, že dělám něco málo, zaznamenávám své myšlenky a postřehy, pak odcházím, abych to nechal prosakovat v mém mozku, zatímco pracuji na jiných termínových úkolech. Pak se vrátím, udělám trochu víc a trochu víc píšu.

Přečtením záznamů v protokolu budete moci získat představu o procesu programování ChatGPT prostřednictvím výzvy. Na konci proberu všechny poznatky, které mi tento proces pomohl objevit.

Začněme.

Záznam protokolu 001 - pátek, 14:10

Tak jsem se právě rozhodl, že je čas nechat ChatGPT napsat nějaký kód pro mě. Je tu opakující se úkol, který dělám pořád, několikrát během dne, a je čas mít tlačítko, které mi ušetří kroky. Budu o tom přemýšlet při práci na dalším článku.

Záznam protokolu 002 - pátek, 14:45

Ukazuje se, že to není tak snadné. Nemůžete prostě říct ChatGPT, aby mi "napsal tlačítko, které mi ušetří kroky." Ve skutečnosti musíte být schopni popsat, co chcete, aby to dělalo. To je dovednost sama o sobě.

Teď už naštěstí kóduji desítky let, takže vím, jak vytvořit specifikaci a dokonce jak jen popsat, co chci. Čas přemýšlet. Vrátím se.

Záznam protokolu 003 - pátek, 16:02

Dobře, tak nejdřív musím umět popsat, co chci. Jakmile to popíšu, můžu jít a zkusit, aby mi ChatGPT poskytl kód pro automatizaci tohoto procesu. Chci něco, co sníží počet kliknutí při vytváření našich odkazů.

Tento odkaz se skládá z několika prvků:

• Řetězec "Také: ". Všimněte si, že obsahuje dvojtečku, za kterou následuje mezera
• Název článku přeměněný na hypertextový odkaz
• Celá věc je provedena tučně

Zdá se to dost jednoduché, ale zde jsou kroky, které dělám pokaždé, když chci jeden z nich udělat.

1. Najděte článek, který chci „také“. Nebudu to automatizovat, protože je to pokaždé jiné.
2. Přejděte na stránku toho článku. Tohle taky nebudu automatizovat. Ale chci automatizovat vše, co následuje.
3. Zkopírujte název článku
4. Přepněte se do ZDNET CMS a klikněte na řádek, kam chci vložit Také.
5. Zadejte řetězec "Také: "
6. Klikněte za "Také:" a vyberte Vložit a přizpůsobit styl z nabídky Úpravy. Nemohu použít klávesovou zkratku ^V, protože jinak dostanu velké písmo nadpisu. A nemohu použít klávesovou zkratku Vložit a porovnat styl, protože vyžaduje stisknutí příliš mnoha kláves najednou, aby to pokaždé spolehlivě fungovalo.
7. Nyní se přepněte zpět na článek a zkopírujte adresu URL.
8. Přepněte zpět do CMS
9. Vyberte právě vložený nadpis
10. Jako zkratku zadejte ^K, čímž se otevře dialogové okno pro vložení odkazu.
11. Vložte adresu URL a klikněte na OK.
12. Vyberte celý řádek
13. Text tučně.

To je v podstatě 11 kroků, spousta kliknutí myší, pár kliknutí a tažení a spousta stisknutí kláves. Chci to zredukovat na jedno kliknutí a jedno vložení.

Záznam protokolu 004 - pátek, 16:57

To byl určitě popis mého procesu a také popisuje několik problémů. Ale neříká to nic o tom, co přesně chci v novém nástroji. Aby ChatGPT napsal kód, musí vědět, co chci, aby dělal. Více času na přemýšlení.

Záznam protokolu 005 - pátek, 19:12

Rozhodl jsem se, že místo rozšíření pro Chrome udělám bookmarklet JavaScriptu. Ty lze snadno přidat na lištu záložek a nevyžadují mnoho dalších potíží s instalací. Jediné, co musíte udělat, je kliknout pravým tlačítkem na lištu záložek, zvolit Přidat stránku a (1) zadat název. Samotný JavaScript se vloží do pole URL (2).

Zde je první návrh toho, co chci, aby tento nový bookmarklet dělal.

Chci vytvořit bookmarklet JavaScriptu. Po stisknutí se načte aktuální URL aktuální stránky. Načte také název stránky. Do schránky umístí část formátovaného textu, která se skládá z řetězce „Také: “ následovaného odkazem ve formátu RTF s názvem odkazu a načtenou adresou URL. Celý blok formátovaného textu musí být zvýrazněn tučně.

Pokud mohu přimět ChatGPT, aby mi dal něco, co funguje, vše, co musím udělat, je kliknout na tlačítko, přepnout se na CMS, najít své místo a vložit. Mnohem rychlejší.

Teď už mi zbývá jen...všechno.

Záznam protokolu 006 - sobota, 8:30

jsem statečná. Rozhodl jsem se, že poskytnu přesný popis výše do ChatGPT a uvidím, zda mi dá kód, který funguje. Ahoj, za pokus to stojí.

Záznam protokolu 007 - sobota, 8:41

No, to se úplně nepovedlo. Jediné, co to udělal, bylo, že to, co bylo předtím, zůstalo v mé schránce. Ale část odpovědi ChatGPT mi dala chvíli pauzu.

Je také důležité zmínit, že document.execCommand('copy') je v moderních prohlížečích (např. Chrome, Firefox) označen jako zastaralý, protože doporučují používat Clipboard API, ale pokud vím, v roce 2021 bude rozhraní Clipboard API přerušeno nepodporuje přímé kopírování formátovaného textu do schránky.

Takže kód, který zná, může být zastaralý. Zkusme se podívat, zda můžeme použít pluginy ChatGPT Plus s pluginem WebSearchG.

No, to taky nešlo. Místo kódu jsem byl poslán na stránky jako Stack Overflow, abych si přečetl články o tom, jak spravovat data ze schránky.

Tohle nepůjde. Snažím se přimět ChatGPT, aby za mě programoval. Vyzkoušíme doplněk ChatGPT Plus Code Interpreter a uvidíme, zda může pomoci.

Záznam protokolu 008 - sobota, 9:08

To se taky nepovedlo. To odpovědělo:

Bohužel od mého přerušení znalostí v září 2021 neexistuje žádný přímý a univerzálně podporovaný způsob kopírování formátovaného textu do schránky pomocí JavaScriptu.

Krysy! Opět foliováno! Čas na další kávu.

Záznam protokolu 009 - sobota, 10:27

Chvíli jsem o tom přemýšlel (a doléval jsem další kávu). Možná je třeba řešit slovní spojení „univerzálně podporováno“. Měním svůj první řádek z „Chci vytvořit bookmarklet JavaScriptu“. na „Chci vytvořit bookmarklet JavaScriptu v prohlížeči Chrome.“

Podívejme se, co to udělá.

Záznam protokolu 010 - sobota, 10:33

No, ne. To mi vrátilo HTML v textové podobě. To není něco, co mohu přímo vložit do CMS. Potřebuji, aby vrátil formátovaný text do schránky.

Záznam protokolu 011 - sobota, 11:20

Myslím, že ChatGPT Plus možná nepoužil interpret kódu, i když byl povolen. Chcete-li používat pluginy, někdy musíte výslovně říci ChatGPT, aby to udělal. Zkusme toto jako můj úvodní řádek:

Pro aktuální volání rozhraní API prohlížeče použijte interpret kódu. Chci vytvořit bookmarklet JavaScriptu.

Oh, ano. To funguje! Koukni na to. Toto bylo vytvořeno jediným kliknutím na můj bookmarklet:

Záznam protokolu 012 - sobota 13:04

Skutečnost, že to funguje stejně dobře, je prostě super.

To znamená, že se mi nelíbí " | ZDNET" na konci řetězce. Tak se podívám, jestli ho dokážu přesvědčit, aby to odstranil.

Zápis do protokolu 013 - sobota 14:27

Oběd byl fajn. Čerstvé, divoce ulovené skalničky přímo odtud na severozápadním Pacifiku. Je to docela levné, protože je to místní úlovek. Trochu citronu a Old Bay. Jídlo pro mozek. A s tím…

Jsem u zajímavého rozhodnutí. Jsou tři způsoby, jak mohu postupovat.

Jedním z nich je pokusit se upravit původní výzvu a přidat nové funkce, které chci. To je nejlepší volba, pokud musím začít úplně novou relaci.

Problémem tohoto přístupu je, že ChatGPT nevrací vždy stejné výsledky, když je položena stejná otázka. Takže když mu podám prodlouženou výzvu, mohu získat zpět něco, co funguje, může se mi vrátit něco, co funguje částečně, nebo se může rozhodnout jít úplně stranou a převyprávět mi názvy děl Williama Shakespeara v konverzační klingonštině.

Druhým přístupem je napsat výzvu, která požádá ChatGPT o úpravu dříve poskytnutého kódu pomocí nové funkce. To bude fungovat, pokud je relace stále aktivní.

Třetím přístupem je poskytnout ChatGPT kód, který dříve vygeneroval, a požádat jej o provedení změn. Tenhle přístup se mi líbí, ale je trochu chaotický.

Zatím zkusím druhý přístup. Uvidím, jestli ho dokážu přesvědčit, aby na konci nadpisu vypustil řetězec " | ZDNET". Zkusme to jako výzvu:

Upravte dříve vygenerovaný kód a odstraňte řetězec " | ZDNET" na konci všech titulků, kde existuje. U této funkce nerozlišujte malá a velká písmena.

Dobře, takže to porušilo scénář. Stejně jako v předchozí době, kdy to nefungovalo, je to jen udržování toho, co bylo dříve v mé schránce.

Vyzkoušíme první možnost, upravíme celou výzvu. Přidám mini-výzvu na konec hlavní výzvy, spustím novou relaci a uvidím, jestli budu mít nějakou radost.

Na první pokus se mi to nepodařilo. Ale pak jsem uvedl, že chci, aby vytvořil „bookmarklet JavaScriptu pro Chrome“ a fungovalo to!

Koukni na to. Zde jsou dva také odkazy vytvořené pomocí mého bookmarkletu napsaného AI.

…a..

Konečný kód

Funkčně je můj kód kompletní. Zde je poslední blok kódu, který poskytuje ChatGPT:

A tady je poslední výzva, kterou jsem nakonec použil. Upozorňujeme, že to vyžaduje ChatGPT Plus, GPT-4 a doplněk Code Interpreter.

Pro aktuální volání rozhraní API prohlížeče použijte interpret kódu. Chci vytvořit bookmarklet JavaScriptu pro Chrome.

Po stisknutí se načte aktuální URL aktuální stránky. Načte také název stránky. Pokud titulek stránky končí " | ZDNET" (nerozlišují se malá a velká písmena), odebere tento řetězec z konce titulku.

Do schránky umístí část formátovaného textu, která se skládá z řetězce „Také: “ následovaného odkazem ve formátu RTF s názvem odkazu a načtenou adresou URL. Celý blok formátovaného textu musí být zvýrazněn tučně.

Poznatky a postřehy

Tento projekt byl dokončen téměř přesně 24 hodin poté, co jsem jej začal. Samozřejmě jsem nedal 24 hodin práce. Řekl bych, že to bylo asi 90 minut skutečné práce, proložené jinou prací, rodinným víkendem a nějakým časem na přemýšlení.

To vyžadovalo hodně přemýšlení.

Napsal jsem hodně JavaScriptu. I když jsem se bohatým textem tolik nezabýval, rozhodně mám zkušenosti s kódováním, abych to napsal úplně od začátku. Psaní by mi nezabralo jen 90 minut, ale pravděpodobně bych to zvládl za víkend.

Kódování řízené umělou inteligencí je velmi odlišný způsob myšlení. Zatímco jak vlastní kódování, tak používání AI vyžaduje velmi jasné pochopení toho, co chcete, aby kód dělal, způsob konstrukce konečného produktu je velmi odlišný.

Už jsem to řekl dříve, ale tady to bylo dokázáno: kódování pomocí AI je hodně jako řízení jiného programátora. Kódování je syntaxe a algoritmy, směs mysli mezi mým mozkem a mým vývojovým systémem.

S kódem, zvláště u tak malého projektu, jako je tento, je docela snadné zjistit, proč něco nefunguje. Ale s kódem generovaným AI, kdo ví? Je tu spousta dohadů. Dokonce ani AI pořádně neví. V jednu chvíli vám řekne, že „to nemůže udělat“, a v další to udělá.

Připadá mi to mnohem víc jako vyjednávání se Scottym ze Star Treku (který vždy říkal kapitánu Kirkovi, že to nejde, nebo uváděl příliš dlouhou dobu obratu, aby později vypadal dobře), než vysekávání pracovního kódu ze surového vytvořeného ASCII. u každé klávesnice.

Jsou místa, kde znalost toho, jak kód funguje, pomohla při instruktáži AI. Například jsem mu řekl, aby filtroval ZDNET, ale ignoroval velká a malá písmena. Je to proto, že vím, že bychom mohli najít ZDNET, ZDNet a možná i další formáty. Nemohu vám říct, kolikrát mě bodla případová závislost.

Také jsem potřeboval vědět, že vytvořený výstup se nazývá „formátovaný text“. To není něco, co by někdo bez zkušeností s programováním pravděpodobně věděl. Takže pro takového člověka mohlo být mnohem větší frustrace, když umělá inteligence umístila správná data do schránky.

V rámci tohoto experimentu bych si nenechal sáhnout na kód. Kromě zkopírování z ChatGPT a vložení do mého bookmarkletu jsem se nedotkl, neupravoval, neměnil ani nevylepšoval kód JavaScript.

Přesto se mi podařilo získat funkční bookmarklet, který mi (a mým editorům) bezpochyby ušetří čas a nepříjemnosti. A to je velmi cool. Jsem vážně nadšený z této funkce. Protože tyto linky také dělám tolik a jsou tak zdlouhavé, tato nová funkce dvěma kliknutími mě velmi těší. Dám tento bod kódovacím kouskům ChatGPT.

Jen si nepleťte přimět ChatGPT k napsání velmi malé a přesné aplikace s tím, že si myslíte, že zvládne velký projekt. Jsou zapotřebí všechny dovednosti projektového řízení, specifikace produktu, řízení týmu, výroby a testování. Ty se nedají snadno nahradit AI.

Pokud si chcete postavit něco pro vlastní potřebu, jděte do toho a řekněte nám o tom. Co byste požádali ChatGPT, aby pro vás vytvořil? Jakou funkcionalitu může bookmarklet nabídnout, která vám může ušetřit čas? Dejte nám vědět v komentářích níže.

Moje každodenní aktualizace projektu můžete sledovat na sociálních sítích. Nezapomeňte se přihlásit k odběru mého týdenního zpravodaje na Substacku a sledovat mě na Twitteru na @DavidGewirtz, na Facebooku na Facebook.com/DavidGewirtz, na Instagramu na Instagram.com/DavidGewirtz a na YouTube na YouTube.com/DavidGewirtzTV.