Δημιουργήστε μια εφαρμογή που συλλέγει δεδομένα αισθητήρα

Sep 15, 2025

πως να

Σήμερα, προσιτές πλατφόρμες για την ανάπτυξη διασυνδεδεμένων προϊόντων απολαμβάνουν ευρεία διαθεσιμότητα και έχουμε δει μια ώθηση για αυξημένη υποστήριξη JavaScript στις τεχνολογίες IOT, με ισχυρές εταιρείες όπως η IBM, η Google, Intel, Microsoft και η Cisco ανοίγουν τα API για τα προϊόντα τους. Το αποτέλεσμα είναι ένα διογκωμένο οικοσύστημα μικρο-ελεγκτές, καταγραφείς δεδομένων που συνδέονται με υπηρεσίες Cloud και προσαρμόσιμες διεπαφές που αναλύουν δεδομένα σε πραγματικό χρόνο, όλες οι οποίες παρουσιάζουν νέες ευκαιρίες για σχεδιαστές με ικανότητες ιστού πελάτη.

Οι 13 καλύτερες εφαρμογές iPad για τους σχεδιαστές Pro

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

Ρίξτε μια ματιά στο Αρχεία προέλευσης Για αυτό το σεμινάριο .

Αισθητήρες και μικροελεγκτές

Για αυτό το σεμινάριο θα χρησιμοποιήσουμε τον Microcontroller Arduino. Αυτή είναι μια δημοφιλής επιλογή χάρη σε μια φτηνή τιμή, εύκολο κιτ ανάπτυξης και πολλά online υποστήριξη. Για να ρυθμίσετε τον μικροελεγκτή στον υπολογιστή σας, κατεβάστε το περιβάλλον ανάπτυξης (η επιλογή IDE) εδώ . Ο μικροελεγκτής συνδέεται στον υπολογιστή σας με ένα καλώδιο USB που επίσης το εξουσιοδοτεί. Ο κωδικός Arduino είναι γνωστός ως σκίτσα, τα οποία γράφονται σε κώδικα με βάση τον C ++ για την ανάλυση δεδομένων που προέρχονται από αισθητήρες.

Our sample application comprises a sensor (1), microcontroller (2), web API (3), and an adaptive UI (4) — Η εφαρμογή δείγματος περιλαμβάνει έναν αισθητήρα (1), μικροελεγκτή (2), API Web (3) και ένα προσαρμοστικό UI (4)

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

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

Δηλώστε μια λειτουργία ρύθμισης () που επικοινωνεί με τη σειριακή θύρα στο φορητό υπολογιστή σας. Αυτό ονομάζεται όταν ξεκινά ένα σκίτσο Arduino και θα καταγράψει στο σειριακό παράθυρο. Η σειριακή θύρα χρησιμοποιείται για επικοινωνία μεταξύ του πλακέτα Arduino και του φορητού υπολογιστή σας.

Στη συνέχεια, πρέπει να ορίσουμε τον ρυθμό baud - το ποσοστό με το οποίο μεταφέρονται πληροφορίες. Θέλουμε ένα ποσοστό 9600, το οποίο σημαίνει ότι η σειριακή θύρα είναι ικανή να μεταφερθεί μέγιστο 9600 bits ανά δευτερόλεπτο από το σήμα, που προέρχεται από τον αισθητήρα θερμοκρασίας LM35, που ταξιδεύει μέσω του καλωδίου USB στο φορητό υπολογιστή σας. Μετατρέψτε τα ληφθέντα δεδομένα ακατέργαστων αισθητήρων πρώτα σε μορφή θερμοκρασίας, στη συνέχεια από ακέραιο σε κείμενο που θέλετε να εισάγονται σε JSON και κρατήστε τη μνήμη.

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

A typical Arduino set-up, consisting of cables, wires, pins, sensors and a USB laptop connection — Ένα τυπικό arduino set-up, που αποτελείται από καλώδια, καλώδια, καρφίτσες, αισθητήρες και σύνδεση φορητού υπολογιστή USB

Ένα api με βάση το web

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

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

