Веб-приложение для образования: 13 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:49

Этот проект был создан как задание для курса видео и цифрового телевидения, в котором мы должны были решить проблему преподавания и обучения на трех уровнях: методологическом, функциональном и концептуальном.

Этот проект был создан как задание для курса видео и цифрового телевидения, в котором мы должны были решить проблему преподавания и обучения на этих трех уровнях: методологическом, функциональном и концептуальном. Мы решили решить эту проблему с помощью веб-платформы, в которой студенты и преподаватели курса могут войти в систему. Студенты также могут получить доступ к обучающим видео по таким темам, как кодеки и видеоформаты, после того как они изучат концептуальную часть темы, они могут приступить к оценке. Оценка состоит из трех действий; каждое мероприятие будет иметь своего рода обучающие видео по темам, связанным с кодеками и видеоформатами, и в то же время каждое мероприятие имеет свою цель, поэтому с помощью этой платформы мы можем обеспечить обучение и оценку методологической, функциональной и концептуальной части. Чтобы добиться всего этого, мы использовали Angular 4 и Firebase, используя такие библиотеки, как AngularFire5 и dragula. Для видеороликов использовалось веб-приложение PowToon.

Для этого вам понадобятся:

• NodeJs
• Угловой4
• Проект Firebase
• Компьютер

Шаг 1: установка

• Установите nodejs 8.9.1 с помощью NPM (диспетчер пакетов узлов)
• Установите Angular-CLI (интерфейс командной строки), набрав в консоли «npm install -g @ angular / cli».

Шаг 2: Создание проекта

• Создайте проект с помощью "ng new my-app"
• Установите пакеты узлов с помощью "npm install"
• Установите dragula с помощью "npm install dragula --save"
• Установите AngularFire2 с помощью "npm install firebase angularfire2 --save"

Шаг 3. Firebase

Для этого вы можете проверить изображения этого шага

• Создайте учетную запись google
• Нажмите "Перейти в консоль".
• создать проект
• Зайдите в General и возьмите клиентские ключи

Шаг 4: Создание компонентов

Для этого вы можете проверить изображения этого шага

Создайте компоненты для приложения.

Использование "ng g c" имя компонента "" для каждого из следующих компонентов:

• Страница курса
• Страница тем
• Страница видео
• Страница оценки
• Методологическая страница
• Концептуальная страница
• Функциональная страница
• Компонент комментариев
• Админ

Шаг 5: Страница курса

Для этого вы можете проверить изображения этого шага

Создайте html и ts

В ts вы напишете логику аутентификации, если пользователь является студентом или администратором, и вы напишете таблицу с информацией о курсе от студента. Для этого вы можете использовать службу аутентификации и службу базы данных, указанные в конце этого руководства.

Шаг 6. Страница тем

Для этого вы можете проверить изображения этого шага

В этом компоненте вы напишете html и ts.

Подобно странице курса, за исключением того, что вам не нужно проверять, является ли пользователь администратором или студентом, вам нужно будет только написать аутентификацию и предоставить списки тем в курсе.

Шаг 7: Страница видео

Для этого вы можете проверить изображения этого шага

В этом компоненте вы напишете html и ts.

Для этого компонента вы предоставите ссылку из powToon для воспроизведения видео и компонент комментариев.

Шаг 8: страница оценки

Для этого вы можете проверить изображения этого шага

для этого компонента вы будете использовать один и тот же видеокомпонент с другим видео, в котором вы будете объяснять процесс оценки.

Тогда просто нажмите кнопку, которая ведет на концептуальную страницу.

Шаг 9: концептуальная страница

Для этого вы можете проверить изображения этого шага

На этой странице вы создадите как html, так и ts.

• Создайте два видеокомпонента с помощью кнопки
• Создайте массив из двух видео с логическим значением isCorrect.
• Напишите функцию CheckScore ()
• Загрузите счет в базу данных
• Переход на следующую страницу

Шаг 10: Методологическая страница

Для этого вы можете проверить изображения этого шага

На этой странице вы создадите как html, так и ts.

• Вы будете использовать dragula, для этого прочтите документацию dragula
• Создать массив видео
• Создать заказ видео
• написать контрольную оценку
• Оценка загрузки
• Перейти на следующую страницу

Шаг 11: Функциональная страница

Для этого вы можете проверить изображения этого шага

На этой странице вы создадите как html, так и ts.

• Как и на концептуальной странице, у вас будут кнопки и видео в качестве параметров.
• В html напишите задачу, которую должен решить пользователь
• Затем поместите видео в массив с логическим значением IsCorrect.
• Загрузите счет в базу данных

Шаг 12: Страница входа в систему

Для этого вы можете проверить изображения этого шага

• Создайте HTML и TS
• Поместите в HTML изображение
• Напишите форму в html
• Отправьте форму в ts в службу авторизации
• Сохраните пользователя в базе данных

Шаг 13: Загрузите полный код компонентов и услуг

Если у вас возникли проблемы, вот rar с компонентами и сервисами