Δημιουργία εφαρμογής καιρού

Την περασμένη εβδομάδα αντιμετώπισα το πρόγραμμα Free Code Camp's Show the Local Weather, το οποίο περιελάμβανε τη δημιουργία μιας εφαρμογής που έδειχνε τον καιρό όπου κι αν ήταν ο χρήστης.

Έπρεπε να εφαρμόσω τις ακόλουθες ιστορίες χρηστών:

  • Ο χρήστης μπορεί να δει τον καιρό στην τρέχουσα τοποθεσία του.
  • Ο χρήστης μπορεί να αλλάξει τη μονάδα θερμοκρασίας (Κελσίου ή Φαρενάιτ).
  • Το εικονίδιο καιρού ή η εικόνα φόντου θα αλλάξουν ανάλογα με τις καιρικές συνθήκες.

Αποφάσισα να το προχωρήσω λίγο προσθέτοντας μια ακόμη ιστορία χρήστη

  • Ο χρήστης μπορεί να αναζητήσει πληροφορίες καιρού για άλλα μέρη.

Σχέδιο

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

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

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

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

Ως συνήθως, έβαλα τα πάντα στο Workflowy μου.

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

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

Λογική

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

Ο ευκολότερος τρόπος για να γίνει αυτό ήταν να χρησιμοποιήσετε το HTML5 Geolocation API, το οποίο ήταν αρκετά απλό, το είχε ήδη καλύψει στην ενότητα JSON και API του προγράμματος σπουδών.

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

if (navigator.geolocation) {
 //Return the user's longitude and latitude on page load using HTML5 geolocation API
 window.onload = function () { var currentPosition; function getCurrentLocation (position) { currentPosition = position; latitude = currentPosition.coords.latitude; longitude = currentPosition.coords.longitude;
 //AJAX request
 $.getJSON("//api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=******************", function (data) { var rawJson = JSON.stringify(data); var json = JSON.parse(rawJson); updateWeather(json); //Update Weather parameters }); }
 navigator.geolocation.getCurrentPosition(getCurrentLocation);
 };

Το Open Weather API μου έδωσε έναν τρόπο να ενημερώσω την τοποθεσία, τη θερμοκρασία και την περιγραφή του καιρού, αλλά έπρεπε ακόμη να βρω έναν τρόπο να ενημερώσω την τοπική ώρα. Μετά από λίγη αναζήτηση βρήκα ένα άλλο API στο Geonames.org που το φρόντισε.

$.getJSON('//api.geonames.org/timezoneJSON?lat=' + latitude + '&lng=' + longitude + '&username=ayoisaiah', function(timezone) { var rawTimeZone = JSON.stringify(timezone); var parsedTimeZone = JSON.parse(rawTimeZone); var dateTime = parsedTimeZone.time; timeFull = dateTime.substr(11); $(".local-time").html(timeFull); //Update local time timeHour = dateTime.substr(-5, 2); });

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

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

//Update Weather animation based on the returned weather description
 var weather = json.weather[0].description;
 if(weather.indexOf("rain") >= 0) { skycons.set("animated-icon", Skycons.RAIN); }
 else if (weather.indexOf("sunny") >= 0) { skycons.set("animated-icon", Skycons.CLEAR_DAY); }

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

Μπορείτε να ελέγξετε τον πλήρη κώδικα και τα εφέ στο Codepen.

Key takeaway

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

Τι έπεται…

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

Αν θέλετε να επικοινωνήσετε μαζί μου ή να επικοινωνήσετε μαζί μου, μπορείτε να με βρείτε στο Twitter ή να μου στείλετε email. Ευχαριστώ για την ανάγνωση.