Πώς να αξιοποιήσετε το Weather API του Yahoo!

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

Μετά από κάποια εκτεταμένη έρευνα, ανακάλυψα ότι το καλύτερο σημείο εκκίνησης για αυτό είναι το API του Yahoo! Weather, επειδή δίνει τις καιρικές συνθήκες σε συνεπή και χρησιμοποιήσιμη μορφή. Εκείνη την εποχή, όμως, ο μόνος τρόπος για να αντιπροσωπεύσει πραγματικά τον καιρό σε έναν ιστότοπο ήταν η χρήση του Flash. Ο χρόνος ανάπτυξης από μόνη της ήταν αρκετός για να τρομάξει την ιδέα από το μυαλό των διευθυντών της εταιρείας και ποτέ δεν πέρασε το στάδιο της σύλληψης.

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

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

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

Ωστόσο, τόσο καλά όσο τα δεδομένα της Yahoo, ήταν εξίσου ακριβή με τη θέση που την μπορούσαμε να την τροφοδοτήσουμε από τον ιστότοπο και εξαιτίας των αδυναμιών του Internet Explorer της Microsoft, δεν μπορούσαμε να χρησιμοποιήσουμε τη γεωγραφική θέση για να ανακτήσουμε μια ακριβή τοποθεσία για όλους που περιηγούνται στον ιστότοπο. Επομένως, έπρεπε να επιλύσουμε το επόμενο καλύτερο πράγμα και να χρησιμοποιήσουμε τον ιστότοπο IPInfoDB για να ανακτήσουμε το πλησιέστερο κεφάλαιο ή τη πλησιέστερη μεγάλη πόλη, βάσει της διεύθυνσης IP του χρήστη.

Σε όλες τις Ηνωμένες Πολιτείες, αυτό συνήθως έχει ως αποτέλεσμα την πρωτεύουσα της οποίας κατοικεί το άτομο που κοιτάζει τον ιστότοπο. Εδώ στο Ηνωμένο Βασίλειο, αθετεί το Λονδίνο, ανεξάρτητα από το πού βρίσκεται το Ηνωμένο Βασίλειο. ελπίζουμε ότι η Microsoft θα καλύψει μια μέρα το υπόλοιπο του κόσμου του προγράμματος περιήγησης και θα μας επιτρέψει να χρησιμοποιήσουμε τη γεωγραφική θέση.

Χρησιμοποιώντας τη διεύθυνση IP του χρήστη και εισάγοντάς τον στο IPInfoDB, μπορέσαμε να προβάλουμε τη χώρα, την πολιτεία ή την επαρχία και την πόλη ή την πόλη του ατόμου που είδε τον ιστότοπο. Η τοποθέτηση αυτού του στοιχείου στο API Yahoo μας έδωσε τον καιρό για τη συγκεκριμένη τοποθεσία.

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

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

Αφήστε το χιόνι, αφήστε το χιόνι, αφήστε το χιόνι ...

Αυτή είναι η θεωρία. Τώρα, για το πώς έγινε αυτό.

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

$weatherarray[0]=array('tornado',3,3,5,3);$weatherarray[1]=array('tropical storm',3,3,5,3);$weatherarray[2]=array('hurricane',3,2,4,3);$weatherarray[3]=array('severe thunderstorms',3,3,5,3);$weatherarray[4]=array('thunderstorms',3,2,5,2);$weatherarray[5]=array('mixed rain and snow',2,1,1,0);$weatherarray[6]=array('mixed rain and sleet',2,1,1,0);$weatherarray[7]=array('mixed snow and sleet',2,1,2,0);$weatherarray[8]=array('freezing drizzle',1,1,1,0);$weatherarray[9]=array('drizzle',1,1,0,0);$weatherarray[10]=array('freezing rain',1,2,1,0);$weatherarray[11]=array('showers',2,2,0,0);$weatherarray[12]=array('showers',2,2,0,0);$weatherarray[13]=array('snow flurries',1,0,2,1);$weatherarray[14]=array('light snow showers',1,0,2,1);$weatherarray[15]=array('blowing snow',1,0,2,2);$weatherarray[16]=array('snow',1,0,2,0);$weatherarray[17]=array('hail',1,0,4,0);$weatherarray[18]=array('sleet',1,1,4,0);$weatherarray[19]=array('dust',0,0,0,5);$weatherarray[20]=array('foggy',0,0,0,4);$weatherarray[21]=array('haze',0,0,0,5);$weatherarray[22]=array('smoky',0,0,0,5);$weatherarray[23]=array('blustery',1,0,0,2);$weatherarray[24]=array('windy',1,0,0,2);$weatherarray[25]=array('cold',1,0,0,0);$weatherarray[26]=array('cloudy',2,0,0,0);$weatherarray[27]=array('mostly cloudy (night)',1,0,0,0);$weatherarray[28]=array('mostly cloudy (day)',1,0,0,0);$weatherarray[29]=array('partly cloudy (night)',1,0,0,0);$weatherarray[30]=array('partly cloudy (day)',1,0,0,0);$weatherarray[31]=array('clear (night)',0,0,0,0);$weatherarray[32]=array('sunny',0,0,0,0);$weatherarray[33]=array('fair (night)',0,0,0,0);$weatherarray[34]=array('fair (day)',0,0,0,0);$weatherarray[35]=array('mixed rain and hail',1,1,4,1);$weatherarray[36]=array('hot',0,0,0,0);$weatherarray[37]=array('isolated thunderstorms',3,2,5,2);$weatherarray[38]=array('scattered thunderstorms',3,2,5,2);$weatherarray[39]=array('scattered thunderstorms',3,2,5,2);$weatherarray[40]=array('scattered showers',3,2,0,2);$weatherarray[41]=array('heavy snow',1,0,3,0);$weatherarray[42]=array('scattered snow showers',1,0,2,0);$weatherarray[43]=array('heavy snow',1,0,3,0);$weatherarray[44]=array('partly cloudy',1,0,0,0);$weatherarray[45]=array('thundershowers',3,2,5,2);$weatherarray[46]=array('snow showers',1,0,2,0);$weatherarray[47]=array('isolated thundershowers',3,2,5,2);$weatherarray[3200]=array('not available',0,0,0,0);

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

