สารบัญ:
- ขั้นตอนที่ 1: การติดตั้ง
- ขั้นตอนที่ 2: การสร้างโครงการ
- ขั้นตอนที่ 3: Firebase
- ขั้นตอนที่ 4: การสร้างส่วนประกอบ
- ขั้นตอนที่ 5: หน้าหลักสูตร
- ขั้นตอนที่ 6: หน้าหัวข้อ
- ขั้นตอนที่ 7: หน้าวิดีโอ
- ขั้นตอนที่ 8: หน้าการประเมิน
- ขั้นตอนที่ 9: หน้าแนวคิด
- ขั้นตอนที่ 10: หน้าระเบียบวิธี
- ขั้นตอนที่ 11: หน้าที่การใช้งาน
- ขั้นตอนที่ 12: หน้าเข้าสู่ระบบ
- ขั้นตอนที่ 13: ดาวน์โหลดโค้ดส่วนประกอบและบริการแบบเต็ม
วีดีโอ: เว็บแอปการศึกษา: 13 ขั้นตอน
2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:03
โครงงานนี้จัดทำขึ้นเป็นงานมอบหมายสำหรับหลักสูตรวิดีโอและโทรทัศน์ระบบดิจิตอล ซึ่งเราต้องแก้ปัญหาการสอนและการเรียนรู้ใน 3 ระดับ ได้แก่ ระเบียบวิธี การทำงาน และแนวความคิด
โปรเจ็กต์นี้จัดทำขึ้นเป็นงานมอบหมายสำหรับหลักสูตรวิดีโอและโทรทัศน์ดิจิทัล ซึ่งเราต้องแก้ปัญหาการสอนและการเรียนรู้ใน 3 ระดับนี้: ระเบียบวิธี การทำงาน และแนวความคิด เราตัดสินใจแก้ปัญหานี้โดยใช้แพลตฟอร์มเว็บ ซึ่งนักเรียนและอาจารย์ของหลักสูตรสามารถเข้าสู่ระบบได้ นักเรียนยังสามารถเข้าถึงวิดีโอการสอนที่ครอบคลุมหัวข้อต่างๆ เช่น ตัวแปลงสัญญาณและรูปแบบวิดีโอ หลังจากที่พวกเขาได้เรียนรู้ส่วนแนวคิดของหัวข้อแล้ว พวกเขาสามารถดำเนินการประเมินได้ การประเมินผลประกอบด้วยสามกิจกรรม แต่ละกิจกรรมจะมีวิดีโอสอนหัวข้อที่เกี่ยวข้องกับตัวแปลงสัญญาณและรูปแบบวิดีโอ และในขณะเดียวกันแต่ละกิจกรรมก็มีจุดประสงค์ที่แตกต่างกัน ดังนั้นด้วยแพลตฟอร์มนี้ เราจึงสามารถบรรลุการสอนและประเมินผลในส่วนของระเบียบวิธี การทำงาน และแนวคิดได้ เพื่อให้บรรลุทั้งหมดนี้ เราใช้ Angular 4 และ Firebase โดยใช้ไลบรารี เช่น AngularFire5 และ Dragula สำหรับวิดีโอเราใช้เว็บแอป "PowToon"
สำหรับคำแนะนำนี้คุณจะต้อง:
- NodeJs
- Angular4
- โครงการ Firebase
- คอมพิวเตอร์
ขั้นตอนที่ 1: การติดตั้ง
- ติดตั้ง nodejs 8.9.1 ด้วย NPM (Node Package Manager)
- ติดตั้ง Angular-CLI (Command Line Interface) พิมพ์ที่คอนโซล "npm install -g @angular/cli"
ขั้นตอนที่ 2: การสร้างโครงการ
- สร้างโครงการโดยใช้ "ng new my-app"
- ติดตั้งแพ็คเกจโหนดด้วย "การติดตั้ง npm"
- ติดตั้ง dragula ด้วย "npm install dragula --save"
- ติดตั้ง AngularFire2 ด้วย "npm ติดตั้ง firebase angularfire2 --save"
ขั้นตอนที่ 3: Firebase
สำหรับสิ่งนี้คุณสามารถตรวจสอบภาพของขั้นตอนนี้
- สร้างบัญชี Google
- คลิกที่ "ไปที่คอนโซล"
- สร้างโครงการ
- ไปที่ทั่วไปแล้วหยิบกุญแจลูกค้า
ขั้นตอนที่ 4: การสร้างส่วนประกอบ
สำหรับสิ่งนี้คุณสามารถตรวจสอบภาพของขั้นตอนนี้
สร้างส่วนประกอบสำหรับแอพ
การใช้ "ng g c "component name" " สำหรับแต่ละส่วนประกอบต่อไปนี้:
- หน้าหลักสูตร
- หน้าหัวข้อ
- หน้าวิดีโอ
- หน้าประเมิน
- หน้าระเบียบวิธี
- หน้าแนวคิด
- หน้าที่การใช้งาน
- องค์ประกอบความคิดเห็น
- แอดมิน
ขั้นตอนที่ 5: หน้าหลักสูตร
สำหรับสิ่งนี้คุณสามารถตรวจสอบภาพของขั้นตอนนี้
สร้าง html และ ts
ใน ts คุณจะเขียนตรรกะที่อยู่เบื้องหลังการตรวจสอบ หากผู้ใช้เป็นนักเรียนหรือผู้ดูแลระบบ และคุณจะเขียนตารางที่มีข้อมูลหลักสูตรจากนักเรียน เพื่อที่คุณสามารถใช้บริการรับรองความถูกต้องและบริการฐานข้อมูลที่มีให้ที่ส่วนท้ายของคำแนะนำนี้
ขั้นตอนที่ 6: หน้าหัวข้อ
สำหรับสิ่งนี้คุณสามารถตรวจสอบภาพของขั้นตอนนี้
ในองค์ประกอบนี้ คุณจะเขียน html และ ts
คล้ายกับหน้าหลักสูตรยกเว้นว่าคุณไม่จำเป็นต้องตรวจสอบว่าผู้ใช้เป็นผู้ดูแลระบบหรือนักเรียน คุณจะต้องเขียนการรับรองความถูกต้องและระบุรายการหัวข้อในหลักสูตรเท่านั้น
ขั้นตอนที่ 7: หน้าวิดีโอ
สำหรับสิ่งนี้คุณสามารถตรวจสอบภาพของขั้นตอนนี้
ในองค์ประกอบนี้ คุณจะเขียน html และ ts
สำหรับองค์ประกอบนี้ คุณจะต้องให้ลิงก์จาก powToon เพื่อเล่นวิดีโอและองค์ประกอบความคิดเห็น
ขั้นตอนที่ 8: หน้าการประเมิน
สำหรับสิ่งนี้คุณสามารถตรวจสอบภาพของขั้นตอนนี้
สำหรับ occmponent นี้ คุณจะใช้ส่วนประกอบวิดีโอเดียวกันกับวิดีโอที่แตกต่างกัน ซึ่งคุณจะอธิบายขั้นตอนการประเมิน
เพียงแค่มีปุ่มที่เชื่อมโยงไปยังหน้าแนวคิด
ขั้นตอนที่ 9: หน้าแนวคิด
สำหรับสิ่งนี้คุณสามารถตรวจสอบภาพของขั้นตอนนี้
ในหน้านี้ คุณจะสร้างทั้ง html และ ts
- สร้างสององค์ประกอบวิดีโอด้วยปุ่มเดียว
- สร้างอาร์เรย์ของวิดีโอสองรายการด้วยบูลีน "isCorrect"
- เขียนฟังก์ชัน CheckScore()
- อัพโหลดคะแนนเข้าฐานข้อมูล
- การขนส่งไปยังหน้าถัดไป
ขั้นตอนที่ 10: หน้าระเบียบวิธี
สำหรับสิ่งนี้คุณสามารถตรวจสอบภาพของขั้นตอนนี้
ในหน้านี้ คุณจะสร้างทั้ง html และ ts
- คุณจะใช้ประโยชน์จาก dragula เพื่ออ่านเอกสารของ dragula
- สร้างอาร์เรย์ของวิดีโอ
- สร้างลำดับของวิดีโอ
- เขียนเช็คคะแนน
- คะแนนอัพโหลด
- ไปหน้าถัดไป
ขั้นตอนที่ 11: หน้าที่การใช้งาน
สำหรับสิ่งนี้คุณสามารถตรวจสอบภาพของขั้นตอนนี้
ในหน้านี้ คุณจะสร้างทั้ง html และ ts
- เช่นเดียวกับหน้าแนวคิด คุณจะมีปุ่มและวิดีโอเป็นตัวเลือก
- ใน html เขียนปัญหาให้ผู้ใช้แก้ไข
- จากนั้นวางวิดีโอในอาร์เรย์ด้วยบูลีน "IsCorrect"
- อัพโหลดคะแนนเข้าฐานข้อมูล
ขั้นตอนที่ 12: หน้าเข้าสู่ระบบ
สำหรับสิ่งนี้คุณสามารถตรวจสอบภาพของขั้นตอนนี้
- สร้าง html และ ts
- วางใน html ของรูปภาพ
- เขียนแบบฟอร์มใน html
- ส่งแบบฟอร์มใน ts ไปยังบริการตรวจสอบสิทธิ์
- บันทึกผู้ใช้ในฐานข้อมูล
ขั้นตอนที่ 13: ดาวน์โหลดโค้ดส่วนประกอบและบริการแบบเต็ม
ในกรณีที่คุณมีปัญหา นี่คือ rar กับส่วนประกอบและบริการ
แนะนำ:
การออกแบบเกมในการสะบัดใน 5 ขั้นตอน: 5 ขั้นตอน
การออกแบบเกมในการสะบัดใน 5 ขั้นตอน: การตวัดเป็นวิธีง่ายๆ ในการสร้างเกม โดยเฉพาะอย่างยิ่งเกมปริศนา นิยายภาพ หรือเกมผจญภัย
การตรวจจับใบหน้าบน Raspberry Pi 4B ใน 3 ขั้นตอน: 3 ขั้นตอน
การตรวจจับใบหน้าบน Raspberry Pi 4B ใน 3 ขั้นตอน: ในคำแนะนำนี้ เราจะทำการตรวจจับใบหน้าบน Raspberry Pi 4 ด้วย Shunya O/S โดยใช้ Shunyaface Library Shunyaface เป็นห้องสมุดจดจำใบหน้า/ตรวจจับใบหน้า โปรเจ็กต์นี้มีจุดมุ่งหมายเพื่อให้เกิดความเร็วในการตรวจจับและจดจำได้เร็วที่สุดด้วย
วิธีการติดตั้งปลั๊กอินใน WordPress ใน 3 ขั้นตอน: 3 ขั้นตอน
วิธีการติดตั้งปลั๊กอินใน WordPress ใน 3 ขั้นตอน: ในบทช่วยสอนนี้ ฉันจะแสดงขั้นตอนสำคัญในการติดตั้งปลั๊กอิน WordPress ให้กับเว็บไซต์ของคุณ โดยทั่วไป คุณสามารถติดตั้งปลั๊กอินได้สองวิธี วิธีแรกคือผ่าน ftp หรือผ่าน cpanel แต่ฉันจะไม่แสดงมันเพราะมันสอดคล้องกับ
การลอยแบบอะคูสติกด้วย Arduino Uno ทีละขั้นตอน (8 ขั้นตอน): 8 ขั้นตอน
การลอยแบบอะคูสติกด้วย Arduino Uno ทีละขั้นตอน (8 ขั้นตอน): ตัวแปลงสัญญาณเสียงล้ำเสียง L298N Dc ตัวเมียอะแดปเตอร์จ่ายไฟพร้อมขา DC ตัวผู้ Arduino UNOBreadboardวิธีการทำงาน: ก่อนอื่น คุณอัปโหลดรหัสไปยัง Arduino Uno (เป็นไมโครคอนโทรลเลอร์ที่ติดตั้งดิจิตอล และพอร์ตแอนะล็อกเพื่อแปลงรหัส (C++)
เครื่อง Rube Goldberg 11 ขั้นตอน: 8 ขั้นตอน
เครื่อง 11 Step Rube Goldberg: โครงการนี้เป็นเครื่อง 11 Step Rube Goldberg ซึ่งออกแบบมาเพื่อสร้างงานง่ายๆ ในรูปแบบที่ซับซ้อน งานของโครงการนี้คือการจับสบู่ก้อนหนึ่ง