我的名字是泰勒尼克森，我是马萨诸塞州伍斯特市伍斯特理工学院的一名大三学生。 在过去的三个月里，我有幸成为 edX 的实习生，与电子商务团队一起工作。 电子商务团队开发了用于更好地管理和维护货币化课程的工具，例如具有验证证书的课程。
在实习期间，我熟悉了许多我以前不知道的框架和库（尤其是 Django 和 BackboneJS）。 虽然我在这里帮助构建了许多很棒的新功能，但我想借此机会讨论一下电子商务团队最近出现的一个相当创新的产品：课程管理工具。 我还将介绍该工具的主题和样式工作，因为它涉及涉及 edX 跨平台使用 UX 模式和组件的开创性工作。
课程管理工具
在实习的最后几周，我被招募来构建课程管理工具的早期页面，这是一个供项目经理 (PM) 创建和编辑付费课程产品的门户，例如经过验证的证书、专业教育、和信用席位。 在该工具存在之前，这些更改是使用 Django 的管理面板进行的，这是一个非直观的、面向开发人员的工具，它完全不是面向用户的。 课程管理工具提供了一个直观、流线型的界面，以帮助自动化添加课程产品的过程。
我有幸成为第一个开发该工具的开发人员，开发 初始列表视图 列出可供查看和编辑的课程。 在早期阶段，列表视图仅包含一个数据表、一个过滤器框和一个无功能的“添加新课程”按钮。 该工具甚至无法显示所列课程的其他详细信息。
列表视图使用 数据表 jQuery 插件 提供一种动态的、稳健的方法来排序和过滤表的数据。 然而，这个页面的一个不太引人注目的组件是构建其样式表的大量工作。 课程管理工具是第一个完全具有 UX 模式库，一套由edX的UX团队设计的模式和UI组件。 模式库仍在进行中，因此缺少许多关键组件，例如导航栏和菜单。 在课程管理工具的早期版本中， Twitter的Bootstrap框架 被用来“填补”这些空白。 模式库的另一个缺失特性是模块化，即无需大量修改即可将库“即插即用”到其他平台的能力。 因此，在课程管理工具中包含模式库被证明是相当具有挑战性的。
模块化模式库
首次开始使用课程管理工具时，需要遵循以下步骤才能在网站上使用模式库：
- 将“ux-pattern-library”Git 存储库克隆到本地计算机
- 安装库的 Bower 依赖项
- 将存储库复制到您的网站目录
- 在主 HTML 文件中包含 main-ltr.scss 或编译并包含 main-ltr.css
理想情况下，如果这要遵循前端依赖的传统方法，则这些步骤应压缩为以下内容：
- 使用终端将模式库安装为 Bower 依赖项
- 在 HTML 文件中包含 main-ltr.scss 或 main-ltr.css
浓缩这些步骤是一个相当漫长而雄心勃勃的过程。 由于我们必须开发此工具的时间很短，因此我自己添加了 最小的即插即用支持 对于模式库，只需要以下三个步骤：
- 使用终端将模式库安装为 Bower 依赖项
- 将 main-ltr.scss 复制到别处并修改其依赖路径
- 在 HTML 文件中包含 main-ltr.scss 并在运行时编译它
虽然不理想，但这种方法适用于课程管理工具，并且模式库能够很好地与 Bootstrap 并列。 在实习快结束时，我能够与 UX 团队讨论模式库的模块化，使 几个建议 关于模式库如何更好地与 Bower 集成。
最终产品！
今天，课程管理工具已经发展成为一个更加成熟的产品，包括功能性的课程创建、编辑和详细视图。 DataTable 现在支持分页，甚至允许您指定每页列出多少课程。
回想起来，我很荣幸成为第一个开发此工具的开发人员。 我为我在 edX 所做的工作感到自豪。 作为 edX 实习生的整个经历教会了我很多，不仅在技能方面，而且在团队协作和规划方面。 去年夏天，我在另一家位于车库的初创公司实习。 我的两个（也是唯一的）同事是 CEO 和编程负责人。 在 edX，我能够与一个成熟、敬业的团队合作，他们乐于接受我的建议和反馈。 这样做教会了我如何为团队的活力做出贡献，以及如何理解更大团队的发展过程。 我要感谢 Clinton Blackburn、Zach Rockwell、Amanda Nanni 和我所有的实习生伙伴们让这个夏天变得如此美好，我希望在不久的将来再次为 Open edX 平台做出贡献。
