Isi kandungan:
- Langkah 1: Pemasangan
- Langkah 2: Membuat Projek
- Langkah 3: Firebase
- Langkah 4: Membuat Komponen
- Langkah 5: Halaman Kursus
- Langkah 6: Halaman Topik
- Langkah 7: Halaman Video
- Langkah 8: Halaman Penilaian
- Langkah 9: Halaman Berkonsep
- Langkah 10: Halaman Metodologi
- Langkah 11: Halaman Berfungsi
- Langkah 12: Halaman Log Masuk
- Langkah 13: Muat turun Kod Komponen dan Perkhidmatan Penuh
Video: Aplikasi Web Pendidikan: 13 Langkah
2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:07
Projek ini dibuat sebagai tugas untuk kursus video dan televisyen digital di mana kita harus menyelesaikan masalah pengajaran dan pembelajaran dalam tiga tahap: Metodologi, Fungsional dan konseptual.
Projek ini dibuat sebagai tugas untuk video dan televisyen digital, di mana kita harus menyelesaikan masalah pengajaran dan pembelajaran dalam tiga tahap ini: Metodologi, Fungsional dan konseptual. Kami memutuskan untuk menyelesaikan masalah ini menggunakan platform web, di mana pelajar dan guru kursus boleh log masuk. Pelajar juga boleh mengakses video pengajaran yang merangkumi topik seperti codec dan format video, setelah mereka mengetahui bahagian konsep dari topik tersebut mereka dapat meneruskan penilaian. Penilaian terdiri daripada tiga aktiviti; setiap aktiviti akan mempunyai jenis video yang mengajar topik yang berkaitan dengan codec dan format video dan pada masa yang sama setiap aktiviti mempunyai tujuan yang berbeza, jadi dengan platform ini kita dapat mencapai pengajaran dan penilaian bahagian metodologi, fungsional dan konseptual. Untuk mencapai semua ini, kami menggunakan Angular 4 dan Firebase, menggunakan perpustakaan seperti AngularFire5 dan dragula. Untuk video kami menggunakan aplikasi web "PowToon".
Untuk arahan ini, anda memerlukan:
- NodeJs
- Sudut4
- Projek Firebase
- Komputer
Langkah 1: Pemasangan
- Pasang nodejs 8.9.1 dengan NPM (Pengurus Pakej Node)
- Pasang menaip Angular-CLI (Command Line Interface) di konsol "npm install -g @ angular / cli"
Langkah 2: Membuat Projek
- Buat projek menggunakan "ng aplikasi baru saya"
- Pasang pakej nod dengan "npm install"
- Pasang dragula dengan "npm install dragula --save"
- Pasang AngularFire2 dengan "npm install firebase angularfire2 --save"
Langkah 3: Firebase
Untuk ini, anda boleh menyemak gambar langkah ini
- Buat akaun google
- Klik "Pergi ke konsol"
- buat projek
- Pergi ke umum dan ambil kunci pelanggan
Langkah 4: Membuat Komponen
Untuk ini, anda boleh melihat gambar langkah ini
Buat komponen untuk aplikasi.
Menggunakan "ng g c" nama komponen "" untuk setiap komponen berikut:
- Halaman Kursus
- Halaman Topik
- Halaman Video
- Halaman Penilaian
- Halaman Metodologi
- Halaman Berkonsep
- Halaman Berfungsi
- Komponen komen
- Pentadbir
Langkah 5: Halaman Kursus
Untuk ini, anda boleh melihat gambar langkah ini
Buat html dan ts
Dalam maklumat tersebut, anda akan menulis logik di sebalik autentikasi, sekiranya pengguna tersebut adalah pelajar atau Pentadbir, dan anda akan menulis jadual dengan maklumat kursus dari pelajar tersebut. Untuk itu anda boleh menggunakan perkhidmatan pengesahan dan perkhidmatan pangkalan data yang disediakan di hujung arahan ini.
Langkah 6: Halaman Topik
Untuk ini, anda boleh melihat gambar langkah ini
Dalam komponen ini anda akan menulis html dan ts.
Sama seperti halaman kursus kecuali anda tidak perlu memeriksa sama ada pengguna adalah pentadbir atau pelajar, anda hanya perlu menulis pengesahan dan memberikan senarai topik dalam kursus.
Langkah 7: Halaman Video
Untuk ini, anda boleh menyemak gambar langkah ini
Dalam komponen ini anda akan menulis html dan ts.
Untuk komponen ini, anda akan memberikan pautan dari powToon untuk memainkan video, dan komponen komen
Langkah 8: Halaman Penilaian
Untuk ini, anda boleh menyemak gambar langkah ini
untuk ocmponent ini, anda akan menggunakan komponen video yang sama dengan video yang berbeza di mana anda akan menerangkan proses penilaian.
Kemudian hanya butang yang menghubungkan ke halaman konsep
Langkah 9: Halaman Berkonsep
Untuk ini, anda boleh menyemak gambar langkah ini
Di halaman ini anda akan membuat html dan ts.
- Buat dua komponen video dengan butang
- Buat susunan dua video dengan "isCorrect" boolean
- Tulis fungsi CheckScore ()
- Muat naik skor ke pangkalan data
- Angkut ke halaman seterusnya
Langkah 10: Halaman Metodologi
Untuk ini, anda boleh menyemak gambar langkah ini
Di halaman ini anda akan membuat html dan ts.
- Anda akan menggunakan dragula, untuk itu baca dokumen dragula
- Buat pelbagai video
- Buat urutan video
- tuliskan Markah Periksa
- Muat naik Skor
- Pergi ke halaman seterusnya
Langkah 11: Halaman Berfungsi
Untuk ini, anda boleh menyemak gambar langkah ini
Di halaman ini anda akan membuat html dan ts.
- Sama seperti halaman konseptual, anda akan mempunyai butang dan video sebagai pilihan.
- Dalam html tulis masalah untuk pengguna selesaikan
- Kemudian letakkan video dalam array dengan "IsCorrect" boolean
- Muat naik skor ke pangkalan data
Langkah 12: Halaman Log Masuk
Untuk ini, anda boleh menyemak gambar langkah ini
- Buat html dan ts
- Letakkan di html gambar
- Tulis borang di html
- Kirimkan borang dalam ts ke perkhidmatan auth
- Simpan pengguna dalam pangkalan data
Langkah 13: Muat turun Kod Komponen dan Perkhidmatan Penuh
Sekiranya anda menghadapi masalah, berikut adalah rar dengan komponen dan perkhidmatan
Disyorkan:
Pendidikan Langkah demi Langkah dalam Robotik Dengan Kit: 6 Langkah
Pendidikan Langkah-demi-Langkah dalam Robotik Dengan Kit: Setelah beberapa bulan membina robot saya sendiri (sila rujuk semua ini), dan setelah dua kali bahagian gagal, saya memutuskan untuk mengambil langkah mundur dan memikirkan semula strategi dan arahan. Pengalaman selama beberapa bulan kadang-kadang sangat bermanfaat, dan
DIY Pendidikan Mikro: bit Robot: 8 Langkah (dengan Gambar)
DIY Educational Micro: bit Robot: Instruksional ini akan menunjukkan kepada anda cara membina robot yang agak mudah diakses, mampu dan murah. Tujuan saya merancang robot ini adalah untuk mencadangkan sesuatu yang mampu dimiliki oleh kebanyakan orang, untuk mereka mengajar sains komputer dengan cara yang menarik atau untuk belajar
Robot terkawal RC pada XLR8! Robot Pendidikan: 5 Langkah
Robot terkawal RC pada XLR8! Education Robot: Hai, dalam artikel ini, akan menunjukkan cara membina Robot asas. Perkataan " Robot 'secara harfiah bermaksud " Hamba " atau " Pekerja '. Berkat kemajuan dalam Artificial Intelligence, robot bukan lagi sebahagian daripada Sci-Fi Issac Asimov
OAREE - 3D Printed - Robot Menghindari Robot untuk Pendidikan Kejuruteraan (OAREE) Dengan Arduino: 5 Langkah (dengan Gambar)
OAREE - 3D Printed - Robot Mengelakkan Halangan untuk Pendidikan Kejuruteraan (OAREE) Dengan Arduino: Reka bentuk OAREE (Robot Mengelakkan Halangan untuk Pendidikan Kejuruteraan): Matlamat yang boleh dipesan ini adalah merancang robot OAR (Robot Mengelakkan Halangan) yang ringkas / padat, 3D boleh dicetak, senang dipasang, menggunakan servo putaran berterusan untuk movem
BUAT Robot Pendidikan: 11 Langkah (dengan Gambar)
MEMBANGUN Robot Pendidikan: Sepanjang tahun lalu saya menghabiskan banyak masa lapang untuk merancang dan belajar mengenai robotik 3D sumber terbuka sehingga ketika saya melihat bahawa Instructables telah mengadakan Peraduan Robotik, tidak mungkin saya tidak dapat mengambil bahagian ia. Saya mahukan desig