Meu nome é Tyler Nickerson e sou um calouro em ascensão no Worcester Polytechnic Institute em Worcester, MA. Nos últimos três meses, tive o prazer de ser estagiário da edX trabalhando com a equipe de E-Commerce. A equipe de E-Commerce desenvolve ferramentas que são utilizadas para melhor gerenciar e manter cursos monetizados, como aqueles com certificados verificados.
Durante meu estágio, me familiarizei com uma série de frameworks e bibliotecas que antes eram desconhecidas para mim (principalmente Django e BackboneJS). Embora eu tenha ajudado a criar muitos novos recursos excelentes aqui, gostaria de aproveitar este momento para discutir um produto bastante inovador que surgiu recentemente da equipe de comércio eletrônico: a ferramenta de administração do curso. Também abordarei o trabalho de tema e estilo que entrou na ferramenta, pois envolve um trabalho inovador envolvendo o uso de padrões e componentes de UX pela edX em todas as plataformas.
A ferramenta de administração do curso
Nas últimas semanas do meu estágio, fui recrutado para construir as primeiras páginas do que se tornaria a Course Admin Tool, um portal para gerentes de projeto (PMs) para criar e editar produtos de cursos pagos, como certificados verificados, educação profissional, e assentos de crédito. Antes da existência da ferramenta, essas mudanças eram feitas usando o painel de administração do Django, uma ferramenta não intuitiva e orientada ao desenvolvedor que é tudo menos voltada para o usuário. A ferramenta de administração do curso fornece uma interface intuitiva e simplificada para ajudar a automatizar o processo de adição de produtos do curso.
Tive a honra de ser o primeiro desenvolvedor a trabalhar na ferramenta, desenvolvendo a visualização de lista inicial que lista os cursos disponíveis para visualização e edição. Em seus estágios iniciais, o modo de exibição de lista consistia apenas em uma DataTable, uma caixa de filtro e um botão não funcional “Adicionar novo curso”. A ferramenta nem sequer tinha a capacidade de exibir detalhes adicionais para os cursos listados.
A visualização de lista usa o Plugin DataTables jQuery para fornecer um método dinâmico e robusto de classificação e filtragem dos dados da tabela. No entanto, um componente muito menos perceptível desta página é o extenso trabalho de construção de suas folhas de estilo. A ferramenta de administração do curso é o primeiro serviço edX a apresentar totalmente o Biblioteca de padrões de experiência do usuário, um conjunto de padrões e componentes de interface do usuário projetados pela equipe de UX da edX. A Biblioteca de Padrões ainda é um trabalho em andamento e, como resultado, está faltando muitos componentes cruciais, como barras de navegação e menus. Nas primeiras versões da Ferramenta de administração do curso, Estrutura Bootstrap do Twitter foi usado para “preencher” essas lacunas. Outro recurso ausente da Biblioteca de Padrões é a modularidade, ou a capacidade de “plug and play” da biblioteca em outras plataformas sem modificações pesadas. Como resultado, incluir a Biblioteca de Padrões na Ferramenta de Administração do Curso provou ser bastante desafiador.
Modularizando a Biblioteca de Padrões
Quando o trabalho começou na ferramenta de administração do curso, as etapas a seguir precisavam ser seguidas para usar a biblioteca de padrões em um site:
- Clone o repositório Git 'ux-pattern-library' para sua máquina local
- Instale as dependências do Bower da biblioteca
- Copie o repositório para o diretório do seu site
- Inclua main-ltr.scss ou compile e inclua main-ltr.css em seu arquivo HTML principal
Idealmente, se isso seguir a abordagem tradicional de dependências de front-end, essas etapas devem ser condensadas no seguinte:
- Instale a biblioteca de padrões como uma dependência do Bower usando o terminal
- Inclua main-ltr.scss ou main-ltr.css em seu arquivo HTML
A condensação dessas etapas é um processo bastante longo e ambicioso. Devido ao curto espaço de tempo em que tivemos para desenvolver esta ferramenta, resolvi acrescentar suporte plug-and-play mínimo para a Biblioteca de padrões, até o ponto em que apenas as três etapas a seguir foram necessárias:
- Instale a biblioteca de padrões como uma dependência do Bower usando o terminal
- Copie main-ltr.scss em outro lugar e modifique seus caminhos de dependência
- Inclua main-ltr.scss no arquivo HTML e compile-o em tempo de execução
Embora não seja ideal, essa abordagem funcionou para os propósitos da ferramenta de administração do curso, e a biblioteca de padrões foi capaz de se encaixar bem ao lado do Bootstrap. No final do meu estágio, pude discutir a modularização da Biblioteca de Padrões com a Equipe de UX, tornando várias sugestões sobre como a biblioteca de padrões pode ser melhor integrada ao Bower.
Produto final!
Hoje, a ferramenta de administração do curso evoluiu para ser um produto muito mais maduro, completo com visualizações funcionais de criação, edição e detalhes para cursos. O DataTable agora suporta paginação e até permite especificar quantos cursos listar por página.
Em retrospecto, sinto-me honrado por ser o primeiro desenvolvedor a trabalhar nesta ferramenta. Tenho orgulho do trabalho que fiz na edX. Toda a experiência de ser um estagiário da edX me ensinou bastante, não apenas em termos de conjunto de habilidades, mas também em termos de colaboração e planejamento em equipe. No verão passado, estagiei em outra startup com sede em uma garagem. Meus dois (e únicos) colegas de trabalho eram o CEO e o líder de programação. Na edX, pude trabalhar com uma equipe completa e dedicada, aberta às minhas sugestões e feedback. Fazer isso me ensinou a contribuir para a dinâmica do grupo e a entender os processos de desenvolvimento de equipes maiores. Gostaria de agradecer a Clinton Blackburn, Zach Rockwell, Amanda Nanni e a todos os meus colegas estagiários por fazer deste um ótimo verão, e espero contribuir com a plataforma Open edX novamente em um futuro próximo.
