Εκπαίδευση Web-app: 13 Βήματα

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:32

Αυτό το έργο δημιουργήθηκε ως εργασία για το μάθημα βίντεο και ψηφιακής τηλεόρασης στο οποίο έπρεπε να λύσουμε το πρόβλημα της διδασκαλίας και της μάθησης σε τρία επίπεδα: Μεθοδολογικό, Λειτουργικό και εννοιολογικό.

Αυτό το έργο δημιουργήθηκε ως εργασία για την πορεία βίντεο και ψηφιακής τηλεόρασης, στην οποία έπρεπε να λύσουμε το πρόβλημα της διδασκαλίας και της μάθησης σε αυτά τα τρία επίπεδα: Μεθοδολογική, Λειτουργική και εννοιολογική. Αποφασίσαμε να λύσουμε αυτό το πρόβλημα χρησιμοποιώντας μια πλατφόρμα ιστού, στο οποίο μπορούν να συνδεθούν μαθητές και καθηγητές του μαθήματος. Οι μαθητές μπορούν επίσης να έχουν πρόσβαση στα βίντεο διδασκαλίας που καλύπτουν θέματα όπως κωδικοποιητές και μορφές βίντεο, αφού μάθουν το εννοιολογικό μέρος του θέματος και μπορούν να προχωρήσουν σε αξιολόγηση. Η αξιολόγηση περιλαμβάνει τρεις δραστηριότητες. κάθε δραστηριότητα θα έχει ένα είδος βίντεο που διδάσκει θέματα που σχετίζονται με κωδικοποιητές και μορφές βίντεο και ταυτόχρονα κάθε δραστηριότητα έχει διαφορετικό σκοπό, οπότε με αυτήν την πλατφόρμα μπορούμε να επιτύχουμε τη διδασκαλία και την αξιολόγηση του μεθοδολογικού, λειτουργικού και εννοιολογικού μέρους. Για να επιτευχθούν όλα αυτά, χρησιμοποιήσαμε το Angular 4 και το Firebase, χρησιμοποιώντας βιβλιοθήκες όπως το AngularFire5 και το dragula. Για τα βίντεο χρησιμοποιήσαμε την εφαρμογή web "PowToon".

Για αυτό το διδακτικό θα χρειαστείτε:

• NodeJs
• Γωνιακό4
• Έργο 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 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 "isCorrect"
• Γράψτε μια συνάρτηση CheckScore ()
• Ανεβάστε τη βαθμολογία στη βάση δεδομένων
• Μεταφορά στην επόμενη σελίδα

Βήμα 10: Μεθοδολογική σελίδα

Για αυτό μπορείτε να ελέγξετε τις εικόνες αυτού του βήματος

Σε αυτή τη σελίδα θα δημιουργήσετε και html και ts.

• Θα κάνετε χρήση της dragula, για αυτό διαβάστε τα έγγραφα της dragula
• Δημιουργήστε μια σειρά βίντεο
• Δημιουργήστε τη σειρά των βίντεο
• γράψτε μια βαθμολογία ελέγχου
• Αποστολή παρτιτούρας
• Μετάβαση στην επόμενη σελίδα

Βήμα 11: Λειτουργική σελίδα

Για αυτό μπορείτε να ελέγξετε τις εικόνες αυτού του βήματος

Σε αυτή τη σελίδα θα δημιουργήσετε και html και ts.

• Όπως και η εννοιολογική σελίδα, θα έχετε κουμπιά και βίντεο ως επιλογές.
• Στο html γράψτε ένα πρόβλημα για να λύσει ο χρήστης
• Στη συνέχεια, τοποθετήστε τα βίντεο σε έναν πίνακα με ένα boolean "IsCorrect"
• Ανεβάστε τη βαθμολογία στη βάση δεδομένων

Βήμα 12: Σελίδα σύνδεσης

Για αυτό μπορείτε να ελέγξετε τις εικόνες αυτού του βήματος

• Δημιουργήστε τα html και ts
• Τοποθετήστε την εικόνα στο html
• Γράψτε τη φόρμα στο html
• Υποβάλετε τη φόρμα στο ts στην υπηρεσία Author
• Αποθηκεύστε τον χρήστη στη βάση δεδομένων

Βήμα 13: Λήψη πλήρους κώδικα εξαρτημάτων και υπηρεσιών

Σε περίπτωση που είχατε προβλήματα, εδώ είναι το rar με τα εξαρτήματα και τις υπηρεσίες