Le sfide durante lo sviluppo di un plugin

Sviluppare un plugin è sempre un'esperienza molto dettagliata, anche se spesso non viene considerato tale. Oggi voglio parlare di un'esperienza personale nella progettazione di questi elementi e con le informazioni collezionate credo proprio che ti aiuterà anche nel tuo lavoro.

Stavolta si parla della storia dello sviluppo del mio ultimo plugin WordPress, un plugin che permette di creare un’esperienza utente che rende in grado quest’ultimi di seguire una serie di passi utili per comprendere e utilizzare al meglio il tuo portale.

Infatti in questo articolo non voglio soltanto spiegarti come sia stato in grado di realizzare il mio ultimo plugin, ma oltre a questo ho deciso di condividere con te le mie personali esperienze un po’ per aiutarti nel tuo lavoro e un po’ anche per scoprire direttamente da te, con i commenti che potrai pubblicare, se ritieni che il mio percorso sia corretto oppure se posso migliorarlo grazie ai tuoi commenti.

Genesi

Come ogni sviluppatore sa, ogni buon lavoro in questo campo principalmente nasce o da una necessità personale o da una lavorativa perché sicuramente lo utilizzerà  all’interno del proprio lavoro e quindi ci porterà a prestare più attenzione sia nello sviluppo che nella sua finalizzazione.

In questo caso la mia necessità è nata dalla possibilità di avere una piattaforma di e-learning a task personalizzata ispirata al progetto OneAndDone di Mozilla. La mia idea è quella di importare questo sistema all’interno di WordPress con il minimo sforzo dal punto di vista dell’utente finale.

Lo scopo nel mio caso era realizzare un sistema che permettesse di inserire le informazioni scelte e che fosse tutto tracciato per profili, implementando inoltre un sistema di ricerca semplice ma idoneo alla situazione.

Quindi sono partito da un’idea e dalle funzionalità minime, giusto per non distrarmi troppo durante lo sviluppo. Per ogni funzionalità ho creato un task sul repo GitHub in modo tale da tracciarle e commentarne lo stato; questa è una metodologia di lavoro che uso molto spesso sia su GitHub dove collaboro a molti progetti Open Source che su BitBucket. Utilizzare i task direttamente su queste piattaforme mi permette di mantenermi aggiornato e sfruttare alcune funzionalità interne che permettono di automatizzare molti processi.

Prima ancora di creare un task ho deciso di utilizzare uno strumento tanto vecchio quanto utile: la classica carta e penna. In questo modo, non utilizzando nessun strumento digitale, ho avuto l’opportunità di riflettere per bene sulle funzionalità che desideravo implementare e i loro sviluppi futuri.

Tip: anche se in questo mondo digitale non usa molto tornare qualche anno indietro utilizzando questi strumenti, non posso fare a meno di consigliarteli perché è soltanto in questo modo che possiamo veramente liberarci dallo strumento e lasciare che sia la mente a produrre.

Lo sviluppo

Anche se all’interno del mio boilerplate plugin ho organizzato tutto il codice in file distinti, cosa che aiuta moltissimo lo sviluppo di grossi progetti, in questo caso ho iniziato a buttare giu le prime righe di codice direttamente all’interno del file index.php. Riconosco che non è la strada corretta ma mi ha permesso di fare i primi esperimenti e vedere come si poteva sviluppare l’idea al meglio.

Ovviamente una volta testato il codice di base sono passato a suddividere le varie funzionalità in classi, ogni classe per una tipologia. In questo modo diventa più facile identificare i problemi e trovare il codice che necessita la mia attenzione.

Le aree principali di un plugin come questo possono essere divise in:

  • Accesso frontend con profilo pubblico
  • Ricerca AJAX
  • Associazione di altri task ed utenti ad un task
  • AJAX per marcare i task
  • Contattare i mentor tramite email via form
  • Widget per mostrare i task piú completati
  • Supporto alle REST API
  • Il caffé ed il conto grazie

Dopo aver iniziato lo sviluppo ed essere arrivato ad una versione funzionale ho preparato una versione demo online per farlo provare ad altri. Questo è ovviamente il minimo che si può fare per presentare il progetto ad altre persone, come puoi vedere all’interno di AndMore prepariamo anche articoli, tutorial e talvolta anche dei video che ci permettono di presentare al meglio i nostri lavori.