Η επεξεργασία χρησιμοποιεί ένα αρχείο σκίτσου για να λάβει δεδομένα από το Arduino ακούγοντας δεδομένα στη σειριακή θύρα και επιστρέφοντας μια συμβολοσειρά για να κρατήσει τις αναγνώσεις. Χρησιμοποιεί επίσης τη λειτουργία της κλήρωσης (), η οποία εκτελεί συνεχώς τις γραμμές του κώδικα που περιέχεται στο μπλοκ της - στην περίπτωση αυτή, λαμβάνοντας τις τιμές από τη σειριακή θύρα, προσθέτοντας ένα χρονικό διάστημα και την εκτύπωση τους σε ένα αρχείο κειμένου που τελειώνει σε μια δομή JSON παρόμοια σε ["18:05:53", 43.00].

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

Μια προσαρμοστική διεπαφή

Σε αυτό το σημείο θέλουμε να συναντήσουμε ένα απλό UI με ένα πακέτο εκκίνησης μιας σελίδας (SPA) και ένα εργαλείο που βασίζεται σε JS όπως αντιδρά ή γωνιακό. Έχω επιλέξει να αντιδράσει επειδή διευκολύνει να περιγράψει τι θα πρέπει να κάνει το πρόγραμμα περιήγησης, αφαιρεί πολύ θόρυβο όταν δημιουργεί το Dom στο πρόγραμμα περιήγησης και δεσμεύει δεδομένα από οποιοδήποτε API πολύ γρήγορα. Επίσης, αντί να επανασχεδιάσετε ολόκληρο το DOM, ενημερώνει μόνο τα στοιχεία UI που έχουν αλλάξει, η οποία είναι μεγάλη για πρωτότυπα.

Για να ξεκινήσετε με το UI σας, εγκαταστήστε πρώτα το spa χρησιμοποιώντας ένα από τα πολλά πακέτα εκκίνησης διαθέσιμα στο διαδίκτυο. Μια πολύ βολική είναι η λέβητα App Web Αντιδρά . Μόλις εξοικειωθείτε με τη δομή του αρχείου, θα χρειαστεί να ρυθμίσετε ένα νέο στοιχείο που έχει πρόσβαση στην τροφοδοσία του JSON στον τοπικό διακομιστή Web ή μια υπηρεσία Cloud και επεξεργάζεται τα δεδομένα για εμφάνιση.

Σε αντιδράσει, ο Setstate είναι η κύρια μέθοδος που χρησιμοποιείται για την ενεργοποίηση των ενημερώσεων UI. Οι αλλαγές ενεργοποιούνται από χειριστές συμβάντων ή επανάκλησης ζητήματος διακομιστή και, στη συνέχεια, πρέπει να εφαρμοστούν σωστά για να διαβάσετε το αρχείο JSON. Τέλος, ορίζουμε τις μεταβλητές αναγνώσεις για τη συγκράτηση των αναλυθέντων δεδομένων και το & lt; readingsList / & gt; Ετικέτα στη μέθοδο δημιουργίας για να αντιπροσωπεύει το στοιχείο UI που εξυπηρετεί την οπτικοποίηση:

 LoadPathsdata () {
  αυτό.setstate ({δεδομένα: δεδομένα});
}

loadinitialstate () {
  Επιστροφή {Δεδομένα: {Αναγνώσεις: []}};
}

componentwillmount () {
  αυτό. Floyalpathsdata ();
}

render () {
  ΕΠΙΣΤΡΟΦΗ (
    & lt; div & gt;
      & lt; readingslist data = {this.state.data} / & gt;
    & lt; / div & gt;
  )
}

Ορίστε τη συνιστώσα UI ανάγνωσης UI για να κρατήσετε τις μετρήσεις από το αρχείο JSON που δημιουργήθηκε προηγουμένως. Προσθέστε μια νέα κλάση (λίστα αναγνώσεων) ακριβώς πάνω από τον ορισμό της τάξης. Η αντιδράσει χρησιμοποιεί τη μέθοδο καθιστών για την εφαρμογή της εικονικής αναπαράστασης ενός φυσικού συστατικού DOM (όπως το & lt; div / & gt; παρακάτω) ή οποιοδήποτε άλλο καθορισμένο συστατικό. Ως αποτέλεσμα, έχουμε ένα στοιχείο UI που εμφανίζει τις ενδείξεις JSON:

 var readingsList = αντιδράστε.createclass ({
  Render: Λειτουργία () {
    ΕΠΙΣΤΡΟΦΗ (
      & lt; div & gt;
      
      & lt; / div & gt;
    )
  }
}) ·

