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

Membuat Aplikasi Cuaca di Android

Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Final product image
What You'll Be Creating

Banyak aplikasi cuaca populer di Google Play penuh dengan iklan, memerlukan terlalu banyak izin, atau menyertakan fitur yang kebanyakan tidak pernah kita gunakan. Bukankah lebih bagus lagi jika Anda bisa membuat aplikasi cuaca Anda sendiri dari awal?

Dalam tutorial ini, saya akan menunjukkan caranya. Aplikasi kita akan memiliki antarmuka pengguna yang sederhana dan minimalis, menunjukkan kepada pengguna apa yang perlu diketahui tentang kondisi cuaca saat ini. Mari kita mulai.

1. Prasyarat

Sebelum melanjutkan, periksa kembali apakah Anda sudah menyiapkannya:

  • Eclipse ADT Bundle: Anda dapat mengunduhnya di situs pengembang Android.
  • Kunci API OpenWeatherMap: Ini tidak diperlukan untuk menyelesaikan tutorial, tapi gratis. Anda bisa mendapatkannya dengan mendaftar di situs OpenWeatherMap.
  • Ikon: Saya sarankan Anda mengunduh font ikon cuaca yang dibuat oleh Erik Flowers. Anda perlu mengunduh file TTF, karena kami akan menggunakannya di aplikasi asli. Kita akan menggunakan font untuk me-render berbagai ikon tergantung pada kondisi cuaca.

2. Membuat Sebuah Proyek Baru

Saya akan memanggil aplikasi ini SimpleWeather, tapi jangan ragu untuk memberikan nama yang Anda suka. Masukkan nama paket yang unik, setel SDK minimum yang diperlukan ke Android 2.2, dan tetapkan target SDK ke Android 4.4. Anda bisa meninggalkan tema di Holo Dark.

Create a new Android Application

Aplikasi ini hanya akan memiliki satu Activity dan akan didasarkan pada template Blank Activity seperti yang ditunjukkan di bawah ini.

Create a new activity

Namakan Activity tersebut WeatherActivity. Kita akan menggunakan Fragment di dalam Activity ini. Layout yang terkait dengan Activity adalah activity_weather.xml. Layout yang terkait dengan Fragment adalah fragment_weather.xml.

The Activity details screen

3. Menambahkan Font Kustom

Salin weathericons-regular-webfont.ttf ke direktori assets/fonts proyek Anda dan ubah namanya menjadi weather.ttf.

4. Edit Manifest-nya

Satu-satunya izin yang dibutuhkan aplikasi ini adalah android.permission.INTERNET.


Agar tutorial ini tetap sederhana, kami hanya akan mendukung mode portrait. Node activity dari manifest harus terlihat seperti ini:

5. Edit Layout Activity

Tidak banyak perubahan dalam activity_weather.xml. Seharusnya sudah memiliki FrameLayout. Tambahkan properti tambahan untuk mengubah warna background menjadi #FF0099CC.

6. Edit Layout Fragment

Edit fragment_weather.xml dengan menambahkan lima tag TextView untuk menampilkan informasi berikut:

  • kota dan negara
  • suhu saat ini
  • sebuah ikon yang menunjukkan kondisi cuaca saat ini
  • sebuah cap waktu yang memberitahu pengguna saat informasi cuaca terakhir diperbarui
  • informasi lebih rinci tentang cuaca saat ini, seperti deskripsi dan kelembaban

Gunakan RelativeLayout untuk mengatur tampilan teks. Anda bisa mengatur textSize agar sesuai dengan berbagai perangkat.

7. Edit strings.xml

File ini berisi string yang digunakan di aplikasi kita serta kode karakter Unicode yang akan kita gunakan untuk me-render ikon cuaca. Aplikasi ini akan mampu menampilkan delapan jenis kondisi cuaca. Jika Anda ingin menangani lebih banyak, maka lihatlah lembar contekan ini. Tambahkan yang berikut ini ke values/strings.xml:

8. Menambahkan Item Menu

Pengguna akan bisa memilih kota yang ingin mereka lihat. Edit menu/weather.xml dan tambahkan item untuk pilihan ini.

Sekarang semua file XML siap digunakan, mari kita lanjutkan dan melakukan kueri API OpenWeatherMap untuk mengambil data cuaca.

9. Mengambil Data dari OpenWeatherMap

Kita bisa mendapatkan rincian cuaca terkini dari setiap kota yang diformat sebagai JSON menggunakan API OpenWeatherMap. Dalam string kueri, kita meneruskan nama kota dan sistem metrik yang seharusnya masuk ke dalamnya.

Misalnya, untuk mendapatkan informasi cuaca saat ini untuk Canberra, dengan menggunakan sistem metrik, kita mengirim permintaan ke http://api.openweathermap.org/data/2.5/weather?q=Canberra&units=metric

Tanggapan yang kita dapatkan dari API terlihat seperti ini:

Buat kelas Java baru dan beri nama RemoteFetch.java. Kelas ini bertanggung jawab untuk mengambil data cuaca dari API OpenWeatherMap.

Kami menggunakan kelas HttpURLConnection untuk melakukan permintaan jarak jauh. API OpenWeatherMap mengharapkan kunci API di header HTTP bernama x-api-key. Ini ditentukan dalam permintaan kami dengan menggunakan metode setRequestProperty.

Kami menggunakan BufferedReader untuk membaca respons API ke StringBuffer. Bila kita memiliki respon yang lengkap, kita mengubahnya menjadi objek JSONObject.

