Πώς να δημιουργήσετε έναν ανιχνευτή COVID-19 σε JavaScript

Αναζητάτε ένα γρήγορο έργο για να εξασκήσετε τις δεξιότητές σας στον προγραμματιστή ιστού; Πιθανότατα έχετε δει πολλούς διαφορετικούς ιχνηλάτες και γραφήματα COVID καθ' όλη τη διάρκεια της πανδημίας—δείτε πώς να φτιάξετε το δικό σας με ελάχιστη προσπάθεια.

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

Τι θα χτίσετε

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

Όλος ο κώδικας που χρησιμοποιείται σε αυτό το άρθρο είναι διαθέσιμος στο α Github αποθήκη.

Εξερεύνηση της πηγής δεδομένων

Για να λάβουμε τα πιο πρόσφατα στοιχεία που σχετίζονται με τον COVID, θα χρησιμοποιήσουμε ασθένεια.sh που αυτοχαρακτηρίζεται ως «API δεδομένων ανοιχτής νόσου».

Αυτό το API είναι εξαιρετικό γιατί:

• Έχει πολλές διαφορετικές πηγές δεδομένων, καθεμία από τις οποίες προσφέρει ελαφρώς διαφορετικές μορφές
• Είναι καλά τεκμηριωμένο, όχι με παραδείγματα, αλλά με πολλές λεπτομέρειες για το πώς καθένα από αυτά ασθένεια.sh τα τελικά σημεία λειτουργούν
• Επιστρέφει JSON, το οποίο είναι εύκολο να δουλέψεις από JavaScript
• Είναι εντελώς ανοιχτό και δωρεάν στη χρήση, δεν απαιτείται έλεγχος ταυτότητας

Αυτό το τελευταίο σημείο είναι ιδιαίτερα σημαντικό: πολλά API απαιτούν από εσάς να περάσετε από μια περίπλοκη διαδικασία OpenAuth ή απλά δεν είναι διαθέσιμα σε JavaScript που εκτελείται σε πρόγραμμα περιήγησης.

Για αυτό το σεμινάριο, θα χρησιμοποιήσουμε το Στοιχεία New York Times για τις ΗΠΑ από ασθένεια.sh. Αυτό το τελικό σημείο περιλαμβάνει δεδομένα από τη διάρκεια της πανδημίας (από τις 21 Ιανουαρίου 2020), σε μια μορφή που είναι εύκολο να εργαστείτε. Ρίξτε μια ματιά σε ορισμένα δεδομένα από το ασθένεια.sh τελικό σημείο θα χρησιμοποιήσουμε:

Εάν έχετε συνηθίσει να ασχολείστε με το JSON, ίσως μπορείτε να το διαβάσετε χωρίς πρόβλημα. Ακολουθεί ένα μικρό απόσπασμα σε πιο ευανάγνωστη διάταξη:

[{
 "ημερομηνία":"21-01-2020",
 "περιπτώσεις":1,
 "θάνατοι":0,
 "ενημερώθηκε":1643386814538
},{
 "ημερομηνία":"22-01-2020",
 "περιπτώσεις":1,
 "θάνατοι":0,
 "ενημερώθηκε":1643386814538
}]

Το API επιστρέφει έναν απλό πίνακα αντικειμένων, κάθε αντικείμενο αντιπροσωπεύει ένα σημείο δεδομένων με ημερομηνία, περιπτώσεις κ.λπ.

Ρύθμιση του HTML

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

κρούσματα Covid, ΗΠΑ

Ανάκτηση των δεδομένων με χρήση JavaScript

Ξεκινήστε λαμβάνοντας απλώς τα δεδομένα από το API και εμφανίζοντάς τα στην κονσόλα του προγράμματος περιήγησης. Αυτό θα σας βοηθήσει να επαληθεύσετε ότι μπορείτε να λάβετε από τον απομακρυσμένο διακομιστή και να επεξεργαστείτε την απόκριση. Προσθέστε τον παρακάτω κώδικα στο δικό σας covid.js αρχείο:

var api = ' https://disease.sh/v3/covid-19/nyt/usa';
ανάκτηση (api)
 .then (response => answer.json())
 .τότε (δεδομένα => {
 console.log (δεδομένα);
 });

