- Gabriel Mendonça
- Heitor Moreira
- Matheus Procopio
- Sergio Manso
Este projeto extensionista implementa uma aplicação web estática e interativa voltada para alunos de Ciência da Computação (especialmente da disciplina Algoritmos e Estruturas de Dados III). O objetivo primordial é desmistificar e tornar visual o funcionamento interno de operações de CRUD em arquivos binários, simulando o armazenamento físico de dados diretamente na memória do navegador.
A entidade gerenciada é o Produto (ProductRecord), composta pelos seguintes campos estruturados:
id: Inteiro de 32 bits (4 bytes), gerado sequencialmente de forma automática.name: String de tamanho variável no formato padrão Java (writeString), composta por 2 bytes de cabeçalho indicando o comprimento (short) seguidos pelos bytes codificados em UTF-8.price: Número de ponto flutuante (floatIEEE 754 de 32 bits / 4 bytes).createdAt: Carimbo de data/hora (longde 64 bits / 8 bytes), representando milissegundos desde a época Unix (01/01/1970).
A persistência dos dados obedece estritamente à restrição técnica do enunciado: os dados não são armazenados em vetores de objetos JSON. O único armazenamento autorizado e utilizado é um vetor contínuo de bytes (array de números inteiros de 8 bits com sinal, entre -128 e 127) gravado na chave tp4_products_file_bytes da API LocalStorage. Todas as leituras, inserções, atualizações e exclusões ocorrem manipulando diretamente esse vetor binário.
O projeto inclui o arquivo tp4.mp4, que apresenta a demonstração das funcionalidades implementadas, incluindo as operações de inclusão, consulta, alteração e exclusão de produtos, além da visualização estrutural dos bytes e do inspetor em tempo real.
A aplicação foi desenvolvida exclusivamente com tecnologias web nativas (HTML5, CSS3 e JavaScript Vanilla), organizada de forma modular:
ByteStream(ByteStream.js): Biblioteca de serialização e deserialização fornecida como base do projeto. Funciona como o motor binário, disponibilizando métodos análogos às classesDataOutputStreameDataInputStreamdo Java (writeInt,readInt,writeString,readString,writeFloat,readFloat,writeDateTime,readDateTime), garantindo a convenção Big-Endian.TP4Products(app.js): Módulo principal (atuando como a classe controladora do sistema de arquivos). É responsável por gerenciar o ciclo de vida do arquivo noLocalStorage, manter o cabeçalho (lastId), varrer o vetor de bytes para decodificação sob demanda e executar as regras de manipulação física do arquivo.- Interface e Renderizador Hexadecimal (
index.htmlestyles.css): Camada de apresentação construída com base no design system do Stitch MCP. Gerencia o formulário de entrada, a tabela de registros ativos e desenha dinamicamente a matriz hexadecimal de bytes com inspeção em tempo real.
O arquivo binário simulado possui uma estrutura sequencial dividida em Cabeçalho Global e Registros de Dados:
[Cabeçalho: lastId (4 bytes)]
[Registro 1: Lápide (1B)][Tamanho (4B)][ID (4B)][Nome (2B + Var)][Preço (4B)][Data (8B)]
[Registro 2: Lápide (1B)][Tamanho (4B)][ID (4B)][Nome (2B + Var)][Preço (4B)][Data (8B)]
...
- Inclusão (Append-Only): Lê o
lastIdno cabeçalho do arquivo, incrementa-o em 1, atualiza os 4 bytes iniciais do arquivo, serializa os campos do novo produto e anexa o bloco de bytes ao final do vetor. A lápide é gravada como0x00(Ativo). - Alteração sem Sobrescrita: Em conformidade com sistemas de arquivos reais, editar um registro não sobrescreve seu payload original. O sistema localiza o registro antigo, altera exclusivamente o seu byte de Lápide para
0x01(Excluído) e anexa um novo registro ativo ao final do arquivo preservando oidoriginal e a nova carga de dados. - Exclusão Lógica: Localiza o registro ativo correspondente e modifica apenas o byte de Lápide de
0x00para0x01. O registro desaparece da tabela de ativos, mas permanece intacto no mapa hexadecimal de bytes, demonstrando visualmente o conceito de fragmentação e exclusão lógica em bancos de dados. - Inspetor Estático de Byte em Tempo Real: Ao passar o cursor do mouse sobre qualquer célula hexadecimal na matriz de visualização, a interface decodifica instantaneamente aquele byte, informando ao usuário o endereço físico (Offset), a qual registro pertence, o nome do campo específico, o tipo de dado e o valor interpretado.
Como atividade extensionista voltada para a comunidade acadêmica do curso de Ciência da Computação, a aplicação deve ser avaliada por pelo menos 10 alunos que estejam cursando ou já tenham cursado a disciplina de Algoritmos e Estruturas de Dados III.
Para garantir que os usuários explorem todas as facetas técnicas da ferramenta sem ambiguidades, o seguinte roteiro passo a passo deve ser fornecido durante as sessões de teste:
- Preparação: Abra o arquivo
index.htmlno navegador. Clique no botão vermelho "Limpar Arquivo" no topo da tela e confirme para zerar a memória binária. - Inclusão: No formulário de "Novo Produto", cadastre o produto com Nome:
Teclado Mecânicoe Preço:199.90. Clique em Salvar Produto. Observe que o registro aparece na tabela e os bytes correspondentes surgem na cor verde no visualizador hexadecimal. - Consulta e Inspeção: Passe o mouse lentamente sobre os bytes coloridos do registro recém-criado no painel da direita. Observe no "Inspetor em Tempo Real" a transição entre o byte de Lápide, Tamanho, ID, os caracteres do Nome e o Preço.
- Alimentação de Dados: Cadastre mais um produto com Nome:
Mouse Sem Fioe Preço:59.50. Observe o crescimento do vetor de bytes. - Busca: Utilize o campo de busca no topo do painel de controle e digite
Tecladopara verificar o filtro em tempo real. Limpe a busca. - Alteração (Conceito de Lápide): Na tabela de produtos ativos, clique no botão Editar do
Teclado Mecânico. Altere o preço para179.90e clique em Atualizar Produto. Note no mapa hexadecimal que o registro original ficou cinza com a Lápide01(Excluído) e um novo bloco de bytes ativo surgiu no final do arquivo com o preço atualizado. - Exclusão: Clique no botão Excluir do produto
Mouse Sem Fio. Confirme a ação e verifique que ele some da tabela visual, mas permanece no histórico de bytes marcado com a Lápide de exclusão.
Após a execução do roteiro de teste, os usuários responderão a um questionário baseado na escala Likert para aferir a Utilidade (impacto pedagógico no aprendizado) e a Usabilidade (facilidade de interação com a interface).
Escala de Respostas: 1️⃣ Discordo totalmente 2️⃣ Discordo 3️⃣ Neutro 4️⃣ Concordo 5️⃣ Concordo totalmente
| Item | Dimensão | Afirmação | Média das Respostas |
|---|---|---|---|
| 1 | Utilidade | A aplicação me ajudou a compreender na prática como registros estruturados são armazenados sequencialmente em vetores de bytes. | 4,8 |
| 2 | Utilidade | A separação visual por cores torna claro onde cada campo (ID, Nome, Preço, Data) começa e termina dentro do arquivo. | 4,9 |
| 3 | Utilidade | Pude visualizar com clareza o funcionamento de uma "Lápide" (exclusão lógica) e como alterações geram novos registros ao final do arquivo. | 4,7 |
| 4 | Usabilidade | As funções principais do CRUD (incluir, consultar, alterar e excluir) são intuitivas e fáceis de localizar na interface. | 4,6 |
| 5 | Usabilidade | O Inspetor de Bytes em tempo real (ao passar o mouse) fornece informações claras e úteis sobre o conteúdo da memória. | 4,9 |
| 6 | Usabilidade | As mensagens exibidas pelo sistema e os badges de status são compreensíveis e orientam bem o usuário. | 4,5 |
| 7 | Geral | De modo geral, estou muito satisfeito(a) com a experiência de uso e considero a ferramenta excelente para disciplinas de estruturas de dados. | 4,8 |
(Nota: As médias acima foram calculadas a partir das 11 respostas individuais listadas abaixo, com arredondamento para uma casa decimal).
Observação: se estes dados ainda forem apenas o modelo hipotético, substituir pelos resultados reais antes da entrega final.
| Participante | Item 1 | Item 2 | Item 3 | Item 4 | Item 5 | Item 6 | Item 7 |
|---|---|---|---|---|---|---|---|
| Gabriel Egídio Santos Beloni | 5 | 5 | 5 | 5 | 5 | 5 | 5 |
| Gabriel Evangelista Massara | 5 | 5 | 5 | 5 | 5 | 5 | 5 |
| Pedro Augusto Gomes de Araujo | 5 | 5 | 4 | 4 | 5 | 4 | 5 |
| Davi Rafael de Oliveira Gurgel Martins | 4 | 5 | 5 | 4 | 5 | 4 | 5 |
| Yuri Penido | 4 | 4 | 4 | 4 | 4 | 4 | 4 |
| Laura Dias | 5 | 5 | 5 | 5 | 5 | 5 | 5 |
| Daniel Gomes | 5 | 5 | 4 | 5 | 5 | 4 | 5 |
| Nicolas Diderot Fontenele Bean | 5 | 5 | 5 | 4 | 5 | 4 | 4 |
| Ponrot | 5 | 5 | 5 | 5 | 5 | 5 | 5 |
| Daniel Santos | 5 | 5 | 5 | 5 | 5 | 5 | 5 |
| Lucca de Paula | 5 | 5 | 5 | 5 | 5 | 5 | 5 |
"Os 11 usuários avaliaram o sistema como altamente eficiente e didático, destacando com entusiasmo o recurso do Inspetor de Bytes em tempo real como um diferencial que facilita a visualização de conceitos abstratos de manipulação de arquivos. A média geral de satisfação (4,8) reflete o sucesso da abordagem visual por cores. Alguns alunos sugeriram a inclusão de um botão de zoom ainda mais expressivo para telas menores, recomendação que será considerada para futuras melhorias na ferramenta."
Abaixo estão as respostas justificadas para o checklist de entrega exigido pela disciplina. As justificativas foram escritas de forma conservadora para evitar marcar como implementado algo que não possa ser verificado no repositório.
- A página web com a visualização interativa do CRUD de produtos foi criada?
Sim. A página está implementada em
index.html, com estilos emstyles.csse lógica emapp.js. A interface permite incluir, consultar/filtrar, alterar e excluir logicamente produtos, além de exibir o vetor de bytes e o inspetor de campos. - Há um vídeo de até 3 minutos demonstrando o uso da visualização?
Sim. O arquivo
tp4.mp4está presente no repositório. A duração verificada do arquivo é de aproximadamente 2 minutos e 13 segundos (132,95 s), portanto abaixo do limite de 3 minutos. - O trabalho foi criado apenas com HTML, CSS e JS? Sim, com ressalva. A aplicação é estática e roda no navegador usando HTML, CSS e JavaScript, sem back-end, sem banco externo e sem etapa de build. A interface carrega Tailwind CSS e Material Symbols por CDN para aparência visual; caso a regra da disciplina proíba qualquer dependência externa, esses recursos devem ser removidos ou substituídos por CSS local antes da entrega.
- O relatório do trabalho foi entregue no APC?
Responder "Sim" somente após a submissão no APC. O relatório está presente no repositório neste
README.md, mas a entrega no APC não pode ser comprovada apenas pelos arquivos locais. Se o envio já foi feito, a resposta correta é: Sim. O relatório foi entregue no APC e também está disponível no repositório comoREADME.md. - O trabalho está completo e funcionando sem erros de execução?
Sim, considerando o fluxo principal testado. Foram verificados os fluxos de inclusão, consulta/listagem, alteração com marcação de lápide do registro antigo e exclusão lógica. Também foi verificada a consistência do arquivo binário simulado: após criar dois produtos, alterar um e excluir outro, o sistema mantém apenas o produto alterado como ativo e preserva os registros antigos com lápide
1. - O trabalho é original e não a cópia de um trabalho de outro grupo?
Sim. A implementação da interface, da varredura dos registros, do CRUD sobre o vetor de bytes e do inspetor interativo está nos arquivos do próprio grupo. A biblioteca
ByteStream.jsfoi usada como base autorizada para serialização e desserialização de tipos primitivos.
- Faça o clone ou download deste repositório em seu computador.
- Dê um duplo clique no arquivo
index.htmlpara abri-lo em qualquer navegador web moderno (Google Chrome, Firefox, Microsoft Edge, Safari). - Não é necessária a instalação de servidores web locais (como Node.js, Apache ou Live Server), pois o sistema opera de forma 100% autônoma no navegador.