Il mio viaggio verso la creazione di un plugin WordPress con ChatGPT: 120 ore di lavoro, nessuna esperienza precedente
Pubblicato: 2024-08-28Sarò onesto: in realtà pensavo di poter creare un plugin per WordPress con ChatGPT in appena un paio d'ore. O almeno questo è quello che mi hanno portato a credere tutti i tutorial di YouTube e i thread di Twitter.
Ma lasciate che vi dica che quelle storie tralasciavano alcuni dettagli cruciali – circa 120 ore di dettagli, per l'esattezza. Sì, è il tempo che ho impiegato per creare il plugin dall'inizio alla fine: 120 ore!
Per contestualizzare, non avevo alcuna esperienza precedente con lo sviluppo di plugin o WordPress, ma ho deciso di immergermi comunque. E anche se ho amato la sfida, è stata molto più difficile di quanto mi aspettassi. Ad ogni passo del percorso, ho incontrato un ostacolo dopo l'altro, molti dei quali non sapevo nemmeno esistessero. È stato frustrante, ma anche un’enorme – enorme (!) – esperienza di apprendimento.
Supponendo che tu abbia intenzione di seguire le mie orme, ti esorto vivamente a leggere questo articolo nella sua interezza in anticipo. Non lo dico come una sorta di autopromozione. Lo dico perché ti farà davvero risparmiare ore, persino giorni, di lavoro extra. Ci sono così tante cose in cui mi sono imbattuto in questo processo che non avevo idea che fossero importanti fino a dopo il fatto. Sfortunatamente, ciò ha portato a innumerevoli revisioni del codice (piene di molta frustrazione) che avrebbero potuto essere evitate. Leggendo questo, non avrai questo problema.
Per chi è e per chi non è 🙋♂️
A seconda del tuo background e delle tue competenze, potresti chiederti se sei "abbastanza qualificato" per farlo. Dirò questo:
Sebbene non sia necessario possedere alcuna conoscenza di codifica prerequisita, è necessario essere entusiasti di apprendere parte del codice e il processo generale di sviluppo di un plug-in. Ci sono molte fasi da superare e, spesso, una fase non ha nulla a che fare con l'altra in termini di competenze (o anche strumenti) necessarie per completarla. In breve, sii pronto a imparare: MOLTO .
A seconda della natura del tuo plugin e dei tuoi obiettivi finali, potrebbe volerci facilmente un mese o più per realizzare un prodotto finale.
Avere un occhio attento ai dettagli e riconoscere i modelli sarà di grande aiuto, così come sapere cosa fanno PHP, JavaScript e CSS. Non è necessario sapere come programmarli, ma comprendere il loro scopo e come vengono utilizzati sarà un vantaggio.
Se nulla di quanto sopra ti descrive, in particolare la volontà di imparare, e stai cercando una soluzione semplice e veloce, allora questo non fa per te. Non è né veloce, né facile. Ma è possibile se ti impegni.
Se sei d'accordo, allora cominciamo.
Fase uno: mappa il tuo plugin nel dettaglio 📝
La prima domanda che devi porti – e a cui devi rispondere – è che tipo di plugin voglio creare e cosa voglio che faccia?
Potresti essere tentato di affrettarti a farlo in modo da poter iniziare effettivamente a costruire e programmare, ma ti esorto a prenderti il tuo tempo. Ciò che farai qui getterà le basi per i tuoi suggerimenti e ti consentirà di costruire in modo organizzato, anziché aggiungere cose al volo. Per superare questa fase in modo efficace, considera quanto segue:
- Quali funzioni vuoi che abbia il tuo plugin?
- Come vuoi che sia il lato wp-admin?
- Crea wireframe o diagrammi di flusso per visualizzare il flusso di lavoro del plugin.
- Mappalo e descrivilo nei minimi dettagli.
- Decidi se lo vuoi per uso privato o se vuoi renderlo disponibile nel repository WordPress per l'accesso pubblico.
Funzioni
Il wp-admin
Successivamente, considera come desideri che il tuo plugin appaia e funzioni nell'area di amministrazione di WordPress. Ciò include:
- Pagine Impostazioni : quali opzioni vuoi fornire? Come li organizzerai?
- Menu : dove apparirà il tuo plugin nel menu di amministrazione? Avrà dei sottomenu?
- Metabox : se il tuo plugin interagisce con post o pagine, avrà bisogno di metabox personalizzati?
- Tabelle : se stai archiviando dati, come li visualizzerai affinché l'amministratore possa esaminarli?
Nel mio caso, ho deciso per una pagina delle impostazioni principali con schede per ciascuno dei miei shortcode, una pagina separata per la documentazione e anche una pagina con un modulo di contatto nel caso in cui gli utenti vogliano mettersi in contatto con me. Questo è quello che mi è venuto in mente:
Sfortunatamente per me – ma non per te perché stai leggendo questo – è che ero così concentrato sulla funzionalità front-end del mio plugin durante la fase di pianificazione, che ho completamente trascurato il lato wp-admin delle cose.
Ciò ha richiesto più tempo di quanto avrei richiesto se lo avessi pianificato in anticipo perché continuavo a dover rivedere il codice quando mi rendevo conto che ciò che avevo era incompleto o aveva una scarsa UX. Se l'avessi mappato in anticipo, o meglio ancora, se avessi utilizzato i wireframe, questa fase sarebbe andata molto più agevolmente, il che è un perfetto passaggio al punto successivo.
Wireframe o diagrammi di flusso
Combina tutto e descrivilo in dettaglio
Uso privato vs accesso pubblico tramite il repository WordPress
C'è un'altra decisione che dovresti prendere prima di passare alla fase due. Questa decisione ha a che fare con la persona per cui creerai questo plugin.
Vuoi realizzarlo solo per te (o per un cliente)? Oppure vuoi sottoporlo al repository di WordPress per l'approvazione in modo che sia disponibile al grande pubblico?
Tecnicamente, non è ancora necessario prendere assolutamente questa decisione. Tuttavia, col senno di poi, vorrei averlo fatto prima nel processo. Ecco perché ti consiglio di farlo ora.
Il motivo è perché il mio obiettivo fin dall'inizio era inviare il mio plugin al repository, ma inizialmente ho creato il mio plugin senza seguire gli standard di codifica di WordPress. Mi sono concentrato esclusivamente sulla funzionalità e sono arrivato al punto in cui funzionava senza bug.
Di conseguenza, ho dovuto apportare molte modifiche aggiuntive al codice per adattarlo agli standard. Inutile dire che questo ha richiesto molto tempo e avrebbe potuto essere evitato.
Detto questo, anche se prevedi di creare un plugin solo per uso privato, consiglierei comunque di seguire gli standard di codifica. Ciò ridurrà la probabilità che il tuo plugin non funzioni correttamente con le versioni successive di WordPress. Dal punto di vista del processo, la differenza principale è che non sarà necessario essere così anali sugli aspetti non funzionali degli standard.
Ad esempio, quando inserisci commenti in linea come // Use global default. è necessario inserire un punto alla fine. Il punto non ha uno scopo funzionale, ma se manca viene contrassegnato come "errore" secondo gli standard. Per una build privata, puoi ignorare questo tipo di "errore".
Fase due: dare a ChatGPT una richiesta dettagliata per iniziare lo sviluppo 🗣️
L'idea principale qui è fornire a GPT una panoramica del tuo plugin con istruzioni chiare. Come suggerimento generale, ti consiglierei di evitare di provare a costruire tutta la casa in una volta. È meglio adottare un approccio mattone per mattone.
Diciamo che dovresti creare il mio plugin come esempio.
Anche se ha otto effetti, consiglierei di dire a GPT che vuoi iniziare con un effetto. Quasi come se stessi costruendo un plug-in a un effetto anziché un plug-in a otto effetti . Quindi controlla per assicurarti che l'effetto funzioni, inclusa l'area delle impostazioni del back-end. Correggi eventuali bug e, una volta che tutto sembra a posto, aggiungi l'effetto successivo. Quindi segui semplicemente questo processo, uno per uno.
Il motivo per farlo in questo modo è che rende più semplice correggere eventuali bug che potrebbero essere introdotti nel codice man mano che il codice aumenta di complessità. Se GPT genera tutto il codice contemporaneamente e molte cose non funzionano, sarà molto più difficile risolverle.
Vuoi comunque fornire a GPT un'ampia panoramica della tua visione generale del plug-in, ma termina la richiesta concentrandoti prima su qualcosa di specifico.
Per farti risparmiare tempo, ho creato un modello di esempio che puoi fornire a ChatGPT per iniziare.
Le sezioni tra parentesi [X] richiedono il tuo input per essere completate. Potrebbe essere necessario o meno modificarlo ulteriormente, a seconda del tipo di plug-in che intendi creare.
Se non capisci tutto nel prompt, non preoccuparti, non l'ho capito neanche io. Imparerai man mano che procedi nel processo.
Il mio suggerimento 🤖
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.Dopo aver fornito a ChatGPT il tuo messaggio, ti guiderà attraverso i passaggi rimanenti, che ho descritto di seguito. Vale la pena notare che, a seconda dell'umore di ChatGPT o del tuo desiderio di seguire il processo così come l'ho esposto, il modo in cui elenco tutto potrebbe non essere così lineare come viene presentato.
Per darti un'idea di cosa intendo, ho testato personalmente il prompt tre volte diverse. Oltre ad aiutarmi a configurare Local by Flywheel e a generare il file PHP iniziale, ha scelto di eseguire gli altri passaggi ogni volta in modo diverso.
Primo tentativo
Nel mio primo tentativo, ChatGPT non è andato oltre la generazione del file PHP e mi ha presentato due opzioni su come procedere in seguito. In particolare, ha seguito le istruzioni sull'accodamento degli script con caricamento condizionale e lo ha anche menzionato.
Secondo tentativo
Il secondo tentativo ha prodotto il file PHP più semplice, ma la risposta complessiva più completa in termini di elaborazione dei passaggi. È passato direttamente all'utilizzo del Terminale per impostare le directory del progetto e inizializzare Sublime. È arrivato addirittura a istruirmi su come impostare il repository Git.
Terzo tentativo
Il terzo tentativo è stato in qualche modo simile al primo tentativo. Anche se, a differenza del primo tentativo, ChatGPT non ha impostato il caricamento condizionato per gli script, né me lo ha chiesto. Li ha semplicemente generati come globali per impostazione predefinita.
L'asporto
Il motivo per cui ho condiviso brevemente questi tre tentativi con te è stato non solo per rafforzare ciò che ho detto prima su come il flusso di lavoro non sarà necessariamente standardizzato, ma anche per sottolineare che il prompt è tanto per te quanto lo è per GPT .
Ciò che intendo è che spetta a te prestare attenzione a ciò che ChatGPT sta facendo – e non sta facendo – e rimetterlo in carreggiata se cade. Quindi, mentre procedi in questo viaggio, non dimenticare di fare riferimento al prompt e anche ai suggerimenti che condividerò un po' più avanti nella sezione di debug. Ricorda e riorienta ChatGPT in modo che faccia ciò che vuoi che faccia tutte le volte che ne hai bisogno.
Scarica il mio plugin e provalo 📥
Se vuoi provare la "versione funzionante" del mio plugin, il file zip è qui sotto. Lo aggiornerò nel prossimo futuro per includere la versione del repository WP, ma questo ti consentirà di usarlo per ora.
Fase tre: strumenti, script, directory e Git 👩💻
In questa fase getterai le basi per costruire il tuo plugin. È anche il punto in cui la curva di apprendimento aumenterà rapidamente, soprattutto una volta che inizi a installare script e a utilizzare Terminale (o Prompt dei comandi se utilizzi un PC). Ecco la ripartizione:
- Decidi quale strumento di ambiente locale desideri utilizzare (ad esempio, Local by Flywheel, Docker).
- Configura le directory del tuo progetto.
- Installa i tuoi script (ad esempio, npm, Composer).
- Configura un repository Git ("repo") e carica (carica) i file del tuo plugin su di esso
Costruisci un ambiente locale
Configura le directory del progetto
Installa script
Crea un repository Git ("repo") e committa i tuoi file
Una volta completati tutti i passaggi precedenti, è il momento di creare un repository Git e salvarvi i file iniziali. Questo passaggio crea un'istantanea del punto di partenza del tuo progetto.
Personalmente ho usato GitHub perché è quello che usiamo qui su Themeisle, quindi avevo già un account lì, ma ci sono anche altre piattaforme (ad esempio GitLab, Bitbucket). Se finisci per utilizzare una piattaforma diversa da GitHub, non dimenticare di modificare il modello di prompt nella fase tre .
Nell'interesse della brevità, non ti spiegherò come farlo. Una volta raggiunto questo passaggio, ChatGPT può guidarti attraverso il processo passo dopo passo, inclusi i comandi che dovrai digitare nel Terminale/Prompt dei comandi.
Quando trasferisci i tuoi file iniziali, tieni a mente questi punti:
- Rivedi ciò che stai impegnando: assicurati di includere solo i file necessari. Utilizza il tuo file
.gitignoreper escludere eventuali file temporanei o generati. - Scrivi un messaggio di commit chiaro: qualcosa come "Commit iniziale: struttura e configurazioni di base del progetto" funziona bene.
- Non preoccuparti della perfezione: questo è solo il tuo punto di partenza. Farai molti più impegni man mano che sviluppi il tuo plugin.
Ancora una volta, ChatGPT molto probabilmente ti fornirà indicazioni sui comandi specifici da utilizzare per questo commit iniziale. In caso contrario, basta chiederglielo. Assicurati di scrivere che hai bisogno dei passaggi esatti in base alla tua configurazione e alla piattaforma Git.
Completando questo passaggio, darai ufficialmente il via al tuo progetto di sviluppo del plugin con una solida base per il controllo della versione. Da qui in poi potrai tenere traccia di ogni modifica apportata, sperimentare nuove funzionalità in sicurezza e collaborare con altri se scegli di farlo.
Fase quattro: playtime del plugin 🖱️
Di tutte le fasi, direi che questa e la successiva sono probabilmente le più divertenti perché è quando inizi davvero a vedere tutto prendere forma. Per iniziare, ti consigliamo di accedere alla tua installazione WordPress locale. Se finisci per utilizzare Local by Flywheel, è molto semplice, basta fare clic sul pulsante WP Admin in alto a destra:
Se finisci per utilizzare Docker o un altro strumento di sviluppo locale e non sei sicuro di come accedere al tuo sito, chiedi semplicemente a ChatGPT.
Una volta effettuato l'accesso, attiva il plug-in andando su Plugin → Plugin installati . Quindi trova il tuo plugin nell'elenco e fai clic su Attiva :
⚠️ Importante : se non vedi il tuo plugin qui, non farti prendere dal panico. Molto probabilmente si tratta di una mancata corrispondenza della directory, ma in ogni caso puoi toccare ChatGPT per aiutarti a capirlo. Se ti ritrovi ancora bloccato dopo ripetuti tentativi e ChatGPT non ti ha suggerito di provare la modalità debug di WordPress, chiedigli di fornirti gli snippet di codice relativi. Saranno più o meno così:
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );Dopo aver attivato il plugin, inizia a usarlo e prendi appunti:
- Funziona tutto come dovrebbe? Altamente improbabile .
- Cosa non funziona? In che senso non funziona?
- Quali sono alcune cose minori che hai completamente trascurato nella tua descrizione iniziale e che non funzionano correttamente?
Una volta presi gli appunti, sei pronto per passare alla fase successiva: debugging e linting.
Fase cinque: debugging e linting 💻
La complessità del plugin e i bug hanno una relazione di correlazione: più il tuo plugin diventa complesso, maggiore è il rischio di bug . Ma anche i plugin più semplici richiederanno linting e debugging.
Linting
Se questo articolo è la prima volta che vedi la parola "linting" e non sei sicuro di cosa significhi, molto semplicemente, controlla il codice del tuo plugin rispetto a una serie di regole e standard per quel tipo di codice. Quindi ti dice se ha trovato errori o incoerenze, su quali linee si trovano e come risolverli.
La formazione di pelucchi è abbastanza semplice. Assicurati solo di utilizzare gli strumenti di linting adeguati per i tipi di codice/file su cui lavorerai:
- PHP_CodeSniffer con standard di codifica WordPress per linting PHP.
- ESLint per l'linting JavaScript.
- StyleLint per l'linting CSS.
Per JavaScript, potresti anche voler aggiungere:
- ESLint Unicorn: più di 100 potenti regole ESLint.
- ESLint Promise: utile per gestire attività asincrone come chiamate API, query di database, gestione di file o qualsiasi operazione che richieda tempo per essere completata.
Debug
A differenza del linting, il debugging è molto simile a quello che hai fatto nella fase precedente, ovvero usi tu stesso il plugin, identifichi i problemi che devono essere risolti e poi li risolvi tu stesso o chiedi a ChatGPT di assisterti.
Personalmente ho trovato il debug più complicato del linting. Uno dei motivi principali è che quando si esegue l'linting, l'output del processo di linting ti dice esattamente quali sono i problemi e dove si trovano nel codice. Con il debug, non puoi ottenere questo lusso. Sta a te e a ChatGPT capirlo.
Tuttavia, ChatGPT ha difficoltà a rimanere concentrato sulle righe di codice problematiche, il che significa che devi occuparti del "pronto, impostato" prima di lasciarlo "accendere".
Per facilitarti le cose ho messo insieme un elenco di tutti i vari consigli che mi sarei dato prima di iniziare la fase di debug.
Non essere vago e non lasciare decidere a ChatGPT
Se non dai istruzioni molto specifiche a ChatGPT, inizierà a sputarti infinite righe di codice e spesso il codice non sarà nemmeno diverso da quello che ti ha già dato. Vorrà che tu "ricontrolli" che sia corretto, ma tutto ciò che fa è perdere tempo. Non c'è niente di più frustrante di questo:
Quello che dovresti fare invece è dare a ChatGPT istruzioni molto specifiche non semplicemente per generare codice, ma per isolare specificamente quali righe di codice ritiene stiano causando il problema e mostrartele. Digli di spiegare come intende modificare quelle linee e perché pensa che questi cambiamenti risolveranno il problema. Infine, chiedigli di dirti quale dovrebbe essere il risultato atteso dopo l'implementazione di questi cambiamenti.
Queste istruzioni lo aiuteranno a rimanere concentrato sul problema e ridurranno al minimo i bug di spillover in cui potrebbe risolvere il tuo unico problema ma causare nuovi problemi nel processo.
CSS regolari contro CSS BEM
In relazione a quanto sopra ma specifico per i CSS, dovresti tenere presente che per qualsiasi snippet CSS, ChatGPT genererà CSS standard, o quello che io chiamo "CSS di classe" per impostazione predefinita.
Questo è il CSS di base che impareresti frequentando un corso per principianti sull'argomento. È facile da capire e non c'è nulla di tecnicamente sbagliato in sé, ma quando si sviluppano plugin per WordPress, può portare a conflitti con altri plugin o temi.
Invece, è meglio dire a GPT di utilizzare la metodologia BEM (Block Element Modifier). BEM aiuta a ridurre il rischio di conflitti CSS fornendo una convenzione di denominazione chiara e strutturata. Garantisce che i tuoi stili siano più prevedibili e più facili da gestire, poiché ogni blocco, elemento e modificatore ha un nome di classe distinto e descrittivo che riduce al minimo la possibilità di impatti indesiderati sullo stile. Inoltre, BEM migliora la manutenibilità semplificando l'individuazione e l'aggiornamento di stili specifici senza influire sugli altri.
Ho già incluso una menzione di questo nel prompt di esempio nella fase due, ma lo evidenzio qui in modo che tu ricordi sempre di fornire queste istruzioni a ChatGPT per i tuoi snippet CSS.
Caricamento condizionale e accodamento globale
Un altro comportamento predefinito di ChatGPT riguarda l'accodamento degli script. Non preoccuparti se non sai ancora cosa significa questa frase. Ciò che conta è che lo riconosci nel tuo codice quando lo vedi. Sarà simile a questo:
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');Nell'esempio precedente, il codice accoderà a livello globale uno script per tutte le pagine di amministrazione, il che spesso non è necessario e può portare a problemi di prestazioni. Sfortunatamente, questo è ciò che ChatGPT ti darà a meno che tu non parli e gli dici di non farlo. Per essere chiari, in alcuni casi, questo è in realtà del tutto appropriato, ma in molti casi non lo è.
Pertanto, non appena noti che ChatGPT genera un codice con la parola "accodare", assicurati di avere una conversazione al riguardo. Chiedi a ChatGPT se ha senso accodare i tuoi script a livello globale o solo sulle pagine specifiche in cui gli script sono necessari, operazione nota come "caricamento condizionale".
Ricordare e ricordare frequentemente
ChatGPT ha la propensione a dimenticare e questo è ancora di più quando lo usi per programmare. Quindi, anche se potresti dargli istruzioni specifiche, la probabilità che segua quelle istruzioni per tutta la durata del tuo progetto è zero .
A volte ignorerà addirittura ciò che gli chiedi di fare. Se ciò accade, sii più severo e fagli sapere che non sta facendo quello che vuoi:
Oltre a ciò, nel giro di poche interazioni tornerà rapidamente al suo comportamento standard cercando di sommergerti in enormi quantità di codice che non hanno nulla a che fare con la sezione di codice di cui stai tentando di eseguire il debug.
Quando ciò accade, premi semplicemente il pulsante di arresto sull'uscita del GPT e ricordagli di seguire le tue istruzioni. È anche utile copiarli e incollarli nella finestra di chat quando dai il promemoria.
E a proposito di generare lunghe righe di codice...
Evita che ChatGPT rigeneri interi file per te
Quando non sei abituato a lavorare con il codice e ti senti intimidito da esso, chiedere a ChatGPT di rigenerare l'intero file per te dopo ogni modifica del codice potrebbe sembrare inizialmente interessante.
Tutto quello che devi fare è “copia e incolla”, giusto?
Sebbene possa sembrare allettante, in realtà è una cattiva idea . Alla lunga ti causerà più problemi. Non solo perderai molto tempo in questo modo, soprattutto se stai eseguendo il debug del tuo file PHP, che può diventare piuttosto lungo, ma ChatGPT potrebbe introdurre nuovi errori nel codice esistente durante il processo. Risolverà il problema su cui stai lavorando, ma poi modificherà accidentalmente qualche altra parte del file e romperà qualcosa.
È meglio isolare le parti specifiche del codice che causano il problema e lavorare solo su quelle.
Prendilo un bug alla volta
Sulla falsariga di quanto sopra, anche se hai più bug, a meno che non siano molto minori, comunica a ChatGPT solo uno di essi alla volta. Correggi ogni bug prima di passare a quello successivo.
Presta molta attenzione alle righe superiore e inferiore degli snippet di codice
Quando ChatGPT ti fornisce frammenti di codice, a volte, ma non sempre, li incapsula mostrandoti la riga superiore del file complessivo con cui stai lavorando e anche la riga inferiore. Pertanto, devi fare attenzione a non copiare e incollare sempre e semplicemente l'intero snippet perché ciò potrebbe causare la rottura del codice.
⚠️ Presta molta attenzione alla riga superiore:
Se non è rilevante per lo snippet di codice specifico di cui stai tentando di eseguire il debug, ignoralo.
Lo stesso vale per i profitti, anche se possono essere più difficili da individuare. A volte può essere semplice come qualcosa come }); che causa l'interruzione del codice perché chiude uno snippet principale che non deve ancora essere chiuso.
Dopo un po' migliorerai nel capirlo, ma quando inizi il tuo percorso di sviluppo del plugin, se noti che molte cose si interrompono dopo aver aggiunto uno snippet, prova a eliminare l'ultima riga per vedere se "magicamente" ” risolve tutto.
La console è la tua migliore amica
Se ChatGPT tenta di eseguire il debug dello stesso problema senza successo e ti ritrovi a girare in tondo, chiedigli di aggiungere righe console.log alle sezioni di codice che ritiene stiano causando il problema. Quindi apri la console mentre ricrei il bug. Spiegherà cosa è successo. Puoi quindi fare uno screenshot di questa spiegazione e fornirla a ChatGPT in modo che possa capire come risolverlo.
Per accedere alla console in Google Chrome, fare clic con il tasto destro sulla pagina e selezionare Ispeziona :
Quando la console non ti dà risposte, controlla il tuo database
La console è eccellente e spesso ti darà le risposte di cui hai bisogno. Tuttavia, in alcune occasioni, confermerà solo ciò che stai riscontrando, ma senza darti alcuna indicazione su come risolverlo.
Ad esempio, quando stavo cercando di aggiungere un effetto di digitazione al mio plugin, la velocità di anteprima predefinita dell'effetto nel wp-admin era impostata su 23 millisecondi. Ho passato una quantità incredibile di tempo a rivedere i miei file PHP e JavaScript per cercare di risolvere il problema, ma senza alcun risultato.
La console ha confermato che si stava caricando alle 23, ma oltre a ciò non mi ha fornito altre informazioni utili:
Alla fine, ho controllato il database e ho capito che il valore errato proveniva da lì:
Ho cambiato il valore da 23 a 60, che è quello che volevo, e ha risolto il problema.
Se finisci per utilizzare Local by Flywheel, puoi accedere facilmente al tuo database tramite l'interfaccia facendo clic sulla scheda Database:
Una volta ottenuto l'accesso, un buon posto per iniziare a cercare è lo stesso posto che mi hai visto guardare nello screenshot qui sopra: wp_options. La maggior parte delle volte le impostazioni dei plugin si troveranno lì.
⚠️ Tuttavia, è anche importante sottolineare che il problema di fondo più grande in questo caso era che nel mio codice mancavano effettivamente le istruzioni di attivazione. Quando il plugin viene attivato per la prima volta, dovrebbe verificare se esistono determinate impostazioni nel database. In caso contrario, il tuo plugin dovrebbe aggiungerli con i valori predefiniti previsti. Ciò garantisce che ogni nuova installazione del plug-in inizi con le impostazioni corrette. L'ho imparato nel modo più duro, così non dovrai farlo tu.
Un nuovo thread può darti scoperte
Man mano che il tuo codice cresce e il tuo thread con ChatGPT diventa sempre più lungo, sarà incline a commettere errori o dimenticare cose. Ad un certo punto, è una buona idea aprire una nuova discussione. Carica i file del tuo plugin principale nel nuovo thread e spiega a ChatGPT cosa stai facendo e dove ti eri interrotto.
Ecco un esempio di prompt che puoi utilizzare:
Stavo lavorando con te al debug di un plugin per WordPress in un altro thread, ma penso che il thread fosse troppo lungo e stavi iniziando a confonderti. Cominciamo da capo.
Dai un'occhiata ai file del plugin qui e proviamo a risolvere il problema [descrivi il tuo bug] .
Inoltre, e questo è MOLTO IMPORTANTE, quando generi nuove versioni di frammenti di codice nel tentativo di risolvere i problemi, non limitarti a generare lo snippet, ma fornisci anche una spiegazione su quali righe hai modificato rispetto a quanto è già presente. Inoltre, spiega la logica alla base della modifica di tali linee e cosa possiamo aspettarci di vedere con le modifiche apportate.
[Se generi CSS, non dimenticare di ricordare a ChatGPT di seguire la metodologia BEM (Block Element Modifier).]
Non aver paura di usare il cervello
Più complesso è il tuo plugin, maggiore è la possibilità che GPT rovini il tuo codice. Anche se ti aiuta a eseguire il debug, a volte scoprirai che è meglio trovare la soluzione da solo. Ad essere onesti, questo mi è successo spesso, soprattutto nelle fasi successive della mia creazione in cui il mio file PHP principale era cresciuto fino a superare le 500 righe (con le versioni successive che superavano le 1.000).
A seconda della tua familiarità e dimestichezza con la lettura del codice, questo potrebbe essere un deterrente, ma se sei bravo nel riconoscimento dei modelli e nell'individuare le incongruenze, puoi cavartela.
Certamente non sono un programmatore esperto, anche se ho una conoscenza di ciò che fanno i vari linguaggi di programmazione e una certa familiarità con il codice, il che mi ha aiutato.
Tuttavia, anche se sei un principiante assoluto, puoi guardare le righe di codice che GPT ritiene potrebbero causare il problema. Quindi trova un elemento identico nel tuo codice che funzioni correttamente. Confronta il suo codice con il codice dell'elemento danneggiato e prova a vedere cosa c'è di diverso in esso. Spesso questo risolverà il problema:
Conserva i backup dei file del tuo plugin (facoltativo se usi Git)
Sebbene l'utilizzo di Git offra un modo potente per gestire e annullare le modifiche al codice, non è mai una cattiva idea conservare anche i backup manuali. Ogni volta che raggiungi un traguardo con il tuo codice, ti suggerisco di salvare una copia dei tuoi file di codice principali in un'altra cartella:
Questo può servire come ulteriore rete di sicurezza, permettendoti di tornare facilmente a una versione precedente migliore se riscontri bug gravi mentre continui a costruire.
Non arrenderti facilmente, ma conosci i tuoi limiti
Potrebbero esserci alcune funzioni o modifiche che semplicemente non sarai in grado di implementare, non importa quanto ci provi. Sii pronto ad adattare le tue aspettative e ad aggirarle . Questo non significa arrendersi se si colpisce un muro. Tuttavia, significa che se hai fatto 100 tentativi e hai trascorso ore (o giorni) cercando di ottenere qualcosa senza successo, probabilmente non è possibile o è al di fuori delle capacità sia di te che di ChatGPT.
Infine, se ti stai chiedendo se dovresti prima eseguire il debug o il lanugine, per quanto mi risulta, non c'è una risposta chiara. Ho eseguito il debug prima di eseguire il linted, ma puoi impostare come predefinita la preferenza di ChatGPT durante il processo oppure dirgli quale vuoi fare per primo.
Fase sei (facoltativa): test 🔬
Se stai creando un plugin relativamente semplice e sei sicuro della sua funzionalità in base ai tuoi test manuali, non devi necessariamente eseguire questo passaggio. Lo dico perché richiede ancora molto lavoro per codificare questi test e, allo stesso modo in cui non otterrai un plugin funzionante con ChatGPT, è anche improbabile che tu ottenga un test funzionale senza bug presenti.
In parole povere, esiste un compromesso tra investimento di tempo e valore pratico .
Nella mia esperienza, sono riuscito a creare con successo un test che verificava se i miei plugin erano in grado o meno di svolgere le loro funzioni principali quando un utente interagisce con loro, ma mi ci è voluta un'intera giornata di debug!
Dal punto di vista pratico avevo già controllato manualmente le funzionalità del mio plugin, ma è stato bello vedere che il test ha confermato che tutto funzionava.
Se hai intenzione di tentare di creare un plugin più complesso di quello che ho fatto io, o se le funzioni del tuo plugin saranno focalizzate sul back-end (dove non puoi controllare manualmente se funzionano o meno), allora prenditi il tempo per eseguire correttamente i test vale il lavoro manuale.
Tipi di test
Strumenti da considerare
Fase sette (facoltativa): invia il tuo plugin al repository WordPress 🥳
Se sei arrivato fino a questo punto, hai scalato con successo la proverbiale montagna dei plugin. L'unica cosa che resta da fare è piantare la tua bandiera in modo che si unisca agli altri 59.650 plugin nel repository di WordPress.
Questo ha un proprio processo separato, che è accompagnato da una lista di controllo nella pagina Aggiungi il tuo plugin:
- Leggi le domande frequenti.
- Rispettare tutte le linee guida per gli sviluppatori di plugin.
- Assicurati di avere l'autorizzazione per caricare il tuo plugin su WordPress.org affinché altri possano utilizzarlo e condividerlo.
- Il tuo plugin, incluse tutte le sue librerie e qualsiasi altra risorsa inclusa, sono concessi in licenza come GPL o sono compatibili con GPL.
- Esegui un ciclo finale di test con il plugin Plugin Check e risolvi tutti i problemi indicati (esclusi quelli che ritieni siano falsi positivi).
Controllo plugin (PCP)Versione corrente: 1.1.0
Ultimo aggiornamento: 28 agosto 2024
plugin-check.1.1.0.zip
Potresti pensare che dopo tutto il debug, il linting e i test che hai fatto, il plugin che ti chiedono di utilizzare non rileverà nulla. Tuttavia, come sviluppatore di plugin per la prima volta, probabilmente avrai ancora alcuni problemi in sospeso da risolvere, soprattutto se non rimuovi i file di test dalla tua build prima di eseguire il controllo.
Per procedere, vai su Strumenti → Controllo plugin :
Quindi seleziona tutte e cinque le categorie ed esegui il controllo:
Puoi quindi inviare i problemi in sospeso a ChatGPT e risolverli. Al termine, esegui nuovamente il controllo per garantire un risultato pulito. Fallo tutte le volte che ne hai bisogno. Una volta ottenuto un controllo completamente pulito (esclusi i falsi positivi), puoi inviare il tuo plugin al team di sviluppo di WordPress. Quindi attendi pazientemente che lo rivedano.
Considerazioni finali 🧠
Anche se creare un plugin con ChatGPT è un processo divertente e gratificante, non è affatto un processo rapido. È necessario investire molta equità per realizzare un prodotto finale che funzioni in modo decente. Alla fine, però, apprezzerai tutte le nuove competenze che questo progetto ti insegnerà.
Ecco alcune cose che ho imparato (e che potresti imparare anche tu):
- Ho imparato a navigare nel mio disco rigido utilizzando i comandi del Terminale e ho anche imparato altri comandi relativi al processo di creazione di un plug-in.
- Ora mi sento abbastanza a mio agio sia con Docker che con Local di Flywheel, che non avevo mai usato prima di questo esperimento.
- Conosco anche molti strumenti e script per sviluppatori che non sapevo nemmeno esistessero prima di questo.
- In passato ho seguito alcuni corsi con Free Code Camp e Codecademy e, sebbene entrambi fossero fantastici, sento di aver acquisito molte più conoscenze pratiche completando questo progetto.
- In relazione a quanto sopra, ora ho molte informazioni di codifica casuale che mi torneranno utili se lavorerò di nuovo su qualcosa di simile.
- Il divario tra zero e plug-in funzionante è molto più piccolo del divario tra plug-in funzionante e plug-in pronto per l'invio. Ho ottenuto una versione funzionante del mio plugin in pochi giorni, ma mi ci sono volute altre settimane prima di elaborare tutte le modifiche per renderlo abbastanza buono da poter essere inviato al repository di WordPress.
Nel complesso, questa è stata una delle attività più interessanti che ho svolto da molto tempo. Grazie per aver dedicato del tempo a leggere. Se finisci per utilizzare una qualsiasi di queste informazioni per creare il tuo primo plugin, lasciami un commento qui sotto. Mi piacerebbe controllare il tuo risultato finale.