יישום אינטרנט לחינוך: 13 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:12

פרויקט זה נוצר כמשימה לקורס הווידיאו והטלוויזיה הדיגיטלית בו נאלצנו לפתור את בעיית ההוראה והלמידה בשלוש רמות: מתודולוגיות, פונקציונאליות ורעיוניות.

פרויקט זה נוצר כמשימה לקורס הווידיאו והטלוויזיה הדיגיטלית, בה נאלצנו לפתור את בעיית ההוראה והלמידה בשלוש הרמות הללו: מתודולוגית, פונקציונלית ורעיונית. החלטנו לפתור בעיה זו באמצעות פלטפורמת אינטרנט, בו יכולים תלמידי ומורי הקורס להיכנס. התלמידים יכולים גם לגשת לסרטוני ההוראה המכסים נושאים כגון רכיבי codec ופורמטי וידאו, לאחר שלמדו את החלק הרעיוני של הנושא הם יכולים להמשיך לבצע הערכה. ההערכה מורכבת משלוש פעילויות; לכל פעילות יהיו מעין סרטוני לימוד הנושאים הקשורים לרכיבי codec ופורמטי וידאו ויחד עם זאת לכל פעילות יש מטרה אחרת, כך שבאמצעות פלטפורמה זו נוכל להשיג את ההוראה וההערכה של החלק המתודולוגי, התפקודי והרעיוני. כדי להשיג את כל זה, השתמשנו ב- Angular 4 וב- Firebase, תוך שימוש בספריות כגון AngularFire5 ו- dragula. עבור הסרטונים השתמשנו באפליקציית האינטרנט "PowToon".

לצורך הוראה זו תזדקק ל:

• NodeJs
• זוויתי 4
• פרויקט Firebase
• מחשב

שלב 1: התקנה

• התקן את nodejs 8.9.1 עם NPM (Node Package Package)
• התקן הקלדת Angular -CLI (ממשק שורת הפקודה) במסוף "npm install -g @angular/cli"

שלב 2: יצירת פרויקט

• צור פרויקט באמצעות "ng my-app new"
• התקן חבילות צומת עם "התקנת npm"
• התקן את dragula עם "npm install dragula --save"
• התקן את AngularFire2 עם "npm התקן את Firebase Angularfire2 -שמור"

שלב 3: Firebase

לשם כך תוכל לבדוק את התמונות של שלב זה

• צור חשבון גוגל
• לחץ על "עבור לקונסולה"
• ליצור פרויקט
• לך לגנרל ותפס את מפתחות הלקוח

שלב 4: יצירת רכיבים

לשם כך תוכל לבדוק את התמונות של שלב זה

צור את הרכיבים לאפליקציה.

שימוש ב- "ng g c" שם רכיב "" עבור כל אחד מהרכיבים הבאים:

• דף הקורס
• דף נושאים
• דף וידאו
• דף הערכה
• דף מתודולוגי
• דף רעיוני
• דף פונקציונלי
• רכיב הערות
• מנהל מערכת

שלב 5: דף הקורס

לשם כך תוכל לבדוק את התמונות של שלב זה

צור את html ו- ts

ב- ts תכתוב את ההיגיון מאחורי האימות, אם המשתמש הוא סטודנט או מנהל מערכת, ותכתוב טבלה עם פרטי הקורס מהסטודנט. לשם כך תוכל להשתמש בשירות אימות ושירות מסדי נתונים שניהם ניתנים בסוף הוראה זו.

שלב 6: דף נושאים

לשם כך תוכל לבדוק את התמונות של שלב זה

ברכיב זה תכתוב את html ו- ts.

בדומה לדף הקורס, אלא שאינך צריך לבדוק אם המשתמש הוא מנהל או סטודנט, יהיה עליך לכתוב אימות ולספק את רשימות הנושאים בקורס.

שלב 7: דף וידאו

לשם כך תוכל לבדוק את התמונות של שלב זה

ברכיב זה תכתוב את html ו- ts.

עבור רכיב זה תספק את הקישור מ- powToon על מנת להפעיל את הסרטון ואת רכיב ההערה

שלב 8: דף הערכה

לשם כך תוכל לבדוק את התמונות של שלב זה

עבור המיקוד הזה תשתמש באותו רכיב וידיאו עם סרטון שונה שבו תסביר את תהליך ההערכה.

אז פשוט יש כפתור המקשר לדף הרעיוני

שלב 9: דף מושגי

לשם כך תוכל לבדוק את התמונות של שלב זה

בדף זה תיצור HTML ו- TS.

• צור שני רכיבי וידאו באמצעות כפתור
• צור מערך של שני סרטוני וידיאו עם "isCorrect" בוליאני.
• כתוב פונקציה CheckScore ()
• העלה את הציון למסד הנתונים
• העברה לדף הבא

שלב 10: דף מתודולוגי

לשם כך תוכל לבדוק את התמונות של שלב זה

בדף זה תיצור גם html וגם ts.

• תעשה שימוש ב- dragula, לשם כך קרא את מסמכי dragula
• צור מערך של סרטונים
• צור את סדר הסרטונים
• לכתוב ציון בדיקה
• ציון העלאה
• עבור לדף הבא

שלב 11: דף פונקציונלי

לשם כך תוכל לבדוק את התמונות של שלב זה

בדף זה תיצור HTML ו- TS.

• כמו בדף הרעיוני יהיו לך לחצנים וסרטונים כאפשרויות.
• כתוב ב- HTML בעיה שהמשתמש יפתור
• לאחר מכן הנח את הסרטונים במערך עם "IsCorrect" בוליאני.
• העלה את הציון למסד הנתונים

שלב 12: דף כניסה

לשם כך תוכל לבדוק את התמונות של שלב זה

• צור את ה- html ו- ts
• הניחו ב- html את התמונה
• כתוב את הטופס ב- html
• שלח את הטופס ב- ts לשירות האימות
• שמור את המשתמש במסד הנתונים

שלב 13: הורד קוד מלא של רכיבים ושירותים

במקרה שהיו לך בעיות, הנה הנדיר עם הרכיבים והשירותים