Como ocorre o processo de criação de uma plataforma de ensino? Chegou o momento de descobrir!

O nosso time de Desenvolvimento compartilhou a experiência de criação da nossa Plataforma Cubos Academy, desde a escolha das linguagens usadas até a rotina de teste.

Confira como tudo ocorreu e entenda mais sobre o desenvolvimento de um projeto.

Para facilitar, dividimos o texto nas seguintes etapas:

  • Linguagens escolhidas;
  • Principais funcionalidades da Plataforma;
  • Testes essenciais para disponibilizar a plataforma;
  • Rotina de testes na Plataforma.

Vamos lá? E caso tenha dúvidas em alguns termos usados durante o texto, confira o nosso Dicionário Programação do Zero. 😉

1.Linguagens utilizadas

No Front-End:


As aplicações web geralmente são feitas em JavaScript, pois além de ser bastante leve, é a linguagem nativa dos navegadores, que conseguem interpretar o JS por si só, não necessitando de qualquer tipo de máquina virtual para rodar os projetos.

A plataforma foi escrita em TypeScript, um superset do JavaScript que permite tipagem e uso de interfaces que ajudam a manipular os dados da aplicação.

O TypeScript facilita o trabalho em equipe, pois ele informa os tipos das variáveis e dos retornos das funções, não permitindo erros de tipagem e auxiliando com recursos de autocompletar integrados com o editor de texto.

Foi utilizado o React para a construção do Front-end. O React é uma biblioteca JS que auxilia na construção de interfaces de usuário, manipulação de DOM e gerência dos estados da aplicação.

Para estilização, utilizamos css modules, que gera identificadores únicos para as classes css, evitando conflitos em classes com os mesmos nomes, em conjunto com o sass, que traz funções a mais para o css que facilitam o desenvolvimento.

No Back-End:

Assim como no front, a API do back-end foi feita em TypeScript, para fazer as conexões e acelerar o processo de desenvolvimento.

Utilizamos um framework open-source da Cubos, conhecido com sdkgen. Através dele foi possível implementar API’s rapidamente e com um mínimo de esforço descrevendo endpoints e tipagens em uma linguagem própria tendo sempre uma forte garantia daqueles dados sendo transmitidos, tanto para o servidor quando para o cliente.

Para o banco de dados, optamos por utilizar o PostgreSQL, já que possui um intenso fluxo de dados com garantia de estabilidade e segurança e tudo isso a baixíssimo custo tanto processamento quanto financeiro.


2. Principais funcionalidades da plataforma:

A plataforma foi construída visando melhorar a experiência do aluno junto a metodologia LiveHelp. Explicamos sobre essa metodologia no vídeo abaixo:

A tela principal exibe as informações iniciais para o estudante:  cursos matriculados, comunicados e outros cursos disponíveis da Cubos Academy.

Plataforma Cubos Academy - página inicial

O card principal mostra informações sobre o curso selecionado, tais como: Aulas concluídas, Horas de curso concluídas e Exercícios finalizados, além de exibir a data da próxima aula e acesso à página do curso e um atalho para a próxima aula quando disponível ou reassistir a última aula.

Plataforma Cubos Academy - Card inicial

Na tela de curso, o estudante consegue ter acesso aos comunicados do curso, informações e ementa do curso, visualizar informações sobre os professores e ter acesso aos desafios passados durante o curso.

A partir desta página o estudante consegue acessar a página de aula de 2 formas, utilizando a linha do tempo no topo da página que mostra o progresso do curso e quais aulas foram liberadas e feitas durante as semanas do curso ou acessando a tela de conteúdo do curso, onde ele pode visualizar as matérias do curso e suas aulas.

Plataforma Cubos Academy - Progresso das Aulas

A tela de aula talvez seja a mais complexa da plataforma, pois ela muda conforme o tipo de aula (ao vivo, LiveHelp, gravada ou exercício), além da barra lateral onde são mostradas as aulas disponíveis de forma cronológica, onde o aluno pode também carregar mais aulas rolando para cima ou para baixo nesta barra.

A tela de conteúdo mostra as aulas divididas por unidades e por matérias, além de permitir uma pesquisa por conteúdos que estejam dentro dessas aulas.

Plataforma Cubos Academy - Acesso as aulas

O estudante consegue chegar até a tela da aula de 3 maneiras:

  1. Acessando através do atalho rápido na página principal, que leva para a próxima aula que esteja disponível ou para rever a última aula.
  2. Através da linha do tempo na tela de curso.
  3. Utilizando a tela de conteúdo, escolhendo uma das aulas.

Um dos desafios durante o desenvolvimento da plataforma foram os ajustes para o curso de Product Management, que utiliza nomenclaturas diferentes para termos como aulas, módulos, exercícios e desafios, por ter uma experiência gamificada.

Para isso, utilizamos recursos de internacionalização, mas ao invés de alterar o idioma, alteramos os termos a partir de qual curso está selecionado.

3. Testes essenciais para disponibilizar a plataforma

Executamos testes manuais durante 2 semanas, nos quais a equipe de Produto da Cubos Academy ficava utilizando a plataforma e tentando simular possíveis ações dos usuários que poderiam quebrar o fluxo esperado durante o desenvolvimento.

Encontramos alguns problemas como a falta de tratamento de erros retornados do servidor, o que nos levou a criar uma página que o usuário seria redirecionado caso algo desse errado nas requisições ao servidor.

4. Rotina de testes na plataforma

Testes Manuais - manutenção da plataforma:

Primeiramente os possíveis fluxos que o usuário pode fazer foram documentados no Notion, para posteriormente serem testados no ambiente de testes.

A cada nova subida de ajustes e features, esses fluxos são testados novamente para garantir que não tenha nenhum bug. Ao subir para a plataforma, esses testes são feitos novamente e assim tentamos garantir que não tenha nenhum bug na plataforma.

Teste End-To-End - manutenção da plataforma:

Os testes End-to-End são automatizados e simulam fluxos que o usuário pode fazer desde o login e assim realizar uma verificação do sistema de uma forma mais completa ao simular o ambiente real.

Os testes são feitos utilizando o Cypress, que é um framework utilizado para automação de testes End-To-End. É utilizado o JavaScript como linguagem de programação e os testes são executados no Chrome.

Além disso, usamos o Cucumber, uma ferramenta que pode ser utilizada em conjunto com o Cypress e permite a escrita de testes automatizados no formato BDD (Behaviour-Driven Development).

Resultado e próximos passos

Hoje, todos os nossos cursos já acontecem dentro do ambiente da Plataforma Cubos Academy e estamos com várias funcionalidades novas em implantação.

Na opinião dos nossos estudantes, a Plataforma possui nota 8,6, o que nos mostra que todo o trabalho e dedicação da equipe valeu a pena. Mas ainda há o que melhorar.

Já temos em vista várias melhorias e implantação de novas funcionalidades, para cada vez mais proporcionar uma melhor experiência a nossos estudantes.

E você, que ainda não conhece a Cubos Academy, confirma nosso site e redes sociais. Vamos adorar te ver em uma das nossas turmas!

Instagram

LinkedIn

Youtube

Facebook

TikTok