Eduq Brasil Docs

Appearance

📚 Salas Virtuais - Guia Completo ​

As Salas Virtuais são como uma extensão digital da sua sala de aula. Imagine que você pode criar um espaço online onde professores e alunos interagem, compartilham materiais, aplicam provas e muito mais - tudo como se estivessem em uma sala de aula real.

🎯 Para que serve?

  • Compartilhar avisos e materiais com seus alunos
  • Aplicar provas e atividades online
  • Gerenciar notas e correções
  • Interagir através de comentários e discussões

Dica: Este sistema teve uma atualização completa recentemente (versão 2.0) com um visual mais moderno e muitas melhorias!

🏗️ Como o Sistema Funciona (Por Dentro) ​

📦 As Peças do Quebra-Cabeça ​

Imagine o sistema como um conjunto de peças que se encaixam:

👩‍🏫 A Sala Virtual em Si ​

  • O que é: A "sala de aula" digital onde tudo acontece
  • Características especiais:
    • Cada turma pode ter sua própria sala virtual
    • Gera automaticamente uma imagem de capa (6 opções diferentes)
    • Está conectada à turma, disciplina e provas agendadas
    • Funciona de forma especial para Educação Infantil e Fluência Leitora

📝 Mural de Posts (Avisos e Materiais) ​

  • O que é: Como um quadro de avisos da sala de aula
  • O que você pode fazer:
    • Escrever avisos para a turma
    • Compartilhar arquivos (PDFs, vídeos, imagens, áudios)
    • Adicionar links de videoconferências
    • Anexar exercícios e jogos educacionais
  • Quem pode interagir: Alunos podem comentar, e o professor decide quem pode editar ou excluir

💬 Comentários ​

  • O que é: Discussões sobre os posts do mural
  • Como funciona:
    • Alunos e professores podem comentar
    • Apenas o autor do comentário pode editá-lo
    • Mantém a conversa organizada

📎 Anexos e Arquivos ​

  • O que você pode anexar:
    • 📄 PDFs - apostilas, exercícios, textos
    • 🎥 Vídeos - aulas gravadas, tutoriais
    • 🖼️ Imagens - gráficos, fotos, ilustrações
    • 🎵 Áudios - podcasts, pronúncias
    • 🔗 Links - videoconferências, sites externos
    • 🎮 Jogos e Exercícios - atividades interativas

📋 Tópicos de Atividades ​

  • O que é: Uma forma de organizar suas atividades em grupos
  • Como funciona: Você pode criar "tópicos" como "Revisão Final", "Trabalhos Práticos", etc., e organizar suas provas dentro desses grupos

👥 Professores da Sala ​

  • O que é: Sistema para adicionar mais professores à mesma sala virtual
  • Para que serve: Permite que mais de um professor gerencie uma turma

🎮 Onde Encontrar Cada Coisa (Rotas) ​

Para os desenvolvedores que precisam entender como o sistema se organiza:

Principais rotas do sistema:

  • Ver salas: /virtual_classrooms/index/:school_class_id (lista de salas)
  • Abrir uma sala: /virtual_classrooms/show/:id?tab=:tab (abre a sala em uma aba específica)
  • Criar/editar posts: /classroom_posts/create e /classroom_posts/update/:id
  • Comentários: /classroom_comments/create, /update, /delete
  • Tópicos de atividades: /activity_topics/new, /create

🎯 As 4 Abas da Sala Virtual ​

📌 1. Mural - O Coração da Sala Virtual ​

O que você encontrará aqui:

  • Um quadro de avisos digital onde você pode postar conteúdo para seus alunos
  • Um editor de texto moderno (como um Word simplificado) para escrever seus posts
  • Espaço para comentários e discussões
  • Suporte para anexar vários tipos de arquivos

Recursos principais:

  • ✍️ Editor TipTap - Um editor moderno que aceita formatação, links, imagens e muito mais
  • 📄 Anexos múltiplos - Adicione PDFs, vídeos, áudios, imagens, tudo em um único post
  • 💬 Comentários - Seus alunos podem interagir com o conteúdo
  • 📜 Rolagem infinita - Mostra 3 posts por vez, carregando automaticamente mais quando você rola a página
  • 🔒 Permissões - Controle quem pode editar ou excluir cada post

Como anexar arquivos:

  • Clique no ícone do tipo de arquivo que deseja anexar
  • Uma janela modal se abrirá para você fazer upload ou colar um link
  • Tipos suportados: PDFs, vídeos, imagens, áudios, videoconferências, exercícios e jogos

📚 2. Atividades - Provas e Trabalhos ​

