Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. XML

Membangun sebuah aplikasi Deteksi Cuaca AS3 yang berguna dengan Yahoo API

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Muhammad Hakim Almadani (you can also view the original English article)

Dengan bantuan dari tutorial ini Anda akan belajar bagaimana menggunakan Yahoo API cuaca untuk mendapatkan dan ditampilkan Prakiraan cuaca dengan AS3.

Hasil akhir Tinjauan

Mari kita lihat pada hasil akhir yang kita akan bekerja menuju:

Langkah 1: Buat sebuah File baru

Saya mengasumsikan Anda akan menggunakan Flash, meskipun Anda dapat melakukan ini dengan Flex atau standar proyek AS3 .

Buka Flash, pergi ke File > New, pilih File Flash (ActionScript 3.0), kemudian mengatur ukuran sebagai 320x180px dan menyimpan FLA kemanapun Anda inginkan.

Weather Application Step 1

Langkah 2: Buat sebuah dokumen Class

Sekarang pergi ke File > New dan kali ini pilih ActionScript File, kemudian menyimpannya sebagai Weather.as dalam folder yang sama tempat Anda menyimpan file FLA Anda. Kemudian pergi kembali ke FLA Anda, pergi ke Properties dan menulis nama ActionScript file di ruang "Kelas". (Untuk info lebih lanjut tentang cara menggunakan kelas dokumen, baca pengenalan cepat disini.)

Weather Application Step 2Weather Application Step 2

Langkah 3: Mengatur dokumen Class

Pergi ke ActionScript file dan menulis kode untuk kelas dokumen Anda:

Menguji dan itu harus melacak "Ini adalah kelas cuaca Anda" di jendela output.

Langkah 4: Memeriksa Yahoo API cuaca

Mendapatkan diri Anda ke bagian Yahoo Weather API dari Yahoo pengembang situs; di sana Anda akan menemukan beberapa penjelasan tentang Yahoo cuaca API.

Weather Application Step 4

Langkah 5: Meminta XML Anda

Apa yang kita butuhkan untuk membaca di Flash adalah sebuah file XML, jadi kita perlu tahu bagaimana untuk meminta itu, mana cukup sederhana. Anda harus berpikir tentang dimana Anda ingin tahu cuaca dan apa unit (Celcius atau Fahrenheit) Anda ingin suhu. Kemudian, Anda bisa mendapatkan XML dengan data ini melalui URL ini:

Langkah 6: Mendapatkan nomor lokasi

Nomor lokasi harus WOEID. Untuk menemukan WOEID Anda, telusuri untuk kota Anda dari Yahoo Weather home page. WOEID adalah URL halaman ramalan kota itu. Anda juga bisa mendapatkan WOEID dengan memasukkan kode pos Anda pada home page. Misalnya, jika Anda mencari untuk Los Angeles pada cuaca home page, halaman ramalan kota itu adalah: http://weather.yahoo.com/united-states/california/los-angeles-2442047/, jadi WOEID adalah 2442047.

Langkah 7: Memahami XML

Ketika Anda meminta setiap lokasi cuaca, apa yang akan Anda terima adalah XML seperti ini:

