Executando verificação de segurança...
6

[PITCH] Estou desenvolvendo uma IDE online para estudantes e professores

Contextualização

Fui aluno do curso de Informática no IFRN, ingressando em 2021, quando as aulas ainda eram remotas devido à pandemia. Como já tinha conhecimentos em programação, sempre fui um aluno avançado.

Aulas remotas

As aulas remotas via Google Meet naturalmente traziam vários desafios: muitos alunos não tinham acesso a bons equipamentos e internet, a interação era mais complicada, entre outros problemas.

Configurar um ambiente de desenvolvimento é complicado para quem é iniciante. Muitos alunos tinham dificuldade nessa parte, e muitas vezes eram necessárias aulas inteiras apenas para deixar tudo pronto antes de começar.

Depois que o ambiente estava configurado, a dinâmica era: o professor compartilhava a tela e os alunos tentavam acompanhar. Era muito comum os alunos se perderem e pedirem para o professor mostrar outra parte do código ou outro arquivo para conseguirem copiar, o que frequentemente atrapalhava a aula. O professor tinha que escolher entre esperar os alunos copiarem o código ou seguir com a aula.

Quando um aluno tinha alguma dúvida, ou ele compartilhava a tela (e ficava aquela situação do professor tentando explicar o que fazer, o que nem sempre dava certo), ou compartilhava o código via texto no chat do Meet (o que fazia a indentação ser perdida e às vezes o código era até cortado). Isso dificultava ainda mais o professor entender o progresso dos alunos — o que já é difícil em uma turma com 40 alunos.

Aulas presenciais

Com a volta das aulas presenciais, agora era possível acompanhar um pouco mais de perto os alunos. Internet não era mais um problema e todo mundo tinha computadores minimamente usáveis. Mas ainda havia alguns desafios.

O professor ainda precisava compartilhar o código no projetor e também no Meet, pois os alunos sentados mais no fundo não conseguiam ver. Ainda havia o problema dos alunos se perderem e às vezes pedirem para o professor parar um pouco para mostrar outra parte do código.

Quando um aluno tinha alguma dúvida, mesmo que pequena, era necessário o professor ir até a mesa dele, o que era cansativo em uma turma com 40 alunos. Por isso, eu e outros estudantes mais experientes auxiliávamos os colegas.

Além disso, quando usavam os computadores da escola, os alunos frequentemente perdiam todo o código, pois os computadores compartilhados frequentemente davam problema ou eram formatados.

A solução

Claro, usar Git já resolvia vários desses problemas. Alguns professores usavam o Replit, que permitia executar o código sem configurar o ambiente e ainda compartilhar para outra pessoa editar em tempo real, igual ao Google Docs. Mas hoje em dia o Replit nem é mais uma opção viável. Como o ambiente de desenvolvimento era criado remotamente, gerando alto custo de infraestrutura, o Replit acabou limitando bastante o uso gratuito.

Então tive a ideia de desenvolver uma IDE online, parecida com o Replit, mas com algumas diferenças importantes:

Primeiro: permitir executar o código dentro do navegador, sem precisar de infraestrutura cara e complexa.

Segundo: criar uma sala de aula onde o professor e cada aluno tivessem seus próprios ambientes de desenvolvimento separados. Cada aluno teria acesso apenas ao seu ambiente, e o professor poderia compartilhar seu código com todos os alunos e editar o código dos alunos também. No Replit, só tinha um ambiente, então um aluno poderia estar editando um arquivo e outro ir lá e editar, sem nenhum controle.

Assim nasceu a ideia do Codelabs.

Codelabs Screenshot

O desafio técnico

Tive essa ideia desde aquela época, por volta de 2022, mas a tecnologia para fazer isso ainda não estava tão madura quanto está hoje. A solução que eu tinha para executar direto no navegador era tentar executar algum JavaScript em um contexto isolado, como em um iframe, ou usar algumas soluções com WebAssembly que ainda estavam bem no começo.

Também era necessário criar todo o mecanismo para permitir que o código fosse salvo online e pudesse ser editado por várias pessoas ao mesmo tempo — eu não sabia como fazer isso.

Por isso, deixei esse projeto na gaveta por alguns anos. Mas hoje, a tecnologia evoluiu, e eu também evoluí:

  • Em 2023, a API do WebContainers da StackBlitz foi lançada, permitindo criar ambientes de desenvolvimento Node.js completos diretamente no navegador.
  • Eu estudei sobre CRDTs, que cuidam da parte de colaboração em tempo real. No Codelabs, utilizo o Loro.
  • Eu também descobri o Svelte, um framework JavaScript reativo que possui uma abordagem que eu prefiro em relação ao React, permitindo escrever um código que eu considero mais "bonito", com um gerenciamento de estados mais simples e talvez até maior performance e bundle menor.

Desde aquela época, de vez em quando eu tentava retomar o projeto. Já comecei a reescrever do zero algumas vezes, e a cada vez aprendi um pouco mais. Até que hoje finalmente decidi lançá-lo.

Ainda está em beta, e a funcionalidade de criar uma sala de aula onde todo mundo tem seu próprio ambiente de desenvolvimento ainda não foi implementada, mas agora possui uma base que eu considero sólida para prosseguir. Ainda tem muito trabalho pela frente.

Conclusão

Já apresentei para alguns professores, e eles aprovaram a ideia. Quero implementar esse aplicativo em algumas salas de aula para validar.

Alguém aí é professor? Acham que esse aplicativo faz sentido? Que soluções vocês usam na sala de aula?

Vocês podem acessar o projto nesse link: https://codelabs.vitordaniel.is-a.dev. O projeto é open source: https://github.com/vadolasi/codelabs.

Carregando publicação patrocinada...
2

Meus 2 cents,

Parabens pela iniciativa !

Da uma olhada em:

Etherpad

É um sistema de editor on-line colaborativo - costumo usar quando faco atividades onde varias pessoas precisam trabalhar juntas em um unico documento ou compartilhando de forma rapida uma ideia/brainstorm.


Outras iniciativas que tambem podem oferecer insigths:

Real-time collaborative online Python IDE

Rust collaborative text editor

Live share plugin

Collab

USACO Real-Time Collaborative Online IDE

CodeEditor

Duckly


Obrigado por compartilhar, otimo projeto !

Saude e Sucesso !

1
2
1