In questo caso ho creato anche un progetto funzionante prendendo spunto proprio da come Mozilla ha impostato il suo ed è venuto fuori questo portale che pian piano sta ottenendo nuovi utenti 🙂

I problemi riscontrati

Ovviamente per fare una frittata è necessario rompere qualche uovo e devo ammettere che durante lo sviluppo di questo plugin mi sono trovato più volte a sbattere la testa per alcuni problemi riscontrati. Grazie anche alle risorse presenti su Internet, sono stato in grado di trovare delle soluzioni adeguate che mi hanno permesso di completarlo.

1 – La ricerca

Il vero problema di WordPress non é la gestione o la creazione dei moduli per i dati, perché implementare le interfacce grazie al framework interno richiede veramente poco tempo. Quindi dopo aver creato il post type e le varie tassonomie con i custom field necessari ho studiato attentamente come implementare in modo veloce un sistema di ricerca AJAX, che invece rappresenta un po’ il tallone di achille di questo progetto.

Per prendere spunto ho iniziato a cercare sia su WordPress.org che all’interno di GitHub. Proprio su quest’ultimo ho trovato un plugin di partenza che mi permette, tramite shortcode, di realizzare un form con il filtraggio delle tassonomie. Grazie a questo elemento adesso i miei utenti possono fare delle ricerche accurate in base alla tipologia di task che devono completare.

Ovviamente non tutti i plugin WordPress vengono sviluppati seguendo gli standard suggeriti e infatti soltanto dopo averlo integrato mi sono reso conto di quanto fosse stato scritto in modo disorganizzato portandomi a decidere di riscriverlo per potersi adattare alla mia situazione rimuovendo il codice non necessario, praticamente ho quasi riscritto il plugin da zero.

2 – Accesso da frontend

Volevo rendere il plugin indipendente nel suo funzionamento ma allo stesso tempo volevo implementarlo con delle opzioni, quindi dopo aver inserito il login da frontend ho aggiunto l’opzione per disattivarlo; in questo modo se il mio utente preferisce mantenere il classico login di WordPress è in grado di farlo. Inserire questa opzione mi ha permesso inoltre di rendere il plugin compatibile anche con altri sistemi di personalizzazione, infatti soluzioni come BuddyPress o altri plugin permettono di fare una cosa del genere e quindi l’utente non é limitato dal mio plugin.

Implementare tale funzionalità ha richiesto del lavoro specialmente per la riscrittura del codice presente in un tutorial in modo da essere leggero ma allo stesso tempo avanzato come piace a me. Oltre ad aver semplificato il codice ho aggiunto l’editing del profilo da frontend e la possibilitá di modificare le pagine utilizzando dei file template.

Inoltre, implementare tale funzionalità mi è servito per creare le pagine profilo pubbliche degli utenti registrati. Forse non te l’ho ancora detto ma ogni utente ha un suo profilo che mostra i task che ha completato, quelli in progresso ed un modulo di contatto se l’utente che sta visualizzando il profilo ha il ruolo di editor. In questo modo, poiché al’interno del progetto originale abbiamo dei mentor, l’utente può contattare i referenti per ottenere aiuto. Questa soluzione è stata implementata con AJAX in modo da rendere l’esperienza utente più fruibile possibile.

Oltre a questo, ho voluto concludere in bellezza, aggiungendo una funzionalità che permette di inserire un link alla pagina di login in un menu che appare nel frontend facilitando l’accesso mentre se l’utente é loggato questa voce viene cambiata in logout.

3 – AJAX

Abbiamo appena visto come il plugin utilizza questa tecnologia nel frontend per realizzare la ricerca e anche nel modulo di contatto che permette all’utente di contattare il mentor. Una parte dove invece viene utilizzata in modo massiccio è invece nella parte di conferma di completamento del task, di salva per dopo e rimozione; praticamente tutte le operazioni in cui il nostro utente interagisce con le funzionalità base di questo plugin.

Questa parte ha richiesto dello sviluppo per testare le varie combinazioni, infatti ho avuto la necessità di accertarmi che i vari pulsanti rimanessero funzionanti (o disattivati) a seconda dello stato.

