Construindo relatórios de progresso dos alunos em JavaScript

A capacidade de visualizar relatórios de progresso dos alunos on-line oferece inúmeros benefícios para pais e educadores. O acesso on-line fornece aos pais e alunos informações em tempo real sobre o desempenho acadêmico do aluno, permitindo que eles se mantenham informados e envolvidos em sua educação. Eles podem acompanhar facilmente o progresso, monitorar a frequência, visualizar notas e identificar áreas onde suporte adicional pode ser necessário.

Para educadores, os relatórios de progresso on-line simplificam o processo de geração de relatórios, facilitando a geração e o compartilhamento de avaliações abrangentes do desempenho dos alunos. Permite que os professores comuniquem de forma mais eficaz com os pais, promovendo a colaboração e permitindo intervenções específicas. No geral, o acesso online aos relatórios de progresso dos alunos melhora a comunicação, promove a responsabilização e apoia uma abordagem proativa para o sucesso dos alunos.

Felizmente, o ActiveReportsJS torna mais fácil para os educadores criar e personalizar esses relatórios de progresso e facilita sua visualização em aplicativos da web. Este artigo mostrará como usar o ActiveReportsJS Report Designer para criar um relatório de progresso e usar o Report Viewer para exibir seu relatório em um aplicativo JavaScript.

Visão geral do conteúdo

• Conectando dados ao relatório

• Criando o cabeçalho e rodapé do relatório de progresso

• Exibindo informações do aluno

• Construindo o Resumo do GPA e a Tabela de Progresso Acadêmico

• Criando o Tablix de Progresso Comportamental e de Atitude

• Criando o Tablix de Atendimento

• Adicionando ActiveReportsJS a um aplicativo JavaScript

  
  

Se quiser acompanhar o artigo, você pode encontrar o relatório completo e a aplicação aqui .

Conectando dados ao relatório

Para os fins deste artigo, usaremos o designer independente incluído no download do ActiveReportsJS. Após instalar e iniciar o designer, poderemos ver nosso relatório vazio. Antes de começarmos a adicionar controles ao relatório, queremos ter certeza de vincular os dados que usaremos ao relatório.

No canto superior direito do designer, selecione o painel Dados . Isso abrirá a exibição de nossas fontes de dados , conjuntos de dados e parâmetros :

Para começar, precisaremos de uma fonte de dados. Clique no botão Adicionar na seção Fontes de dados para abrir a janela Fontes de dados:

A partir daqui, podemos informar ao relatório onde procurar os dados. Temos duas opções de onde os dados podem vir: JSON remoto ou JSON incorporado . O JSON remoto exige que você forneça o URL para um endpoint da API, enquanto o JSON incorporado permite que você selecione um arquivo JSON para carregar dados diretamente no relatório.

Para este relatório, usaremos JSON incorporado para carregar vários arquivos JSON ; temos arquivos com informações, notas, comportamento e frequência dos alunos, portanto, precisaremos criar uma fonte de dados para cada um desses arquivos.

Quando concluído, deverá ficar assim:

Agora que configuramos nossas quatro fontes de dados, é hora de criar um conjunto de dados para cada uma. Para criar um conjunto de dados para uma fonte de dados, basta clicar no ícone de adição próximo à fonte de dados que deseja usar; isso abrirá a janela Conjunto de dados:

Como estamos usando JSON incorporado, tudo o que precisamos fornecer é um caminho JSON; isso informa ao relatório quais dados queremos recuperar do JSON. Nesse caso, queremos recuperar todo o JSON, então usamos o caminho $.* . Isso informa ao relatório para obter todos os dados disponíveis.

Assim que o caminho JSON estiver inserido, clique no botão Validar para confirmar se seu conjunto de dados pode recuperar os dados solicitados.

Se tudo funcionar corretamente, o campo Campos do Banco de Dados deverá agora ser preenchido com valores dos nossos dados:

Depois de configurarmos um conjunto de dados para cada fonte de dados, nosso painel de dados deverá ficar assim:

E é isso! Agora temos dados conectados ao nosso relatório que podemos consultar nos controles. Na próxima seção, começaremos a construir as diferentes seções do relatório, começando pelo cabeçalho e rodapé.

Criando o cabeçalho e rodapé do relatório de progresso

Podemos começar a criar os elementos do relatório agora que os dados foram configurados. Para começar, criaremos um cabeçalho e rodapé para as páginas do nosso relatório. Na barra de ferramentas, selecione a guia Seções e clique nos botões Adicionar cabeçalho e Adicionar rodapé :

