Aplicación web educativa: 13 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:40

Este proyecto fue creado como un encargo para el curso de video y televisión digital en el que teníamos que resolver el problema de la enseñanza y el aprendizaje en tres niveles: Metodológico, Funcional y conceptual.

Este proyecto fue creado como un encargo para el curso de video y televisión digital, en el cual teníamos que resolver el problema de la enseñanza y el aprendizaje en estos tres niveles: Metodológico, Funcional y conceptual, decidimos resolver este problema utilizando una plataforma web, en el cual los estudiantes y profesores del curso pueden iniciar sesión. Los estudiantes también pueden acceder a los videos didácticos que cubren temas como códecs y formatos de video, luego de haber aprendido la parte conceptual del tema pueden proceder a hacer una evaluación. La evaluación consta de tres actividades; cada actividad va a tener una especie de videos enseñando temas relacionados con códecs y formatos de video y al mismo tiempo cada actividad tiene un propósito diferente, por lo que con esta plataforma podemos lograr la enseñanza y evaluación de la parte metodológica, funcional y conceptual. Para lograr todo esto, usamos Angular 4 y Firebase, usando bibliotecas como AngularFire5 y dragula. Para los videos usamos la aplicación web "PowToon".

Para este instructable, necesitará:

• NodeJs
• Angular4
• Proyecto Firebase
• Un ordenador

Paso 1: instalación

• Instale nodejs 8.9.1 con NPM (Node Package Manager)
• Instale Angular-CLI (Interfaz de línea de comandos) escribiendo en la consola "npm install -g @ angular / cli"

Paso 2: Crear proyecto

• Crea un proyecto usando "ng new my-app"
• Instalar paquetes de nodos con "npm install"
• Instale dragula con "npm install dragula --save"
• Instale AngularFire2 con "npm install firebase angularfire2 --save"

Paso 3: Firebase

Para ello puedes consultar las imágenes de este paso

• Crea una cuenta de google
• Haga clic en "Ir a la consola"
• crear un proyecto
• Vaya a general y tome las claves del cliente

Paso 4: creación de componentes

Para ello puedes consultar las imágenes de este paso.

Cree los componentes para la aplicación.

Usar "ng g c" nombre de componente "" para cada uno de los siguientes componentes:

• Página del curso
• Página de temas
• Página de video
• Página de evaluación
• Página metodológica
• Página conceptual
• Página funcional
• Componente de comentarios
• Administración

Paso 5: página del curso

Para ello puedes consultar las imágenes de este paso.

Crea el html y el ts

En el ts escribirás la lógica detrás de la autenticación, si el usuario es un estudiante o un administrador, y escribirás una tabla con la información del curso del estudiante. Para eso, puede utilizar un servicio de autenticación y un servicio de base de datos, ambos proporcionados al final de este instructivo.

Paso 6: Página de temas

Para ello puedes consultar las imágenes de este paso

En este componente escribirás html y ts.

Similar a la página del curso, excepto que no tiene que verificar si el usuario es un administrador o un estudiante, solo tendrá que escribir la autenticación y proporcionar las listas de temas del curso.

Paso 7: página de video

Para ello puedes consultar las imágenes de este paso

En este componente escribirás html y ts.

Para este componente, proporcionará el enlace de powToon para reproducir el video y el componente de comentarios

Paso 8: Página de evaluación

Para ello puedes consultar las imágenes de este paso.

para este componente utilizará el mismo componente de video con un video diferente en el cual explicará el proceso de evaluación.

Luego, solo tenga un botón que se vincule a la página conceptual

Paso 9: Página conceptual

Para ello puedes consultar las imágenes de este paso

En esta página creará html y ts.

• Crea dos componentes de video con un botón
• Crea una matriz de dos videos con un booleano "isCorrect"
• Escribir una función CheckScore ()
• Sube la puntuación a la base de datos
• Transporte a la página siguiente

Paso 10: Página metodológica

Para ello puedes consultar las imágenes de este paso

En esta página creará html y ts.

• Harás uso de dragula, para eso lee los documentos de dragula
• Crea una variedad de videos
• Crea el orden de los videos
• escribir una puntuación de verificación
• Subir puntuación
• Ir a la página siguiente

Paso 11: Página funcional

Para ello puedes consultar las imágenes de este paso

En esta página creará html y ts.

• Al igual que la página conceptual, tendrás botones y videos como opciones.
• En html escriba un problema para que el usuario lo resuelva
• Luego, coloque los videos en una matriz con un booleano "IsCorrect"
• Sube la puntuación a la base de datos

Paso 12: Página de inicio de sesión

Para ello puedes consultar las imágenes de este paso

• Crea el html y ts
• Coloca en el html la imagen
• Escribe el formulario en html
• Envíe el formulario en el ts al servicio de autenticación
• Guarde al usuario en la base de datos

Paso 13: descargue el código completo de componentes y servicios

En caso de que haya tenido problemas, aquí está el rar con los componentes y servicios.