Συλλογές εκπαιδευτικών ιστοεφαρμογών (sch-webapps)

Τα sch-webapps είναι ένα σύνολο βοηθημάτων και οδηγιών, οι οποίες διευκολύνουν την λήψη και τον διαμοιρασμό συλλογών εκπαιδευτικών ιστοεφαρμογών, κάνοντας χρήση αποθετηρίων npm (παρόμοιων με το Play Store του Android). Για παράδειγμα, είναι δυνατή η εγκατάσταση δεκάδων ιστοεφαρμογών του Φωτόδεντρου επικολλώντας μόνο τα αναγνωριστικά τους ή το όνομα μιας συλλογής.

Ως demo, μπορείτε να περιηγηθείτε στο npm αποθετήριο, να δείτε online ένα παράδειγμα συλλογής η οποία δημιουργήθηκε με τα sch-webapps, ή να την κατεβάσετε σε συμπιεσμένη μορφή και να την προβάλλετε τοπικά στον υπολογιστή σας.

Περιγραφή του προβλήματος

Η πιο διαδεδομένη μορφή προβολής εκπαιδευτικών εφαρμογών και υλικού είναι πλέον αυτή της ιστοσελίδας (HTML5/CSS3/Javascript). Τα περισσότερα προγράμματα επεξεργασίας κειμένου, βίντεο, παρουσιάσεων αλλά και αλληλεπιδραστικών εφαρμογών υποστηρίζουν εξαγωγή σε HTML, ενώ είναι δυνατή η προβολή της από οποιαδήποτε υπολογιστική συσκευή ή λειτουργικό σύστημα.

Πολλοί εκπαιδευτικοί ανεβάζουν στις σελίδες τους ή στο blog του σχολείου το υλικό τους σε μορφή HTML. Μάλιστα, το Φωτόδεντρο έχει μια τεράστια συλλογή με περισσότερα από 15.000 μαθησιακά αντικείμενα, εκπαιδευτικά βίντεο, εκπαιδευτικό λογισμικό και υλικό χρηστών.

Πώς όμως μπορεί ένας εκπαιδευτικός να δημιουργήσει μια τοπική συλλογή με τέτοιες ιστοεφαρμογές και υλικό, ώστε να μπορεί να το παρουσιάσει εύκολα στο μάθημά του, ακόμα και στην περίπτωση που πέσει το Internet του σχολείου; Προς το παρόν, θα έπρεπε:

• Να κατεβάσει χωριστά την κάθε ιστοεφαρμογή σε μορφή .zip και να την αποσυμπιέσει σε υποφάκελο.
• Να κατεβάσει τα βίντεο σε μορφή π.χ. .mp4 και να δημιουργήσει σελίδες index.html ώστε να μπορεί να γίνει αναπαραγωγή τους εντός του browser.
• Να δημιουργήσει ένα κεντρικό ευρετήριο index.html με συνδέσμους σε κάθε υποφάκελο/index.html.
• Να διαμοιράσει το αποτέλεσμα στους υπολογιστές του εργαστηρίου.

Τα sch-webapps προτείνουν τρόπους αυτοματοποίησης όλων των παραπάνω ενεργειών, χρησιμοποιώντας την τεχνολογία αποθετηρίων npm. Όλα τα δημοφιλή λειτουργικά συστήματα έχουν παρόμοια "κέντρα λογισμικού":

• Το Android έχει το Play Store.
• Το Linux έχει τα apt, rpm κλπ.
• Τα Windows έχουν τα winget, chocolatey κλπ.
• Η Javascript έχει το npm.

Οργάνωση μιας ιστοεφαρμογής

Το ζητούμενο είναι κάθε παραγωγός υλικού HTML να συμπεριλαμβάνει μια μικρογραφία και ένα αρχείο περιγραφής του. Συγκεκριμένα:

• Κάθε ιστοεφαρμογή να αναπτύσσεται σε ξεχωριστό φάκελο με το όνομά του να αποτελείται από πεζά αγγλικά γράμματα, παύλες ή νούμερα και να έχει ως σημείο εκκίνησης ένα αρχείο index.html.
• Το εικονίδιό της να ονομάζεται package.jpg (παράδειγμα) και να έχει διαστάσεις μέχρι 256x256 pixels.
• Η περιγραφή της να γίνεται σε αρχείο κειμένου package.js (παράδειγμα), ώστε να μπορεί να διαβαστεί από το πρόγραμμα sch-webapps που δημιουργεί το κεντρικό ευρετήριο. Η περιγραφή ακολουθεί το πρότυπο package.json, αλλά χρησιμοποιούνται λίγα μόνο από τα πεδία που ορίζει το πρότυπο.

Ειδικά για τα 15.000+ υπάρχοντα αντικείμενα του Φωτόδεντρου, όλες οι πληροφορίες υπάρχουν ήδη στη βάση του, και τα sch-webapps περιλαμβάνουν βοήθημα (sch-webapps import) που τις κατεβάζει και δημιουργεί αυτόματα το package.jpg και το package.js.

Χρήση της εφαρμογής sch-webapps

Η εφαρμογή sch-webapps εκτελείται με τη βοήθεια του περιβάλλοντος nodejs, το οποίο πρέπει να εγκατασταθεί χωριστά:

• Για Windows και macOS, λήψη από τη σελίδα του nodejs
• Για Linux, εκτέλεση της εντολής: sudo apt-get install npm

Στη συνέχεια, δημιουργήστε έναν άδειο φάκελο για τη συλλογή σας (π.χ. collection) και εκτελέστε τα sch-webapps:

• Σε Windows, κάντε λήψη του αρχείου sch-webapps.bat, τοποθετήστε το μέσα στον φάκελο collection, και κάντε διπλό κλικ πάνω του.
• Σε Linux και macOS, από τον file manager κάντε δεξί κλικ στο collection → Άνοιγμα σε τερματικό, και επικολλήστε την εντολή npx sch-webapps. Η ίδια εντολή δουλεύει και στα Windows για όποιον το επιθυμεί.

Θα εμφανιστεί το μενού επιλογών των sch-webapps. Χρησιμοποιείται επίτηδες ένα απλό περιβάλλον τερματικού, ώστε να εμφανίζονται όλα τα μηνύματα του διαχειριστή πακέτων npm:

 ~~ ΜΕΝΟΥ ΕΠΙΛΟΓΩΝ ~~
0. Έξοδος
1. Προβολή εγκατεστημένων ιστοεφαρμογών
2. Εγκατάσταση ιστοεφαρμογών
3. Απεγκατάσταση ιστοεφαρμογών
4. Εκκίνηση web server
Πληκτρολόγησε την επιλογή σου (0-4): _

0. Πληκτρολογώντας 0 βγαίνουμε από το πρόγραμμα.

1. Με το 1 βλέπουμε τη λίστα των ιστοεφαρμογών που έχουμε ήδη εγκαταστήσει.

2. Η μαζική εγκατάσταση ιστοεφαρμογών γίνεται επικολλώντας τα αναγνωριστικά που έχουν στο Φωτόδεντρο, για παράδειγμα:

   8521-10760 8521-10761 8521-10762 8521-10763

   Μπορούμε επίσης να εγκαταστήσουμε έτοιμες συλλογές άλλων εκπαιδευτικών, για παράδειγμα επικολλώντας τη λέξη preschool εγκαθίστανται 30 ιστοεφαρμογές για Προσχολική Εκπαίδευση.

3. Απεγκατάσταση ιστοεφαρμογών γίνεται με τον ίδιο τρόπο, δηλαδή επικολλώντας τα αναγνωριστικά τους.

4. Με την εκκίνηση web server εμφανίζεται ένα μήνυμα σαν το παρακάτω:

   Διεύθυνση σύνδεσης στη συλλογή: http://192.168.1.123:7000
   Πατήστε Ctrl+C για τερματισμό του web server

   Οποιοσδήποτε στο σχολείο, με οποιαδήποτε συσκευή, μπορεί να πληκτρολογήσει αυτήν τη διεύθυνση στον browser του και να δει τη συλλογή χωρίς να έχει εγκαταστήσει το nodejs ή τα sch-webapps.

Αφού δημιουργηθεί η συλλογή δεν χρειάζεται πια το nodejs για την προβολή της. Μπορείτε π.χ. να την συμπιέσετε ως collection.zip, να την αποστείλετε σε άλλους, να την αποσυμπιέσουν και να την δουν με διπλό κλικ στο κεντρικό index.html. Παράδειγμα.

Δημιουργία συλλογών χωρίς nodejs

Η δημιουργία συλλογών είναι ευκολότερη ακολουθώντας τις οδηγίες της προηγούμενης παραγράφου, αλλά είναι δυνατή και χωρίς το περιβάλλον nodejs. Σ' αυτήν την περίπτωση πρέπει χειρωνακτικά να κατεβάσετε και να αποσυμπιέσετε τις ιστοεφαρμογές και τα sch-webapps, ώστε να δημιουργήσετε την παρακάτω δεντρική δομή:

• index.html
• sch-webapps
  • index.html, index.js, sch-webapps.js κλπ
• 8521-10760
  • index.html, package.jpg, package.js κλπ
• 8521-10761
  • index.html, package.jpg, package.js κλπ
• ...

Τέλος, ανοίξτε το κεντρικό αρχείο index.html με έναν κειμενογράφο και γράψτε τη συλλογή σας σε μία κατηγορία ανά γραμμή, για παράδειγμα:

Δημοτικό: webapp1 webapp2 ... webapp10
Γυμνάσιο: webapp1 webapp12 ... webapp20

Η συλλογή είναι έτοιμη και μπορεί να ανοιχτεί με διπλό κλικ στο κεντρικό index.html. Με παρόμοιο τρόπο μπορεί να γίνει ενσωμάτωση της συλλογής και σε Wordpress ή Joomla.

Για προχωρημένους

Οι προχωρημένοι χρήστες μπορούν να εκτελέσουν όλες τις εντολές των sch-webapps και απευθείας χωρίς τη χρήση μενού. Συγκεκριμένα:

• npx sch-webapps ls: προβολή των εγκατεστημένων ιστοεφαρμογών.
• npx sch-webapps install webapp1 webapp2 collection3: μαζική εγκατάσταση ιστοεφαρμογών.
• npx sch-webapps uninstall webapp4 webapp5: απεγκατάσταση ιστοεφαρμογών.
• npx sch-webapps webserver: εκκίνηση εξυπηρετητή για να γίνει διαθέσιμη η συλλογή σε όλο το τοπικό δίκτυο.
• npx sch-webapps index: δημιουργία του κεντρικού ευρετηρίου της συλλογής. Δημιουργείται και αυτόματα μετά από κάθε λήψη ιστοεφαρμογής.
• npx sch-webapps publish: ανέβασμα μια ιστοεφαρμογής στο αποθετήριο (απαιτείται λογαριασμός).
• npx sch-webapps import 8521-10760: εισαγωγή των package.jpg και package.js από το Φωτόδεντρο, για αυτοματοποιημένο πακετάρισμα.

Αποθετήριο ιστοεφαρμογών

Η υπηρεσία Τεχνικής Στήριξης ΣΕΠΕΗΥ δημιούργησε ένα "κέντρο λογισμικού" για ιστοεφαρμογές: https://ts.sch.gr/npm

Ενδεικτικά, έχουν ήδη ανέβει μερικές ιστοεφαρμογές του Φωτόδεντρου, ενώ μπορείτε να ζητήσετε να συμπεριληφθούν οσεσδήποτε άλλες θέλετε, αφού η διαδικασία είναι αυτοματοποιημένη. Το αποθετήριο υλοποιήθηκε με χρήση του λογισμικού ανοικτού κώδικα verdaccio, το οποίο είναι ιδιαίτερα απλό στην εγκατάσταση και χρήση του.

Ελπίζουμε το ίδιο το Φωτόδεντρο να θεωρήσει αξιόλογα τα οφέλη των npm αποθετηρίων και να επιτρέψει την εναλλακτική πρόσβαση μέσω npm σε ολόκληρο το υλικό του (μαθησιακά αντικείμενα, βίντεο και υλικό χρηστών). Οι απαιτούμενες πληροφορίες (εικονίδιο και metadata) υπάρχουν ήδη στην πολύ οργανωμένη βάση τους οπότε ο τεχνικός φόρτος για την υλοποίηση npm αποθετηρίου θα είναι της τάξης λίγων ημερών.