Уеб приложение за образование: 13 стъпки

2025 Автор: John Day | [email protected]. Последно модифициран: 2025-01-23 12:57

Този проект е създаден като задача за курса за видео и цифрова телевизия, в който трябваше да решим проблема с преподаването и ученето на три нива: методическо, функционално и концептуално.

Този проект е създаден като задача за курса на видео и цифрова телевизия, в който трябваше да решим проблема с преподаването и ученето на тези три нива: методологично, функционално и концептуално. Решихме да решим този проблем с помощта на уеб платформа, в които студентите и преподавателите на курса могат да влязат. Студентите могат също да получат достъп до учебните видеоклипове, обхващащи теми като кодеци и видео формати, след като са научили концептуалната част на темата, те могат да продължат да правят оценка. Оценката се състои от три дейности; всяка дейност ще има вид видеоклипове, преподаващи теми, свързани с кодеци и видео формати и в същото време всяка дейност има различна цел, така че с тази платформа можем да постигнем преподаването и оценката на методологичната, функционалната и концептуалната част. За да постигнем всичко това, използвахме Angular 4 и Firebase, използвайки библиотеки като AngularFire5 и dragula. За видеоклиповете използвахме уеб приложението "PowToon".

За тази инструкция ще ви трябва:

• NodeJs
• Ъглова4
• Проект Firebase
• Компютър

Стъпка 1: Инсталиране

• Инсталирайте nodejs 8.9.1 с NPM (Node Package Manager)
• Инсталирайте 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
• Кликнете върху „Към конзолата“
• създайте проект
• Отидете на общо и вземете клиентските ключове

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

За целта можете да проверите изображенията на тази стъпка

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

Използване на "ng g c" име на компонент "" за всеки от следните компоненти:

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

Стъпка 5: Страница на курса

За целта можете да проверите изображенията на тази стъпка

Създайте html и ts

В ts ще напишете логиката зад удостоверяването, ако потребителят е студент или администратор, и ще напишете таблица с информацията за курса от студента. За това можете да използвате услуга за удостоверяване и услуга за бази данни, предоставени в края на тази инструкция.

Стъпка 6: Страница с теми

За целта можете да проверите изображенията на тази стъпка

В този компонент ще напишете html и ts.

Подобно на страницата на курса, освен че не е нужно да проверявате дали потребителят е администратор или студент, ще трябва само да напишете удостоверяване и да предоставите списъците с теми в курса.

Стъпка 7: Видео страница

За целта можете да проверите изображенията на тази стъпка

В този компонент ще напишете html и ts.

За този компонент ще предоставите връзката от powToon, за да възпроизведете видеоклипа, и компонента за коментар

Стъпка 8: Страница за оценка

За целта можете да проверите изображенията на тази стъпка

за този компонент ще използвате същия видео компонент с различен видеоклип, в който ще обясните процеса на оценка.

След това просто трябва да имате бутон, който свързва към концептуалната страница

Стъпка 9: Концептуална страница

За целта можете да проверите изображенията на тази стъпка

На тази страница ще създадете html и ts.

• Създайте два видео компонента с бутон
• Създайте масив от два видеоклипа с логическо „isCorrect“
• Напишете функция CheckScore ()
• Качете резултата в базата данни
• Транспортирайте до следващата страница

Стъпка 10: Методологична страница

За целта можете да проверите изображенията на тази стъпка

На тази страница ще създадете html и ts.

• Ще използвате драгула, за това прочетете документите на драгула
• Създайте масив от видеоклипове
• Създайте реда на видеоклиповете
• напишете чек резултат
• Резултат за качване
• Отидете на следващата страница

Стъпка 11: Функционална страница

За целта можете да проверите изображенията на тази стъпка

На тази страница ще създадете html и ts.

• Също като концептуалната страница ще имате бутони и видеоклипове като опции.
• В html напишете проблем, който потребителят да реши
• След това поставете видеоклиповете в масив с логическо „IsCorrect“
• Качете резултата в базата данни

Стъпка 12: Страница за вход

За целта можете да проверите изображенията на тази стъпка

• Създайте html и ts
• Поставете изображението в html
• Напишете формуляра в html
• Изпратете формуляра в ts до услугата за удостоверяване
• Запазете потребителя в базата данни

Стъпка 13: Изтеглете пълния код на компонентите и услугите

В случай, че сте имали проблеми, ето rar с компонентите и услугите