Aplicativo da Web para educação: 13 etapas

2025 Autor: John Day | [email protected]. Última modificação: 2025-01-13 06:58

Este projeto foi elaborado como uma tarefa para o curso de vídeo e televisão digital em que tínhamos que resolver o problema de ensino e aprendizagem em três níveis: Metodológico, Funcional e Conceitual.

Este projeto foi elaborado como uma tarefa para o curso de vídeo e televisão digital, no qual tínhamos que resolver o problema de ensino e aprendizagem nestes três níveis: Metodológico, Funcional e conceitual. Decidimos resolver este problema usando uma plataforma web, no qual alunos e professores do curso podem fazer o login. Os alunos também podem acessar os vídeos didáticos que abordam temas como codecs e formatos de vídeo, após terem aprendido a parte conceitual do tema podem proceder a uma avaliação. A avaliação consiste em três atividades; cada atividade vai ter uma espécie de vídeos que ensinam temas relacionados com codecs e formatos de vídeo e ao mesmo tempo cada atividade tem uma finalidade diferente, para que com esta plataforma possamos conseguir o ensino e avaliação da parte metodológica, funcional e conceitual. Para conseguir tudo isso, usamos Angular 4 e Firebase, usando bibliotecas como AngularFire5 e dragula. Para os vídeos usamos o web-app "PowToon".

Para este instrutível, você precisará de:

• NodeJs
• Angular4
• Projeto Firebase
• Um computador

Etapa 1: Instalação

• Instale nodejs 8.9.1 com NPM (Node Package Manager)
• Instale o Angular-CLI (Command Line Interface) digitando no console "npm install -g @ angular / cli"

Etapa 2: Criação do projeto

• Crie um projeto usando "ng new my-app"
• Instale pacotes de nós com "npm install"
• Instale dragula com "npm install dragula --save"
• Instale o AngularFire2 com "npm install firebase angularfire2 --save"

Etapa 3: Firebase

Para isso você pode conferir as imagens desta etapa

• Crie uma conta do google
• Clique em "Ir para o console"
• criar um projeto
• Vá para o geral e pegue as chaves do cliente

Etapa 4: Criação de componentes

Para isso você pode conferir as imagens desta etapa

Crie os componentes para o aplicativo.

Usando "ng g c" nome do componente "" para cada um dos seguintes componentes:

• Página do curso
• Página de Tópicos
• Página de Vídeo
• Página de Avaliação
• Página Metodológica
• Página Conceitual
• Página Funcional
• Componente de comentários
• Admin

Etapa 5: página do curso

Para isso você pode conferir as imagens desta etapa

Crie o html e o ts

Nos ts você escreverá a lógica por trás da autenticação, se o usuário for aluno ou Admin, e escreverá uma tabela com as informações do curso do aluno. Para isso você pode usar um serviço de autenticação e um serviço de banco de dados, ambos fornecidos no final deste manual.

Etapa 6: página de tópicos

Para isso você pode conferir as imagens desta etapa

Neste componente você escreverá o html e o ts.

Semelhante à página do curso, exceto que você não precisa verificar se o usuário é um administrador ou aluno, você só terá que escrever a autenticação e fornecer as listas de tópicos do curso.

Etapa 7: página de vídeo

Para isso você pode conferir as imagens desta etapa

Neste componente você escreverá o html e o ts.

Para este componente, você fornecerá o link do powToon para reproduzir o vídeo, e o componente de comentário

Etapa 8: página de avaliação

Para isso você pode conferir as imagens desta etapa

para este ocmponente você utilizará o mesmo componente de vídeo com um vídeo diferente no qual explicará o processo de avaliação.

Depois, basta ter um botão que leva à página conceitual

Etapa 9: página conceitual

Para isso você pode conferir as imagens desta etapa

Nesta página, você criará html e ts.

• Crie dois componentes de vídeo com um botão
• Crie uma matriz de dois vídeos com um booleano "isCorrect"
• Escreva uma função CheckScore ()
• Faça upload da pontuação para o banco de dados
• Transporte para a próxima página

Etapa 10: Página Metodológica

Para isso você pode conferir as imagens desta etapa

Nesta página, você criará html e ts.

• Você fará uso da dragula, para isso leia a documentação da dragula
• Crie uma série de vídeos
• Crie a ordem dos vídeos
• escrever uma pontuação de verificação
• Pontuação de upload
• Vá para a próxima página

Etapa 11: página funcional

Para isso você pode conferir as imagens desta etapa

Nesta página, você criará html e ts.

• Da mesma forma que a página conceitual, você terá botões e vídeos como opções.
• No html, escreva um problema para o usuário resolver
• Em seguida, coloque os vídeos em uma matriz com um booleano "IsCorrect"
• Faça upload da pontuação para o banco de dados

Etapa 12: página de login

Para isso você pode conferir as imagens desta etapa

• Crie o html e o ts
• Coloque no html a imagem
• Escreva o formulário no html
• Envie o formulário no ts para o serviço de autenticação
• Salve o usuário no banco de dados

Etapa 13: Baixe o código completo de componentes e serviços

Caso você tenha tido problemas, aqui está o rar com os componentes e serviços