Συνδυάστε δυναμικές δηλώσεις CSS με αντιστοιχίσεις δεδομένων για να στυλ τις αναγνώσεις στο πρόγραμμα περιήγησης.

Μπορείτε να αναγκάσετε την ανανέωση είτε στο επίπεδο του συστατικού ή του προγράμματος περιήγησης σε σύντομο χρονικό διάστημα. Αυτό μπορεί να γίνει με τη χρήση της πιο ισχυρής συνάρτησης αντιδράσεων (ο οποίος αναφέρει ότι αντιδράσει, χρειάζεται να επαναπροσανατολιστεί η απόδοση () παραπάνω με την κλήση forceUpdate) ή εφαρμόζεται στην απόδοση του προτύπου Jade με μια βασική λειτουργία SetInterval.

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

The final interface shows the temperature readings from the sensor, and updates in real time — Η τελική διεπαφή εμφανίζει τις μετρήσεις θερμοκρασίας από τον αισθητήρα και ενημερώσεις σε πραγματικό χρόνο

Τι έπεται?

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

Οι επαγγελματίες του Web αρχίζουν να διερευνούν πρακτικούς τρόπους εργασίας με συστοιχίες δεδομένων που προέρχονται από αισθητήρες και στη συνέχεια έχουν μια διεπαφή χρήστη σχεδιασμένο γύρω τους. Αυτές οι εξερευνήσεις προσφέρουν νέους τρόπους σκέψης σχετικά με τα δεδομένα και το σχεδιασμό σε διασυνδεδεμένα προϊόντα, στα οποία το CSS δεν αφορά μόνο τα στυλ αλλά ένα όχημα μέσω του οποίου δημιουργεί σημαντικές συνδέσεις μεταξύ ανθρώπων και δεδομένων. Υπάρχουν επίσης πολλά να πειραματιστούν σε νέες και επερχόμενες τεχνολογίες που βασίζονται στο CSS που συνιστούν τις δηλώσεις CSS με στοιχεία δεδομένων για την ενίσχυση των ψηφιακών εμπειριών, συμπεριλαμβανομένων των τεχνικών απόδοσης του προγράμματος περιήγησης.

Τα δεδομένα είναι γύρω μας και έχουμε μια μοναδική ευκαιρία να το χρησιμοποιήσουμε για να δούμε τα αόρατα και να γράψουμε γάντζοι για αυτό στο CSS μέσω Javascript ... μιλάμε για τη μείωση της τριβής και δημιουργώντας ένα απλό σημείο επαφής μεταξύ ανθρώπων και οποιουδήποτε ψηφιακού προϊόντος. Η υιοθέτηση της JavaScript σε πλατφόρμες IOT προτείνει το CSS να είναι ακόμα ένα κύριο εργαλείο επιλογής για τους πελάτες που βασίζονται σε javascript ή προγράμματα περιήγησης σε όλα τα μεγέθη για λίγο.

Αυτό το άρθρο εμφανίστηκε αρχικά στο καθαρό περιοδικό Τεύχος 289; Αγοράστε το εδώ !

Σχετικά Άρθρα:

Ο ρόλος του σχεδιασμού στο Διαδίκτυο των πραγμάτων
Γιατί πρέπει να αγκαλιάσετε τη σκέψη σχεδίασης
5 βασικοί πόροι μάθησης Chatbot

Δημιουργήστε μια εφαρμογή που συλλέγει δεδομένα αισθητήρα

Αισθητήρες και μικροελεγκτές

Ένα api με βάση το web

Μια προσαρμοστική διεπαφή

Τι έπεται?

πως να - Τα πιο δημοφιλή άρθρα

4 Βήματα για τη χρήση μεταβλητών γραμματοσειρών

5 Ζεστά νέα χαρακτηριστικά CSS και πώς να τα χρησιμοποιήσετε

Πώς να εξετάσει ένα πρόσωπο για κινούμενα σχέδια

Βάλτε ένα άτακτο λαγό σε ακουαρέλα

Πώς να πρωτότυπη εφαρμογή κινητής τηλεφωνίας με στούντιο Origami

Πώς να σχεδιάσετε το τέλειο κάλυμμα βιβλίου

Τέσσερις αρχές στρατηγικής UX

Κάνετε ένα πρωτότυπο Hi-Fidelity στο Atomic

Κατηγορίες