Mi nombre es Tyler Nickerson y soy un estudiante de tercer año en el Instituto Politécnico de Worcester en Worcester, MA. Durante los últimos tres meses, he tenido el placer de ser pasante de edX trabajando con el equipo de comercio electrónico. El equipo de comercio electrónico desarrolla herramientas que se utilizan para administrar y mantener mejor los cursos monetizados, como aquellos con certificados verificados.
Durante mi pasantía, me familiaricé con una gran cantidad de marcos y bibliotecas que antes desconocía (especialmente Django y BackboneJS). Si bien he ayudado a crear muchas funciones nuevas excelentes aquí, me gustaría aprovechar este momento para analizar un producto bastante innovador que surgió recientemente del equipo de comercio electrónico: la herramienta de administración del curso. También me referiré al trabajo de tematización y estilo que se incluyó en la herramienta, ya que implica un trabajo innovador que involucra el uso de edX de patrones y componentes UX en todas las plataformas.
La herramienta de administración del curso
En las últimas semanas de mi pasantía, me contrataron para crear las primeras páginas de lo que se convertiría en Course Admin Tool, un portal para que los gerentes de proyecto (PM) creen y editen productos de cursos pagos, como certificados verificados, educación profesional, y asientos de crédito. Antes de la existencia de la herramienta, estos cambios se realizaban mediante el panel de administración de Django, una herramienta no intuitiva y orientada al desarrollador que es cualquier cosa menos orientada al usuario. La herramienta de administración del curso proporciona una interfaz intuitiva y optimizada para ayudar a automatizar el proceso de agregar productos del curso.
Tuve el honor de ser el primer desarrollador en trabajar en la herramienta, desarrollando la vista de lista inicial que enumera los cursos disponibles para ver y editar. En sus primeras etapas, la vista de lista constaba solo de una tabla de datos, un cuadro de filtro y un botón no funcional "Agregar nuevo curso". La herramienta ni siquiera tenía la capacidad de mostrar detalles adicionales para los cursos enumerados.
La vista de lista utiliza el Complemento jQuery de DataTables para proporcionar un método dinámico y robusto de ordenar y filtrar los datos de la tabla. Sin embargo, un componente mucho menos notable de esta página es el extenso trabajo que se llevó a cabo para construir sus hojas de estilo. La herramienta de administración del curso es el primer servicio edX que presenta completamente el Biblioteca de patrones UX, un conjunto de patrones y componentes de interfaz de usuario diseñados por el equipo de UX de edX. La biblioteca de patrones aún es un trabajo en progreso y, como resultado, le faltan muchos componentes cruciales, como las barras de navegación y los menús. En las primeras versiones de la herramienta de administración del curso, El marco de Bootstrap de Twitter se utilizó para “llenar” estos vacíos. Otra característica que falta en la biblioteca de patrones es la modularidad, o la capacidad de "conectar y reproducir" la biblioteca en otras plataformas sin grandes modificaciones. Como resultado, incluir la biblioteca de patrones en la herramienta de administración del curso resultó ser bastante desafiante.
Modularización de la biblioteca de patrones
Cuando se comenzó a trabajar por primera vez en la herramienta de administración del curso, se debían seguir los siguientes pasos para utilizar la biblioteca de patrones en un sitio web:
- Clone el repositorio Git 'ux-pattern-library' en su máquina local
- Instale las dependencias de Bower de la biblioteca
- Copie el repositorio en el directorio de su sitio web
- Incluya main-ltr.scss o compile e incluya main-ltr.css en su archivo HTML principal
Idealmente, si esto siguiera el enfoque tradicional de las dependencias frontend, estos pasos deberían resumirse en lo siguiente:
- Instale la biblioteca de patrones como una dependencia de Bower usando la terminal
- Incluya main-ltr.scss o main-ltr.css en su archivo HTML
Resumir estos pasos es un proceso bastante largo y ambicioso. Debido al corto tiempo que tuvimos para desarrollar esta herramienta, me encargué de agregar soporte mínimo plug-and-play para la biblioteca de patrones, hasta el punto en que solo se requirieron los siguientes tres pasos:
- Instale la biblioteca de patrones como una dependencia de Bower usando la terminal
- Copie main-ltr.scss en otro lugar y modifique sus rutas de dependencia
- Incluya main-ltr.scss en el archivo HTML y compílelo en tiempo de ejecución
Aunque no es lo ideal, este enfoque funcionó para los propósitos de la herramienta de administración del curso, y la biblioteca de patrones pudo encajar muy bien junto con Bootstrap. Hacia el final de mi pasantía, pude discutir la modularización de Pattern Library con el equipo UX, haciendo varias sugerencias sobre cómo la biblioteca de patrones se puede integrar mejor con Bower.
¡Producto final!
Hoy en día, la herramienta de administración del curso ha evolucionado para convertirse en un producto mucho más maduro, completo con funciones de creación, edición y vistas detalladas para los cursos. DataTable ahora admite la paginación e incluso le permite especificar cuántos cursos enumerar por página.
En retrospectiva, me siento honrado de ser el primer desarrollador en trabajar en esta herramienta. Estoy orgulloso del trabajo que he hecho en edX. Toda la experiencia de ser pasante de edX me ha enseñado mucho, no solo en términos de habilidades, sino también en términos de colaboración y planificación del equipo. El verano pasado hice una pasantía en otra startup con sede en un garaje. Mis dos (y únicos) compañeros de trabajo eran el director ejecutivo y el líder de programación. En edX, pude trabajar con un equipo completo y dedicado que estaba abierto a mis sugerencias y comentarios. Hacerlo me enseñó cómo contribuir a la dinámica del grupo y cómo entender los procesos de desarrollo de equipos más grandes. Me gustaría agradecer a Clinton Blackburn, Zach Rockwell, Amanda Nanni y todos mis compañeros pasantes por hacer de este un gran verano, y espero contribuir a la plataforma Open edX nuevamente en un futuro cercano.
