Мене звуть Тайлер Нікерсон, я молодший студент Вустерського політехнічного інституту у Вустері, Массачусетс. Протягом останніх трьох місяців я мав задоволення бути стажером edX, працюючи з командою електронної комерції. Команда електронної комерції розробляє інструменти, які використовуються для кращого керування та підтримки монетизованих курсів, наприклад курсів із підтвердженими сертифікатами.
Під час свого стажування я познайомився з безліччю фреймворків і бібліотек, які раніше були мені невідомі (зокрема, Django та BackboneJS). Хоча я допоміг створити тут багато чудових нових функцій, я хотів би використати цей час, щоб обговорити досить інноваційний продукт, який нещодавно з’явився в команді електронної комерції: інструмент адміністрування курсу. Я також торкнуся теми роботи з темами та стилями, які були використані для цього інструменту, оскільки це включає новаторську роботу, пов’язану з використанням edX шаблонів і компонентів UX на різних платформах.
Інструмент адміністрування курсу
В останні кілька тижнів мого стажування мене залучили для створення перших сторінок того, що стане Course Admin Tool, порталом для менеджерів проектів (PMs) для створення та редагування продуктів платних курсів, таких як підтверджені сертифікати, професійна освіта, і кредитні місця. До появи інструменту ці зміни вносилися за допомогою панелі адміністратора Django, неінтуїтивно зрозумілого, орієнтованого на розробника інструмента, який не призначений для користувача. Інструмент адміністрування курсу надає інтуїтивно зрозумілий спрощений інтерфейс, який допомагає автоматизувати процес додавання продуктів курсу.
Мені випала честь бути першим розробником, який працював над інструментом, розробляв початковий список який містить список курсів, доступних для перегляду та редагування. На ранніх стадіях перегляд списку складався лише з DataTable, поля фільтра та нефункціональної кнопки «Додати новий курс». Інструмент навіть не мав можливості відображати додаткові відомості про перелічені курси.
Перегляд списку використовує Плагін DataTables jQuery щоб забезпечити динамічний надійний метод сортування та фільтрації даних таблиці. Однак набагато менш помітним компонентом цієї сторінки є велика робота, яка була витрачена на створення її таблиць стилів. Інструмент адміністрування курсів – це перша служба edX, яка повністю підтримує Бібліотека шаблонів UX, набір шаблонів і компонентів інтерфейсу користувача, розроблених командою UX edX. Робота над бібліотекою шаблонів все ще триває, і, як наслідок, у ній відсутні багато важливих компонентів, таких як панелі навігації та меню. У ранніх версіях Інструмента адміністрування курсу, Фреймворк Twitter Bootstrap використовувався для «заповнення» цих прогалин. Іншою відсутньою особливістю бібліотеки шаблонів є модульність або можливість «підключати та використовувати» бібліотеку в інших платформах без серйозних модифікацій. У результаті включити бібліотеку шаблонів у інструмент адміністрування курсу виявилося досить складним завданням.
Модуляція бібліотеки шаблонів
Коли вперше почали працювати над Інструментом адміністрування курсу, для використання бібліотеки шаблонів на веб-сайті потрібно було виконати наступні кроки:
- Клонуйте репозиторій Git 'ux-pattern-library' на вашій локальній машині
- Встановіть залежності Bower бібліотеки
- Скопіюйте репозиторій у каталог свого сайту
- Включіть main-ltr.scss або скомпілюйте та включіть main-ltr.css у свій основний HTML-файл
В ідеалі, якщо це слідуватиме традиційному підходу зовнішніх залежностей, ці кроки слід скоротити до наступного:
- Встановіть бібліотеку шаблонів як залежність Bower за допомогою терміналу
- Включіть main-ltr.scss або main-ltr.css у свій файл HTML
Узагальнення цих кроків є досить тривалим і амбітним процесом. Через короткий проміжок часу, протягом якого ми мали розробити цей інструмент, я взяв на себе зобов’язання додати мінімальна підтримка plug-and-play для бібліотеки шаблонів, до того моменту, коли потрібно було виконати лише наступні три кроки:
- Встановіть бібліотеку шаблонів як залежність Bower за допомогою терміналу
- Скопіюйте main-ltr.scss в інше місце та змініть його шляхи залежностей
- Включіть main-ltr.scss у файл HTML і скомпілюйте його під час виконання
Хоча цей підхід не був ідеальним, він спрацював для цілей інструменту адміністрування курсу, і бібліотека шаблонів змогла чудово поєднатися з Bootstrap. Ближче до кінця свого стажування я зміг обговорити модульність бібліотеки шаблонів з командою UX, зробивши кілька пропозицій про те, як бібліотеку шаблонів можна краще інтегрувати з Bower.
Кінцевий продукт!
Сьогодні Course Admin Tool перетворився на набагато більш зрілий продукт, доповнений функціонуючими режимами створення, редагування та перегляду деталей для курсів. DataTable тепер підтримує розбиття на сторінки та навіть дозволяє вказати, скільки курсів перелічувати на сторінку.
Оглядаючись назад, я вважаю за честь бути першим розробником, який працював над цим інструментом. Я пишаюся своєю роботою в edX. Весь досвід стажера edX навчив мене багато чому, не лише щодо набору навичок, але й щодо командної співпраці та планування. Минулого літа я стажувався в іншому стартапі, який базувався в гаражі. Двоє моїх (і єдиних) колег були генеральним директором і керівником програм. В edX я мав змогу працювати з повноцінною відданою командою, яка була відкрита до моїх пропозицій і відгуків. Це навчило мене робити внесок у динаміку групи та розуміти процеси розвитку великих команд. Я хотів би подякувати Клінтону Блекберну, Заку Роквеллу, Аманді Нанні та всім моїм колегам-стажерам за те, що вони зробили це чудове літо, і сподіваюся найближчим часом знову зробити внесок у платформу Open edX.