O que você encontrará aqui:

  • Todas as provas e atividades agendadas para sua turma
  • Atividades organizadas em tópicos (por exemplo: "Provas Mensais", "Trabalhos Finais")
  • Status de correção de cada atividade

Filtros disponíveis:

  • 📊 Status: Corrigidas, aguardando correção, não corrigidas
  • 🎓 Modalidade: Online ou presencial
  • 📅 Ordenação: Por nome, data ou criação

👥 3. Pessoas - Professores e Alunos ​

O que você encontrará aqui:

  • Lista completa de todos os professores da sala
  • Lista completa de todos os alunos matriculados
  • Fotos e informações de perfil
  • Botão para adicionar novos professores à sala

📊 4. Notas - Boletim Online ​

O que você encontrará aqui:

  • Planilha com todas as notas dos alunos
  • Notas das provas e atividades
  • Importante: Não disponível para Educação Infantil

Para quem serve:

  • Professores veem e editam notas
  • Alunos veem suas próprias notas

2. Atividades ​

Funcionalidades:

  • Listagem de ScheduledExams agrupados por ActivityTopic
  • Filtros: status (corrigida, aguardando correção, não corrigida), modalidade (online/presencial)
  • Ordenação: padrão, alfabética, por data
  • Integração com sistema de agendamento de provas

Filtros Disponíveis:

  • Status de correção
  • Modalidade (online/presencial)
  • Ordenação por nome ou data de criação

3. Pessoas ​

Funcionalidades:

  • Listagem de professores e alunos
  • Gerenciamento de professores associados
  • Tabelas separadas com avatares
  • Modal para vincular novos professores

4. Notas ​

Funcionalidades:

  • Planilha com notas dos alunos
  • Integração com ScheduledExams::Response
  • Não disponível para Educação Infantil
  • Diferentes visualizações por tipo de usuário

🛠️ Tecnologias Utilizadas (Para Desenvolvedores) ​

🎨 Frontend - Aparência e Interação ​

Tailwind CSS (Design Moderno) ​

  • Sistema de design 100% integrado com Tailwind
  • Interface responsiva que funciona em celulares, tablets e computadores
  • Prefixo tw- para evitar conflitos com outros sistemas

Turbo Streams (Atualizações em Tempo Real) ​

  • O que isso significa? A página se atualiza automaticamente sem precisar recarregar
  • As 4 abas funcionam de forma independente
  • Mensagens de confirmação aparecem instantaneamente
  • A experiência parece um aplicativo moderno, não um site tradicional

Componentes Reutilizáveis (ViewComponents) ​

  • Blocos de código que podem ser reutilizados em várias partes do sistema
  • Exemplos: Modal::Component (janelas pop-up), Button::Component (botões), TipTap::Editor::Component (editor de texto)

Controles JavaScript (Stimulus Controllers) ​

  • infinite_scroll_controller.js - Carrega automaticamente mais conteúdo quando você rola a página
  • classroom_post_attach_controller.js - Gerencia os anexos de posts
  • virtual_classrooms_controller.js - Interações gerais da sala virtual
  • virtual_classroom_filter_controller.js - Filtros de professores

⚙️ Backend - Lógica e Banco de Dados ​

Padrões Rails 8.0 ​

  • Organização do código dentro de namespaces (VirtualClassroom::*)
  • Sistema de permissões com ActionPolicy (quem pode fazer o quê)
  • Turbo Streams para atualizações instantâneas
  • Paginação eficiente com Pagy

🚦 Sistema de Permissões ​

Como o sistema decide quem pode fazer o quê:

  • has_access?(user) - Acesso completo (entrar na sala)
  • has_visualization_access?(user) - Só pode ver, não interagir
  • has_edit_access?(user) - Pode editar (apenas o autor do conteúdo)
  • has_delete_access?(user) - Pode excluir (autor, administradores ou professores da turma)

🎓 Casos Especiais ​

Educação Infantil (Regras Diferentes) ​

O sistema funciona de forma especial para os pequenos:

  • 📚 Sem disciplina fixa - Não precisa estar vinculado a uma disciplina específica
  • 🏫 Uma sala por turma - Simplifica a organização
  • 🚫 Sem aba de Notas - Não mostra o boletim, pois a avaliação é diferente nessa fase

Fluência Leitora ​

  • 📖 Sem disciplina obrigatória - Mais flexibilidade na organização
  • 🔍 Filtros específicos no mural - Mostra apenas o que é relevante
  • ✅ Não conta atividades de fluência - Não interferem em outras contagens

Multi-tenancy (Vários Tenant/Empresas) ​

  • O sistema funciona para diferentes empresas/organizações (EduQBrasil, Orbita, etc.)
  • Cada tenant tem suas próprias cores e identidade visual
  • O sistema detecta automaticamente qual "tenant" está sendo usado pelo domínio

