Mein Name ist Tyler Nickerson und ich bin ein aufstrebender Junior am Worcester Polytechnic Institute in Worcester, MA. In den letzten drei Monaten hatte ich das Vergnügen, als edX-Praktikant im E-Commerce-Team zu arbeiten. Das E-Commerce-Team entwickelt Tools, die verwendet werden, um monetarisierte Kurse besser zu verwalten und zu pflegen, z. B. solche mit verifizierten Zertifikaten.
Während meines Praktikums habe ich mich mit einer Reihe von Frameworks und Bibliotheken vertraut gemacht, die mir zuvor unbekannt waren (insbesondere Django und BackboneJS). Während ich hier beim Aufbau vieler großartiger neuer Funktionen mitgeholfen habe, möchte ich diese Zeit nutzen, um ein ziemlich innovatives Produkt zu diskutieren, das kürzlich aus dem E-Commerce-Team hervorgegangen ist: das Course Admin Tool. Ich werde auch auf die Theming- und Styling-Arbeiten eingehen, die in das Tool geflossen sind, da es sich um bahnbrechende Arbeiten handelt, die die plattformübergreifende Verwendung von UX-Mustern und -Komponenten durch edX beinhalten.
Das Kursverwaltungstool
In den letzten Wochen meines Praktikums wurde ich angeworben, um die ersten Seiten dessen zu erstellen, was später das Course Admin Tool werden sollte, ein Portal für Projektmanager (PMs), um kostenpflichtige Kursprodukte wie verifizierte Zertifikate, Berufsausbildung, und Kreditplätze. Vor der Existenz des Tools wurden diese Änderungen über das Admin-Panel von Django vorgenommen, ein nicht intuitives, entwicklerorientiertes Tool, das alles andere als benutzerorientiert ist. Das Course Admin Tool bietet eine intuitive, optimierte Benutzeroberfläche, um das Hinzufügen von Kursprodukten zu automatisieren.
Ich hatte die Ehre, als erster Entwickler an dem Tool zu arbeiten, zu entwickeln die anfängliche Listenansicht die Kurse auflistet, die zum Anzeigen und Bearbeiten verfügbar sind. In der Anfangsphase bestand die Listenansicht nur aus einer Datentabelle, einem Filterfeld und einer nicht funktionierenden Schaltfläche „Neuen Kurs hinzufügen“. Das Tool hatte nicht einmal die Möglichkeit, zusätzliche Details zu den aufgeführten Kursen anzuzeigen.
Die Listenansicht verwendet die DataTables jQuery-Plugin um eine dynamische, robuste Methode zum Sortieren und Filtern der Tabellendaten bereitzustellen. Eine viel weniger auffällige Komponente dieser Seite ist jedoch die umfangreiche Arbeit, die in die Erstellung ihrer Stylesheets geflossen ist. Das Course Admin Tool ist der erste edX-Dienst, der den vollen Funktionsumfang bietet UX-Musterbibliothek, eine Reihe von Mustern und UI-Komponenten, die vom UX-Team von edX entworfen wurden. Die Musterbibliothek ist noch in Arbeit, und daher fehlen ihr viele wichtige Komponenten wie Navigationsleisten und Menüs. In früheren Versionen des Kursverwaltungstools Das Bootstrap-Framework von Twitter wurde verwendet, um diese Lücken zu „füllen“. Ein weiteres fehlendes Merkmal der Musterbibliothek ist die Modularität oder die Fähigkeit, die Bibliothek ohne große Modifikationen in andere Plattformen „einzustecken und zu spielen“. Infolgedessen erwies sich das Einbinden der Musterbibliothek in das Course Admin Tool als ziemlich herausfordernd.
Modularisierung der Musterbibliothek
Als die ersten Arbeiten am Course Admin Tool begannen, mussten die folgenden Schritte befolgt werden, um die Musterbibliothek auf einer Website zu verwenden:
- Klonen Sie das Git-Repository „ux-pattern-library“ auf Ihren lokalen Computer
- Installieren Sie die Bower-Abhängigkeiten der Bibliothek
- Kopieren Sie das Repository in Ihr Website-Verzeichnis
- Fügen Sie entweder main-ltr.scss ein oder kompilieren Sie main-ltr.css und fügen Sie es in Ihre Haupt-HTML-Datei ein
Wenn dies dem traditionellen Ansatz von Frontend-Abhängigkeiten folgen würde, sollten diese Schritte im Idealfall wie folgt zusammengefasst werden:
- Installieren Sie die Musterbibliothek über das Terminal als Bower-Abhängigkeit
- Fügen Sie main-ltr.scss oder main-ltr.css in Ihre HTML-Datei ein
Diese Schritte zusammenzufassen ist ein ziemlich langer und ehrgeiziger Prozess. Aufgrund des kurzen Zeitrahmens, in dem wir dieses Tool entwickeln mussten, habe ich es auf mich genommen, es hinzuzufügen minimale Plug-and-Play-Unterstützung für die Musterbibliothek, bis zu dem Punkt, an dem nur noch die folgenden drei Schritte erforderlich waren:
- Installieren Sie die Musterbibliothek über das Terminal als Bower-Abhängigkeit
- Kopieren Sie main-ltr.scss an eine andere Stelle und ändern Sie die Abhängigkeitspfade
- Main-ltr.scss in die HTML-Datei einbinden und zur Laufzeit kompilieren
Obwohl nicht ideal, funktionierte dieser Ansatz für die Zwecke des Kursverwaltungstools, und die Musterbibliothek konnte gut neben Bootstrap sitzen. Gegen Ende meines Praktikums konnte ich mit dem UX-Team, Making, über die Modularisierung der Pattern Library diskutieren mehrere Vorschläge wie die Musterbibliothek besser in Bower integriert werden kann.
Endprodukt!
Heute hat sich das Course Admin Tool zu einem viel ausgereifteren Produkt entwickelt, komplett mit funktionierenden Erstellungs-, Bearbeitungs- und Detailansichten für Kurse. Die DataTable unterstützt jetzt Paginierung und erlaubt Ihnen sogar anzugeben, wie viele Kurse pro Seite aufgelistet werden sollen.
Rückblickend fühle ich mich geehrt, der erste Entwickler zu sein, der an diesem Tool arbeitet. Ich bin stolz auf die Arbeit, die ich bei edX geleistet habe. Die gesamte Erfahrung als edX-Praktikant hat mir viel beigebracht, nicht nur in Bezug auf die Fähigkeiten, sondern auch in Bezug auf Teamzusammenarbeit und -planung. Letzten Sommer habe ich bei einem anderen Startup in einer Garage ein Praktikum gemacht. Meine beiden (und einzigen) Mitarbeiter waren der CEO und der Programmierleiter. Bei edX konnte ich mit einem vollwertigen, engagierten Team zusammenarbeiten, das offen für meine Vorschläge und mein Feedback war. Dabei lernte ich, zur Gruppendynamik beizutragen und die Entwicklungsprozesse größerer Teams zu verstehen. Ich möchte Clinton Blackburn, Zach Rockwell, Amanda Nanni und all meinen Mitpraktikanten dafür danken, dass sie diesen Sommer zu einem großartigen Erlebnis gemacht haben, und ich hoffe, in naher Zukunft wieder zur Open edX-Plattform beitragen zu können.
