Membangun Aplikasi Cuaca

Minggu lalu saya menangani projek Free Code Camp's Show the Local Weather, yang melibatkan pembinaan aplikasi yang memaparkan cuaca di mana sahaja pengguna berada.

Saya terpaksa melaksanakan kisah pengguna berikut:

  • Pengguna dapat melihat cuaca di lokasi sekarang.
  • Pengguna boleh menukar unit suhu (Celsius atau Fahrenheit).
  • Ikon cuaca atau gambar latar akan berubah bergantung pada keadaan cuaca.

Saya memutuskan untuk melangkah lebih jauh dengan menambahkan satu lagi kisah pengguna

  • Pengguna boleh mencari maklumat cuaca di tempat lain.

Reka bentuk

Saya mempunyai banyak idea untuk reka bentuk aplikasi ini dan saya melihat beberapa projek yang telah siap (tanpa memeriksa kod mereka, tentu saja) dari masyarakat untuk melihat apa yang dipaparkan oleh orang lain dalam aplikasinya dan bagaimana rupanya.

Membuat susun atur terakhir agak rumit tetapi saya merasa sangat berguna untuk menentukan elemen yang ingin saya paparkan untuk pengguna dan membina dari sana.

Menjaga perkara yang sederhana adalah tujuannya di sini. Saya memutuskan untuk menunjukkan perihalan suhu dan cuaca sahaja selain waktu tempatan.

Saya juga menyukai ikon cuaca animasi dalam projek contoh dan merasakan gambaran cuaca yang lebih baik daripada gambar latar jadi saya mahu menerapkannya ke dalam aplikasi saya.

Seperti biasa, saya meletakkan semuanya di Alur Kerja saya.

Menyiapkan semuanya cukup lurus ke hadapan kecuali mencari set ikon animasi yang sesuai. Saya terpaksa mencari sedikit sebelum menjumpai Skycons yang akhirnya saya gunakan.

Perkara lain yang saya hadapi ialah mencari skema warna yang baik untuk aplikasi ini, dan ini adalah sesuatu yang hampir selalu saya hadapi. Saya bereksperimen dengan pelbagai kombinasi sebelum mendarat produk akhir.

Logik

Setelah melihat contoh tindak balas API dari Open Weather, saya fikir saya perlu mendapatkan garis bujur dan garis lintang pengguna untuk dapat menyampaikan maklumat cuaca semasa memuatkan halaman.

Cara termudah untuk melakukan ini adalah dengan menggunakan HTML5 Geolocation API yang cukup mudah dan telah dilampirkan di bahagian JSON dan API kurikulum.

Saya menyimpan nilai yang dikembalikan dalam pemboleh ubah yang sudah dinyatakan dan menggunakannya untuk membuat permintaan 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 memberi saya cara untuk mengemas kini lokasi, suhu dan keterangan cuaca tetapi saya masih perlu mencari cara untuk mengemas kini waktu tempatan. Setelah sedikit mencari, saya menemui API lain di Geonames.org yang menguruskan perkara ini.

$.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); });

Perkara terakhir yang saya lakukan ialah mengemas kini ikon cuaca mengenai keadaan di lokasi pengguna atau bandar yang menarik. Saya memutuskan cara yang baik untuk melakukan ini adalah dengan memeriksa keterangan cuaca dan menukar ikon berdasarkan itu.

Oleh itu, saya mempertimbangkan beberapa senario yang mungkin seperti langit cerah, awan, salji, cerah, hujan dan lain-lain dan menulis sekumpulan pernyataan bersyarat untuk memeriksa sama ada perihalan cuaca mengandungi salah satu kata kunci dan kemudian mengemas kini ikon cuaca.

//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); }

Saya telah menemui, melalui pelbagai ujian, bahawa kaedah ini tidak 100% sangat mudah tetapi ia cukup berkesan untuk saya terus menggunakannya.

Anda boleh melihat kod penuh dan kesan pada Codepen.

Pengambilan kunci

Hasil utama saya dari projek ini ialah saya belajar mengakses setiap bahagian data JSON yang dikembalikan dari respons API dan menggunakannya dengan cara yang berbeza. Walaupun metodologi saya memerlukan beberapa penyempurnaan, ia pasti akan menjadi lebih baik dengan lebih banyak latihan.

Apa yang akan datang…

Projek seterusnya untuk saya ialah aplikasi Wikipedia Viewer. Saya sudah hampir separuh ketika saya menulis artikel ini sehingga artikel ini harus disiapkan selewat-lewatnya pada hari Khamis.

Sekiranya anda ingin menghubungi atau berhubung dengan saya, anda boleh menemui saya di Twitter atau menghantar e-mel kepada saya. Terima kasih untuk membaca.