Mi chiamo Tyler Nickerson e sono uno studente in ascesa al Worcester Polytechnic Institute di Worcester, MA. Negli ultimi tre mesi ho avuto il piacere di essere uno stagista edX che lavora con il team di E-Commerce. Il team E-Commerce sviluppa strumenti che vengono utilizzati per gestire e mantenere al meglio i corsi monetizzati, come quelli con certificati verificati.
Durante il mio tirocinio, ho acquisito familiarità con una serie di framework e librerie che in precedenza mi erano sconosciuti (in particolare Django e BackboneJS). Anche se ho contribuito a creare molte nuove fantastiche funzionalità qui, vorrei approfittare di questo tempo per discutere di un prodotto piuttosto innovativo emerso di recente dal team di e-commerce: lo strumento di amministrazione del corso. Toccherò anche il lavoro sui temi e sullo stile che è stato inserito nello strumento, poiché comporta un lavoro rivoluzionario che coinvolge l'uso da parte di edX di modelli e componenti UX su piattaforme diverse.
Lo strumento di amministrazione del corso
Nelle ultime settimane del mio tirocinio, sono stato reclutato per costruire le prime pagine di quello che sarebbe diventato il Course Admin Tool, un portale per i project manager (PM) per creare e modificare i prodotti dei corsi a pagamento, come certificati verificati, formazione professionale, e posti di credito. Prima dell'esistenza dello strumento, queste modifiche sono state apportate utilizzando il pannello di amministrazione di Django, uno strumento non intuitivo e orientato agli sviluppatori che è tutt'altro che rivolto all'utente. Lo strumento di amministrazione del corso fornisce un'interfaccia intuitiva e semplificata per aiutare ad automatizzare il processo di aggiunta dei prodotti del corso.
Ho avuto l'onore di essere il primo sviluppatore a lavorare sullo strumento, sviluppandolo la visualizzazione elenco iniziale che elenca i corsi disponibili per la visualizzazione e la modifica. Nelle sue fasi iniziali, la visualizzazione elenco consisteva solo in una DataTable, una casella di filtro e un pulsante "Aggiungi nuovo corso" non funzionante. Lo strumento non aveva nemmeno la possibilità di visualizzare dettagli aggiuntivi per i corsi elencati.
La visualizzazione elenco utilizza il Plugin jQuery di DataTables per fornire un metodo dinamico e robusto per ordinare e filtrare i dati della tabella. Tuttavia, una componente molto meno evidente di questa pagina è l'ampio lavoro svolto nella creazione dei suoi fogli di stile. Il Course Admin Tool è il primo servizio edX a presentare completamente il Libreria di modelli UX, un insieme di modelli e componenti dell'interfaccia utente progettati dal team UX di edX. La Pattern Library è ancora in lavorazione e, di conseguenza, mancano molti componenti cruciali come barre di navigazione e menu. Nelle prime versioni dello strumento di amministrazione del corso, Framework Bootstrap di Twitter è stato utilizzato per “riempire” queste lacune. Un'altra caratteristica mancante della Pattern Library è la modularità, o la possibilità di "plug and play" la libreria in altre piattaforme senza pesanti modifiche. Di conseguenza, includere la Pattern Library nello strumento di amministrazione del corso si è rivelato piuttosto impegnativo.
Modularizzazione della libreria di modelli
Quando è iniziato il lavoro sullo strumento di amministrazione del corso, è stato necessario seguire i seguenti passaggi per utilizzare la libreria di modelli su un sito Web:
- Clona il repository Git 'ux-pattern-library' sul tuo computer locale
- Installa le dipendenze Bower della libreria
- Copia il repository nella directory del tuo sito web
- Includi main-ltr.scss o compila e includi main-ltr.css nel tuo file HTML principale
Idealmente, se ciò dovesse seguire l'approccio tradizionale delle dipendenze front-end, questi passaggi dovrebbero essere condensati come segue:
- Installa la libreria di modelli come dipendenza Bower usando il terminale
- Includi main-ltr.scss o main-ltr.css nel tuo file HTML
Condensare questi passaggi è un processo piuttosto lungo e ambizioso. A causa del breve lasso di tempo in cui abbiamo dovuto sviluppare questo strumento, mi sono preso la responsabilità di aggiungere supporto plug-and-play minimo per la Pattern Library, al punto in cui sono stati richiesti solo i seguenti tre passaggi:
- Installa la libreria di modelli come dipendenza Bower usando il terminale
- Copia main-ltr.scss altrove e modifica i suoi percorsi di dipendenza
- Includere main-ltr.scss nel file HTML e compilarlo in fase di esecuzione
Sebbene non sia l'ideale, questo approccio ha funzionato per gli scopi dello strumento di amministrazione del corso e la libreria di modelli è stata in grado di adattarsi perfettamente a Bootstrap. Verso la fine del mio tirocinio ho potuto discutere con il Team UX della modularizzazione della Pattern Library, rendendo diversi suggerimenti su come la libreria di modelli può essere integrata meglio con Bower.
Prodotto finale!
Oggi, lo strumento di amministrazione del corso si è evoluto per essere un prodotto molto più maturo, completo di funzioni di creazione, modifica e visualizzazione dei dettagli per i corsi. DataTable ora supporta l'impaginazione e ti consente persino di specificare quanti corsi elencare per pagina.
In retrospettiva, mi sento onorato di essere il primo sviluppatore a lavorare su questo strumento. Sono orgoglioso del lavoro che ho svolto in edX. L'intera esperienza di stagista edX mi ha insegnato molto, non solo in termini di competenze, ma anche in termini di collaborazione e pianificazione del team. L'estate scorsa ho fatto uno stage presso un'altra startup con sede in un garage. I miei due (e unici) collaboratori erano l'amministratore delegato e il capo della programmazione. In edX, ho potuto lavorare con un team completo e dedicato, aperto ai miei suggerimenti e feedback. Così facendo mi ha insegnato come contribuire alla dinamica del gruppo e come comprendere i processi di sviluppo di team più grandi. Vorrei ringraziare Clinton Blackburn, Zach Rockwell, Amanda Nanni e tutti i miei colleghi stagisti per aver reso questa fantastica estate e spero di poter contribuire di nuovo alla piattaforma Open edX nel prossimo futuro.