Se desideri approfondire il codice che ho utilizzato puoi fare riferimento al repository che ti ho collegato precedentemente.

4 – Campi dei task

Questo progetto mi ha anche richiesto di realizzare dei custom field, la mia scelta è caduta su la libreria CMB di cui ho giá parlato e che mi è stata utile per integrare due campi particolari.

Il primo mi è servito per associare altri task ad un task diretto, quindi ho trovato un campo ma la interfaccia non era il massimo per l’interazione utente perché apriva una finestra in cui si potevano scegliere i post ed all’interno di un campo di testo veniva inseriti i vari ID separati da virgole, un po’ come succede quando creiamo i tag per i nostri articoli.

Per gli utilizzatori poteva risultare difficile ricordare quali post avessero giá inserito quindi ho migliorato la loro interfaccia in questo modo:

Come puoi vedere mostra il nome del post type ed una semplice X per cancellarlo ma una volta raggiunto questo risultato mi sono detto, e per ordinarli? Ho iniziato a sviluppare una soluzione con jQuery UI Sortable dato che mi permette di ordinarli ed il valore viene salvato nel nuovo ordine.

Come la buona programmazione insegna bisogna sempre cercare il DRY (Don’t Repeat Yourself) e quindi ho utilizzato lo stesso codice precedente, ma invece di permettere di selezionare i post mi permette di selezionare gli utenti che saranno mentor!

In poche parole adesso il mio utente si trova la stessa interfaccia per delle funzionalità che sono simili!

5 – BootStrap

Mi piace BootStrap e la trovo una soluzione semplice per stilare graficamente una pagina e di poterlo cambiare facilmente.

Quindi il plugin, dove possibile, utilizza le classi BootStrap per i pulsanti o campi di testo, anche se al momento non mi ricordo neanche tutti gli elementi che ho modificato grazie a questo framework. Anche se su wpAndMore non siamo molto d’accordo su mescolare BootStrap con WordPress ho preso questa decisione in modo che se risulti più semplice la modifica di questo plugin da parte di chi conosce già il framework.

Allo stesso tempo peró in alcune parti é possibile modificare i file di template come in WooCommerce.

Estendere il plugin

Se desideri personalizzare alcune parti del plugin ti farà piacere sapere che ho inserito delle Action Hook che ti permetteranno di modificarlo facilmente, ad esempio, quando si completa un task.

Inoltre a questo, sempre per aiutarti a personalizzare al meglio il plugin, ho realizzato le varie funzioni pubbliche come ad esempio quella per completare un task o per rimuoverlo in modo tale da poterle utilizzare sia nei miei shortcode che da altri plugin che potrebbero necessitarne.

API REST

Per concludere in bellezza ti lascio con una chicca finale che ho voluto aggiungere semplicemente espandendo il plugin WP JSON REST API ufficiale di WordPress facendo in modo che mostrasse anche i valori dei custom field.

Se ti interessa scoprire come poter modificare gli endpoint delle API, ne ho parlato in un articolo tecnico brevemente sul mio sito personale.

Conclusioni

Siamo giunti al termine di questo articolo che, anche se non proprio tecnico, ha voluto mostrarti come sia possibile creare un plugin WordPress partendo dalla sua progettazione. Riconosco che in fin dei conti non hai neanche visto una singola riga di codice ma a mia difesa il motivo è semplice: non sei andato a controllare su GitHub 😉

Come ti ho detto a inizio articolo, se ti interessa provare con mano questa funzionalità puoi trovare il sito demo che ho appositamente sviluppato e che ti aiuterà a capire meglio il funzionamento di questa soluzione.

Personalmente l’ho sviluppata perché ho notato che i siti di Mozzilla sono in grado di ottenere un alto engagement con questa soluzione e anche se a livello grafico non si tratta della soluzione migliore, almeno ho buttato giu le basi per iniziare a muovere i primi passi in questo percorso. Se volete contribuire sapete che GitHub è il posto perfetto per questo e se ancora non sapete come si utilizza potete sempre consultare il nostro evento dove spieghiamo le peculiarità e come creare il tuo primo repository.

Lascia il tuo Pensiero