Το Fetch JavaScript API είναι μια νεότερη εναλλακτική λύση στο XMLHttpRequest (διαβάστε σχετικά λεπτομερώς στο MDN). Χρησιμοποιεί ένα Promise που κάνει τον ασύγχρονο προγραμματισμό με τις επανακλήσεις λίγο πιο εύκολο. Χρησιμοποιώντας αυτό το παράδειγμα, μπορείτε να συνδέσετε πολλά ασύγχρονα βήματα μαζί.

Αφού λάβετε την απαιτούμενη διεύθυνση URL, χρησιμοποιήστε το τότε μέθοδος της Υπόσχεσης για το χειρισμό της υπόθεσης επιτυχίας. Αναλύστε το σώμα της απάντησης ως JSON μέσω του json() μέθοδος.

Σχετίζεται με: Οι λειτουργίες βέλους JavaScript μπορούν να σας κάνουν καλύτερο προγραμματιστή

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

Θα μπορείτε να αλληλεπιδράσετε με το αντικείμενο που εμφανίζεται στην κονσόλα για να επιθεωρήσετε τα δεδομένα από το API. Έχετε κάνει ήδη μεγάλη πρόοδο, οπότε προχωρήστε στο επόμενο βήμα όταν είστε έτοιμοι.

Σχετίζεται με: Εντοπισμός σφαλμάτων σε JavaScript: Σύνδεση στην Κονσόλα του προγράμματος περιήγησης

Εμφάνιση των δεδομένων με χρήση του billboard.js

Αντί να καταγράψουμε τα δεδομένα, ας τα σχεδιάσουμε χρησιμοποιώντας μια βιβλιοθήκη JavaScript. Προετοιμαστείτε για αυτό ενημερώνοντας τον προηγούμενο κώδικα ώστε να μοιάζει με αυτό:

ανάκτηση (api)
 .then (response => answer.json())
 .τότε (δεδομένα => {
 plotData (δεδομένα);
 });
συνάρτηση plotData (δεδομένα) {
}

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

Θα χρειαστεί να συμπεριλάβετε τρία εξωτερικά αρχεία, επομένως προσθέστε τα στο HEAD του html σας:

Δοκιμάστε το billboard.js με το πιο βασικό γράφημα. Προσθέστε τα ακόλουθα στο plotData():

bb.generate({
 bindto: "#covid-all-us-cases",
 δεδομένα: {
 τύπος: "γραμμή",
 στήλες: [
 [ "δεδομένα", 10, 40, 20 ]
 ]
 }
});

ο δεσμεύονται σε Η ιδιότητα ορίζει έναν επιλογέα που προσδιορίζει το στοιχείο HTML-στόχου στο οποίο θα δημιουργηθεί το γράφημα. Τα δεδομένα είναι για α γραμμή γράφημα, με μία στήλη. Σημειώστε ότι τα δεδομένα της στήλης είναι ένας πίνακας που αποτελείται από τέσσερις τιμές, με την πρώτη τιμή μια συμβολοσειρά που λειτουργεί ως όνομα αυτών των δεδομένων ("δεδομένα").

Θα πρέπει να δείτε ένα γράφημα που μοιάζει κάπως με αυτό, με τρεις τιμές στη σειρά και ένα μύθο που το χαρακτηρίζει ως "δεδομένα":

Το μόνο που σας μένει να κάνετε είναι να χρησιμοποιήσετε το πραγματικό δεδομένα από το API στο οποίο περνάτε ήδη plotData(). Αυτό απαιτεί λίγο περισσότερη δουλειά γιατί θα πρέπει να το μεταφράσετε σε κατάλληλη μορφή και να δώσετε εντολή στο billboard.js να εμφανίζει τα πάντα σωστά.

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

var keys = data.map (a => a.date),
 περιπτώσεις = data.map (a => a.cases);
keys.unshift("ημερομηνίες");
case.unshift("cases");

Η υπόλοιπη εργασία απαιτεί τροποποιήσεις στο αντικείμενο της πινακίδας.

bb.generate({
 bindto: "#covid-all-us-cases",
 δεδομένα: {
 x: "ημερομηνίες",
 τύπος: "γραμμή",
 στήλες: [
 κλειδιά,
 περιπτώσεις
 ]
 }
});

Προσθέστε επίσης τα ακόλουθα άξονας ιδιοκτησία:

 άξονας: {
 Χ: {
 τύπος: "κατηγορία",
 τικ: {
 καταμέτρηση: 10
 }
 }
 }

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