(Jika Anda ingin memahami semua XML, silahkan kunjungi http://developer.yahoo.com/weather/.)

Untuk aplikasi ini apa yang kita butuhkan adalah yweather:location tag, yweather:atmosphere tag dan yweather:forecast Tag: tag lokasi akan memberi kita teks untuk lokasi, tag suasana akan memberi kita kelembaban dan tag ramalan akan memberi kita suhu saat ini dan hari berikutnya.

Langkah 8: Menguraikannya

Sekarang bahwa kita memiliki pemahaman yang baik dari semua XML itu, apa yang perlu kita lakukan adalah menetapkan data ke variabel sehingga kita dapat menggunakan data tersebut untuk mengatur aplikasi kita. Untuk itu kita perlu membuat beberapa variabel dan beban XML. Ini adalah bagaimana Anda melakukannya (menempatkan kode di tempat yang relevan di kelas dokumen Anda):

Mari kita pergi ke kode yang bermasalah.

Anda perlu _xmlData variabel untuk didefinisikan di luar semua fungsi (saya sudah didefinisikan sebagai variabel pribadi) karena Anda akan perlu untuk mendapatkan di mana-mana dalam kode, bukan hanya dalam satu fungsi.

Fungsi pertama, loadXML(), banyak XML file ke Flash; Kami menggunakan pendengar acara untuk memeriksa ketika itu selesai, kemudian jalankan loadData().

Fungsi loadData() menetapkan variabel _xmlData yang kami telah membuat data yang diterima. Kami menggunakan namespace karena itulah bagaimana Yahoo memutuskan untuk mendirikan XML mereka (Anda dapat menemukan lebih banyak tentang namespaces di livedocs.adobe.com). Variabel-variabel lainnya dalam fungsi ini ekstrak informasi yang kami ingin menunjukkan di app kami dari XML.

(Untuk informasi lebih lanjut mengenai parsing XML dalam AS3, check out Druid Kepple AS3:101 - XML tutorial.)

Langkah 9: Membuat Text Field

Sekarang kita perlu untuk menampilkan informasi tersebut. Untuk melakukannya, kita bisa membuat bidang teks dalam kode dan menetapkan format dan teks, tapi saya lebih suka menggunakan Flash IDE, untuk menghemat waktu. Jadi mendapatkan kreatif, kita perlu delapan bidang teks: suhu, kelembaban, suhu maksimum dan minimum temp untuk hari ini. Maka kita perlu suhu maksimum dan minimum temp untuk hari berikutnya, satu untuk nama hari berikutnya dan satu lagi yang menunjukkan lokasi. Mereka semua perlu bidang teks dinamis sehingga kami dapat memberikan info.

Jangan lupa untuk memberikan semua textfields Anda nama misalnya; Aku telah memilih suhu, kelembaban, max, min, maxt, mint, besok dan negara.

Weather Application Step 9

Langkah 10: Tampilan Info

Sekarang bahwa kami telah membuat bidang teks, kita perlu untuk menetapkan informasi yang kami retreived dari XML. Untuk itu kita perlu nama contoh masing-masing bidang teks dan info yang kita sudah miliki, seperti ini (menambahkan fungsi loadData() Anda yang sudah ada):

Ingat bidang teks delapan bahwa kita diciptakan? Sekarang kita harus menggunakan nama-nama di sini dalam kode. Pernyataan beralih itu adalah karena kita tidak ingin menunjukkan hanya "Rabu", "Kamis" atau "Jumat", kami ingin nama seluruh.

Langkah 11: Menambahkan Style

Sekarang kita memiliki hanya teks; itu akan menyenangkan untuk menambahkan beberapa ikon tergantung pada cuaca untuk hari itu. Jadi apa yang kita butuhkan adalah untuk membuat atau mencari satu set ikon cuaca dan menetapkan ikon tergantung pada cuaca. Kita dapat memuat satu gambar dari Yahoo, tetapi tidak bahwa bagus sehingga kita akan menemukan kami sendiri. Untuk itu, download set ikon dan impor mereka ke Flash, kemudian ekspor masing untuk ActionScript dengan nama kelas yang sesuai:

Weather Application Step 11

Saya menggunakan ikon dari Garmahis dan dapat didownload dari garmahis.com. Besar terima kasih kepada Garmahis untuk membiarkan kami menggunakannya!

Langkah 12: Menambahkan ikon

Sekarang kita harus memuat ikon benar tergantung pada cuaca kode yang kita miliki dalam XML kami. Seperti nama-nama hari-hari, kita dapat melakukan ini dengan beralih benar-benar besar... tapi pertama kita perlu membuat klip berisi ikon.

Dan sekarang ikon:

Dalam hal ini saya hanya menggunakan ikon 13 namun Anda dapat menggunakan lebih jika Anda inginkan, atau kurang, yang kepada Anda. Hanya ingat, Yahoo menggunakan kode 40, sehingga Anda harus menetapkan mereka untuk ikon. Anda dapat melihat daftar makna semua kode di developer.yahoo.com.

Langkah 13: Menambahkan efek Flip

Yah, kita telah membahas bagian yang sulit; Sekarang mari kita membuatnya tampak bagus. Jika kita ingin menambahkan informasi lebih lanjut atau mengubah lokasi kita akan membutuhkan lebih banyak ruang, sehingga kami akan menempatkan semua yang kami buat menjadi satu klip. Untuk melakukannya, cukup pilih itu semua, tekan F8 (untuk mengubahnya menjadi simbol) dan ekspor simbol baru untuk ActionScript, dengan nama depan kelas. Kemudian menghapusnya dari tahap, menciptakan latar belakang, dan mengubah ini untuk klip dan mengekspornya untuk ActionScript juga, dengan nama kelas kembali.

My Front symbol
My Back symbol

Sekarang mari kita sebut mereka dari file ActionScript kami:

Langkah 14: Mengatur Tween

Kami memiliki klip kami, jadi sekarang kita perlu membuat flip. Untuk melakukan itu kita akan menggunakan perpustakaan Tweener yang dapat Anda temukan di http://code.google.com/p/tweener/. Men-download, dan ekstrak sehingga \caurina\ folder dalam folder yang sama sebagai fla Anda

Untuk proyek ini kita akan menggunakan hanya satu fungsi dari itu: kami akan membuatnya flip menggunakan fungsi turnAround() untuk terlihat keren. Menempatkan kode berikut di tempat yang tepat di kelas dokumen Anda:

Langkah 15: Tambahkan lokasi

Sekarang bahwa kita memiliki lebih banyak ruang di belakang kita dapat menambahkan lebih banyak negara atau info atau apa pun yang Anda inginkan. Secara singkat, saya akan menambahkan lebih banyak lokasi. Apa yang perlu kita lakukan adalah pergi ke Flash dan tekan Ctrl + F7 (Windows) atau Command + F7 (Mac) untuk mengungkapkan komponen panel. Tarik kotak Combo ke perpustakaan Anda, kemudian menambahkan ini ke kelas dokumen Anda:

Langkah 16: menikmati!

Sekarang menikmati aplikasi Anda, tambahkan barang mewah dan kredit (jangan lupa Yahoo!)

Kesimpulan

Sekarang kita memiliki aplikasi cuaca kita saya harap Anda belajar banyak, jika Anda memiliki pertanyaan, hanya meninggalkan komentar.

Saya harap Anda menyukai tutorial ini, terima kasih untuk membaca!

Advertisement
Advertisement
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.