Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. JavaScript
Webdesign

Membuat Aplikasi Cuaca Dengan API DarkSky

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Biyan Pasau (you can also view the original English article)

Membangun untuk web sama menyenangkannya, terutama saat Anda bekerja dengan API untuk menarik data secara dinamis. Beberapa menyebutnya sebagai "aplikasi web" dan yang lain mungkin menyebutnya "halaman web". Apapun kasusnya, kita akan membuat demo untuk menampilkan ramalan cuaca menggunakan DarkSky dan API Google Maps, "sihir" JavaScript dan animasi CSS. Karena ini akan menyenangkan, jadi mari kita mulai!

Catatan: kita tidak akan membahas masalah proses pembuatan, namun Anda memiliki cukup informasi dari ikhtisar ini untuk membangun sesuatu sendiri.

Tip: untuk mengetahui lebih lanjut tentang API dan web, lihat Peningkatan Pentingnya API di Web Development.

Yang akan kita buat

Lihatlah demo. Versi online belum berjalan dengan baik karena Anda perlu menambahkan kunci API untuk itu. Download file sumber dan mari kerjakani!

Weather app demo
Demo Aplikasi Cuaca

DarkSky

DarkSky menawarkan satu dari banyak API yang tersedia untuk informasi cuaca. DarkSky tidak hanya memiliki API yang tersedia untuk pengembang, namun aplikasi ini juga tersedia untuk iOS, Android, dan bahkan jam tangan Apple.

API menyediakan akses ke perkiraan per jam dan harian untuk seminggu kedepan, ramalan hujan "hyperlocal" menit demi menit, peringatan cuaca buruk dari pemerintah, pengamatan puluhan tahun, dukungan banyak bahasa, unit pengukuran dan dokumentasi yang mudah dimengerti. Ada pembiayaan dengan model bayar-hanya-yang-anda-pakai, namun 1.000 perkiraan cuaca pertama setiap hari gratis. Bagian itu penting, terutama jika Anda ingin bereksperimen hanya untuk tujuan demo. Setelah 1.000 ramalan pertama, layanannya menjadi berbayar seharga $0.0001 per ramalan cuaca.

skycons
Skycons

DarkSky juga menyediakan akses ke sejumlah icon ramalan cuaca beranimasi untuk digunakan bersamaan dengan API mereka. Icon di dinamakan Skycons—terinspirasi oleh Climacons—dan dirender menggunakan canvas.

Markup

Setelah Anda mendapatkan kunci API DarkSky pribadi Anda, kita telah siap, tapi sebelum lanjut, kita memerlukan "form", jadi mari kita buat markup-nya terlebih dahulu.

Markup tidak lebih dari sekedar elemen form dengan beberapa item "list" dan "input" di dalamnya. Ini akan menjadi dasar bagi yang kita buat kedepannya.

Inilah hasil markup kita dengan beberapa gaya CSS sederhana untuk menampilkan input dan menambahkan warna background supaya kita bisa melihat markup yang dirender.

Autofill Input

Kita bisa melangkah lebih jauh dari sekedar dua input untuk "garis lintang" dan "bujur". Bagaimana jika seseorang tidak mengetahui koordinat ini? Untuk mengatasi masalah ini, kita akan menambahkan input lain agar pengguna dapat memasukkan dan mengambil perkiraan cuaca yang diminta berdasarkan nama kota—yang kemudian akan mengisi bidang koordinat secara otomatis!

Markup ini saja tidak akan membawa kita pada tujuan mengisi koordinat dengan pencarian kota secara otomatis; Untuk ini kita perlu masuk ke Google Maps API. Sama seperti kita membutuhkan kunci API untuk DarkSky, kita juga memerlukan kunci API untuk Google Maps. Kunci API Google Maps pribadi dapat diperoleh di sini dan tidak disediakan untuk tutorial ini.

Permintaan API Google Maps

Untuk bagian aplikasi ini, kita perlu menyertakan script Google API yang berisi kunci API pribadi Anda di URL.

Script ini adalah panggilan untuk memuat API Google Maps, tapi ada sedikit penjelasan lagi.

Url termasuk parameter &libraries=places,geometry. Layanan "Places" dan "Geometry" adalah seperangkat library mandiri diluar dari API JavaScript Google Maps utama.