switch ( $effect1) {case 0:$weathercode.= 'jQuery('#rain').css("opacity", "0.0");';break;case 1:$weathercode.= 'jQuery('#rain').css("opacity", "0.10");';break;case 2:$weathercode.= 'jQuery('#rain').css("opacity", "0.30");';break;case 3:$weathercode.= 'jQuery('#rain').css("opacity", "0.50");';break;}

Προσοχή στο φεγγάρι

Περπατήσαμε, μάλλον ευτυχώς, από τους υπολογισμούς για τον κύκλο των φεγγαριών Το blog του Stephen A. Zarkos . Σύμφωνα με την επιθυμία μας να διατηρήσουμε τις εικόνες στο ελάχιστο, η φάση της σελήνης έγινε με ένα φύλλο εικονοστοιχείων που δείχνει 10 διαφορετικές φάσεις της σελήνης. Χρησιμοποιώντας τους υπολογισμούς του Zarkos, ο ακόλουθος κώδικας επιλέγει το σωστό μέρος του φύλλου εικονοστοιχείων για εμφάνιση, διασφαλίζοντας ότι ο σωστός κύκλος φεγγαριού εμφανίζεται πάντα στον ιστότοπό μας.

background-position: px 0;

Παρακολουθήστε το ηλιοβασίλεμα σε πραγματικό χρόνο

Το τελευταίο μέρος του έργου και το πιο οπτικά συναρπαστικό είναι το ηλιοβασίλεμα και η ανατολή του ήλιου σε πραγματικό χρόνο. Όπως αναφέρθηκε, αυτό χρησιμοποιεί το μήκος και το γεωγραφικό πλάτος της πλησιέστερης πρωτεύουσας του ατόμου που βλέπει τον ιστότοπο για να προβάλει τις ηλιοβασιλέματα και τις ανατολικές ώρες για αυτούς. Αυτό σημαίνει ότι κάποιος που κοιτάζει την ιστοσελίδα στο Λος Άντζελες θα δει τον ήλιο να ανέβει και να τεθεί τρεις ώρες μετά από κάποιον που κοιτάζει τον ίδιο ιστότοπο στη Νέα Υόρκη.

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

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

jQuery('#daytime').fadeOut(200000, 'linear', function() {jQuery('#sill').fadeOut(100000, 'linear', function() {});jQuery('#sunset').fadeOut(100000, 'linear', function() {});});   

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

Μπορείτε να δείτε τον κώδικα σε δράση στο Ενεργοποιήστε την τοποθεσία Web .

Οι προβλέψεις μας για το αύριο

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

Το πρώτο είναι κάτι που μόλις προσθέσαμε. μια ρύθμιση τοποθεσίας βάσει cookie, με την οποία ο επισκέπτης στον ιστότοπο μπορεί να κάνει ακριβέστερη την εμφάνιση του καιρού εισάγοντας τον κωμόπολη, την πόλη ή τον ταχυδρομικό κώδικα για να ανακτήσει συγκεκριμένες πληροφορίες για τον καιρό για την περιοχή του. Αυτό ήταν πραγματικά πολύ εύκολο να γίνει, καθώς το API Weather API δέχεται ταχυδρομικούς κώδικες και πόλεις ως εισροές και εξοικονομεί κλήση στο iponfodb.com. Έχουμε δοκιμάσει αυτό με διάφορες πόλεις από όλο τον κόσμο, από όσο πιο μακριά από τον Βόρειο Καναδά μέχρι τα νησιά Αντίποδες στα ανοικτά των ακτών της Νέας Ζηλανδίας - έτσι μπορείτε να δείτε ποιος είναι ο καιρός σε ολόκληρο τον κόσμο.

Το δεύτερο χαρακτηριστικό που θα παρουσιάσουμε στο νέο έτος είναι ένα κουτί ελέγχου, ώστε οι επισκέπτες να μπορούν να εφαρμόσουν τα καιρικά φαινόμενα όπως κρίνουν κατάλληλα, έτσι ώστε να μπορούν να παρατηρηθούν συνδυασμοί διαφορετικών τύπων καιρού ανεξάρτητα από τον πραγματικό καιρό. Για παράδειγμα, οι επισκέπτες θα είναι σε θέση να αυξήσουν την ένταση της βροχής από 0% σε 100% σε αυξήσεις 10%. Αυτό θα περιλαμβάνει επίσης μια σκανδάλη για το ηλιοβασίλεμα και την ανατολή του ηλίου, οπότε όλοι μπορούν να παίξουν στο να είναι Ed Harris από το The Truman Show και να δημιουργήσουν μια ανατολή όταν θέλουν.

Χρησιμοποιήσατε το API του Weather Yahoo!; Τι κατασκευάσατε με αυτό; Ενημερώστε μας στα σχόλια παρακάτω.

Προτεινόμενη εικόνα / μικρογραφία, εικόνα καιρού μέσω Shutterstock.