Боловсролын вэб апп: 13 алхам

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:01

Энэхүү төслийг видео, дижитал телевизийн курсын даалгавар болгон бүтээсэн бөгөөд үүнд бид заах, сургах асуудлыг арга зүйн, функциональ, ойлголтын гэсэн гурван түвшинд шийдвэрлэх ёстой байв.

Энэхүү төслийг видео болон дижитал телевизийн хичээлийн даалгавар болгон бүтээсэн бөгөөд үүнд бид заах, сурах асуудлаа арга зүйн, функциональ, ойлголтын гэсэн гурван түвшинд шийдвэрлэх ёстой байсан. Бид энэ асуудлыг вэб платформ ашиглан шийдвэрлэхээр шийдсэн. Хичээлийн оюутнууд болон багш нар нэвтэрч болно. Оюутнууд сэдвийнхээ ойлголтын хэсгийг олж мэдсэнийхээ дараа үнэлгээ хийх ажлыг үргэлжлүүлсний дараа кодек, видео формат гэх мэт сэдвүүдийг хамарсан сургалтын видео бичлэгүүдийг үзэх боломжтой. Үнэлгээ нь гурван үйл ажиллагаанаас бүрдэнэ; Үйл ажиллагаа бүр нь кодек, видео форматтай холбоотой сэдвүүдийг заах видео хэлбэртэй байх бөгөөд үйл ажиллагаа бүр өөр өөр зорилготой байдаг тул энэхүү платформын тусламжтайгаар бид арга зүй, үйл ажиллагаа, үзэл баримтлалын хэсгийг зааж, үнэлэх боломжтой болно. Энэ бүхэнд хүрэхийн тулд бид AngularFire5, dragula гэх мэт номын санг ашиглан Angular 4 болон Firebase -ийг ашигласан. Видео бичлэгийн хувьд бид "PowToon" вэб програмыг ашигласан.

Энэхүү зааварчилгааны хувьд танд хэрэгтэй болно:

• NodeJs
• Өнцөг 4
• Firebase төсөл
• Компьютер

Алхам 1: Суурилуулалт

• Nodejs 8.9.1 -ийг NPM (Node Package Manager) ашиглан суулгаарай
• Консол дээр "npm install -g @angular/cli" гэж бичээд Angular -CLI (Command Line Interface) бичнэ үү.

Алхам 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 хоёуланг нь үүсгэх болно.

• Товчлуураар хоёр видео бүрэлдэхүүн хэсэг үүсгээрэй
• Boolean "isC Correct" ашиглан хоёр видеоны массив үүсгэх
• CheckScore () функцийг бичнэ үү
• Мэдээллийн санд оноо байршуулах
• Дараагийн хуудсанд шилжүүлэх

Алхам 10: Арга зүйн хуудас

Үүнийг хийхийн тулд та энэ алхамуудын зургийг шалгаж болно

Энэ хуудсан дээр та html болон ts хоёуланг нь үүсгэх болно.

• Та Dragula ашиглах болно, үүний тулд Dragula -ийн документыг уншина уу
• Видео массив үүсгэх
• Видео бичлэгийн дарааллыг бий болгох
• шалгах оноо бичнэ үү
• Оноог байршуулах
• Дараагийн хуудас руу очно уу

Алхам 11: Функциональ хуудас

Үүнийг хийхийн тулд та энэ алхамуудын зургийг шалгаж болно

Энэ хуудсан дээр та html болон ts хоёуланг нь үүсгэх болно.

• Үзэл баримтлалын хуудасны нэгэн адил танд товчлуурууд болон видеонууд байх болно.
• Html дээр хэрэглэгчийн шийдэх асуудлыг бичээрэй
• Дараа нь видеог логик "IsC Correct" бүхий массивт байрлуулна уу.
• Мэдээллийн санд оноо байршуулах

Алхам 12: Нэвтрэх хуудас

Үүнийг хийхийн тулд та энэ алхамуудын зургийг шалгаж болно

• Html ба ts -ийг үүсгэнэ үү
• Зургийг html дээр байрлуул
• Маягтыг html дээр бичнэ үү
• Ts дахь маягтыг auth үйлчилгээнд илгээнэ үү
• Хэрэглэгчийг мэдээллийн санд хадгалах

Алхам 13: Бүрэлдэхүүн хэсэг ба үйлчилгээний бүрэн кодыг татаж авах

Хэрэв танд асуудал гарсан бол бүрэлдэхүүн хэсэг, үйлчилгээнд ховор тохиолддог зүйл энд байна