Călătoria mea către crearea unui plugin WordPress cu ChatGPT: 120 de ore de muncă, fără experiență anterioară
Publicat: 2024-08-28Voi fi sincer: de fapt m-am gândit că aș putea construi un plugin WordPress cu ChatGPT în doar câteva ore. Sau, cel puțin, asta m-au făcut să cred toate tutorialele YouTube și firele de pe Twitter.
Dar permiteți-mi să vă spun că acele povești au omis câteva detalii cruciale – pentru a fi exact, aproximativ 120 de ore de detalii. Da, atât mi-a luat de fapt să construiesc pluginul de la început până la sfârșit: 120 de ore!
Pentru context, nu am avut nicio experiență anterioară cu dezvoltarea de pluginuri sau WordPress, dar am decis să mă scufund oricum. Și deși mi-a plăcut provocarea, a fost mult mai grea decât mă așteptam. La fiecare pas, am lovit un obstacol după altul, dintre care multe nici nu știam că există. A fost frustrant, dar și o experiență uriașă – uriașă(!) – de învățare.
Presupunând că intenționați să-mi mergeți pe urme, vă îndemn cu tărie să citiți acest articol în întregime în prealabil. Nu spun asta ca un fel de auto-promovare. O spun pentru că vă va economisi cu adevărat ore – chiar și zile – de muncă suplimentară. Sunt atât de multe lucruri pe care le-am dat peste cap în acest proces, încât nu am avut nicio idee care au fost importante până după fapte. Din păcate, acest lucru a dus la nenumărate revizuiri ale codului (plin de multă frustrare) care ar fi putut fi prevenite. Citind acest lucru, nu veți avea această problemă.
Pentru cine este și nu este acesta 🙋♂️
În funcție de antecedentele și setul de abilități, s-ar putea să vă întrebați dacă sunteți „suficient de calificat” pentru a face acest lucru. O sa spun atat:
Deși nu trebuie să aveți cunoștințe prealabile de codificare, trebuie să fiți entuziasmat de învățarea unor coduri și de procesul general de dezvoltare a unui plugin. Există o mulțime de faze de parcurs și, de multe ori, o fază nu are nimic de-a face cu cealaltă în ceea ce privește abilitățile (sau chiar instrumentele) de care aveți nevoie pentru a o finaliza. Pe scurt, fiți gata să învățați – MULT .
În funcție de natura pluginului și de obiectivele tale finale, îți poate dura cu ușurință o lună sau mai mult pentru a veni cu un produs final.
A avea un ochi puternic pentru detalii și recunoașterea modelelor va ajuta destul de mult, la fel ca și a ști ce fac PHP, JavaScript și CSS. Nu trebuie să știți cum să codificați cu ele, dar înțelegerea scopului lor și a modului în care sunt utilizate va fi un avantaj.
Dacă niciuna dintre cele de mai sus nu te descrie – în special dorința de a învăța – și cauți o soluție rapidă și ușoară, atunci aceasta nu este pentru tine. Nu este nici rapid, nici ușor. Dar, este posibil dacă depui efort.
Dacă ești de acord cu asta, atunci hai să începem.
Prima etapă: mapați-vă pluginul în detaliu 📝
Prima întrebare la care trebuie să ți-o pui – și să răspunzi – este ce tip de plugin vreau să construiesc și ce vreau să facă?
S-ar putea să fiți tentat să vă grăbiți prin asta, astfel încât să puteți începe efectiv să construiți și să codificați, dar vă îndemn să vă faceți timp cu asta. Ceea ce faceți aici va pune bazele solicitărilor dvs. și vă va permite să construiți într-o manieră organizată, mai degrabă decât să adăugați lucruri din mers. Pentru a trece eficient de această fază, luați în considerare următoarele:
- Ce funcții vrei să aibă pluginul tău?
- Cum vrei să arate partea wp-admin?
- Creați wireframes sau diagrame de flux pentru a vizualiza fluxul de lucru al pluginului.
- Harta-l si descrie-l pana in cele mai mici detalii.
- Decideți dacă îl doriți pentru uz privat sau dacă doriți să îl faceți disponibil în depozitul WordPress pentru acces public.
Funcții
Administratorul wp
Apoi, luați în considerare modul în care doriți să apară și să funcționeze pluginul dvs. în zona de administrare WordPress. Aceasta include:
- Pagini de setări : Ce opțiuni doriți să oferiți? Cum le vei organiza?
- Meniuri : Unde va apărea pluginul dvs. în meniul de administrare? Va avea submeniuri?
- Metabox-uri : dacă pluginul tău interacționează cu postări sau pagini, va avea nevoie de metabox-uri personalizate?
- Tabele : dacă stocați date, cum le veți afișa pentru ca administratorul să le examineze?
În cazul meu, am ales o pagină principală de setări cu file pentru fiecare dintre codurile mele scurte, o pagină separată pentru documentare și, de asemenea, o pagină cu un formular de contact în cazul în care utilizatorii doresc să ia legătura cu mine. Asta am venit cu:
Din păcate pentru mine – dar nu pentru tine pentru că citești asta – este că am fost atât de concentrat pe funcționalitatea front-end a pluginului meu în timpul fazei de planificare, încât am neglijat complet partea wp-admin a lucrurilor.
Acest lucru a făcut să dureze mai mult decât ar fi fost dacă l-aș planifica din timp, deoarece am continuat să revizuiesc codul când mi-am dat seama că ceea ce aveam era incomplet sau avea UX slab. Dacă aș fi mapat din timp, sau mai bine, dacă aș folosi wireframes, atunci această fază ar fi mers mult mai lină – ceea ce este o trecere perfectă către următorul punct.
Wireframes sau diagrame de flux
Combină totul și descrie-l în detaliu
Utilizare privată versus acces public prin intermediul depozitului WordPress
Mai este o decizie pe care ar trebui să o iei înainte de a trece la faza a doua. Această decizie are de-a face cu cine vei crea acest plugin.
Vrei să-l faci doar pentru tine (sau un client)? Sau doriți să-l trimiteți depozitului WordPress pentru aprobare, astfel încât să fie disponibil publicului larg?
Din punct de vedere tehnic, nu trebuie să iei această decizie în mod absolut încă. Cu toate acestea, în retrospectivă, mi-aș fi dorit să fi făcut-o mai devreme în proces. De aceea iti recomand sa o faci acum.
Motivul este că scopul meu de la început a fost să-mi trimit pluginul la depozit, dar mi-am construit inițial pluginul fără a respecta standardele de codare WordPress. M-am concentrat doar pe funcționalitate și să ajung la un punct în care a funcționat fără erori.
Ca rezultat, am ajuns să fiu nevoit să fac o mulțime de modificări suplimentare de cod pentru ca codul meu să se potrivească standardelor. Inutil să spun că acest lucru a durat mult și ar fi putut fi evitat.
Acestea fiind spuse, chiar dacă intenționați să construiți doar un plugin pentru uz privat, aș recomanda totuși să respectați standardele de codare. Acest lucru va reduce probabilitatea ca pluginul dvs. să funcționeze defectuos cu versiunile ulterioare WordPress. Din punct de vedere al procesului, principala diferență este că nu va trebui să fii atât de anal în privința aspectelor nefuncționale ale standardelor.
De exemplu, atunci când faceți comentarii inline de genul // Use global default. vi se cere să puneți un punct la sfârșit. Perioada nu are un scop funcțional, dar dacă lipsește, va fi semnalată ca „eroare” conform standardelor. Pentru o construcție privată, puteți ignora acest tip de „eroare”.
Faza a doua: oferiți ChatGPT o solicitare detaliată pentru a începe dezvoltarea 🗣️
Ideea principală aici este să oferiți GPT o privire de ansamblu asupra pluginului dvs. cu instrucțiuni clare. Ca o sugestie generală, v-aș sfătui să evitați să încercați să construiți întreaga casă deodată. Este mai bine să luați o abordare cărămidă cu cărămidă.
Să presupunem că trebuie să-mi construiești pluginul ca exemplu.
Chiar dacă are opt efecte, aș recomanda să-i spuneți GPT că doriți să începeți cu un singur efect. Aproape ca și cum ați construi un plugin cu un singur efect în loc de un plugin cu opt efecte . Apoi verificați pentru a vă asigura că efectul funcționează - inclusiv zona de setări back-end. Remediați eventualele erori și, odată ce totul arată bine, adăugați următorul efect. Apoi urmați acest proces, unul câte unul.
Motivul pentru care procedați în acest fel este că facilitează remedierea oricăror erori care ar putea fi introduse în codul dvs. pe măsură ce codul crește în complexitate. Dacă GPT generează tot codul dvs. simultan și multe lucruri nu funcționează, va fi mult mai greu de remediat.
Încă doriți să oferiți GPT o privire de ansamblu asupra viziunii dvs. generale pentru plugin, dar încheiați solicitarea concentrându-vă mai întâi pe un anumit lucru.
Pentru a vă economisi timp, am creat un exemplu de șablon pe care îl puteți oferi ChatGPT pentru a începe.
Secțiunile dintre paranteze [X] necesită intrarea dvs. pentru a fi finalizate. Este posibil să fie necesar sau nu să-l editați în continuare, în funcție de tipul de plugin pe care intenționați să îl construiți.
Dacă nu înțelegeți totul în prompter, nu vă faceți griji, nici eu nu am înțeles. Veți învăța pe măsură ce parcurgeți procesul.
Indemnul meu 🤖
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.După ce oferiți mesajului ChatGPT, acesta vă va ghida prin restul pașilor, pe care i-am subliniat mai jos. Merită remarcat faptul că, în funcție de starea de spirit a ChatGPT sau de propria ta dorință de a urma procesul așa cum l-am prezentat, este posibil ca modul în care înscriu totul să nu fie la fel de liniar precum este prezentat.
Pentru a vă face o idee despre ceea ce vreau să spun, am testat eu însumi promptul de trei ori diferite. Pe lângă faptul că m-a ajutat să configurez Local by Flywheel și să generez fișierul PHP inițial, a ales să parcurgă ceilalți pași într-un mod diferit de fiecare dată.
Prima încercare
În prima mea încercare, ChatGPT nu a depășit generarea fișierului PHP și mi-a prezentat două opțiuni despre cum aș dori să procedez în continuare. În special, a urmat instrucțiunile despre punerea în coadă a scripturilor cu încărcare condiționată și a menționat și acest lucru.
A doua încercare
A doua încercare a avut ca rezultat cel mai simplu fișier PHP, dar cel mai complet răspuns general în ceea ce privește lucrul prin pași. A trecut direct în utilizarea Terminalului pentru a configura directoare de proiecte și a inițializa Sublime. Chiar m-a îndrumat cu privire la modul de configurare a depozitului Git.
A treia încercare
A treia încercare a fost oarecum asemănătoare cu prima încercare. Deși, spre deosebire de prima încercare, ChatGPT nu a configurat încărcarea condiționată pentru scripturi și nici nu m-a întrebat despre asta. Tocmai le-a generat implicit ca globale.
La pachet
Motivul pentru care v-am împărtășit pe scurt aceste trei încercări a fost nu numai să întăresc ceea ce am spus mai devreme despre modul în care fluxul de lucru nu va fi neapărat standardizat, ci și să subliniez că promptul este la fel de mult pentru dvs., precum este pentru GPT .
Ceea ce vreau să spun este că depinde de tine să fii atent la ceea ce face ChatGPT – și la ce nu face – și să îl pui înapoi pe drumul cel bun dacă cade. Deci, pe măsură ce treceți prin această călătorie, nu uitați să vă referiți la prompt și, de asemenea, la indicatorii pe care le voi împărtăși puțin mai târziu în secțiunea de depanare. Amintiți-vă și reorientați ChatGPT pentru a face ceea ce doriți să facă, atât cât trebuie.
Descărcați pluginul meu și testați-l 📥
Dacă doriți să luați „versiunea de lucru” a pluginului meu pentru o rotire, fișierul zip este mai jos. Voi actualiza acest lucru în viitorul apropiat pentru a include versiunea de depozit WP, dar acest lucru vă va permite să o utilizați pentru moment.
Etapa a treia: instrumente, scripturi, directoare și Git 👩💻
În această fază veți stabili bazele pentru construirea pluginului dvs. Este, de asemenea, locul în care curba de învățare va crește rapid, mai ales odată ce vă apucați de instalarea scripturilor și de a utiliza Terminalul (sau promptul de comandă dacă sunteți pe un computer). Iată defalcarea:
- Decideți ce instrument de mediu local doriți să utilizați (de exemplu, Local by Flywheel, Docker).
- Configurați directoarele de proiect.
- Instalați-vă scripturile (de exemplu, npm, Composer).
- Configurați un depozit Git („repo”) și trimiteți (încărcați) fișierele plugin în el
Construiește mediul local
Configurați directoarele de proiecte
Instalați scripturi
Creați un depozit Git („repo”) și trimiteți fișierele
Cu toți pașii anteriori în afara drumului, este timpul să creați un depozit Git și să trimiteți fișierele inițiale în acesta. Acest pas creează un instantaneu al punctului de pornire al proiectului.
Eu personal am folosit GitHub pentru că asta folosim aici la Themeisle, așa că aveam deja un cont acolo, dar există și alte platforme (de exemplu, GitLab, Bitbucket). Dacă ajungeți să utilizați o altă platformă decât GitHub, nu uitați să ajustați șablonul prompt în faza a treia .
Din motive de concizie, nu vă voi explica cum să faceți acest lucru. Odată ce ați ajuns la acest pas, ChatGPT vă poate ghida prin proces pas cu pas, inclusiv ce comenzi va trebui să introduceți în terminalul / promptul de comandă.
Când comiteți fișierele inițiale, țineți cont de aceste puncte:
- Examinați ceea ce comiteți: asigurați-vă că includeți numai fișierele necesare. Utilizați fișierul
.gitignorepentru a exclude orice fișiere temporare sau generate. - Scrieți un mesaj de confirmare clar: ceva de genul „Comitare inițială: structura și configurațiile de bază ale proiectului” funcționează bine.
- Nu-ți face griji în legătură cu perfecțiunea: acesta este doar punctul tău de plecare. Veți face mult mai multe comisii pe măsură ce vă dezvoltați pluginul.
Din nou, ChatGPT vă va oferi cel mai probabil îndrumări cu privire la comenzile specifice de utilizat pentru această comitere inițială. Dacă nu, cereți-o. Asigurați-vă că scrieți că aveți nevoie de pașii exacti în funcție de configurarea dvs. și de platforma Git.
Prin parcurgerea acestui pas, veți începe oficial proiectul de dezvoltare a pluginurilor cu o bază solidă pentru controlul versiunilor. De aici încolo, veți putea să urmăriți fiecare schimbare pe care o faceți, să experimentați cu noi funcții în siguranță și să colaborați cu alții dacă alegeți să faceți acest lucru.
Etapa a patra: timp de redare cu plugin 🖱️
Dintre toate fazele, aș spune că aceasta și următoarea sunt probabil cele mai distractive, deoarece este momentul în care începi să vezi cu adevărat că totul se îmbină. Pentru a începe, veți dori să vă conectați la instalarea dvs. locală WordPress. Dacă ajungeți să utilizați Local by Flywheel, este foarte simplu, trebuie doar să faceți clic pe butonul WP Admin din dreapta sus:
Dacă ajungeți să utilizați Docker sau un alt instrument de dezvoltare locală și nu sunteți sigur cum să intrați pe site-ul dvs., trebuie doar să întrebați ChatGPT.
După ce v-ați autentificat, activați pluginul accesând Plugins → Plugins instalate . Apoi găsiți pluginul dvs. în listă și faceți clic pe Activare :
⚠️ Important : Dacă nu vedeți pluginul dvs. aici, nu intrați în panică. Cel mai probabil este o nepotrivire a directorului, dar indiferent, puteți atinge ChatGPT pentru a vă ajuta să vă dați seama. Dacă te simți încă blocat după încercări repetate și ChatGPT nu ți-a sugerat să încerci modul de depanare WordPress, atunci cere-i să-ți dea fragmentele de cod pentru acesta. Vor arăta cam așa:
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );După ce vă activați pluginul, începeți să îl utilizați și notați:
- Funcționează totul așa cum trebuie? Foarte improbabil .
- Ce nu merge? În ce fel nu funcționează?
- Care sunt unele lucruri minore pe care le-ai trecut cu vederea complet în descrierea promptă inițială care nu funcționează corect?
Odată ce ți-ai făcut notele, ești gata să treci la următoarea fază: depanare și scame.
Etapa cinci: depanare și scame 💻
Complexitatea pluginului și erorile au o relație de corelație: cu cât pluginul dvs. devine mai complex, cu atât este mai mare potențialul de erori . Dar chiar și pluginurile mai simple vor necesita listing și depanare.
scame
Dacă acest articol este pentru prima dată când vezi cuvântul „linting” și nu ești sigur ce înseamnă, foarte simplu, verifică codul pluginului tău cu un set de reguli și standarde pentru acel tip de cod. Apoi vă spune dacă a găsit erori sau inconsecvențe, pe ce linii se află și cum să le rezolvați.
Litting este destul de simplu. Doar asigurați-vă că utilizați instrumentele de listing adecvate pentru tipurile de cod/fișiere la care veți lucra:
- PHP_CodeSniffer cu WordPress-Coding-Standards pentru PHP linting.
- ESLint pentru listing JavaScript.
- StyleLint pentru listing CSS.
Pentru JavaScript, poate doriți să adăugați și:
- ESLint Unicorn: Peste 100 de reguli ESLint puternice.
- ESLint Promise: util pentru gestionarea sarcinilor asincrone, cum ar fi apelurile API, interogările bazei de date, gestionarea fișierelor sau orice operațiune care necesită timp.
Depanare
Spre deosebire de linting, depanarea seamănă mult cu ceea ce ați făcut în faza anterioară, și anume că utilizați singur pluginul, identificați problemele care trebuie remediate și apoi fie le remediați singur, fie cereți ajutor ChatGPT.
Eu personal mi s-a părut mai complicată depanarea decât scame. Un motiv important este că atunci când scame, rezultatul procesului de scame îți spune exact care sunt problemele și unde se află în codul tău. Cu depanarea, nu obțineți acest lux. Depinde de tine și ChatGPT să-ți dai seama.
Cu toate acestea, ChatGPT îi este greu să rămână concentrat asupra liniilor problematice de cod, ceea ce înseamnă că trebuie să ai grijă de „gata, setat” înainte de a-l lăsa să „declanșeze”.
Pentru a vă ușura lucrurile, am pregătit o listă cu toate sfaturile pe care mi le-aș fi dat înainte de a începe faza de depanare.
Nu fi vagi și nu lăsa totul în seama ChatGPT
Dacă nu dați instrucțiuni foarte specifice ChatGPT, acesta va începe să vă scuipe linii nesfârșite de cod și de multe ori codul nici măcar nu va fi diferit de ceea ce v-a dat deja. Va dori să „verificați” dacă este corect, dar tot ceea ce face este să pierdeți timpul. Nu este nimic mai frustrant decât acesta:
Ceea ce ar trebui să faceți, în schimb, este să oferiți ChatGPT instrucțiuni foarte specifice pentru a nu genera doar cod, ci pentru a izola în mod specific liniile de cod despre care crede că cauzează problema și vi le arăta. Spune-i pentru a explica cum intenționează să schimbe acele linii și de ce crede că aceste modificări vor rezolva problema. În cele din urmă, cereți-i să vă spună care ar trebui să fie rezultatul așteptat după implementarea acestor modificări.
Aceste instrucțiuni îl vor ajuta să rămână concentrat asupra problemei și vor minimiza erorile de propagare, în cazul în care s-ar putea rezolva singura dvs. problemă, dar ar putea cauza noi probleme în proces.
CSS obișnuit versus CSS BEM
Legat de mai sus, dar specific pentru CSS, ar trebui să rețineți că pentru orice fragment CSS, ChatGPT va genera CSS standard sau ceea ce eu numesc „CSS de clasă” în mod implicit.
Acesta este CSS-ul de bază pe care l-ați învăța când urmați un curs pentru începători pe acest subiect. Este ușor de înțeles și nu este nimic greșit din punct de vedere tehnic în sine, dar atunci când dezvoltați pluginuri WordPress, poate duce la conflicte cu alte plugin-uri sau teme.
În schimb, este mai bine să spuneți GPT să folosească metodologia BEM (Block Element Modifier). BEM ajută la reducerea riscului de conflicte CSS, oferind o convenție de denumire clară și structurată. Se asigură că stilurile dvs. sunt mai previzibile și mai ușor de gestionat, deoarece fiecare bloc, element și modificator are un nume de clasă distinct, descriptiv, care minimizează șansa de impacturi neintenționate de stil. În plus, BEM îmbunătățește mentenabilitatea, facilitând localizarea și actualizarea anumitor stiluri, fără a-i afecta pe alții.
Am inclus deja o mențiune despre acest lucru în exemplul de prompt în faza a doua, dar o evidențiez aici, astfel încât să vă amintiți întotdeauna să dați aceste instrucțiuni ChatGPT pentru fragmentele dvs. CSS.
Încărcarea condiționată versus introducerea în coadă globală
Un alt comportament implicit al ChatGPT-ului are de-a face cu scripturile în coadă. Nu-ți face griji dacă nu știi încă ce înseamnă această expresie. Ceea ce contează este că îl recunoști în codul tău când îl vezi. Va arata cam asa:
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');În exemplul de mai sus, codul va pune în coadă global un script pentru toate paginile de administrare, ceea ce este adesea inutil și poate duce la probleme de performanță. Din păcate, asta vă va oferi ChatGPT, dacă nu vorbiți și nu îi spuneți. Pentru a fi clar, în unele cazuri, acest lucru este de fapt complet adecvat, dar în multe cazuri, nu este.
Prin urmare, de îndată ce observați că ChatGPT generează orice cod cu cuvântul „enqueue”, asigurați-vă că aveți o conversație despre asta. Întrebați ChatGPT dacă are sens să vă puneți scripturile în coadă la nivel global sau numai pe paginile specifice în care sunt necesare scripturile - ceea ce este cunoscut sub numele de „încărcare condiționată”.
Amintiți-vă și amintiți-vă frecvent
ChatGPT are tendința de a fi uituc și acest lucru este cu atât mai mult atunci când îl utilizați pentru a codifica. Deci, deși ați putea să îi oferiți instrucțiuni specifice, probabilitatea ca acesta să urmeze acele instrucțiuni pe durata proiectului este zero .
Uneori, chiar va ignora de-a dreptul ceea ce îi ceri să facă. Dacă se întâmplă acest lucru, fiți mai sever și spuneți-i că nu face ceea ce doriți:
În plus, în câteva interacțiuni, va reveni rapid la comportamentul său standard de a încerca să vă înece în cantități masive de cod care nu au nimic de-a face cu secțiunea de cod pe care încercați să o depanați.
Când se întâmplă acest lucru, apăsați pur și simplu butonul de oprire de pe rezultatul GPT și reamintiți-i să urmeze instrucțiunile. De asemenea, vă ajută să le copiați și să le lipiți în fereastra de chat atunci când oferiți mementoul.
Și vorbind despre generarea de linii lungi de cod...
Evitați ca ChatGPT să regenereze fișiere întregi pentru dvs
Când nu sunteți obișnuit să lucrați cu codul și vă simțiți intimidat de acesta, să cereți lui ChatGPT să regenereze întregul fișier după fiecare modificare a codului ar putea părea atractiv la început.
Tot ce trebuie să faci este să „copiați și lipiți”, nu?
Deși poate părea tentant, este de fapt o idee proastă . Pe termen lung, îți va cauza mai multe probleme. Nu numai că vei pierde mult timp făcând asta – mai ales dacă depanezi fișierul PHP, care poate deveni destul de lung, dar ChatGPT ar putea introduce noi greșeli în codul tău existent în acest proces. Va rezolva problema la care lucrați, dar apoi va modifica accidental o altă parte a fișierului și va sparge ceva.
Este mai bine să izolați părțile specifice ale codului care cauzează problema și să lucrați numai pe acestea.
Luați-o câte un bug la un moment dat
În conformitate cu cele de mai sus, chiar dacă aveți mai multe erori – cu excepția cazului în care sunt foarte minore – spuneți ChatGPT doar despre una dintre ele odată. Remediați fiecare eroare înainte de a trece la următorul.
Acordați o atenție deosebită liniilor de sus și de jos ale fragmentelor de cod
Când ChatGPT vă oferă fragmente de cod, uneori, dar nu întotdeauna, le va încapsula arătându-vă linia de sus a fișierului general cu care lucrați, precum și linia de jos. Prin urmare, trebuie să aveți grijă să nu copiați și să lipiți pur și simplu întregul fragment, deoarece acest lucru vă va rupe codul.
⚠️ Acordați o atenție deosebită liniei de sus:
Dacă nu este relevant pentru fragmentul de cod specific pe care încercați să îl depanați, ignorați-l.
Același lucru este valabil și pentru linia de jos, deși acest lucru poate fi mai dificil de identificat. Uneori poate fi la fel de simplu ca ceva de genul }); ceea ce face ca codul dvs. să se întrerupă, deoarece închide un fragment de părinte care nu este menit să fie închis încă.
După un timp, veți deveni mai bine să vă dați seama, dar când începeți călătoria de dezvoltare a pluginurilor, dacă observați că multe lucruri se rup după ce adăugați un fragment, încercați să ștergeți ultima linie pentru a vedea dacă „în mod magic”. ” remediază totul.
Consola este cel mai bun prieten al tău
Dacă ChatGPT încearcă să depaneze aceeași problemă fără succes și te trezești că mergi în cercuri, cere-i să adauge linii console.log la secțiunile de cod despre care crede că cauzează problema. Apoi deschideți consola în timp ce recreați eroarea. Va explica ce sa întâmplat. Puteți apoi să faceți o captură de ecran a acestei explicații și să o oferiți ChatGPT, astfel încât să-și dea seama cum să o rezolve.
Pentru a accesa consola în Google Chrome, faceți clic dreapta pe pagină și selectați Inspectați :
Când consola nu vă oferă răspunsuri, verificați-vă baza de date
Consola este excelentă și vă va oferi adesea răspunsurile de care aveți nevoie. Cu toate acestea, în unele ocazii, va confirma doar ceea ce vă confruntați, dar fără a vă oferi cu adevărat vreo direcție despre cum să o remediați.
De exemplu, când încercam să adaug un efect de tastare pluginului meu, viteza de previzualizare implicită a efectului în wp-admin a fost setată la 23 de milisecunde. Am petrecut o cantitate nebună de timp revizuind fișierele PHP și JavaScript pentru a încerca să remediez problema, dar fără rezultat.
Consola a confirmat că se încarcă la 23, dar în afară de asta, nu mi-a oferit alte informații valoroase:
În cele din urmă, am verificat baza de date și am realizat că valoarea defectuoasă vine de acolo:
Am schimbat acel 23 la 60, ceea ce mi-am dorit și a rezolvat problema.
Dacă ajungeți să utilizați Local by Flywheel, vă puteți accesa cu ușurință baza de date prin interfață făcând clic pe fila Bază de date:
Odată ce obțineți acces, un loc bun pentru a începe să căutați este același loc în care m-ați văzut căutând în captura de ecran de mai sus: wp_options. De cele mai multe ori, setările pentru pluginuri vor fi găsite acolo.
⚠️ Cu toate acestea, este, de asemenea, important să subliniez că problema de bază mai mare aici a fost că codul meu nu avea de fapt instrucțiuni de activare. Când pluginul dvs. este activat pentru prima dată, acesta ar trebui să verifice dacă există anumite setări în baza de date. Dacă nu, pluginul dvs. ar trebui să le adauge cu valorile implicite dorite. Acest lucru asigură că fiecare nouă instalare a pluginului dvs. începe cu setările corecte. Am învățat asta pe calea grea, ca să nu fii nevoit să faci asta.
Un fir proaspăt vă poate oferi descoperiri
Pe măsură ce codul tău crește și firul tău cu ChatGPT devine din ce în ce mai lung, va fi predispus să facă greșeli sau să uite lucruri. La un moment dat, este o idee bună să începeți un nou thread. Încărcați fișierele plugin-uri principale în noul fir și explicați ChatGPT ce faceți și de unde ați rămas.
Iată un exemplu de prompt pe care îl puteți folosi:
Lucram la depanarea unui plugin WordPress cu tine într-un alt thread, dar cred că firul s-a lungit și începeai să fii confuz. Să începem din nou.
Aruncă o privire la fișierele plugin aici și hai să încercăm să depanăm [descrie-ți bug-ul] .
De asemenea, și acest lucru este FOARTE IMPORTANT, atunci când generați versiuni noi de fragmente de cod în încercarea de a depana, vă rugăm să nu generați doar fragmentul, ci și să oferiți o explicație asupra liniilor pe care le-ați schimbat față de ceea ce este deja prezent. De asemenea, explicați rațiunea din spatele schimbării acestor linii și ce ne putem aștepta să vedem cu modificările pe care le-ați făcut.
[Dacă generați CSS, nu uitați să reamintiți ChatGPT să urmeze metodologia BEM (Block Element Modifier).]
Nu-ți fie frică să-ți folosești creierul
Cu cât pluginul dvs. este mai complex, cu atât este mai mare potențialul ca GPT să vă strice codul. Deși vă ajută să depanați, uneori veți găsi că este mai bine să găsiți singur soluția. Sincer să fiu, acest lucru mi s-a întâmplat destul de mult, mai ales în etapele ulterioare ale construcției mele, unde fișierul meu principal PHP a crescut la peste 500 de linii (cu versiunile ulterioare depășind 1.000).
În funcție de familiaritatea și confortul dvs. cu citirea codului, acest lucru ar putea fi un factor de descurajare, dar dacă sunteți decent la recunoașterea modelelor și la identificarea inconsecvențelor, atunci vă puteți descurca.
Cu siguranță nu sunt un programator calificat, deși am o înțelegere a ceea ce fac diferitele limbaje de programare și o oarecare familiaritate cu codul, ceea ce m-a ajutat.
Totuși, chiar dacă ești un noob total, poți să te uiți la liniile de cod despre care GPT crede că ar putea cauza problema. Apoi găsiți un element identic în codul dvs. care funcționează corect. Comparați codul său cu codul elementului rupt și încercați să vedeți ce este diferit la el. De multe ori, acest lucru va rezolva problema:
Păstrați copii de siguranță ale fișierelor plugin (opțional dacă utilizați Git)
În timp ce folosirea Git oferă o modalitate puternică de a gestiona și de a anula modificările aduse codului, nu este niciodată o idee rea să păstrați și copiile de rezervă manuale. Ori de câte ori atingeți un reper cu codul dvs., vă sugerez să salvați o copie a fișierelor de cod principal într-un alt folder:
Aceasta poate servi ca o plasă de siguranță suplimentară, permițându-vă să reveniți cu ușurință la o versiune anterioară mai bună dacă întâmpinați erori grave în timp ce continuați să construiți.
Nu renunța ușor, dar cunoaște-ți limitele
S-ar putea să existe unele funcții sau modificări pe care pur și simplu nu le vei putea implementa, indiferent cât de mult ai încerca. Fii pregătit să-ți adaptezi așteptările și să lucrezi în jurul lor . Asta nu înseamnă să renunți dacă te lovești de un perete. Cu toate acestea, înseamnă că, dacă ați făcut 100 de încercări și ați petrecut ore (sau zile) încercând să obțineți ceva fără succes, atunci probabil că nu este posibil, fie nu este posibil atât pentru dvs., cât și pentru ChatGPT.
În cele din urmă, dacă vă întrebați dacă ar trebui să depanați sau să lăsați scame mai întâi, după înțelegerea mea, nu există un răspuns clar. Am depanat înainte de a linia, dar poți fie să folosești preferințele lui ChatGPT pe măsură ce parcurgi procesul, fie să-i spui pe care vrei să o faci mai întâi.
Faza șase (opțional): testare 🔬
Dacă construiți un plugin relativ simplu și aveți încredere în funcționalitatea acestuia pe baza propriei teste manuale, atunci nu trebuie neapărat să faceți acest pas. Spun că, deoarece încă necesită multă muncă pentru a codifica aceste teste și, în același mod în care nu veți obține un plugin funcțional cu ChatGPT, este puțin probabil să obțineți un test funcțional fără erori prezente.
Pur și simplu vorbind, aici există un compromis între investiția de timp și valoarea practică .
Din propria mea experiență, am reușit să construiesc cu succes un test care a verificat dacă pluginurile mele își pot îndeplini sau nu funcțiile principale atunci când un utilizator interacționează cu ele – dar mi-a luat o zi întreagă de depanare!
Din punct de vedere practic, verificasem deja manual funcționalitățile pluginului meu, dar a fost plăcut să văd că testul a confirmat că totul funcționează.
Dacă veți încerca să construiți un plugin mai complex decât am făcut-o mine sau dacă funcțiile pluginului dvs. se vor concentra pe back-end (unde nu puteți verifica manual dacă funcționează sau nu), atunci luați-vă timp pentru testele executate corect merită munca manuală.
Tipuri de teste
Instrumente de luat în considerare
Etapa a șaptea (opțional): trimiteți pluginul dvs. în depozitul WordPress 🥳
Dacă ai ajuns până în acest punct, atunci ai urcat cu succes proverbialul munte al pluginului. Singurul lucru care rămâne de făcut este să vă plantați steagul astfel încât să se alăture celorlalte 59.650 de plugin-uri din depozitul WordPress.
Acesta are propriul proces separat, care este însoțit de o listă de verificare pe pagina Adăugați pluginul:
- Citiți întrebările frecvente.
- Respectați toate instrucțiunile pentru dezvoltatori de pluginuri.
- Asigurați-vă că aveți permisiunea de a vă încărca pluginul pe WordPress.org pentru ca alții să-l folosească și să îl partajeze.
- Pluginul dvs., inclusiv toate bibliotecile sale și orice alte active incluse sunt licențiate ca GPL sau sunt compatibile cu GPL.
- Faceți o rundă finală de teste cu pluginul Plugin Check și rezolvați toate problemele indicate (excluzând ceea ce considerați că sunt fals pozitive).
Verificare plugin (PCP)Versiunea curentă: 1.1.0
Ultima actualizare: 28 august 2024
plugin-check.1.1.0.zip
S-ar putea să credeți că, după toate depanarea, scame și testarea pe care le-ați făcut, pluginul pe care ți-au cerut să-l folosești nu va prelua nimic. Cu toate acestea, în calitate de dezvoltator de pluginuri pentru prima dată, probabil că veți avea câteva probleme restante de rezolvat - mai ales dacă nu eliminați fișierele de testare din versiunea dvs. înainte de a rula verificarea.
Pentru a continua, accesați Instrumente → Verificare plugin :
Apoi bifați toate cele cinci categorii și executați verificarea:
Puteți apoi să transmiteți acele probleme restante către ChatGPT și să le rezolvați. Când ați terminat, executați din nou verificarea pentru a asigura un rezultat curat. Fă-o de câte ori este nevoie. Odată ce obțineți o verificare complet curată (excluzând falsele pozitive), puteți trimite pluginul echipei de dezvoltare WordPress. Apoi așteptați cu răbdare să-l revizuiască.
Gânduri finale 🧠
Deși este un proces distractiv și plin de satisfacții să construiești un plugin cu ChatGPT, nu este în niciun caz un proces rapid. Trebuie să depui multă echitate pentru a face un produs final care funcționează decent. În cele din urmă, totuși, vei aprecia toate abilitățile noi pe care le vei învăța prin realizarea acestui proiect.
Iată câteva lucruri pe care le-am învățat (și poate și tu):
- Am învățat cum să-mi navighez pe hard disk folosind comenzile Terminal și am învățat, de asemenea, alte comenzi legate de procesul de construire a unui plugin.
- Acum mă simt destul de confortabil atât cu Docker, cât și cu Local by Flywheel, ambele pe care nu le-am folosit niciodată înainte de acest experiment.
- Sunt, de asemenea, familiarizat cu o mulțime de instrumente pentru dezvoltatori și scripturi despre care nici măcar nu știam că există înainte de aceasta.
- Am urmat câteva cursuri în trecut cu Free Code Camp și Codecademy și, deși ambele au fost grozave, simt că am obținut mult mai multe cunoștințe practice prin finalizarea acestui proiect.
- Legat de cele de mai sus, acum am o mulțime de informații de codare aleatoare care vor fi utile dacă lucrez din nou la ceva similar.
- Diferența dintre zero și pluginul de lucru este mult mai mic decât decalajul dintre pluginul de lucru și pluginul gata de trimitere. Am terminat o versiune funcțională a pluginului meu în câteva zile, dar mi-au trebuit încă câteva săptămâni până am rezolvat toate ajustările pentru a-l face suficient de bun pentru a fi trimis în depozitul WordPress.
În general, aceasta a fost una dintre cele mai tari activități pe care le-am făcut de mult timp. Vă mulțumim pentru timpul acordat citirii. Dacă ajungeți să utilizați oricare dintre aceste informații pentru a vă crea primul plugin, vă rugăm să-mi trimiteți un comentariu mai jos. Mi-ar plăcea să văd rezultatul final.