💡 Exemplos Práticos de Código (Para Desenvolvedores) ​

Criar uma Postagem no Mural ​

erb
<!-- Editor TipTap para escrever posts -->
<%= render TipTap::Editor::Component.new(
  name: :comment,
  form: form,
  required: true,
  label: "Texto",
  placeholder: "Escreva algo para o mural",
  mode: :default
) %>

Sistema de Anexos ​

erb
<!-- Modal para anexar diferentes tipos de arquivos -->
<%= render "virtual_classrooms/partials/classroom_posts/attachment_modal",
  icon_name: :pdf,
  title: "Adicionar PDF",
  item_name: "Nome do pdf",
  attach_type: :pdf,
  form: form,
  post: classroom_post %>

Rolagem Infinita (Infinite Scroll) ​

erb
<div data-controller="infinite-scroll">
  <div id="classroom-posts" data-infinite-scroll-target="scrollArea">
    <%= turbo_frame_tag "post_container_#{@virtual_classroom.id}" do %>
      <%= render "virtual_classrooms/partials/classroom_posts/index_classroom_posts",
        posts: @classroom_posts %>
    <% end %>
  </div>
  <%= render "virtual_classrooms/partials/classroom_posts/pagy_next_link",
    pagy_posts: @pagy_posts %>
</div>

🔄 Mudanças da Versão 1.0 para 2.0 ​

O Que Mudou (Melhorias!) ​

👋 Tecnologias Antigas (Removidas):

  • ❌ Editor Summernote (substituído pelo TipTap mais moderno)
  • ❌ Bootstrap CSS (substituído por Tailwind CSS)
  • ❌ jQuery (não é mais necessário)
  • ❌ Paginação tradicional (substituída por rolagem infinita)

✨ Novidades (Adicionadas):

  • ✅ TipTap Editor - Editor de texto moderno e potente
  • ✅ Tailwind CSS - Sistema de design 100% integrado e responsivo
  • ✅ Turbo Streams - Atualizações em tempo real sem recarregar a página
  • ✅ Rolagem Infinita - Carrega conteúdo automaticamente quando você rola a página
  • ✅ Sistema de Anexos Robusto - Suporte a vários tipos de arquivos e links
  • ✅ Tópicos de Atividades - Melhor organização das provas e trabalhos
  • ✅ Componentes Reutilizáveis - Blocos de código que facilitam manutenção e desenvolvimento

Por Que Essas Mudanças? ​

  • 🚀 Performance - Sistema mais rápido e eficiente
  • 🎨 Design Moderno - Interface mais bonita e intuitiva
  • 📱 Mobile-First - Funciona perfeitamente em celulares e tablets
  • 🔧 Manutenibilidade - Código mais organizado e fácil de manter

⚡ Performance e Otimizações ​

Carregamento Inteligente (Eager Loading) ​

Para que o sistema seja rápido, utilizamos uma técnica chamada "eager loading":

ruby
# Otimização de queries com includes
@virtual_classroom.classroom_posts
  .includes(:classroom_comments, :user, :classroom_post_attaches)
  .order(created_at: DESC)

O que isso significa? Em vez de fazer várias consultas ao banco de dados, carregamos tudo de uma vez, tornando a página muito mais rápida.

Paginação Eficiente ​

  • Pagy - Sistema de paginação que divide grandes quantidades de conteúdo em partes menores
  • 3 posts por vez - No mural, mostramos 3 posts por vez para não sobrecarregar
  • Rolagem automática - Quando você chega ao fim da página, o sistema carrega automaticamente mais conteúdo

Cache e Atualizações Incrementais ​

  • Turbo Streams - Atualiza apenas a parte que mudou, não a página inteira
  • Fragment caching - Armazena partes estáticas da página para não processá-las toda vez
  • Resultado - Páginas que carregam instantaneamente

📝 Resumo ​

As Salas Virtuais 2.0 são um sistema completo de ensino online que permite:

✅ Para Professores:

  • Postar avisos e materiais
  • Aplicar provas e atividades
  • Gerenciar notas
  • Interagir com alunos

✅ Para Alunos:

  • Acessar materiais e avisos
  • Fazer provas online
  • Ver suas notas
  • Comentar e interagir

✅ Para Desenvolvedores:

  • Arquitetura moderna com Rails 8.0
  • Sistema de componentes reutilizáveis
  • Performance otimizada
  • Código organizado e documentado

💡 Dica Final: Este é um sistema em constante evolução. A versão 2.0 trouxe muitas melhorias, e estamos sempre trabalhando para torná-lo melhor para professores, alunos e desenvolvedores!