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   . Isso abrirá a exibição de nossas   ,   e   :  Dados fontes de dados conjuntos de dados parâmetros  Para começar, precisaremos de uma fonte de dados. Clique no botão   na seção Fontes de dados para abrir a janela Fontes de dados:  Adicionar  A partir daqui, podemos informar ao relatório onde procurar os dados. Temos duas opções de onde os dados podem vir:   ou   . 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. JSON remoto JSON incorporado  Para este relatório, usaremos JSON incorporado para carregar vários arquivos   ; temos arquivos com informações, notas, comportamento e frequência dos alunos, portanto, precisaremos criar uma fonte de dados para cada um desses arquivos. JSON  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   próximo à fonte de dados que deseja usar; isso abrirá a janela Conjunto de dados:  de adição  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. $.*    se estiver usando JSON remoto, você também precisará fornecer um valor Uri/caminho; esse valor é passado do relatório para a API para informar à API quais dados retornar. Observação:  Assim que o caminho JSON estiver inserido, clique no botão   para confirmar se seu conjunto de dados pode recuperar os dados solicitados. Validar  Se tudo funcionar corretamente, o campo   deverá agora ser preenchido com valores dos nossos dados:  Campos do Banco de 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   e clique nos botões   e   :  Seções Adicionar cabeçalho 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   e um controle   para o cabeçalho da página. TextBox Image  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   e depois clique em **Carregar…** para abrir o explorador de arquivos e selecionar a imagem que deseja carregar:  Incorporado  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:   Você pode ver dentro da string que incluímos colchetes e, dentro dos colchetes, a expressão   ; isso retornará o ano atual, e o relatório sabe avaliar isso como uma expressão porque a colocamos entre colchetes. © {Year(Now())} GrapeCity, Inc. Todos os direitos reservados. Year(Now())  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   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”:  Container  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   . Agora podemos fazer referência aos dados deste conjunto de dados na tabela. de marca  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   ; pressione isto e uma nova página/seção contínua será adicionada ao seu relatório:  Adicionar Seção  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   ,   e   . Usaremos ícones verdes, amarelos e vermelhos. Para adicioná-los, adicione os seguintes valores à propriedade   do TextBox associado:  Excelente Satisfatório Necessita Melhorar Image  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   que criamos no início do artigo. Expanda esse conjunto de dados e, em seguida, arraste e solte o valor   na seção   do assistente e arraste e solte os valores   ,   e   na seção   do assistente. Certifique-se de alterar os valores agregados de T1, T2 e T3 de   para   . de comportamento BehavioralMeasure Grupos de linhas T1 T2 T3 Valores Count None  Antes de finalizar clique no botão   do assistente; precisamos configurar um filtro para esta tabela. Aqui, clique no botão   para adicionar um novo filtro. Defina a primeira caixa para o campo   do conjunto de dados e defina o filtro para procurar a string “Hábito de Trabalho”:  Filtros Adicionar Tipo  Quando terminar, você pode clicar no botão   e ver a aparência do seu Tablix neste momento:  OK  Agora, como acontece com as caixas de texto     e   , 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   do TextBox associado:  Excelente Satisfatório Precisa de Melhoria Image  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   ; vamos modificar o filtro que estamos usando atualmente. Filtros  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   ; arraste o valor   para a seção   do assistente e arraste os valores   ,   e   para a seção   do assistente. de atendimento Dias Grupos de linhas T1 T2 T3 Valores  Além disso, certifique-se de definir os valores agregados de   ,   e   como   :  T1 T2 T3 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   e abra-o no   de sua preferência. index.html IDE  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   adicione o seguinte código: <head>   <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   JavaScript; esses arquivos oferecem aos usuários a capacidade de exportar o relatório nos respectivos tipos de arquivo. HTML  Se você não quiser permitir que os usuários exportem o relatório em um formato específico, basta excluir a tag   associada e os usuários não poderão exportar nesse tipo de arquivo. <script>  A seguir, adicionaremos alguns estilos básicos aos elementos da página. Dentro da tag   , abaixo das tags de script que acabamos de adicionar, adicione o seguinte código: <head>   <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   , adicione o seguinte elemento: <body>   <div id="viewer-host"></div>  Demos a esse div o ID de   ; isso significará que ele receberá os estilos CSS que definimos anteriormente, mas também nos permitirá vincular o JavaScript Report Viewer ao div. viewer-host  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   . Em seguida, chamamos o método open do visualizador e passamos o nome do nosso relatório. viewer-host  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   para executar o aplicativo; como usamos o Visual Studio Code, usamos a extensão   para ativar rapidamente um servidor web estático. Ao abrir o aplicativo em seu navegador, você verá o seguinte:  servidor web estático Live Server  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!  Também publicado  aqui.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Learn More About MESCIUS' Line of Products!

Este áudio é produzido no idioma original da história!

Construindo relatórios de progresso dos alunos em JavaScript

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Criando produtos criptográficos centrados no usuário: a importância do feedback do cliente

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Telegram: a ponte da Crypto Island para o continente

Digital Nomads Ouçam: O que você precisa saber sobre o novo visto DTV da Tailândia

Criando produtos criptográficos centrados no usuário: a importância do feedback do cliente

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Telegram: a ponte da Crypto Island para o continente

Digital Nomads Ouçam: O que você precisa saber sobre o novo visto DTV da Tailândia

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps