Το κλείδωμα COVID-19 έχει πολλούς από εμάς κολλήσει στο σπίτι, ίσως ελπίζοντας ότι ο απλός πυρετός της καμπίνας είναι το χειρότερο είδος πυρετού που θα βιώσουμε. Πολλοί από εμάς καταναλώνουμε περισσότερο περιεχόμενο βίντεο από ποτέ. Ενώ η άσκηση είναι ιδιαίτερα σημαντική αυτή τη στιγμή, μερικές φορές, υπάρχει νοσταλγία για την πολυτέλεια ενός καλού, ντεμοντέ τηλεχειριστηρίου όταν ο φορητός υπολογιστής είναι απρόσιτος.
Εκεί έρχεται αυτό το έργο: Η ευκαιρία να μετατρέψετε οποιοδήποτε smartphone - ακόμη και ένα παλιό που αλλιώς είναι άχρηστο λόγω έλλειψης ενημερώσεων - σε ένα πρακτικό τηλεχειριστήριο για το επόμενο Netflix / YouTube / Amazon Prime Video / κλπ. πολύ-ρολόι. Είναι επίσης ένα σεμινάριο back-end Node.js: μια ευκαιρία να μάθετε τα βασικά του JavaScript back-end χρησιμοποιώντας το Express framework και τη μηχανή προτύπου Pug (πρώην Jade).
Εάν αυτό ακούγεται τρομακτικό, το πλήρες Node.js το έργο θα παρουσιαστεί στο τέλος. Οι αναγνώστες πρέπει να μάθουν μόνο όσο ενδιαφέρονται να μάθουν, και θα υπάρξει ένας αρκετά ήπιος αριθμός εξηγήσεων για ορισμένα βασικά στην πορεία που μπορούν να παραβλέψουν πιο έμπειροι αναγνώστες.
Γιατί όχι μόνο ...;
Οι αναγνώστες μπορεί να αναρωτιούνται, 'Γιατί να μπείτε στην κωδικοποίηση ενός Node.js back end;' (Εκτός από την ευκαιρία μάθησης, φυσικά.) 'Δεν υπάρχει ήδη εφαρμογή για αυτό;'
Σίγουρα - πολλά από αυτά. Αλλά υπάρχουν δύο βασικοί λόγοι που μπορεί να μην είναι επιθυμητοί:
- Για όσους προσπαθούν να επανατοποθετήσουν ένα παλαιότερο τηλέφωνο, αυτό μπορεί απλά δεν είναι πλέον επιλογή , όπως συμβαίνει με τη συσκευή Windows Phone 8.1 που ήθελα να χρησιμοποιήσω. (Το κατάστημα εφαρμογών έκλεισε επίσημα στα τέλη του 2019.)
- Εμπιστοσύνη (ή έλλειψη αυτού). Όπως τόσες πολλές εφαρμογές βρίσκονται σε οποιαδήποτε πλατφόρμα για κινητά, συχνά συνοδεύονται από την απαίτηση των χρηστών να παρέχουν πολύ περισσότερα δικαιώματα από ό, τι χρειάζεται η εφαρμογή για αυτό που υποτίθεται ότι πρέπει να κάνει. Αλλά ακόμη και αν αυτή η πτυχή είναι περιορισμένη, η φύση μιας εφαρμογής τηλεχειριστηρίου σημαίνει ότι οι χρήστες πρέπει ακόμη να εμπιστεύονται ότι οι προγραμματιστές εφαρμογών δεν κάνουν κατάχρηση των προνομίων τους στο τέλος της λύσης στην επιφάνεια εργασίας, συμπεριλαμβάνοντας spyware ή άλλο κακόβουλο λογισμικό.
Αυτά τα θέματα υπήρξαν εδώ και πολύ καιρό και ήταν ακόμη και το κίνητρο για ένα παρόμοιο έργο από το 2014 που βρέθηκε στο GitHub. nvm διευκολύνει την εγκατάσταση παλαιότερων εκδόσεων του Node.js, και ακόμη και αν χρειάζονται αναβάθμιση μερικών εξαρτήσεων, το Node.js είχε μεγάλη φήμη ότι είναι συμβατό με την προηγούμενη έκδοση.
Δυστυχώς, κέρδισε το bitrot. Μια επίμονη προσέγγιση και η συμβατότητα του Node.js δεν ταιριάζουν με ατελείωτες καταργήσεις και αδύνατους βρόχους εξάρτησης μεταξύ των παλαιών εκδόσεων των Grunt, Bower και δεκάδων άλλων στοιχείων. Λίγες ώρες αργότερα, ήταν ξεκάθαρο ότι θα ήταν πολύ πιο εύκολο να ξεκινήσετε από το μηδέν - αντίθετη με αυτήν τη συμβουλή αυτού του συγγραφέα επανεφεύρεση του τροχού παρά.
Νέο Gizmos από το παλιό: Επαναπροσδιορισμός τηλεφώνων ως τηλεχειριστήρια με χρήση του Node.js Back End
Πρώτα απ 'όλα, σημειώστε ότι αυτό το έργο Node.js είναι επί του παρόντος ειδικά για το Linux — αναπτύχθηκε και δοκιμάστηκε σε Linux Mint 19 και Linux Mint 19.3, συγκεκριμένα - αλλά σίγουρα θα μπορούσε να προστεθεί υποστήριξη για άλλες πλατφόρμες. Το ενδέχεται ήδη εργάζεστε σε Mac.
Υποθέτοντας μια σύγχρονη έκδοση του Node.js έχει εγκατασταθεί και μια γραμμή εντολών είναι ανοιχτή σε έναν νέο κατάλογο που θα χρησιμεύσει ως root του έργου, είμαστε έτοιμοι να ξεκινήσουμε με το Express:
npx express-generator --view=pug Σημείωση: Εδώ, npx είναι ένα εύχρηστο εργαλείο που συνοδεύεται από το npm, το διαχειριστή πακέτων Node.js που αποστέλλεται με το Node.js. Το χρησιμοποιούμε για να τρέξουμε τη γεννήτρια σκελετών εφαρμογών Express. Από αυτό το γράψιμο, η γεννήτρια δημιουργεί ένα έργο Express / Node.js που, από προεπιλογή, εξακολουθεί να τραβά σε μια μηχανή προτύπου που ονομάζεται Jade, παρόλο που το έργο Jade μετονομάστηκε σε 'Pug' από την έκδοση 2.0 και μετά. Επομένως, για να είστε ενημερωμένοι και να χρησιμοποιείτε το Pug αμέσως - επιπλέον, αποφύγετε τις προειδοποιήσεις κατάργησης - αντιμετωπίζουμε την --view=pug, μια επιλογή γραμμής εντολών για την express-generator το σενάριο εκτελείται από npx.
Μόλις ολοκληρωθεί αυτό, πρέπει να εγκαταστήσουμε ορισμένα πακέτα από τη νέα λίστα εξάρτησης του Node.js στο package.json. Ο παραδοσιακός τρόπος για να γίνει αυτό είναι να τρέξετε npm i (i για 'εγκατάσταση'). Αλλά μερικοί προτιμούν ακόμα την ταχύτητα Νήμα , οπότε αν το έχετε εγκαταστήσει, εκτελέστε απλώς yarn χωρίς παραμέτρους.
Σε αυτήν την περίπτωση, θα πρέπει να είναι ασφαλές να αγνοήσετε το (ελπίζουμε ότι σύντομα πρόκειται να διορθωθεί) προειδοποίηση κατάργησης από μία από τις δευτερεύουσες εξαρτήσεις του Pug, αρκεί η πρόσβαση να διατηρείται σε απαραίτητη βάση στο τοπικό δίκτυο.
Ένα γρήγορο yarn start ή npm start, ακολουθούμενη από πλοήγηση στο localhost:3000 σε ένα πρόγραμμα περιήγησης, δείχνει ότι λειτουργεί το βασικό back-end Node.js που βασίζεται στο Express. Μπορούμε να το σκοτώσουμε με Ctrl+C.
Node.js Back-end Tutorial, Βήμα 2: Τρόπος αποστολής πληκτρολογήσεων στον κεντρικό υπολογιστή
Με την μακρινός το μισό έχει ήδη γίνει, ας στρέψουμε την προσοχή μας στο έλεγχος μέρος. Χρειαζόμαστε κάτι που μπορεί να ελέγχει μέσω προγραμματισμού το μηχάνημα στο οποίο θα εκτελέσουμε το Node.js back end, προσποιούμενοι ότι πατάει τα πλήκτρα στο πληκτρολόγιο.
Για αυτό, θα εγκαταστήσουμε xdotool χρησιμοποιώντας τις επίσημες οδηγίες του . Μια γρήγορη δοκιμή της παραδειγμένης εντολής τους σε ένα τερματικό:
xdotool search 'Mozilla Firefox' windowactivate --sync key --clearmodifiers ctrl+l … Πρέπει να κάνει ακριβώς αυτό που λέει, υποθέτοντας ότι το Mozilla Firefox ήταν ανοιχτό εκείνη τη στιγμή. Αυτό είναι καλό! Είναι εύκολο να κάνουμε το έργο Node.js να καλεί εργαλεία γραμμής εντολών όπως xdotool, όπως θα δούμε σύντομα.
Node.js Back-end Tutorial, Βήμα 3: Σχεδιασμός χαρακτηριστικών
Αυτό μπορεί να μην ισχύει για όλους, αλλά προσωπικά, βρίσκω ότι πολλά σύγχρονα φυσικά τηλεχειριστήρια έχουν περίπου πέντε φορές περισσότερα κουμπιά από ό, τι θα χρησιμοποιήσω ποτέ. Επομένως, για αυτό το έργο, εξετάζουμε μια διάταξη πλήρους οθόνης με ένα πλέγμα τριών προς τριών ωραίων, μεγάλων, εύχρηστων κουμπιών. Εξαρτάται από την προσωπική προτίμηση ποια μπορεί να είναι αυτά τα εννέα κουμπιά.
Αποδεικνύεται ότι οι συντομεύσεις πληκτρολογίου για ακόμη και τις πιο απλές λειτουργίες δεν είναι πανομοιότυπες Netflix , Youtube , και Βίντεο Prime Amazon . Ούτε αυτές οι υπηρεσίες λειτουργούν με γενικά κλειδιά πολυμέσων, όπως είναι πιθανό να κάνει μια εφαρμογή εγγενών προγραμμάτων αναπαραγωγής μουσικής. Επίσης, ορισμένες λειτουργίες ενδέχεται να μην είναι διαθέσιμες σε όλες τις υπηρεσίες.
Επομένως, αυτό που πρέπει να κάνουμε είναι να ορίσουμε μια διαφορετική διάταξη τηλεχειριστηρίου για κάθε υπηρεσία και να παρέχουμε έναν τρόπο εναλλαγής μεταξύ τους.
Καθορισμός διατάξεων τηλεχειριστηρίου και χαρτογράφηση αυτών στις συντομεύσεις πληκτρολογίου
Ας πάρουμε ένα γρήγορο πρωτότυπο που λειτουργεί με μια χούφτα προεπιλογών. Θα τα βάλουμε στο common/preset_commands.js - 'κοινό' επειδή θα συμπεριλάβουμε αυτά τα δεδομένα από περισσότερα από ένα αρχεία:
module.exports = { // We could use ️ but some older phones (e.g., Android 5.1.1) won't show it, hence ️ instead 'Netflix': { commands: { '-': 'Escape', '+': 'f', '': 'Up', '⇤': 'XF86Back', '️': 'Return', '': 'Down', '': 'Left', '': 'Right', '': 'm', }, }, 'YouTube': { commands: { '⇤': 'shift+p', '⇥': 'shift+n', '': 'Up', 'CC': 'c', '️': 'k', '': 'Down', '': 'j', '': 'l', '': 'm', }, }, 'Amazon Prime Video': { window_name_override: 'Prime Video', commands: { '⇤': 'Escape', '+': 'f', '': 'Up', 'CC': 'c', '️': 'space', '': 'Down', '': 'Left', '': 'Right', '': 'm', }, }, 'Generic / Music Player': { window_name_override: '', commands: { '⇤': 'XF86AudioPrev', '⇥': 'XF86AudioNext', '': 'XF86AudioRaiseVolume', '': 'r', '️': 'XF86AudioPlay', '': 'XF86AudioLowerVolume', '': 'Left', '': 'Right', '': 'XF86AudioMute', }, }, }; Οι τιμές του κωδικού μπορεί να είναι βρέθηκε με χρήση xev . (Για μένα, οι 'σίγαση ήχου' και 'αναπαραγωγή ήχου' δεν ήταν δυνατό να εντοπιστούν με τη χρήση αυτής της μεθόδου, οπότε συμβουλεύτηκα επίσης μια λίστα πλήκτρων πολυμέσων .)
Οι αναγνώστες ενδέχεται να παρατηρήσουν τη διαφορά στην περίπτωση μεταξύ space και Return —ανεξάρτητα από τον λόγο για αυτό, αυτή η λεπτομέρεια πρέπει να τηρηθεί για το xdotool να λειτουργήσει σωστά. Σχετικά με αυτό, έχουμε μερικούς ορισμούς γραμμένους ρητά - π.χ. shift+p παρόλο που P θα λειτουργούσε επίσης - απλώς για να διατηρήσουμε τις προθέσεις μας σαφείς.
Node.js Back-end Tutorial, Βήμα 4: Το τελικό σημείο «Key» του API μας (Συγγνώμη το Pun)
Χρειαζόμαστε ένα τελικό σημείο για το POST στο, το οποίο με τη σειρά του θα προσομοιώσει πατήματα πλήκτρων χρησιμοποιώντας xdotool. Δεδομένου ότι θα έχουμε διαφορετικές ομάδες κλειδιών που μπορούμε να στείλουμε (ένα για κάθε υπηρεσία), θα ονομάσουμε το τελικό σημείο για μια συγκεκριμένη group. Θα επαναχρησιμοποιήσουμε το παραγόμενο users τελικό σημείο μετονομασία routes/users.js σε routes/group.js, και πραγματοποιώντας τις αντίστοιχες αλλαγές στο app.js:
// ... var indexRouter = require('./routes/index'); var groupRouter = require('./routes/group'); // ... app.use('/', indexRouter); app.use('/group', groupRouter); // ... ο κλειδί η λειτουργικότητα χρησιμοποιεί xdotool μέσω κλήσης κελύφους συστήματος στο routes/group.js. Θα έχουμε σκληρό κώδικα YouTube ως το μενού επιλογής προς το παρόν, μόνο για σκοπούς δοκιμών.
const express = require('express'); const router = express.Router(); const debug = require('debug')('app'); const cp = require('child_process'); const preset_commands = require('../common/preset_commands'); /* POST keystroke to simulate */ router.post('/', function(req, res, next) { const keystroke_name = req.body.keystroke_name; const keystroke_code = preset_commands['YouTube'].commands[keystroke_name]; const final_command = `xdotool search 'YouTube' windowactivate --sync key --clearmodifiers ${keystroke_code}`; debug(`Executing ${final_command}`); cp.exec(final_command, (err, stdout, stderr) => { debug(`Executed ${keystroke_name}`); return res.redirect(req.originalUrl); }); }); module.exports = router; Εδώ, παίρνουμε το ζητούμενο κλειδί 'όνομα' από το POST το σώμα του αιτήματος (req.body) κάτω από την παράμετρο που ονομάζεται keystroke_name. Θα είναι κάτι σαν ️. Στη συνέχεια το χρησιμοποιούμε για να αναζητήσουμε τον αντίστοιχο κωδικό από preset_commands['YouTube'] s commands αντικείμενο.
Η τελική εντολή βρίσκεται σε περισσότερες από μία γραμμές, οπότε το s στο τέλος κάθε γραμμής ενώνει όλα τα κομμάτια σε μία μόνο εντολή:
search 'YouTube'ανακτά το πρώτο παράθυρο με τον τίτλο 'YouTube'.windowactivate --syncενεργοποιεί το ανακτημένο παράθυρο και περιμένει μέχρι να είναι έτοιμο να λάβει ένα πλήκτρο.key --clearmodifiers ${keystroke_code}στέλνει το πάτημα του πλήκτρου, φροντίζοντας να διαγράψετε προσωρινά τα πλήκτρα τροποποίησης όπως το Caps Lock που ενδέχεται να επηρεάσει αυτό που στέλνουμε.
Σε αυτό το σημείο, ο κώδικας υποθέτει ότι το τροφοδοτούμε με έγκυρη εισαγωγή - κάτι για το οποίο θα προσέξουμε πιο αργά.
Για απλότητα, ο κώδικας θα υποθέσει επίσης ότι υπάρχει μόνο ένα παράθυρο εφαρμογής ανοιχτό με το 'YouTube' στον τίτλο του. Εάν υπάρχουν περισσότερα από ένα ταίριασμα, δεν υπάρχει καμία εγγύηση ότι θα στείλουμε πλήκτρα στο επιθυμητό παράθυρο. Εάν αυτό είναι ένα πρόβλημα, μπορεί να βοηθήσει τους τίτλους των παραθύρων να αλλάξουν απλώς αλλάζοντας τις καρτέλες του προγράμματος περιήγησης σε όλα τα παράθυρα εκτός από αυτό που πρόκειται να ελεγχθεί από απόσταση.
Με αυτό έτοιμο, μπορούμε να ξεκινήσουμε ξανά τον διακομιστή μας, αλλά αυτή τη φορά με ενεργοποιημένο το σφάλμα εντοπισμού σφαλμάτων, ώστε να μπορούμε να δούμε την έξοδο του debug κλήσεις. Για να το κάνετε αυτό, απλώς εκτελέστε DEBUG=old-fashioned-remote:* yarn start ή DEBUG=old-fashioned-remote:* npm start. Μόλις εκτελεστεί, αναπαραγάγετε ένα βίντεο στο YouTube, ανοίξτε ένα άλλο παράθυρο τερματικού και δοκιμάστε μια κλήση cURL:
curl --data 'keystroke_name=️' http://localhost:3000/group Αυτό στέλνει ένα POST αίτημα με το ζητούμενο πλήκτρο πληκτρολόγησης στο σώμα του στο τοπικό μηχάνημα μας στη θύρα 3000, τη θύρα στην οποία ακούγεται το πίσω άκρο. Η εκτέλεση αυτής της εντολής πρέπει να εξάγει σημειώσεις σχετικά με Executing και Executed στο npm παράθυρο, και το πιο σημαντικό, ανοίξτε το πρόγραμμα περιήγησης και σταματήστε το βίντεό του. Η εκτέλεση αυτής της εντολής θα πρέπει να δώσει την ίδια έξοδο και να την παύσει.
Node.js Back-end Tutorial, Βήμα 5: Πολλαπλές διατάξεις τηλεχειριστηρίου
Το πίσω μέρος μας δεν έχει τελειώσει. Θα χρειαστεί επίσης να είναι σε θέση:
- Δημιουργήστε μια λίστα διατάξεων τηλεχειριστηρίου από
preset_commands. - Δημιουργήστε μια λίστα 'ονομάτων' πατήματος πλήκτρων από τη στιγμή που θα επιλέξουμε μια συγκεκριμένη διάταξη τηλεχειριστηρίου. (Θα μπορούσαμε επίσης να επιλέξουμε να χρησιμοποιήσουμε το
common/preset_commands.jsαπευθείας στο μπροστινό μέρος, δεδομένου ότι είναι ήδη JavaScript, και φιλτράρεται εκεί. Αυτό είναι ένα από τα πιθανά πλεονεκτήματα ενός Node.js back end, απλά δεν το χρησιμοποιούμε εδώ .)
Και οι δύο αυτές λειτουργίες είναι εκεί όπου το σεμινάριο back-end του Node.js τέμνεται με τη διεπαφή που βασίζεται στο Pug που θα χτίσουμε.
Χρήση Pug Templating για παρουσίαση λίστας τηλεχειριστηρίων
Το πίσω μέρος της εξίσωσης σημαίνει τροποποίηση routes/index.js να μοιάζει με αυτό:
const express = require('express'); const router = express.Router(); const preset_commands = require('../common/preset_commands'); /* GET home page. */ router.get('/', function(req, res, next) { const group_names = Object.keys(preset_commands); res.render('index', { title: 'Which Remote?', group_names, portrait_css: `.group_bar { height: calc(100%/${Math.min(4, group_names.length)}); line-height: calc(100vh/${Math.min(4, group_names.length)}); }`, landscape_css: `.group_bar { height: calc(100%/${Math.min(2, group_names.length)}); line-height: calc(100vh/${Math.min(2, group_names.length)}); }`, }); }); module.exports = router; Εδώ, παίρνουμε τα ονόματα διάταξης του τηλεχειριστηρίου (group_names) καλώντας Object.keys στο preset_commands μας αρχείο. Στη συνέχεια, τα στέλνουμε και ορισμένα άλλα δεδομένα που θα χρειαζόμαστε στη μηχανή προτύπου Pug που καλείται αυτόματα μέσω res.render().
Προσέξτε να μην συγχέετε την έννοια του keys εδώ με το κλειδί εγκεφαλικά επεισόδια στέλνουμε: Object.keys μας δίνει έναν πίνακα (μια λίστα με παραγγελίες) που περιέχει όλα τα κλειδιά απο ζεύγη κλειδιού-τιμής που αποτελούν ένα αντικείμενο σε JavaScript:
const my_object = { 'a key': 'its corresponding value', 'another key': 'its separate corresponding value', }; Αν κοιτάξουμε common/preset_commands.js, θα δούμε το παραπάνω μοτίβο, και το δικό μας κλειδιά (με την έννοια του αντικειμένου) είναι τα ονόματα των ομάδων μας: 'Netflix', 'YouTube', κ.λπ. Οι αντίστοιχες τιμές τους δεν είναι απλές συμβολοσειρές όπως my_object έχει παραπάνω - είναι ολόκληρα αντικείμενα τα ίδια, με τα δικά τους κλειδιά, δηλαδή, commands και πιθανώς window_name_override.
Το προσαρμοσμένο CSS που περνά εδώ είναι, βεβαίως, λίγο χακαρισμένο. Ο λόγος που το χρειαζόμαστε καθόλου, αντί να χρησιμοποιήσουμε μια σύγχρονη λύση που βασίζεται στο flexbox είναι για καλύτερη συμβατότητα με τον υπέροχο κόσμο των προγραμμάτων περιήγησης για κινητά στις ακόμη πιο υπέροχες παλαιότερες ενσαρκώσεις τους. Σε αυτήν την περίπτωση, το κύριο πράγμα που πρέπει να σημειωθεί είναι ότι στην οριζόντια λειτουργία, διατηρούμε μεγάλα κουμπιά δείχνοντας όχι περισσότερες από δύο επιλογές ανά οθόνη. σε κατακόρυφη λειτουργία, τέσσερα.
Αλλά πού μετατρέπεται πραγματικά σε HTML για να σταλεί στο πρόγραμμα περιήγησης; Εκεί είναι views/index.pug έρχεται, το οποίο θα θέλαμε να μοιάζει με αυτό:
extends layout block header_injection style(media='(orientation: portrait)') #{portrait_css} style(media='(orientation: landscape)') #{landscape_css} block content each group_name in group_names span(class='group_bar') a(href='/group/?group_name=' + group_name) #{group_name} Η πρώτη γραμμή είναι σημαντική: extends layout σημαίνει ότι το Pug θα παίρνει αυτό το αρχείο στο πλαίσιο views/layout.pug, το οποίο είναι ένα είδος γονικού προτύπου που θα ξαναχρησιμοποιήσουμε εδώ και επίσης σε άλλη προβολή. Θα χρειαστεί να προσθέσουμε μερικές γραμμές μετά το link γραμμή έτσι ώστε το τελικό αρχείο να μοιάζει με αυτό:
doctype html html head title= title link(rel='stylesheet', href='/stylesheets/style.css') block header_injection meta(name='viewport', content='user-scalable=no') body block content Δεν θα μπει στα βασικά του HTML εδώ, αλλά για αναγνώστες που δεν είναι εξοικειωμένοι με αυτά, αυτός ο κώδικας Pug αντικατοπτρίζει τον κώδικα HTML τυπικού ναύλου που βρίσκεται σχεδόν παντού. ο templating Η πτυχή του ξεκινά με title= title, η οποία ορίζει τον τίτλο HTML σε οποιαδήποτε τιμή αντιστοιχεί στο title κλειδί του αντικειμένου που περνάμε το Pug μέσω res.render.
Μπορούμε να δούμε μια διαφορετική πτυχή του templating δύο γραμμών αργότερα με ένα block ονομάζουμε header_injection. Τα μπλοκ σαν αυτά είναι σύμβολα κράτησης θέσης που μπορούν να αντικατασταθούν από πρότυπα που επεκτείνουν το τρέχον. (Χωρίς συσχέτιση, η γραμμή meta είναι απλώς μια γρήγορη λύση στα προγράμματα περιήγησης για κινητά, οπότε όταν οι χρήστες πατούν τα στοιχεία ελέγχου έντασης πολλές φορές στη σειρά, το τηλέφωνο αποφεύγει τη μεγέθυνση ή την σμίκρυνση.)
Επιστροφή στο block s: Γι 'αυτό views/index.pug ορίζει τα δικά του block s με τα ίδια ονόματα που βρέθηκαν στο views/layout.pug. Σε αυτήν την περίπτωση header_injection, αυτό μας επιτρέπει να χρησιμοποιήσουμε CSS ειδικά για κατακόρυφο ή οριζόντιο προσανατολισμό στο οποίο θα βρίσκεται το τηλέφωνο.
content είναι όπου βάζουμε το κύριο ορατό μέρος της ιστοσελίδας, το οποίο σε αυτήν την περίπτωση:
- Βρόχοι μέσω του
group_namesπίνακας το περνάμε, - δημιουργεί ένα
στοιχείο για καθένα με την κλάση CSSgroup_barεφαρμόζεται σε αυτό, και - δημιουργεί ένα σύνδεσμο μέσα σε κάθε
με βάση τοgroup_name.
Η κλάση CSS group_bar μπορούμε να ορίσουμε στο αρχείο που τραβήχτηκε μέσω views/layout.pug, δηλαδή, public/stylesheets/style.css:
html, body, form { padding: 0; margin: 0; height: 100%; font: 14px 'Lucida Grande', Helvetica, Arial, sans-serif; } .group_bar, .group_bar a, .remote_button { box-sizing: border-box; border: 1px solid white; color: greenyellow; background-color: black; } .group_bar { width: 100%; font-size: 6vh; text-align: center; display: inline-block; } .group_bar a { text-decoration: none; display: block; } Σε αυτό το σημείο, εάν npm start εξακολουθεί να εκτελείται, πηγαίνοντας στο http://localhost:3000/ Σε ένα πρόγραμμα περιήγησης επιτραπέζιου υπολογιστή θα πρέπει να εμφανίζονται δύο πολύ μεγάλα κουμπιά για το Netflix και το YouTube, ενώ τα υπόλοιπα είναι διαθέσιμα κάνοντας κύλιση προς τα κάτω.
Αλλά αν τους κάνουμε κλικ σε αυτό το σημείο, δεν θα λειτουργήσουν, γιατί δεν έχουμε ακόμη καθορίσει τη διαδρομή με την οποία συνδέονται (το GET ting του /group.)
Εμφάνιση της διάταξης του επιλεγμένου τηλεχειριστηρίου
Για να το κάνουμε αυτό, θα το προσθέσουμε στο routes/group.js λίγο πριν τον τελικό module.exports γραμμή:
router.get('/', function(req, res, next) { const group_name = req.query.group_name || ''; const group = preset_commands[group_name]; return res.render('group', { keystroke_names: Object.keys(group.commands), group_name, title: `${group_name.match(/([A-Z])/g).join('')}-Remote` }); }); Αυτό θα λάβει το όνομα της ομάδας στο τελικό σημείο (π.χ., τοποθετώντας το ?group_name=Netflix στο τέλος του /group/) και θα το χρησιμοποιήσει για να πάρει την τιμή του commands από την αντίστοιχη ομάδα. Αυτή η τιμή (group.commands) είναι ένα αντικείμενο και τα κλειδιά αυτού του αντικειμένου είναι τα ονόματα (keystroke_names) που θα εμφανίζονται στη διάταξη του τηλεχειριστηρίου μας.
Σημείωση: Οι άπειροι προγραμματιστές δεν θα χρειαστεί να μπει στις λεπτομέρειες του τρόπου λειτουργίας του, αλλά η τιμή για title χρησιμοποιεί λίγο κανονικές εκφράσεις για να μετατρέψουμε τα ονόματα της ομάδας / διάταξης σε ακρωνύμια — για παράδειγμα, το τηλεχειριστήριο μας στο YouTube θα έχει τον τίτλο του προγράμματος περιήγησης YT-Remote. Με αυτόν τον τρόπο, εάν κάνουμε εντοπισμό σφαλμάτων στον κεντρικό υπολογιστή μας πριν δοκιμάσουμε τα πράγματα σε ένα τηλέφωνο, δεν θα έχουμε xdotool αρπάζοντας το ίδιο το παράθυρο του προγράμματος περιήγησης, αντί για αυτό που προσπαθούμε να ελέγξουμε. Εν τω μεταξύ, στα τηλέφωνά μας, ο τίτλος θα είναι καλός και σύντομος, εάν θέλουμε να προσθέσουμε σελιδοδείκτη στο τηλεχειριστήριο.
Όπως και με την προηγούμενη συνάντησή μας με res.render, αυτό στέλνει τα δεδομένα του για να ταιριάξει με το πρότυπο views/group.pug. Θα δημιουργήσουμε αυτό το αρχείο και θα το συμπληρώσουμε με αυτό:
extends layout block header_injection script(type='text/javascript', src='/javascript/group-client.js') block content form(action='/group?group_name=' + group_name, method='post') each keystroke_name in keystroke_names input(type='submit', name='keystroke_name', value=keystroke_name, class='remote_button') Όπως με το views/index.pug, παρακάμπτουμε τα δύο ιστολόγια από το views/layout.pug. Αυτή τη φορά, δεν είναι CSS που βάζουμε στην κεφαλίδα, αλλά κάποια JavaScript από την πλευρά του πελάτη, στην οποία θα φτάσουμε σύντομα. (Και ναι, σε μια στιγμή επιμονής, μετονόμασα την λανθασμένη πληθυντικότητα javascripts…)
Το κύριο content Ακολουθεί μια φόρμα HTML που αποτελείται από πολλά διαφορετικά κουμπιά υποβολής, ένα για κάθε keystroke_name. Κάθε κουμπί υποβάλλει τη φόρμα (υποβολή αιτήματος POST) χρησιμοποιώντας το όνομα πληκτρολόγησης που εμφανίζεται ως την τιμή που στέλνει με τη φόρμα.
Θα χρειαζόμαστε επίσης λίγο περισσότερο CSS στο κύριο αρχείο φύλλου στυλ:
.remote_button { float: left; width: calc(100%/3); height: calc(100%/3); font-size: 12vh; } Νωρίτερα, όταν ρυθμίσαμε το τελικό σημείο, ολοκληρώσαμε τον χειρισμό του αιτήματος με:
return res.redirect(req.originalUrl); Αυτό σημαίνει αποτελεσματικά ότι όταν το πρόγραμμα περιήγησης υποβάλλει τη φόρμα, το Node.js back end αποκρίνεται λέγοντας στο πρόγραμμα περιήγησης να επιστρέψει στη σελίδα από την οποία υποβλήθηκε η φόρμα - δηλαδή, η κύρια διάταξη του τηλεχειριστηρίου. Θα ήταν πιο κομψό χωρίς αλλαγή σελίδων. Ωστόσο, θέλουμε τη μέγιστη συμβατότητα με τον περίεργο και υπέροχο κόσμο των περιθωριοποιημένων προγραμμάτων περιήγησης για κινητά. Με αυτόν τον τρόπο, ακόμη και χωρίς καμία εργασία JavaScript front-end, το Node.js back-end project μας πρέπει εξακολουθεί να λειτουργεί.
Μια παύλα του JavaScript διεπαφής
Το μειονέκτημα της χρήσης μιας φόρμας για την υποβολή πληκτρολογήσεων είναι ότι το πρόγραμμα περιήγησης πρέπει να περιμένει και, στη συνέχεια, να εκτελέσει ένα επιπλέον δρομολόγιο μετ 'επιστροφής: Στη συνέχεια, η σελίδα και οι εξαρτήσεις της πρέπει να ζητηθούν από το Node.js back end και να παραδοθούν. Στη συνέχεια, πρέπει να αποδίδονται ξανά από το πρόγραμμα περιήγησης.
Οι αναγνώστες μπορεί να αναρωτιούνται πόση επίδραση μπορεί να έχει αυτό. Σε τελική ανάλυση, η σελίδα είναι μικρή, οι εξαρτήσεις της είναι εξαιρετικά ελάχιστες και το τελικό έργο Node.js θα εκτελείται μέσω τοπικής σύνδεσης Wi-Fi. Πρέπει να είναι ρύθμιση χαμηλού λανθάνοντος χρόνου, σωστά;
Όπως αποδεικνύεται - τουλάχιστον κατά τη δοκιμή σε παλαιότερα smartphone που χρησιμοποιούν Windows Phone 8.1 και Android 4.4.2 - το αποτέλεσμα είναι δυστυχώς αρκετά αισθητό στην κοινή περίπτωση του γρήγορου κτυπήματος για αύξηση ή μείωση της έντασης αναπαραγωγής κατά μερικές εγκοπές. Εδώ είναι που μπορεί να βοηθήσει το JavaScript, χωρίς να αφαιρεθεί η χαριτωμένη εναλλακτική λύση των εγχειριδίων POST s μέσω φορμών HTML.
Σε αυτό το σημείο, το JavaScript του τελικού πελάτη (που πρέπει να τοποθετηθεί public/javascript/group-client.js) πρέπει να είναι συμβατό με παλιά προγράμματα περιήγησης για κινητά που δεν υποστηρίζονται πλέον. Αλλά δεν το χρειαζόμαστε πολύ:
(function () { function form_submit(event) { var request = new XMLHttpRequest(); request.open('POST', window.location.pathname + window.location.search, true); request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); request.send('keystroke_name=' + encodeURIComponent(event.target.value)); event.preventDefault(); } window.addEventListener('DOMContentLoaded', function() { var inputs = document.querySelectorAll('input'); for (var i = 0; i Εδώ, το form_submit Η συνάρτηση στέλνει τα δεδομένα μέσω ασύγχρονης κλήσης και η τελευταία γραμμή αποτρέπει την κανονική συμπεριφορά αποστολής των προγραμμάτων περιήγησης, με την οποία φορτώνεται μια νέα σελίδα βάσει της απόκρισης του διακομιστή. Το τελευταίο μισό αυτού του αποσπάσματος περιμένει απλώς έως ότου φορτωθεί η σελίδα και στη συνέχεια συνδέει κάθε κουμπί υποβολής για χρήση form_submit. Το όλο πράγμα είναι τυλιγμένο ένα IIFE .
Τελικές πινελιές
Υπάρχουν πολλά αλλαγές στα παραπάνω αποσπάσματα στην τελική έκδοση του κωδικού φροντιστηρίου Node.js, κυρίως για σκοπούς καλύτερου χειρισμού σφαλμάτων:
- Το Node.js back end ελέγχει τώρα τα ονόματα των ομάδων και των πλήκτρων που του αποστέλλονται για να βεβαιωθεί ότι υπάρχουν. Αυτός ο κωδικός βρίσκεται σε μια συνάρτηση που επαναχρησιμοποιείται και για το
GET και POST συναρτήσεις routes/group.js. - Κάνουμε χρήση του Pug
error πρότυπο εάν δεν το κάνουν. - Το front-end JavaScript και το CSS κάνουν τώρα τα κουμπιά να παρουσιάζουν προσωρινά περίγραμμα σε γκρι, ενώ περιμένουν μια απάντηση από τον διακομιστή, πράσινο μόλις το σήμα ξεπεράσει τη διαδρομή
xdotool και πίσω χωρίς προβλήματα, και κόκκινο αν κάτι δεν λειτούργησε όπως αναμενόταν. - Το Node.js back end θα εκτυπώσει ένα ίχνος στοίβας εάν πεθάνει, κάτι που είναι λιγότερο πιθανό δεδομένου των παραπάνω.
Οι αναγνώστες είναι ευπρόσδεκτοι να μελετήσουν (και / ή να κλωνοποιήσουν) το πλήρες έργο Node.js στο GitHub .
Node.js Back-end Tutorial, Βήμα 5: Μια πραγματική δοκιμή
Ήρθε η ώρα να το δοκιμάσετε σε ένα πραγματικό τηλέφωνο συνδεδεμένο στο ίδιο δίκτυο Wi-Fi με τον κεντρικό υπολογιστή που εκτελείται npm start και μια ταινία ή συσκευή αναπαραγωγής μουσικής. Είναι απλώς θέμα να δείξετε το πρόγραμμα περιήγησης ιστού ενός smartphone στην τοπική διεύθυνση IP του κεντρικού υπολογιστή (με επίθεμα :3000), το οποίο πιθανότατα είναι ευκολότερο να βρεθεί τρέχοντας hostname -I | awk '{print }' σε ένα τερματικό στον κεντρικό υπολογιστή.
Ένα πρόβλημα που ενδέχεται να παρατηρήσουν οι χρήστες του Windows Phone 8.1 είναι ότι η απόπειρα πλοήγησης σε κάτι σαν 192.168.2.5:3000 θα δώσει ένα αναδυόμενο σφάλμα:
Ευτυχώς, δεν χρειάζεται να αποθαρρυνθείτε: Απλώς πρόθεμα με http:// ή προσθέτοντας ένα τέλος / το παίρνει να πάρει τη διεύθυνση χωρίς περαιτέρω καταγγελία.
Η επιλογή εκεί θα πρέπει να μας φέρει σε ένα τηλεχειριστήριο που λειτουργεί.
Για μεγαλύτερη ευκολία, οι χρήστες μπορεί να θέλουν να προσαρμόσουν τις ρυθμίσεις DHCP του δρομολογητή τους για να αντιστοιχούν πάντα στην ίδια διεύθυνση IP στον κεντρικό υπολογιστή και να προσθέτουν σελιδοδείκτη στην οθόνη επιλογής διάταξης ή / και σε οποιαδήποτε αγαπημένη διάταξη.
Υποβολή αιτημάτων Καλώς ήλθατε
Είναι πιθανό ότι δεν θα αρέσει σε όλους αυτό το έργο ακριβώς όπως είναι. Ακολουθούν ορισμένες ιδέες για βελτιώσεις, για όσους θέλουν να ανακαλύψουν περαιτέρω τον κώδικα:
Η γραφομηχανή δεν είναι συνάρτηση
- Θα πρέπει να είναι απλό να τροποποιήσετε τις διατάξεις ή να προσθέσετε νέες για άλλες υπηρεσίες, όπως το Disney Plus.
- Ίσως κάποιοι θα προτιμούσαν μια διάταξη 'light mode' και την επιλογή εναλλαγής μεταξύ τους.
- Η δημιουργία αντιγράφων ασφαλείας από το Netflix, δεδομένου ότι δεν είναι αναστρέψιμη, θα μπορούσε πραγματικά να χρησιμοποιήσει το 'είσαι σίγουρος;' επιβεβαίωση κάποιου είδους.
- Το έργο σίγουρα θα επωφεληθεί Παράθυρα υποστήριξη.
- | Η τεκμηρίωση αναφέρει το OSX - λειτουργεί αυτό (ή θα μπορούσε αυτό) να λειτουργεί σε έναν σύγχρονο Mac;
- Για προχωρημένη χαλάρωση, ένας τρόπος αναζήτησης και περιήγησης σε ταινίες, αντί να χρειάζεται να επιλέξετε μία ταινία Netflix / Amazon Prime Video ή να δημιουργήσετε μια λίστα αναπαραγωγής YouTube στον υπολογιστή.
- Μια αυτοματοποιημένη δοκιμαστική σουίτα, σε περίπτωση που κάποια από τις προτεινόμενες αλλαγές σπάσει την αρχική λειτουργικότητα.
Ελπίζω να απολαύσατε αυτόν τον οδηγό υποστήριξης Node.js και ως αποτέλεσμα βελτιωμένη εμπειρία πολυμέσων. Καλή ροή - και κωδικοποίηση!
Σχετίζεται με: Δημιουργία ενός Node.js / TypeScript REST API, Μέρος 1: Express.js Κατανόηση των βασικών
Είναι το Node.js για το πίσω μέρος;
Ναί. Το Node.js είναι ένα πρόγραμμα γραμμής εντολών που εκτελεί κώδικα JavaScript και χρησιμοποιείται συνήθως σε έναν κεντρικό υπολογιστή Ιστού για την εξυπηρέτηση ιστοσελίδων, τη σύνδεση σε βάσεις δεδομένων και ούτω καθεξής.
Είναι αρκετό το Node.js για ένα back-end;
Απολύτως. Με σωστή αρχιτεκτονική, ένα Node.js back end μπορεί να κλιμακώσει όπως και οποιαδήποτε τεχνολογία μπορεί. Ωστόσο, είναι συχνά ενσωματωμένο σε άλλα σημαντικά στοιχεία, όπως η πρόσβαση στο επίπεδο βάσης δεδομένων μιας εφαρμογής.
Τι είναι το Express.js;
Το Express είναι μια λειτουργική μονάδα για το Node.js που μειώνει την ποσότητα του κωδικού boilerplate που απαιτείται για την εγγραφή κοινών λειτουργιών διακομιστή ιστού. Έχει ένα ώριμο υποσύστημα από μόνο του. Οι περισσότεροι διακομιστές ιστού Node.js χρησιμοποιούν Express.
Τι είναι το Pug / Jade;
Το Pug (πρώην Jade) είναι ένας κινητήρας templating που ενσωματώνεται στο Express. Στην πραγματικότητα, εδώ και χρόνια, υπήρξε η προεπιλεγμένη μηχανή προτύπου που η γεννήτρια έργων Express περιλαμβάνει σε νέα έργα.
Τι είναι το xdotool;
Το πρόγραμμα γραμμής εντολών xdotool προσομοιώνει πατήματα πλήκτρων στον υπολογιστή στον οποίο εκτελείται. Αυτό το έργο επιτρέπει σε ένα τηλέφωνο να εκτελεί τέτοιες ενέργειες σε υπολογιστή μέσω ιστοσελίδας, μετατρέποντάς το σε τηλεχειριστήριο.