Seperti yang dapat Anda lihat dalam respon di atas, data JSON berisi field bernama cod. Nilainya 200 jika permintaan itu berhasil. Kami menggunakan nilai ini untuk memeriksa apakah respon JSON memiliki informasi cuaca saat ini atau tidak.

Kelas RemoteFetch.java akan terlihat seperti ini:

10. Menyimpan Kota sebagai Preferensi

Pengguna tidak perlu menentukan nama kota setiap kali mereka ingin menggunakan aplikasi. Aplikasi ini akan mengingat kota terakhir yang diminati pengguna. Kami melakukan ini dengan memanfaatkan SharedPreferences. Namun, alih-alih mengakses preferensi ini secara langsung dari kelas Activity kami, lebih baik membuat kelas terpisah untuk tujuan ini.

Buat kelas Java baru dan beri nama CityPreference.java. Untuk menyimpan dan mengambil nama kota, buat dua metode setCity dan getCity. Objek SharedPreferences diinisialisasi dalam constructor. Kelas CityPreference.java akan terlihat seperti ini:

11. Membuat Fragment

Buat kelas Java baru dan beri nama WeatherFragment.java. Fragment ini menggunakan fragment_weather.xml sebagai layout-nya. Deklarasikan lima objek TextView dan menginisialisasi mereka dalam metode onCreateView. Deklarasikan objek Typeface baru bernama weatherFont. Objek TypeFace akan menunjuk ke font web yang Anda unduh dan disimpan di folder assets/fonts.

Kita akan menggunakan Thread terpisah untuk secara asinkron mengambil data dari API OpenWeatherMap. Kita tidak dapat memperbarui antarmuka pengguna dari thread latar belakang tersebut. Karena itu kita membutuhkan objek Handler, yang kita inisialisasi pada constructor dari kelas WeatherFragment.

Inisialisasi objek WeatherFont dengan memanggil createFromAsset pada kelas Typeface. Kita juga meminta metode updateWeatherData di onCreate.

Di updateWeatherData, kita memulai thread baru dan memanggil getJSON di kelas RemoteFetch. Jika nilai yang dikembalikan oleh getJSON adalah null, kita menampilkan pesan kesalahan kepada pengguna. Jika tidak, kita memanggil metode renderWeather.

Hanya Thread utama yang diizinkan memperbarui antarmuka pengguna aplikasi Android. Memanggil Toast atau renderWeather langsung dari thread latar belakang akan menyebabkan kesalahan runtime. Itulah sebabnya kita memanggil metode ini menggunakan metode post dari handler.

Metode renderWeather menggunakan data JSON untuk memperbarui objek TextView. Node weather dari respon JSON adalah array data. Dalam tutorial ini, kita hanya akan menggunakan elemen pertama dari array data cuaca.

Pada akhir metode renderWeather, kita meminta setWeatherIcon dengan id dari cuaca saat ini dan juga saat matahari terbit dan terbenam. Menetapkan ikon cuaca sedikit rumit, karena API OpenWeatherMap mendukung lebih banyak kondisi cuaca daripada yang bisa kita dukung dengan font web yang kita gunakan. Untungnya, id cuaca mengikuti pola, yang bisa Anda baca lebih lanjut di situs OpenWeatherMap.

Ini adalah bagaimana kita memetakan id cuaca ke ikon:

  • kode cuaca di kisaran 200 terkait dengan badai petir, yang berarti kita dapat menggunakan R.string.weather_thunder untuk ini
  • kode cuaca di kisaran 300 terkait dengan gerimis dan kami menggunakan R.string.weather_drizzle untuk ini
  • kode cuaca di kisaran 500 menandakan hujan dan kita menggunakan R.string.weather_rain untuk mereka
  • dan seterusnya ...

Kita menggunakan waktu matahari terbit dan terbenam untuk menampilkan matahari atau bulan, tergantung pada waktu saat ini dan hanya jika cuaca cerah.

Tentu saja, Anda dapat menangani lebih banyak kondisi cuaca dengan menambahkan lebih banyak pernyataan case ke pernyataan switch dari metode setWeatherIcon.

Akhirnya, tambahkan metode changeCity ke fragment agar pengguna memperbarui kota saat ini. Metode changeCity hanya akan dipanggil dari class Activity utama.

12. Mengedit Activity

Selama penyiapan proyek, Eclipse mengisi WeatherActivity.java dengan beberapa kode boilerplate. Ganti implementasi default metode onCreate dengan yang di bawah ini dimana kita menggunakan WeatherFragment. Metode onCreate akan terlihat seperti ini:

Selanjutnya, edit metode onOptionsItemSelected dan atur satu-satunya pilihan menu yang kita miliki. Yang harus Anda lakukan di sini adalah memanggil metode showInputDialog.

Dalam metode showInputDialog, kita menggunakan AlertDialog.Builder untuk membuat objek Dialog yang meminta pengguna untuk memasukkan nama sebuah kota. Informasi ini diteruskan ke metode changeCity, yang menyimpan nama kota menggunakan kelas CityPreference dan memanggil metode ChangeCity dari Fragment.

Aplikasi cuaca Anda sekarang sudah siap. Build proyeknya dan kirimkan ke perangkat Android untuk pengujian.

The app running on a tablet

Kesimpulan

Anda sekarang memiliki aplikasi cuaca yang berfungsi penuh. Jangan ragu untuk mengeksplorasi API OpenWeatherMap untuk lebih meningkatkan aplikasi Anda. Anda mungkin juga ingin menggunakan lebih banyak ikon cuaca, karena saat ini kami hanya menggunakan sebagian kecil dari mereka.

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.