Je m'appelle Tyler Nickerson et je suis un junior montant au Worcester Polytechnic Institute à Worcester, MA. Au cours des trois derniers mois, j'ai eu le plaisir d'être stagiaire edX au sein de l'équipe E-Commerce. L'équipe E-Commerce développe des outils qui sont utilisés pour mieux gérer et maintenir les cours monétisés, tels que ceux avec des certificats vérifiés.
Au cours de mon stage, je me suis familiarisé avec une multitude de frameworks et de librairies qui m'étaient auparavant inconnus (notamment Django et BackboneJS). Bien que j'aie aidé à créer de nombreuses nouvelles fonctionnalités intéressantes ici, j'aimerais prendre le temps de discuter d'un produit plutôt innovant qui a récemment émergé de l'équipe E-Commerce : l'outil d'administration de cours. J'aborderai également le travail de thématisation et de style qui a été intégré à l'outil, car il s'agit d'un travail révolutionnaire impliquant l'utilisation par edX de modèles et de composants UX sur toutes les plates-formes.
L'outil d'administration de cours
Au cours des dernières semaines de mon stage, j'ai été recruté pour créer les premières pages de ce qui allait devenir l'outil d'administration de cours, un portail permettant aux chefs de projet (PM) de créer et de modifier des produits de cours payants, tels que des certificats vérifiés, des formations professionnelles, et sièges à crédit. Avant l'existence de l'outil, ces modifications étaient apportées à l'aide du panneau d'administration de Django, un outil non intuitif, orienté développeur, qui est tout sauf destiné à l'utilisateur. L'outil d'administration de cours fournit une interface intuitive et rationalisée pour aider à automatiser le processus d'ajout de produits de cours.
J'ai eu l'honneur d'être le premier développeur à travailler sur l'outil, en développant la vue de liste initiale qui répertorie les cours disponibles pour l'affichage et l'édition. À ses débuts, la vue de liste se composait uniquement d'un DataTable, d'une zone de filtre et d'un bouton "Ajouter un nouveau cours" non fonctionnel. L'outil n'avait même pas la capacité d'afficher des détails supplémentaires pour les cours répertoriés.
La vue de liste utilise le Plug-in DataTables jQuery pour fournir une méthode dynamique et robuste de tri et de filtrage des données de la table. Cependant, un élément beaucoup moins visible de cette page est le travail considérable qui a été consacré à la création de ses feuilles de style. L'outil d'administration de cours est le premier service edX à intégrer pleinement le Bibliothèque de modèles UX, un ensemble de modèles et de composants d'interface utilisateur conçus par l'équipe UX d'edX. La bibliothèque de modèles est toujours un travail en cours et, par conséquent, il lui manque de nombreux composants cruciaux tels que les barres de navigation et les menus. Dans les premières versions de l'outil d'administration de cours, Cadre Bootstrap de Twitter a été utilisé pour « combler » ces lacunes. Une autre caractéristique manquante de la bibliothèque de modèles est la modularité, ou la possibilité de « brancher et jouer » la bibliothèque sur d'autres plates-formes sans modifications importantes. En conséquence, l'inclusion de la bibliothèque de modèles dans l'outil d'administration du cours s'est avérée plutôt difficile.
Modularisation de la bibliothèque de modèles
Lorsque le travail a commencé sur l'outil d'administration de cours, les étapes suivantes devaient être suivies afin d'utiliser la bibliothèque de modèles sur un site Web :
- Clonez le dépôt Git 'ux-pattern-library' sur votre machine locale
- Installer les dépendances Bower de la bibliothèque
- Copiez le référentiel dans le répertoire de votre site Web
- Incluez main-ltr.scss ou compilez et incluez main-ltr.css dans votre fichier HTML principal
Idéalement, si cela devait suivre l'approche traditionnelle des dépendances frontales, ces étapes devraient être condensées comme suit :
- Installez la bibliothèque de modèles en tant que dépendance Bower à l'aide du terminal
- Inclure main-ltr.scss ou main-ltr.css dans votre fichier HTML
Condenser ces étapes est un processus assez long et ambitieux. En raison du court délai dans lequel nous avons dû développer cet outil, j'ai pris sur moi d'ajouter prise en charge plug-and-play minimale pour la bibliothèque de motifs, au point où seules les trois étapes suivantes étaient nécessaires :
- Installez la bibliothèque de modèles en tant que dépendance Bower à l'aide du terminal
- Copiez main-ltr.scss ailleurs et modifiez ses chemins de dépendance
- Incluez main-ltr.scss dans le fichier HTML et compilez-le au moment de l'exécution
Bien qu'elle ne soit pas idéale, cette approche a fonctionné pour les besoins de l'outil d'administration de cours et la bibliothèque de modèles a pu s'intégrer parfaitement à Bootstrap. Vers la fin de mon stage, j'ai pu discuter de la modularisation de la bibliothèque de modèles avec l'équipe UX, en faisant plusieurs suggestions sur la façon dont la bibliothèque de modèles peut être mieux intégrée à Bower.
Produit final!
Aujourd'hui, l'outil d'administration de cours a évolué pour devenir un produit beaucoup plus mature, avec des vues fonctionnelles de création, de modification et de détail pour les cours. Le DataTable prend désormais en charge la pagination et vous permet même de spécifier le nombre de cours à répertorier par page.
Rétrospectivement, je me sens honoré d'être le premier développeur à travailler sur cet outil. Je suis fier du travail que j'ai accompli chez edX. Toute l'expérience d'être un stagiaire edX m'a beaucoup appris, non seulement en termes de compétences, mais aussi en termes de collaboration d'équipe et de planification. L'été dernier, j'ai fait un stage dans une autre startup basée dans un garage. Mes deux (et seuls) collègues étaient le PDG et le responsable de la programmation. Chez edX, j'ai pu travailler avec une équipe complète, dévouée et ouverte à mes suggestions et commentaires. Cela m'a appris à contribuer à la dynamique du groupe et à comprendre les processus de développement d'équipes plus importantes. J'aimerais remercier Clinton Blackburn, Zach Rockwell, Amanda Nanni et tous mes collègues stagiaires pour avoir fait de cet été un excellent été, et j'espère contribuer à nouveau à la plate-forme Open edX dans un proche avenir.
