Daftar Isi:
- Langkah 1: Instalasi
- Langkah 2: Membuat Proyek
- Langkah 3: Firebase
- Langkah 4: Membuat Komponen
- Langkah 5: Halaman Kursus
- Langkah 6: Halaman Topik
- Langkah 7: Halaman Video
- Langkah 8: Halaman Evaluasi
- Langkah 9: Halaman Konseptual
- Langkah 10: Halaman Metodologis
- Langkah 11: Halaman Fungsional
- Langkah 12: Halaman Masuk
- Langkah 13: Unduh Kode Lengkap Komponen dan Layanan
Video: Aplikasi Web Pendidikan: 13 Langkah
2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:54
Proyek ini dibuat sebagai tugas untuk kursus video dan televisi digital di mana kami harus memecahkan masalah belajar-mengajar dalam tiga tingkatan: Metodologis, Fungsional dan konseptual.
Proyek ini dibuat sebagai tugas untuk kursus video dan televisi digital, di mana kami harus memecahkan masalah belajar mengajar di tiga level ini: Metodologis, Fungsional dan konseptual. Kami memutuskan untuk menyelesaikan masalah ini menggunakan platform web, di mana siswa dan guru kursus dapat masuk. Siswa juga dapat mengakses video pengajaran yang mencakup topik seperti codec dan format video, setelah mereka mempelajari bagian konseptual dari topik, mereka dapat melanjutkan untuk melakukan evaluasi. Evaluasi terdiri dari tiga kegiatan; setiap kegiatan akan memiliki semacam video pengajaran topik yang berkaitan dengan codec dan format video dan pada saat yang sama setiap kegiatan memiliki tujuan yang berbeda, sehingga dengan platform ini kita dapat mencapai pengajaran dan evaluasi bagian metodologis, fungsional dan konseptual. Untuk mencapai semua ini, kami menggunakan Angular 4 dan Firebase, menggunakan pustaka seperti AngularFire5 dan dragula. Untuk video kami menggunakan aplikasi web "PowToon".
Untuk instruksi ini, Anda perlu:
- NodeJs
- Sudut4
- Proyek Firebase
- Komputer
Langkah 1: Instalasi
- Instal nodejs 8.9.1 dengan NPM (Node Package Manager)
- Instal Angular-CLI (Command Line Interface) mengetik di konsol "npm install -g @angular/cli"
Langkah 2: Membuat Proyek
- Buat proyek menggunakan "ng new my-app"
- Instal paket node dengan "npm install"
- Instal dragula dengan "npm install dragula --save"
- Instal AngularFire2 dengan "npm install firebase angularfire2 --save"
Langkah 3: Firebase
Untuk ini, Anda dapat memeriksa gambar langkah ini
- Buat akun google
- Klik "Pergi ke konsol"
- membuat proyek
- Pergi ke umum dan ambil kunci klien
Langkah 4: Membuat Komponen
Untuk ini, Anda dapat memeriksa gambar langkah ini
Buat komponen untuk aplikasi.
Menggunakan "ng g c "nama komponen" " untuk setiap komponen berikut:
- Halaman Kursus
- Halaman Topik
- Halaman Video
- Halaman Evaluasi
- Halaman Metodologis
- Halaman Konseptual
- Halaman Fungsional
- Komponen komentar
- Admin
Langkah 5: Halaman Kursus
Untuk ini, Anda dapat memeriksa gambar langkah ini
Buat html dan ts
Di ts Anda akan menulis logika di balik otentikasi, jika pengguna adalah siswa atau Admin, dan Anda akan menulis tabel dengan informasi kursus dari siswa. Untuk itu Anda dapat menggunakan layanan otentikasi dan layanan database yang keduanya disediakan di akhir instruksi ini.
Langkah 6: Halaman Topik
Untuk ini, Anda dapat memeriksa gambar langkah ini
Dalam komponen ini Anda akan menulis html dan ts.
Mirip dengan halaman kursus kecuali Anda tidak perlu memeriksa apakah pengguna adalah admin atau siswa, Anda hanya perlu menulis otentikasi dan memberikan daftar topik dalam kursus.
Langkah 7: Halaman Video
Untuk ini, Anda dapat memeriksa gambar langkah ini
Dalam komponen ini Anda akan menulis html dan ts.
Untuk komponen ini Anda akan memberikan tautan dari powToon untuk memutar video, dan komponen komentar
Langkah 8: Halaman Evaluasi
Untuk ini, Anda dapat memeriksa gambar langkah ini
untuk kali ini anda akan menggunakan komponen video yang sama dengan video yang berbeda dimana anda akan menjelaskan proses evaluasinya.
Kemudian hanya memiliki tombol yang menautkan ke halaman konseptual
Langkah 9: Halaman Konseptual
Untuk ini, Anda dapat memeriksa gambar langkah ini
Di halaman ini Anda akan membuat html dan ts.
- Buat dua komponen video dengan tombol
- Buat larik dua video dengan boolean "isCorrect"
- Tulis fungsi CheckScore()
- Unggah skor ke database
- Transportasi ke halaman berikutnya
Langkah 10: Halaman Metodologis
Untuk ini, Anda dapat memeriksa gambar langkah ini
Di halaman ini Anda akan membuat html dan ts.
- Anda akan menggunakan dragula, untuk itu baca dokumen dragula
- Buat berbagai video
- Buat urutan video
- tulis Skor Cek
- Unggah Skor
- Pergi ke halaman berikutnya
Langkah 11: Halaman Fungsional
Untuk ini, Anda dapat memeriksa gambar langkah ini
Di halaman ini Anda akan membuat html dan ts.
- Sama seperti halaman konseptual, Anda akan memiliki tombol dan video sebagai opsi.
- Di html tulis masalah untuk dipecahkan pengguna
- Kemudian tempatkan video dalam array dengan boolean "IsCorrect"
- Unggah skor ke database
Langkah 12: Halaman Masuk
Untuk ini, Anda dapat memeriksa gambar langkah ini
- Buat html dan ts
- Tempatkan di html gambar
- Tulis formulir di html
- Kirimkan formulir di ts ke layanan auth
- Simpan pengguna di database
Langkah 13: Unduh Kode Lengkap Komponen dan Layanan
Jika Anda mengalami masalah, berikut adalah rar dengan komponen dan layanannya
Direkomendasikan:
Pendidikan Langkah demi Langkah dalam Robotika Dengan Kit: 6 Langkah
Pendidikan Selangkah demi Selangkah dalam Robotika Dengan Kit: Setelah beberapa bulan membuat robot saya sendiri (silakan lihat semua ini), dan setelah dua kali mengalami bagian yang gagal, saya memutuskan untuk mengambil langkah mundur dan memikirkan kembali strategi dan arahan. Pengalaman beberapa bulan terkadang sangat bermanfaat, dan
Mikro Pendidikan DIY: Robot bit: 8 Langkah (dengan Gambar)
Mikro Pendidikan DIY: Robot bit: Instruksi ini akan menunjukkan kepada Anda cara membuat robot yang relatif mudah diakses, mampu, dan murah. Tujuan saya dalam merancang robot ini adalah untuk mengusulkan sesuatu yang kebanyakan orang mampu, bagi mereka untuk mengajar ilmu komputer dengan cara yang menarik atau untuk belajar
Robot Terkendali RC di XLR8! Robot Pendidikan: 5 Langkah
Robot Terkendali RC di XLR8! Robot Pendidikan: Hai, dalam artikel ini, akan menunjukkan cara membuat Robot dasar. Kata "Robot' secara harfiah berarti "Budak" atau "Buruh". Berkat kemajuan dalam Kecerdasan Buatan, robot tidak lagi hanya menjadi bagian dari Fiksi Ilmiah Issac Asimov
OAREE - 3D Printed - Robot Penghindar Rintangan untuk Pendidikan Teknik (OAREE) Dengan Arduino: 5 Langkah (dengan Gambar)
OAREE - 3D Printed - Obstacle Avoiding Robot for Engineering Education (OAREE) With Arduino: OAREE (Obstacle Avoiding Robot for Engineering Education) Desain: Tujuan dari instruksi ini adalah untuk merancang robot OAR (Obstacle Avoiding Robot) yang sederhana/kompak, Dapat dicetak 3D, mudah dirakit, menggunakan servos rotasi terus
BUGS Robot Pendidikan: 11 Langkah (dengan Gambar)
BUGS Robot Pendidikan: Selama setahun terakhir saya telah menghabiskan cukup banyak waktu luang saya merancang dan belajar tentang robotika open source 3D yang dapat dicetak sehingga ketika saya melihat bahwa Instructables telah mengadakan Kontes Robotika, tidak mungkin saya tidak dapat ikut serta itu. Saya ingin desainnya