Isso adicionará seções de cabeçalho e rodapé ao relatório. Queremos adicionar dois controles da caixa de ferramentas de controle na seção de cabeçalho. Clique no botão de hambúrguer no canto superior esquerdo do designer para expandir a caixa de ferramentas e, em seguida, arraste um controle TextBox e um controle Image para o cabeçalho da página.

Dentro do TextBox, definiremos seu valor como “Relatório de Progresso do Aluno”.

Em seguida, incorporaremos uma imagem ao relatório para o controle Imagem. Selecione o controle Imagem e expanda o menu suspenso Imagem na seção Aparência de suas propriedades. Para incorporar uma imagem, clique no botão Incorporado e depois clique em **Carregar…** para abrir o explorador de arquivos e selecionar a imagem que deseja carregar:

Agora que nossa imagem foi carregada e nosso texto definido, vamos apenas redimensionar e estilizar um pouco através do painel Propriedades. Quando concluída, nossa seção de cabeçalho fica assim:

Agora é hora de criar o rodapé. Em nosso rodapé queremos incluir 3 TextBoxes: duas com informações de contato e uma para exibir o ano atual. Ao lado de cada caixa contendo informações de contato, também queremos incluir o ícone de um telefone para indicar que se trata de números de telefone.

Arraste três controles TextBox e dois controles Image para a área de rodapé da página. Seguiremos os mesmos passos descritos acima para definir as imagens.

Para dois dos controles TextBox, colocaremos apenas alguns números de telefone que podem ser usados para entrar em contato com o proprietário do relatório, mas para o terceiro, usaremos uma expressão para que sempre exiba o ano atual.

Dentro desta terceira TextBox, coloque este valor: © {Year(Now())} GrapeCity, Inc. Todos os direitos reservados. Você pode ver dentro da string que incluímos colchetes e, dentro dos colchetes, a expressão Year(Now()) ; isso retornará o ano atual, e o relatório sabe avaliar isso como uma expressão porque a colocamos entre colchetes.

Depois de estilizar um pouco, o rodapé deve ficar assim:

Podemos visualizar o relatório para ver como a expressão que criamos é avaliada:

Agora que criamos o cabeçalho e o rodapé, eles serão exibidos em cada página do relatório. Na próxima seção, adicionaremos alguns dos dados que carregamos, exibindo algumas informações básicas sobre o aluno.

Exibindo informações do aluno

Agora é hora de começar a incorporar alguns dos dados que o relatório está carregando. Primeiro, arraste um controle TextBox e um controle Container para o corpo do relatório. Expanda ambos para que estendam a maior parte da largura da página e, dentro do controle TextBox, inclua o texto “Informações do Aluno”:

Estaremos usando este Container para armazenar todas as informações associadas ao aluno.

Agora colocaremos TextBoxes dentro do Container; eles serão usados para rótulos e para armazenar informações dos conjuntos de dados.

Configure o contêiner para corresponder ao seguinte:

Agora, dentro de cada uma das TextBoxes vazias, queremos incluir expressões que recuperam dados do nosso conjunto de dados de informações dos alunos.

Inclua o seguinte texto nas TextBoxes associadas:

Quando concluído, você poderá visualizar o relatório e ver o seguinte:

Construindo o Resumo do GPA e a Tabela de Progresso Acadêmico

A seguir, exibiremos informações relativas às notas do aluno.

Primeiro, criaremos a seção Resumo do GPA; como na seção anterior, arraste um controle TextBox e Container para o relatório. Expanda ambos para que estendam a maior parte da largura da página e, dentro do controle TextBox, inclua o texto “Resumo GPA”:

Dentro deste Container, queremos exibir o GPA geral do aluno, bem como seu percentil.

Arraste quatro TextBoxes para o contêiner, configurando-as da seguinte forma:

A seguir, precisaremos configurar mais algumas expressões dentro dos TextBoxes vazios:

A expressão GPA geral calculará o percentil em que eles se enquadram e, com base nisso, fornecerá um valor numérico GPA associado. A expressão Percentil simplesmente calcula a nota com base em uma porcentagem.

Quando concluído, você poderá ver o seguinte ao visualizar o relatório:

Agora que criamos o resumo, é hora de mostrar o detalhamento do progresso do aluno por disciplina. Abaixo da seção Resumo do GPA, arraste um controle TextBox e um controle Table para o corpo do relatório. Dentro do TextBox, inclua o texto “Progresso Acadêmico”, enquanto dentro da tabela, inclua os seguintes cabeçalhos de coluna:

• Assunto
• Professor
• Trimestre 1
• Trimestre 2
• Trimestre 3

Quando concluído, deverá ficar parecido com isto:

A próxima coisa que precisamos fazer é associar o conjunto de dados correto à tabela. Selecione o controle Tabela e, dentro do painel Propriedades, defina o menu suspenso Nome do conjunto de dados para usar o conjunto de dados de marca . Agora podemos fazer referência aos dados deste conjunto de dados na tabela.

Preencha o resto da tabela assim:

Depois de um pouco de estilo adicional, o controle Table agora se parece com isto:

Quando visualizamos nosso relatório, a tabela deve ficar assim:

Adicionando a Tablix de Progresso Comportamental e de Atitude

Agora que os usuários podem visualizar seu progresso acadêmico, é hora de adicionarmos uma seção mostrando as notas do professor sobre o progresso comportamental e de atitude do aluno. Antes de fazermos isso, adicionaremos uma nova seção ao nosso relatório. Na parte inferior do designer de relatório, você verá um botão Adicionar Seção ; pressione isto e uma nova página/seção contínua será adicionada ao seu relatório:

Agora, abaixo do cabeçalho desta nova seção, adicione um controle TextBox, um controle Container e três controles TextBox dentro do controle Container:

Como você pode ver, preenchemos essas TextBoxes com nosso próprio texto. Antes de adicionarmos os controles Tablix, queremos fazer mais uma modificação.

Nessas tabelas, queremos usar ícones para mostrar onde o aluno se enquadra em termos de Excelente , Satisfatório e Necessita Melhorar . Usaremos ícones verdes, amarelos e vermelhos. Para adicioná-los, adicione os seguintes valores à propriedade Image do TextBox associado:

Agora, se visualizarmos o relatório, devemos ver o seguinte:

Agora que o contêiner Tablix está configurado, é hora de adicionar os controles Tablix para exibir os dados de progresso comportamental e de atitude. Arraste um controle Tablix para esse contêiner; você verá o Tablix Wizard aparecer na janela do designer:

O Tablix Wizard é uma ferramenta extremamente poderosa para criar um controle Tablix (ou tabela dinâmica, como também é conhecido), que pode exibir dados de maneiras mais dinâmicas do que uma tabela padrão.

Usaremos dados do conjunto de dados de comportamento que criamos no início do artigo. Expanda esse conjunto de dados e, em seguida, arraste e solte o valor BehavioralMeasure na seção Grupos de linhas do assistente e arraste e solte os valores T1 , T2 e T3 na seção Valores do assistente. Certifique-se de alterar os valores agregados de T1, T2 e T3 de Count para None .

Antes de finalizar clique no botão Filtros do assistente; precisamos configurar um filtro para esta tabela. Aqui, clique no botão Adicionar para adicionar um novo filtro. Defina a primeira caixa para o campo Tipo do conjunto de dados e defina o filtro para procurar a string “Hábito de Trabalho”:

Quando terminar, você pode clicar no botão OK e ver a aparência do seu Tablix neste momento:

Agora, como acontece com as caixas de texto Excelente Satisfatório e Precisa de Melhoria , atualizaremos as células de dados das colunas T1, T2 e T3 para exibir os ícones em vez de valores de texto. Para cada uma dessas células de dados, remova o valor do texto e atualize a propriedade Image do TextBox associado:

Isso fará com que o controle Tablix coloque o ícone de semáforo correto na célula com base no valor da célula. Após algumas atualizações de estilo, nosso primeiro Tablix deve ficar assim:

Quando visualizamos o relatório, o Tablix deve ter a seguinte aparência:

Agora, precisamos criar o segundo controle Tablix para exibir informações de atitude. O bom é que este Tablix é quase idêntico ao que acabamos de criar. Copie e cole o primeiro Tablix que criamos e coloque-o no contêiner logo abaixo do outro Tablix. Em seguida, atualize a primeira célula do cabeçalho de “Hábitos de Trabalho” para “Aderência ao Código de Conduta”.

Por fim, selecione o segundo controle Tablix e clique no ícone de engrenagem no canto superior direito do controle; isso reabrirá o assistente Tablix. Clique no botão Filtros ; vamos modificar o filtro que estamos usando atualmente.

Atualize o valor do texto do filtro de “Hábitos de Trabalho” para “Conduta em Sala de Aula”. Agora, a seção Progresso Comportamental e de Atitude deve ficar assim:

Quando visualizamos o relatório, a seção Progresso Comportamental e de Atitude deve ter a seguinte aparência:

Adicionando o Tablix de Presença

A seção final que adicionaremos ao nosso relatório mostrará a frequência do aluno. Arraste um controle TextBox e um controle Tablix para o relatório e coloque-os abaixo da seção Progresso Comportamental e de Atitude.

Dentro do assistente Tablix, usaremos o conjunto de dados de atendimento ; arraste o valor Dias para a seção Grupos de linhas do assistente e arraste os valores T1 , T2 e T3 para a seção Valores do assistente.

Além disso, certifique-se de definir os valores agregados de T1 , T2 e T3 como Sum :

Agora, a seção Presença deve ter a seguinte aparência:

E quando visualizarmos o relatório, ele deverá ficar assim:

Agora, com o relatório completo, quando visualizamos o relatório, as páginas devem ficar assim:

Adicionando ActiveReportsJS a um aplicativo JavaScript

Agora que criamos nosso relatório de progresso do aluno, é hora de adicionar o ActiveReportsJS Report Viewer a um aplicativo JavaScript para que possamos visualizar o relatório no navegador. Crie um novo arquivo chamado index.html e abra-o no IDE de sua preferência.

Vamos adicionar o seguinte código ao arquivo:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Student Progress Report</title> <meta name="description" content="ARJS Report viewer" /> <meta name="author" content="GrapeCity" /> </head> <body></body> </html>

Agora que o arquivo HTML está configurado, é hora de adicionar ActiveReportsJS ao arquivo. Para isso, usaremos o CDN para carregar os arquivos necessários.

Dentro da tag <head> adicione o seguinte código:

 <link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/4.latest/styles/ar-js-ui.css" type="text/css" /> <link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/4.latest/styles/ar-js-viewer.css" type="text/css" /> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-core.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-viewer.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-pdf.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-tabular-data.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-html.js"></script>

As primeiras duas linhas de código carregam os arquivos CSS necessários: o arquivo CSS principal e o arquivo CSS do visualizador. Em seguida, carregamos o arquivo JavaScript principal e o arquivo JavaScript do visualizador. Finalmente, estamos carregando um arquivo PDF, dados tabulares e HTML JavaScript; esses arquivos oferecem aos usuários a capacidade de exportar o relatório nos respectivos tipos de arquivo.

Se você não quiser permitir que os usuários exportem o relatório em um formato específico, basta excluir a tag <script> associada e os usuários não poderão exportar nesse tipo de arquivo.

A seguir, adicionaremos alguns estilos básicos aos elementos da página. Dentro da tag <head> , abaixo das tags de script que acabamos de adicionar, adicione o seguinte código:

 <style> body { margin: 0; } #viewer-host { width: 100%; height: 100vh; } </style>

Isso removerá as margens do elemento body e também definirá a largura e a altura do elemento com o ID de viewer-host .

Agora, dentro da tag <body> , adicione o seguinte elemento:

 <div id="viewer-host"></div>

Demos a esse div o ID de viewer-host ; isso significará que ele receberá os estilos CSS que definimos anteriormente, mas também nos permitirá vincular o JavaScript Report Viewer ao div.

Por fim, abaixo da div, adicione o seguinte código:

 <script> var viewer = new ActiveReports.Viewer("#viewer-host"); viewer.open("StudentProgressReport.rdlx-json"); </script>

Este JavaScript criará um novo ActiveReportsJS Viewer, associando-o ao elemento com o ID viewer-host . Em seguida, chamamos o método open do visualizador e passamos o nome do nosso relatório.

A última coisa que você precisa ter certeza é colocar o relatório na mesma pasta do arquivo index.html; caso contrário, certifique-se de apontar o local correto do seu relatório.

A única coisa que resta é executar o aplicativo. Você pode usar qualquer servidor web estático para executar o aplicativo; como usamos o Visual Studio Code, usamos a extensão Live Server para ativar rapidamente um servidor web estático. Ao abrir o aplicativo em seu navegador, você verá o seguinte:

Conclusão

E isso é tudo! Como você pode ver, o ActiveReportsJS facilita a criação de relatórios de progresso personalizados, permitindo que professores e alunos acompanhem o progresso do aluno ao longo do ano letivo.

Se desejar fazer download do relatório e do aplicativo criado neste artigo, você pode encontrar o repositório aqui .

Boa codificação!