Dengan kunci API yang terdaftar untuk Google Maps, kita dapat mulai dengan membuat JavaScript untuk kolom pencarian yang akan menampilkan kota saat pengguna mengetik.

Untuk menampilkan penelusuran kota saat pengguna mengetik, kita akan menggunakan Kotak Pencarian Tempat (Places Search Box).

Argumen SearchBox() akan diteruskan ke input pencarian yang telah kita buat tadi.

Sejauh ini baik, tapi kita masih perlu melampirkan "event listener" jadi JavaScript kita sadar akan apa yang sedang terjadi.

Argumen places_changed adalah event yang dijalankan saat PlaceResult tersedia untuk kota/lokasi yang dipilih pengguna. Dokumentasi lengkap untuk Google Maps JavaScript API V3 juga tersedia untuk referensi.

Logic (Logika)

Kita berada di tempat yang bagus pada saat ini jadi mari kita membuat beberapa logika untuk masuk ke dalam fungsi event listern dari kolom pencarian.

Dengan variabel yang didefinisikan bernama locale untuk menyimpan lokasi kita, Anda mungkin memperhatikan nilai yang dilewati searchBox.getPlaces()[0]. Metode ini adalah keajaiban yang akan membantu mengotomasi koordinat berdasarkan kota yang dipilih (yang pertama) atau dengan kata lain mengembalikan query yang dipilih oleh pengguna.

Bagian terakhir adalah mengisi otomatis koordinat berdasarkan kota yang dipilih dan menempatkannya di bawah variabel locale kita dalam fungsi event listener yang baru saja kita tulis.

Kedua jalur ini menetapkan "value" dari input koordinat kita dan menggunakan properti geometry dan location yang disediakan oleh place.

Jika Anda mau, bahkan ada cara melalui kelas CSS yang disediakan untuk memodifikasi "autocomplete" dan widget kolom pencarian.

Permintaan Ramalan Cuaca

Agar bisa berinteraksi dengan DarkSky Anda harus mendaftar akun untuk mendapatkan kunci API.

URL permintaan perkiraan cuaca sangat mudah dibaca untuk developer. Colokkan kunci Anda, masuki koordinat, dan Anda siap untuk menarik data.

Hasil dari DarkSky dikembalikan sebagai JSON (JavaScript Object Notation) jadi saat membuat permintaan Anda harus menggunakan metode getJSON.

Dalam code diatas, saya menggunakan jQuery karena sederhana. Argumen forecast akan menjadi representasi dari hasil yang dikembalikan

Menggunakan console.log akan melaporkan objek yang mewakili data API DarkSky. Seperti yang dapat Anda lihat ada beberapa pilihan dalam hal informasi yang dapat diambil.

Skycons

Untuk memulai dan menggunakan Skycons kita perlu menulis sebuah fungsi menggunakan JavaScript:

Metode untuk Skycons Anda harus ditempatkan di dalam permintaan getJSON yang telah kita tulis sebelumnya. Fungsi ini akan membuat dan melampirkan ikon animasi kita untuk ramalan cuca yang dibuat secara dinamis; Detail yang tidak didokumentasikan oleh Skycons.

Hasil Akhir

Menggabungkan semua hasil kerja keras ini dalam aplikasi cuaca yang berfungsi dikombinasikan dengan segala macam sihir seperti array JavaScript, loop, pemunculan API, interaksi dan gerak. Semua aspek dan keterampilan yang dibutuhkan untuk membangun aplikasi yang hebat.

Saya sangat menyarankan Anda untuk membaca dengan teliti proyek demo yang disediakan. Setiap baris telah diberi komentar lengkap untuk membantu Anda memahami maksud setiap baris kode. Saya berharap komentar dan upaya gabungan untuk membuat demo ini membantu memperluas keterampilan Anda dan mengilhami Anda untuk membuat demo praktik Anda sendiri dengan API apa pun yang Anda pilih.

Mungkin Anda akan memilih untuk membangun Aplikasi Dribbble, aplikasi Envato, atau bahkan aplikasi CodePen. Apa pun itu, luangkan waktu untuk menciptakan sesuatu untuk Anda sendiri dan ingat untuk berlatih, berlatih, berlatih!

Sumber daya

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.