Ελέγξτε την πηγή αυτού του ιχνηλάτη GitHub.

Παραλλαγές

Ρίξτε μια ματιά στο πώς μπορείτε να χρησιμοποιήσετε τα δεδομένα πηγής με διαφορετικούς τρόπους για να αλλάξετε αυτό που σχεδιάζετε χρησιμοποιώντας το billboard.js.

Προβολή δεδομένων μόνο για ένα μόνο έτος

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

Στο δεύτερο .τότε() καλέστε, αντικαταστήστε:

plotData (δεδομένα);

Με:

plotData (data.filter (a => a.date > '2022'));

ο φίλτρο() Η μέθοδος μειώνει έναν πίνακα καλώντας μια συνάρτηση σε κάθε τιμή του πίνακα. Όταν επιστρέψει αυτή η συνάρτηση αληθής, κρατάει την αξία. Διαφορετικά, το απορρίπτει.

Η παραπάνω συνάρτηση επιστρέφει true εάν η τιμή είναι ημερομηνία η ιδιοκτησία είναι μεγαλύτερη από το «2022». Αυτή είναι μια απλή σύγκριση συμβολοσειρών, αλλά λειτουργεί για τη μορφή αυτών των δεδομένων που είναι έτος-μήνας-ημέρα, μια πολύ βολική μορφή.

Προβολή δεδομένων με λιγότερη ευκρίνεια

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

Η τυπική τεχνική για να γίνει αυτό είναι με το % χειριστής (modulus). Φιλτράροντας στο συντελεστή 7 κάθε δείκτη πίνακα ίσο με 0, θα διατηρήσουμε κάθε 7η τιμή:

plotData (data.filter((a, index) => index % 7 == 0));

Σημειώστε ότι, αυτή τη φορά, θα χρειαστεί να χρησιμοποιήσετε μια εναλλακτική μορφή φίλτρο() το οποίο χρησιμοποιεί δύο ορίσματα, το δεύτερο αντιπροσωπεύει το ευρετήριο. Ιδού το αποτέλεσμα:

Προβολή περιπτώσεων και θανάτων σε ένα γράφημα

Τέλος, δοκιμάστε να εμφανίσετε και τις περιπτώσεις και τους θανάτους σε ένα γράφημα (GitHub). Αυτή τη φορά θα χρειαστεί να αλλάξετε το plotData() μέθοδο, αλλά η προσέγγιση είναι κυρίως η ίδια. Οι βασικές αλλαγές είναι η προσθήκη των νέων δεδομένων:

deaths = data.map (a => a.deaths)
...
στήλες = [ κλειδιά, περιπτώσεις, θάνατοι ]

Και τροποποιήσεις για να διασφαλίσουν ότι το billboard.js μορφοποιεί σωστά τους άξονες. Σημειώστε, ειδικότερα, τις αλλαγές στη δομή δεδομένων που ανήκουν στο αντικείμενο που μεταβιβάστηκε ββ.δημιουργώ:

δεδομένα: {
 x: "ημερομηνίες",
 στήλες: στήλες,
 άξονες: { "cases": "y", "deaths": "y2" },
 τύποι: {
 θήκες: "μπαρ"
 }
}

Τώρα, ορίστε τους πολλαπλούς άξονες που θα σχεδιάσετε μαζί με έναν νέο τύπο ειδικά για το περιπτώσεις σειρά.

Σχεδίαση αποτελεσμάτων API με χρήση JavaScript

Αυτό το σεμινάριο δείχνει πώς να χρησιμοποιήσετε ένα απλό API και μια βιβλιοθήκη γραφημάτων για τη δημιουργία ενός βασικού προγράμματος παρακολούθησης COVID-19 σε JavaScript. Το API υποστηρίζει πολλά άλλα δεδομένα με τα οποία μπορείτε να εργαστείτε για διαφορετικές χώρες και περιλαμβάνει επίσης δεδομένα για την κάλυψη εμβολίων.

Μπορείτε να χρησιμοποιήσετε ένα ευρύ φάσμα τύπων γραφημάτων billboard.js για να το εμφανίσετε ή μια διαφορετική βιβλιοθήκη γραφημάτων συνολικά. Η επιλογή είναι δική σου!

Πώς να δημιουργήσετε ένα γράφημα με το Chart.js

Η εμφάνιση δυναμικών δεδομένων με JavaScript δεν ήταν ποτέ ευκολότερη.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα