Ντουλάπα Διοργανωτής: 13 Βήματα

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

Είτε πρόκειται για ψώνια για ρούχα είτε για να σας ζητούν πάντα να δανειστείτε οποιοδήποτε αντικείμενο, υπάρχουν φορές που θα θέλατε να κοιτάξετε την ντουλάπα σας από οπουδήποτε για να δείτε αν έχετε κάτι παρόμοιο. Ο οργανωτής της ντουλάπας κάνει ακριβώς αυτό ΚΑΙ ΠΕΡΙΣΣΟΤΕΡΑ!

Αυτό είναι ένα one stop shop και είναι επεκτατικό για πολλούς άλλους σκοπούς. Το My Wardrobe Organizer είναι ένας συνδυασμός φύλλων Google ως βάση δεδομένων SQL, Google Scripts για τον χειρισμό των δεδομένων και Google WebApp για μια διαδικτυακή πύλη για αυτά τα δεδομένα. Ο τελικός χρήστης μπορεί να δει όλα τα αντικείμενα, να φιλτράρει για κάτι συγκεκριμένο, να τα χαρακτηρίσει ως δανεικά, να διαχειριστεί τα ρούχα του και να σταματήσει τη μητέρα να σας αγοράζει το ίδιο πουκάμισο για τα Χριστούγεννα κάθε χρόνο*.

(*Δεν υπάρχει εγγύηση. Οι μητέρες θα αγοράσουν αυτό που θέλουν είτε το χρειάζεστε είτε όχι)

Ρίχνοντας μια γρήγορη ματιά στο σχεδιασμό του ιστότοπου στην παραπάνω εικόνα, κάποιος μπορεί να αναγνωρίσει μια οικεία διάταξη. Το Wardrobe Organizer έχει δημιουργηθεί όπως κάθε συνηθισμένος ιστότοπος ένδυσης. Διαχωρισμένο από τμήματα από πάνω και φίλτρα που παρέχονται στο πλάι, αυτή η διεπαφή φέρνει εξοικείωση με τη λειτουργικότητα στον απλό χρήστη. ΚΑΙ είναι απλό στη χρήση.

Βήμα 1: Ρύθμιση του δικού σας αντιγράφου

Ας ξεκινήσουμε δημιουργώντας το δικό σας αντίγραφο αυτού του έργου.

Google Drive

Κάντε κλικ στον παραπάνω σύνδεσμο για να μεταβείτε στην τρέχουσα έκδοση αυτής της εφαρμογής.

Θα δείτε 3 στοιχεία σε αυτόν το φάκελο: Μια φόρμα Google, ένα φύλλο Google και ένας φάκελος.

Κάντε δεξί κλικ στο Φύλλο Google και κάντε κλικ στην επιλογή Δημιουργία αντιγραφής.

Ορίστε την τοποθεσία αυτού του αντιγράφου στο δικό σας Drive.

Μετά την αντιγραφή αυτού του εγγράφου, η Φόρμα Google θα δημιουργηθεί αυτόματα στον ίδιο φάκελο που μετακινήσατε το Φύλλο Google.

Για να δημιουργήσετε το φάκελο (αυτό είναι απαραίτητο για τη συλλογή μεταφορτώσεων των εικόνων του στοιχείου), κάντε κλικ στην αντιγραμμένη φόρμα Google και θα εμφανιστεί ένα μήνυμα που θα σας ζητά να επαναφέρετε τη θέση του φακέλου για μεταφορτώσεις.

Έχετε τώρα ένα αντίγραφο αυτού του εγγράφου για να εργαστείτε μόνοι σας!

Βήμα 2: Επισκόπηση φόρμας Google

Τώρα που έχετε τη δική σας έκδοση αυτής της εφαρμογής, ας ρίξουμε μια ματιά τριγύρω.

Η φόρμα σας Google έχει ρυθμιστεί ώστε να δέχεται πολλούς διαφορετικούς τύπους στοιχείων. Ωστόσο, τα πουκάμισα, τα παντελόνια, τα φορέματα και τα παπούτσια έχουν όλα διαφορετικούς περιορισμούς μεγέθους. Επομένως, μια διαφορετική ενότητα αυτής της φόρμας θα συμπληρωθεί με βάση το τμήμα στο οποίο καταχωρείτε το στοιχείο σας. Στο πρότυπο μου (Αρσενικό άρθρο) έχω δημιουργήσει 5 διαφορετικές κατηγορίες μεγέθους. (Για Γυναικεία Άρθρα, κάντε κλικ εδώ, υπάρχουν πολλά περισσότερα).

Κάτω από κάθε ενότητα μεγέθους, καθιέρωσα έναν μοναδικό τίτλο για κάθε παράμετρο που θα συλλέξω. Δεν θέλουμε να έχουμε πολλές στήλες στη βάση δεδομένων μας με το όνομα "Μέγεθος" ή δεν θα είμαστε σε θέση να καθορίσουμε σε ποιον τύπο ρούχων ισχύει αυτό το μέγεθος.

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

Όπως ανέφερα από την αρχή, αυτό το έργο μπορεί να επεκταθεί με ένα εκατομμύριο διαφορετικούς τρόπους. Μπορείτε να το χρησιμοποιήσετε για απογραφή, πιο ακριβές εργαλείο οργάνωσης ή για αυστηρό δανεισμό ρούχων. Τα πεδία και οι ενότητες που μπορείτε να προσθέσετε είναι ατελείωτα, οπότε μην αισθάνεστε περιορισμένοι σε αυτό που υπάρχει στη φόρμα μου. (Για τα γυναικεία άρθρα κάντε κλικ εδώ)

Πριν ξεκινήσετε να ανεβάζετε μερικά από τα δικά σας στοιχεία, ας προχωρήσουμε στο επόμενο βήμα για να διασφαλίσουμε τη σωστή υποβολή.

Βήμα 3: Google Scripts: (Server Code.gs) Πρώτα κοιτάξτε τα δεδομένα και τον κώδικα

Κάνοντας κλικ στο έγγραφο των Υπολογιστικών φύλλων Google, θα δείτε πολλές στήλες δεδομένων (και μερικές γραμμές, που έχουν αφαιρεθεί για επίδειξη). Κατά την υποβολή φόρμας παραλείπονται ορισμένες ενότητες, αυτό είναι εμφανές από τα δεδομένα που λείπουν σε ορισμένες στήλες. Ωστόσο, πρόσθετες στήλες όπως αναγνωριστικό, προεπιλεγμένη τοποθεσία, ποιος και ενημερωμένο έχουν προστεθεί για να παρακολουθείτε καλύτερα τις επεξεργασίες αυτών των στοιχείων.

Ένα πεδίο ταυτότητας δημιουργήθηκε όταν υποβάλατε τη φόρμα για να επιτρέψετε ένα μοναδικό αναγνωριστικό κατά την περιήγηση σε αυτήν τη βάση δεδομένων. Για να δημιουργήσουμε αυτό το πεδίο, θα ρίξουμε μια ματιά στο πρόγραμμα επεξεργασίας σεναρίων κάνοντας κλικ στο Εργαλεία> Επεξεργαστής σεναρίων.

Με το Script Editor ανοιχτό, θα παρατηρήσετε 8 έγγραφα στην πλαϊνή γραμμή αυτού του νέου παραθύρου. Αυτά τα έγγραφα βοηθούν στον έλεγχο της διαδικασίας back-end, των οθονών front-end και της λειτουργικότητας front-end. Θα μεταφερθούμε σε κάθε ένα (αν παραμείνετε), αλλά τώρα κάντε κλικ στον Κώδικα διακομιστή.

Στο αρχείο διακομιστή Code.gs υπάρχουν πολλές λειτουργίες:

onSubmit (e), onOpen (), doGet (), περιλαμβάνει (όνομα αρχείου), openApplication (), openLaundryApp (), changeValueOnSubmit (e), setIDOnSubmit (e)

onSubmit (e) - Αυτή η λειτουργία θα διαμορφωθεί ως η πρώτη λειτουργία που θα εκτελείται όταν υποβάλλεται μια φόρμα Google. Μπορείτε να τοποθετήσετε άλλες συναρτήσεις μέσα σε αυτήν τη λειτουργία για να επιτρέψετε την πραγματοποίηση πολλών διαφορετικών διαδικασιών.

onOpen (e) - Αυτή η λειτουργία καλείται όταν ανοίξετε τα Φύλλα Google. Συμπληρώνει μια νέα επιλογή μενού που επιτρέπει γρήγορη πρόσβαση στους συνδέσμους και τις προβολές της εφαρμογής.

doGet ()- Αυτή η λειτουργία καλείται στην κλήση διεύθυνσης Web App. Όταν ένας χρήστης περιηγείται στη δημοσιευμένη εφαρμογή Web, αυτός ο κώδικας θα πει στη σελίδα τι πρέπει να εμφανίζεται. Σε αυτήν την περίπτωση, είναι το έγγραφο Application.html.

περιλαμβάνει (όνομα αρχείου) - Αυτή η λειτουργία χρησιμοποιείται μέσα σε σελίδες HTML για την ανάγνωση άλλου εγγράφου και την εισαγωγή του περιεχομένου τους σε κατάλληλη μορφή HTML σε άλλη σελίδα. Το χρησιμοποιούμε για τα αρχεία CSS.html και JS.html.

openApplication () και openLaundryApp () - Αυτές οι λειτουργίες περιέχουν τον κώδικα για εκτέλεση όταν ένας χρήστης κάνει κλικ στα κουμπιά μενού που προστίθενται στη γραμμή εργαλείων του Φύλλου Google.

changeValueOnSubmit (e) και setIDOnSubmit (e)- Αυτές είναι οι λειτουργίες που θα εξετάσουμε προς το παρόν. Είναι υπεύθυνοι για την ενημέρωση ορισμένων πεδίων με προεπιλεγμένες τιμές κατά την αρχική υποβολή της φόρμας.

Βήμα 4: Ενεργοποίηση OnFormSubmit

Αυτές οι δύο συναρτήσεις, changeValueOnSubmit (e) και setIDOnSubmit (e), πρέπει να συνδεθούν με την ενέργεια του χρήστη για την υποβολή φόρμας. Για να το κάνουμε αυτό πρέπει να ενεργοποιήσουμε ένα Trigger.

Ενεργοποιούμε τη σκανδάλη κάνοντας κλικ στην επιλογή Επεξεργασία> Ενεργοποιητές τρέχοντος έργου. Αυτό ανοίγει το Google Developer Hub.

Στην κάτω δεξιά γωνία του πίνακα ελέγχου σκανδάλης υπάρχει ένα κουμπί Προσθήκη σκανδάλης. Κάντε κλικ ΕΔΩ.

Τώρα θα ρυθμίσουμε τη συνάρτηση για εκτέλεση όταν υποβάλλεται μια φόρμα. Στην περίπτωσή μας, έχω πολλαπλές λειτουργίες (changeValueOnSubmit (e) και setIDOnSubmit (e)) που έβαλα μέσα σε μια συνάρτηση onSubmit (), οπότε πρέπει να ρυθμίσω μόνο 1 σκανδάλη. Επομένως, θα επιλέξουμε onSubmit () και θα ορίσουμε αυτήν τη σκανδάλη να εκτελείται On form submit.

Έχουμε τώρα μια φόρμα εργασίας που θα συμπληρώσει ένα Φύλλο Google με μοναδικά αναγνωριστικά και θα ορίσει προεπιλεγμένες τιμές.

Τώρα μπορείτε να ανεβάσετε τα δικά σας στοιχεία χρησιμοποιώντας τη Φόρμα Google. (Αυτό δεν είναι απαραίτητο για να συνεχίσετε, καθώς υπάρχουν ήδη τιμές επίδειξης). Τώρα θα μπούμε στη διεπαφή χρήστη.

Βήμα 5: Ρύθμιση της διεπαφής χρήστη

ΚΑΛΩΣ ΗΡΘΑΤΕ! Φτάσαμε επιτέλους στο μέρος για το οποίο ήρθατε, το User Interface !!!!

Με την πρώτη ματιά, δεν υπάρχει τίποτα εδώ. Δεν έχουμε κάνει ακόμη καμία κλήση. Για να φορτώσω τη σελίδα πιο γρήγορα, αποφάσισα να μην μολύνω την πρώτη σελίδα με ΟΛΑ τα στοιχεία σας και σας επιτρέπω να κάνετε κλικ σε αυτό που θέλετε να δείτε πιο γρήγορα. Δεδομένου ότι συμβαίνει αυτό, δεν υπάρχουν στοιχεία στο κύριο πεδίο περιεχομένου και δεν υπάρχουν φίλτρα στην πλαϊνή γραμμή. Ας κάνουμε κλικ στο Όλα για να δούμε τι υπάρχει στη βάση δεδομένων μας.

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

Και στο sidebar έχουμε κάθε δυνατό πεδίο για κάθε ρούχο στο νέο μας ερώτημα. Απλώς φανταστείτε να έχετε 20 διαφορετικές επιλογές μεγέθους σε αυτήν την πλευρική γραμμή, δεν θα ήταν πολύ αποτελεσματική, οπότε ας περιορίσουμε την αναζήτησή μας κάνοντας κλικ στα Αξεσουάρ.

Τώρα που φορτώσαμε τα Αξεσουάρ, ρίξτε μια ματιά στην πλαϊνή γραμμή. Έχει προσαρμοστεί σε 3 μόνο πεδία, καθώς αυτές είναι οι παράμετροι που ισχύουν για κάθε στοιχείο σε αυτό το ερώτημα. Θα κάνω ένα είδος κατά χρώμα. Κάνοντας κλικ στο χρώμα, εμφανίζεται ένα αναπτυσσόμενο πλαίσιο. Εδώ μπορώ είτε να πληκτρολογήσω το χρώμα που θέλω και, στη συνέχεια, να το επιλέξω, ή αν δω την επιλογή μου αμέσως, θα το κάνω απλά κλικ. Επέλεξα το Κόκκινο για αυτήν την επίδειξη. Κάντε κλικ στην επιλογή Εφαρμογή φίλτρου στο κάτω μέρος αυτής της πλευρικής γραμμής και το κύριο περιεχόμενο θα ανανεωθεί δείχνοντάς σας τα στοιχεία που έχουν ως κόκκινο παράμετρο το χρώμα Κόκκινο.

Ανέφερα προηγουμένως αυτή η βάση δεδομένων με βοηθά να διαχειρίζομαι τα αντικείμενα μου ως δανεικά και στα ρούχα μου. Για να το κάνω λίγο πιο εύκολο, αντί να κάνω μη αυτόματο κλικ σε κάθε αναπτυσσόμενη τοποθεσία σε αυτήν την κύρια σελίδα, δημιούργησα τη λειτουργία πλυντηρίου. Επιστρέψτε στη σελίδα του Φύλλου Google και στην Προβολή εφαρμογής θα δείτε τη λειτουργία πλυντηρίου. Αυτή η επιλογή θα εμφανίσει ένα μικρότερο modal που εμφανίζει μόνο αντικείμενα με τη θέση του πλυντηρίου. Μπορώ τώρα να επισημάνω όλα αυτά τα στοιχεία ως Προεπιλεγμένα, τα οποία θα τα επανατοποθετήσουν στις τοποθεσίες τους όπου είναι συνήθως αποθηκευμένα.

Βήμα 7: Το έργο ολοκληρώθηκε

ΣΥΓΧΑΡΗΤΗΡΙΑ

Για όσους από εσάς θέλετε απλώς μια λειτουργική βάση δεδομένων για τη διαχείριση των αντικειμένων σας, καλώς ήλθατε στο Online Organizer σας. Για εκείνα τα περίεργα μυαλά που ενδιαφέρονται για τον κώδικα πίσω από αυτήν την εφαρμογή. Κολλήστε καθώς το χαλάω.

*Είστε ελεύθεροι να διαγράψετε τα τεστ στοιχείων ΑΦΟΥ εισαγάγετε τουλάχιστον ένα από τα δικά σας στοιχεία στη βάση δεδομένων. (Θα σας εξηγήσω αργότερα αν κολλήσετε).

Βήμα 8: Βήμα 1: Ο κώδικας Back-End (Server Code.gs)

Νωρίτερα ανοίξαμε το αρχείο Server Code.gs και έκανα μια γρήγορη εκτέλεση κάθε μιας από τις λειτουργίες, καθώς ο σκοπός τους ήταν να εξυπηρετήσουν κάθε ένα από τα αντικείμενα που μόλις ρυθμίσατε, αλλά τώρα θα τα αναλύσουμε ορισμένες από τις λειτουργίες και τις χρησιμότητες που ονομάζονται για να πετύχει αυτός ο κώδικας.

1) Διαδρομή τραπεζιού:

var ss = SpreadsheetApp.getActiveS spreadsheet (); var sheet = ss.getSheetByName ("Απαντήσεις φόρμας 1"); var range = sheet.getRange (1, 1, sheet.getMaxRows ()); var rowNum = range.getLastRow ();

• Αυτός ο κωδικός αποτελεί τη βάση για την περιήγηση σε ένα Φύλλο Google. Καλώ το φύλλο με το όνομα και όχι τον αριθμό, έτσι ώστε εάν τα φύλλα διαγραφούν ή αναδιαταχθούν από τη λειτουργία να εξακολουθήσουν να λειτουργούν σωστά.
• Σε αυτόν τον κώδικα συλλέγω μόνο το εύρος για όλα τα δεδομένα στον πίνακα.

2) Εκχώρηση ταυτότητας:

var LastID = range.getCell (rowNum-1, 1); var CellValue = αριθμός (LastID.getValue ()); var ColA = 1; var max = 15; var min = 5; CellValue = CellValue + Math.round ((Math.random ()* (max - min) + min)); e.source.getActiveSheet ().getRange (range.getLastRow (), ColA).setValue (CellValue); changeValueOnSubmit (e);

• Προηγουμένως ζήτησα να παραμείνουν οι τιμές επίδειξης στον πίνακα έως ότου ο χρήστης υποβάλει τουλάχιστον μία τιμή για τον εαυτό του. Αυτό συμβαίνει επειδή η γεννήτρια Auto ID βασίζεται στην τελευταία τιμή της βάσης δεδομένων για συμπλήρωση.
• Παίρνω την τελευταία 2η έως τελευταία σειρά επειδή η τελευταία σειρά είναι η νέα μας τιμή και η 1η στήλη για την τιμή ID.
• Στη συνέχεια, δημιουργώ τυχαία έναν αριθμό μεταξύ 5 και 15 και τον προσθέτω στην τελευταία τιμή. *
• Τέλος, τοποθετώ αυτήν την τιμή στη στήλη ID της τελευταίας γραμμής.
• Στη συνέχεια καλούμε τη συνάρτηση changeValueOnSubmit (e).

* Επέλεξα το 5-15 για να επιτρέψω μελλοντική επισήμανση και ενσωμάτωση στο Google Home, έτσι ώστε οι αριθμοί να μην είναι αρκετά κοντά για να προκαλέσουν σύγχυση σε κρεμάστρες ή ετικέτες ρούχων ή γραμμωτούς κώδικες.

3) Αλλαγή τιμής URL:

var DataChange = e.namedValues ["Item Picture"]; var DefaultLocation = e.namedValues ["Που φυλάτε αυτό το ρούχο;"]; var ColD = ColumnID _ ("Picture Picture") +1; var ColLoc = ColumnID _ ("Προεπιλεγμένη τοποθεσία")+1; DataChange = DataChange.toString (). αντικατάσταση ("άνοιγμα;", "uc? export = view &"); e.source.getActiveSheet ().getRange (e.range.rowStart, ColD).setValue (DataChange); e.source.getActiveSheet ().getRange (e.range.rowStart, ColLoc).setValue (DefaultLocation);

• Κατά την υποβολή μιας φωτογραφίας μέσω μιας φόρμας Google, το URL που εισάγεται στα Υπολογιστικά φύλλα Google είναι ένας σύνδεσμος προς το πραγματικό έγγραφο. Στην περίπτωσή μας, καθώς δημιουργούμε μια σελίδα HTML θέλουμε ο σύνδεσμος να είναι μόνο η εικόνα.
• Αλλάζοντας το "ανοιχτό;" τμήμα της διεύθυνσης URL προς "uc? export = view &" έχουμε δημιουργήσει έναν σύνδεσμο προς την εικόνα.
• Θα τοποθετήσουμε ξανά αυτήν τη νέα τιμή στη θέση του τρέχοντος συνδέσμου Εικόνας στοιχείου.
• Ρυθμίζω επίσης την "Προεπιλεγμένη τοποθεσία" και "Τρέχουσα τοποθεσία" του στοιχείου στο ίδιο πράγμα στη βάση δεδομένων. Αυτό θα βοηθήσει όταν προσπαθείτε να χρησιμοποιήσετε τη λειτουργία πλυντηρίου μου.

• Θα το βρούμε στην επόμενη σελίδα, αλλά αυτή είναι η πρώτη μας ματιά στη συνάρτηση ColumnID_ () που δημιούργησα.

  Αυτή η συνάρτηση χρησιμοποιεί ονόματα στηλών για να την μεταφράσει σε ακέραιο αριθμό στηλών, κάτι που είναι χρήσιμο για κλήσεις εύρους που απαιτούν αριθμό στήλης και όχι όνομα

4) SpreadsheetApp.getUI ()

• Στη δεύτερη εικόνα μπορείτε να δείτε τη χρήση του SpreadsheetApp.getUI () όπως χρησιμοποιήθηκε για τη δημιουργία μιας προσθήκης Γραμμής εργαλείων στο Φύλλο Google.
• Η συνάρτηση.getUI () βοηθά επίσης στη δημιουργία ενός αναδυόμενου μέσου που χρησιμοποιείται για τη λειτουργία πλυντηρίου και ως γρήγορο σύνδεσμο προς τη διεπαφή του ιστότοπου.

5) Υπηρεσία HTML

• Υπάρχουν δύο τύποι υπηρεσιών HTML που χρησιμοποιούνται σε αυτόν τον κώδικα: Πρότυπο και HTMLOutput
• Το πρότυπο επιτρέπει την εισαγωγή κώδικα μέσα στον κώδικα HTML, ώστε οι πληροφορίες που προέρχονται από έναν διακομιστή να μπορούν να συμπληρωθούν όταν καλείται η σελίδα.
• Η έξοδος HTML εμφανίζει απλές σελίδες HTML.
• Έχουμε επίσης τη μέθοδο include () που μας επιτρέπει να δημιουργήσουμε πολλά αρχεία HTML και να τα συνδυάσουμε σε ένα πρότυπο αρχείο HTML επιστρέφοντας το περιεχόμενο του αρχείου σε μορφή HTML και όχι σε συμβολοσειρά.

Έχω επισυνάψει ένα έγγραφο που έχει συσταθεί όπως το Google App Scripts Documentation για να σας γνωρίσει πώς εξηγείται ο πηγαίος κώδικας και η λειτουργικότητα στα Google Apps.

Βήμα 9: Βήμα 2: Ο κώδικας Back-End Part 2 (Server Calls.gs)

Τώρα έχουμε εισαγάγει το διακομιστή Calls.gs. Αυτές οι λειτουργίες χρησιμοποιούνται κυρίως στο JavaScript HTML, ώστε να έχουν διαχωριστεί από τον κώδικα που χρησιμοποιείται κυρίως στο πίσω άκρο που βρίσκεται στο διακομιστή Code.gs.

Εικόνα 1) Παγκόσμιες μεταβλητές:

Εικόνα 2) λήψη στοιχείων:

Εικόνα 3) fetchItemsQry

Εικόνα 4) Στοιχεία φίλτρου

Εικόνα 5) fetchFiltersWithQry

Εικόνα 6) ColumnID και CacheCalls

Υπάρχουν τόσα πολλά να μιλήσουμε με καθένα από αυτά. Και για να σπάσω τον κώδικα και να εξηγήσω τι συμβαίνει, χρειάστηκα λίγο περισσότερο χώρο πληκτρολόγησης. Επισυνάπτεται ένα έγγραφο για την ανάλυση κώδικα του ServerCalls.gs

Αυτό το έγγραφο έχει ρυθμιστεί όπως η Τεκμηρίωση σεναρίων Google App και δημιουργεί συνδέσμους προς παρόμοια αντικείμενα.

Βήμα 10: Βήμα 3: Ο κώδικας HTML (Application.html)

Ο κώδικας HTML είναι πολύ δυσαρεστημένος στο παράθυρο διαλόγου του Instructable. Ακολουθήστε, λοιπόν, μαζί με τις παραπάνω εικόνες.

1) Στην κεφαλίδα της σελίδας Application.html δημιουργούμε έναν τίτλο και καλούμε τη σελίδα CSS.html για φόρτωση.

*Όντας μια πρότυπη σελίδα HTML, μπορούμε να προσθέσουμε περισσότερο κώδικα σε αυτό το έγγραφο χωρίς ακαταστασία της τρέχουσας οθόνης, χρησιμοποιώντας τη μέθοδο περιλαμβανομένης (όνομα σελίδας) που αναφέρθηκε προηγουμένως που βρέθηκε στο Server Code.gs

Το κύριο πλαίσιο κεφαλίδων βρίσκεται επίσης σε αυτήν την εικόνα. Μπορείτε να αλλάξετε την κεφαλίδα εδώ και να εισάγετε την "Ντουλάπα" [Το όνομά σας] ή ό, τι άλλο θέλετε να αναγνωρίσετε αυτήν τη σελίδα ως.

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

Αυτή η γραμμή πλοήγησης περιλαμβάνει όλους τους τύπους άρθρων που παρατίθενται στο φύλλο άρθρου στο φύλλο Google μας.

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

3) Το κύριο σώμα.

Υπάρχουν 4 μερίδες σε αυτό το μέρος. Μια έξοδος κειμένου, το φίλτρο πλευρικής γραμμής, οι εικόνες του κύριου σώματος και το JS περιλαμβάνει.

Η έξοδος κειμένου επιτρέπει στον χρήστη να δει μια γρήγορη προβολή κειμένου για το είδος των στοιχείων που κοιτάζει αυτήν τη στιγμή αντί να αναφέρεται στην επιλογή μενού που επέλεξε.

Το φίλτρο της πλευρικής γραμμής περιέχει τα πολλά διαθέσιμα φίλτρα για τον τύπο του στοιχείου που έχει επιλέξει ένας χρήστης. Αυτά τα φίλτρα αντικατοπτρίζουν όλες τις διαθέσιμες επιλογές για αυτήν την κατηγορία, καθώς και πόσα στοιχεία εμπίπτουν στην τιμή αυτής της κατηγορίας. Αυτή η πλευρική γραμμή συμπληρώνεται με κώδικα JavaScript (που θα συζητηθεί στη συνέχεια).

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

Τέλος το περιλαμβάνει (JS), ας ρίξουμε μια ματιά σε αυτό στο επόμενο βήμα.

Βήμα 11: Βήμα 4: Ο κώδικας JavaScript (JS.html)

Αν νομίζατε ότι ο Κωδικός διακομιστή ήταν ένα βαρύ τμήμα, πάρτε ένα φορτίο αυτού.

Εδώ συνδυάζουμε το HTML και το SeverCode με αλληλεπιδράσεις χρηστών. Οποιοδήποτε στοιχείο στο οποίο κάνετε κλικ πρέπει να υποβληθεί σε επεξεργασία εδώ για να λάβετε τα κατάλληλα δεδομένα και να τα επιστρέψετε σε αναγνώσιμη μορφή. Ας ρίξουμε λοιπόν μια ματιά στις πρώτες μας κλήσεις:

Το σενάριο καλεί: Χρησιμοποιώ 3 διαφορετικές βιβλιοθήκες για αυτό το έργο. jquery, bootstrap και ένα ειδικό πρόσθετο επιλογής bootstrap. Αυτές οι βιβλιοθήκες επιτρέπουν τη μορφοποίηση αντικειμένων και ευκολότερες κλήσεις στα στοιχεία του κώδικα HTML.

Η επόμενη σημαντική γραμμή JavaScript είναι παρακάτω:

$ (έγγραφο).keypress (συνάρτηση (συμβάν) {if (event.which == '13') {event.preventDefault (); }});

Εδώ απενεργοποιώ το κλειδί εισαγωγής από το να ενεργοποιήσει οποιαδήποτε από τις φόρμες. Όπως σε αυτήν την περίπτωση, στις Εφαρμογές Ιστού Google εκχωρείται μόνο η διεύθυνση μιας σελίδας τους. Ένα πάτημα enter θα προσθέσει δεδομένα στη διεύθυνση HTML και θα προσπαθήσει να ανακατευθύνει τον χρήστη. Απενεργοποιώντας αυτό, επιτρέπετε στον κώδικα JavaScript να κάνει όλη τη δουλειά.

λειτουργία removeFilters () {google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure). ServerRemoveFilters (); }

συνάρτηση updateDBlocation (id, value) {google.script.run.withSuccessHandler (allGood).withFailureHandler (FailDBUpdate).updateLocation (id, value); }

Ακολουθούν δύο λειτουργίες που πραγματοποιούν κλήσεις στο αρχείο Server.gs. Η γραμμή:

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure). ServerRemoveFilters ();

έχει πολλά μέρη εργασίας, αλλά ο σκελετός έχει τις ρίζες του από το "google.script.run" το οποίο λέει στη σελίδα HTML ότι η ακόλουθη συνάρτηση βρίσκεται στον διακομιστή.

• Το τελευταίο κομμάτι αυτού του κώδικα είναι η συνάρτηση που πρέπει να εκτελεστεί. Σε αυτό το παράδειγμα ServerRemoveFilter ()
• Προσθέτοντας ένα withSuccessHandler (), η σελίδα HTML ξέρει τώρα τι να κάνει με τα δεδομένα που επιστρέφονται και αυτό είναι να εκτελέσει τη συνάρτηση με την παρένθεση.
• Το ίδιο ισχύει και με το withFailureHandler ()

Τώρα που αναλύσαμε την κλήση του Κώδικα διακομιστή, ας ρίξουμε μια γρήγορη ματιά στο τι συμβαίνει όταν αυτές οι κλήσεις διακομιστή επιτύχουν και αποτύχουν.

λειτουργία allGood (e) {console.log ("Επιτυχία στο διακομιστή"); } λειτουργία onFailure (σφάλμα) {$ ("#message-box"). html ("

Δεν είναι δυνατή η ανάκτηση ειδών ένδυσης αυτήν τη στιγμή. ΣΦΑΛΜΑ: " + error.message +"

");} λειτουργία FailDBU Ενημέρωση (σφάλμα) {$ ("#message-box "). html ("

Δεν έχετε πρόσβαση για να τροποποιήσετε την τοποθεσία. ΣΦΑΛΜΑ: " + error.message +"

"); $ (". τοποθεσία-επιλέγει "). prop (" απενεργοποιημένο "," απενεργοποιημένο ");}

Δημιούργησα ένα πολύ απλό αρχείο καταγραφής κονσόλας για να δηλώσω επιτυχία όταν εκτελείται η λειτουργία τοποθεσίας, την οποία μπορείτε να δείτε ως allGood ().

Κατά τον χειρισμό των σφαλμάτων, αυτές οι δύο συναρτήσεις εξάγουν το μήνυμα σφάλματος όπου ο χρήστης μπορεί να δει χρησιμοποιώντας μια κλήση jQuery στο αντικείμενο HTML με ένα αναγνωριστικό "message-box".

Τώρα ας περάσουμε στη σκληρή δουλειά

Βήμα 12: Βήμα 5: Οι ενέργειες JavaScript Κάντε κλικ σε κώδικα (JS.html)

Η επάνω γραμμή μενού έχει επιλογές για κάθε τύπο άρθρου. Η λειτουργία που εκτελούν με κλικ είναι:

λειτουργία filterType (άρθρο, αναγνωριστικό) {$ ("ul.navbar-nav li.active"). removeClass ("ενεργό"); $ ("#currentArticle"). html ("// ΚΩΔΙΚΟΣ HTML ΕΔΩ");

updateSideBar = true;

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchItems ("Άρθρα", άρθρο); var newSelect = "#type-"+id; $ (newSelect).addClass ("ενεργό"); $ ("#myNavbar"). removeClass ("σε"); }

Μπορούμε να δούμε σε αυτόν τον κώδικα ότι έχουμε ένα google.script.run το οποίο καλεί στον διακομιστή για ανάκτηση πληροφοριών. Η συνάρτηση επιτυχίας για αυτήν την κλήση είναι updateItems ().

ΕΙΚΟΝΑ 1 (με τον βαρύ κώδικα HTML σε αυτήν τη λειτουργία είναι δύσκολο να αντιγράψετε αυστηρά τον κώδικα, χωρίς να εμφανίζεται ένα χάος σε αυτό το πλαίσιο)

Στον κώδικα updateItems (), συμβαίνουν πολλά πράγματα. Για άλλη μια φορά πρέπει να διασχίσουμε το αντικείμενο που μας επιστράφηκε και να προσθέσουμε κάθε στοιχείο στην κύρια σελίδα του σώματος μας.

Ο κώδικας HTML προστίθεται ως Arrays για να διασπάσει τον κώδικα και να διευκολύνει την ανάγνωση και την προβολή του τόπου εισαγωγής του itemData.

Στον βρόχο κάθε στοιχείου, αφαιρώ πεδία που δεν θέλω να βλέπω στην περιγραφή, όπως προεπιλογή, χρονική σήμανση και διεύθυνση URL εικόνας. Καταργώ τη διεύθυνση URL της εικόνας από την περιγραφή επειδή αυτή προστίθεται ως href σε μια ετικέτα. Μόλις συγκεντρωθούν αυτές οι πληροφορίες, αποστέλλονται στο κύριο σώμα χρησιμοποιώντας τη συνάρτηση jQuery.append ().

Αφού προστεθούν όλα τα στοιχεία στη σελίδα, αυτό το ερώτημα στοιχείων στέλνεται ξανά στον Κώδικα διακομιστή για να ταξινομήσει και να επιστρέψει τις επιλογές φίλτρου όπως φαίνεται στην Εικόνα 2.

ΕΙΚΟΝΑ 2 (ενημέρωση του SideBar)

Πολύ παρόμοιο με τη συνάρτηση updateItems (), έχουμε για άλλη μια φορά συστοιχίες κώδικα HTML και έναν βρόχο για όλες τις επιλογές φίλτρου. Η μόνη αξιοσημείωτη αλλαγή είναι το jQuery.selectpicker («ανανέωση»). Αυτή η συνάρτηση προέρχεται από τη βιβλιοθήκη σεναρίων που συμπεριλάβαμε στο τελευταίο βήμα. Επιτρέπει στον προγραμματιστή να γράψει ένα απλό επιλεγμένο HTML και να το ενημερώσει η βιβλιοθήκη για να συμπεριλάβει τη λειτουργία αναζήτησης καθώς και τον κώδικα CSS.

ΕΙΚΟΝΑ 3 (φιλτράρισμα με την πλαϊνή μπάρα)

Τέλος, έχουμε τη συνάρτηση updateFilter (formData). Αυτό χρησιμοποιείται όταν υποβάλλεται μια φόρμα από την πλαϊνή γραμμή. Ξεκινάμε χρησιμοποιώντας μια λειτουργία Και ξεκινάμε τη διαδικασία από την Εικόνα 1 ξανά.

Βήμα 13: Το Τέλος….επιτέλους

Λοιπόν, το έχετε? μια πλήρη και εμπεριστατωμένη εξήγηση που θα σας βοηθήσει να δημιουργήσετε τη δική σας online γκαρνταρόμπα ή να χρησιμοποιήσετε τη λειτουργικότητα που δημιουργήθηκε στα Google Script μου για να επεκτείνετε το δικό σας έργο.

Beenταν ένα ταξίδι που κωδικοποιούσε αυτό το έργο (και τεκμηρίωσε μέσω αυτού του Instructable), αλλά μου άρεσε η διαδικασία και ελπίζω ότι θα απολαύσετε το προϊόν. Θα ήθελα πολύ να ακούσω από οποιονδήποτε κάνει προσαρμογές όπως λέει ο Μάικλ Τζόρνταν "Το ταβάνι είναι η στέγη" και συμφωνώ ότι αυτή η εφαρμογή δεν έχει όρια.