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

Membuat aplikasi cuaca Mars menggunakan Volley

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called An Introduction to Volley.
An Introduction to Volley

Indonesian (Bahasa Indonesia) translation by Sandi Muamar (you can also view the original English article)

Final product image
What You'll Be Creating

Pengenalan

Dalam tutorial ini, saya akan menunjukkan Anda mungkin menggunakan kasus apa yang kita pelajari di artikel sebelumnya tentang Volley. Kita akan membuat aplikasi cuaca untuk Mars, menggunakan informasi yang dikumpulkan oleh Curiosity rover, yang dibuat tersedia untuk semua orang oleh NASA melalui API {MAAS}.

Pertama, kita akan mengatur proyek di Android Studio dan desain user interface. Kami kemudian akan struktur inti dari aplikasi yang menggunakan Volley. Karena setiap aplikasi yang indah memiliki beberapa gambar, saya akan menunjukkan kepada Anda bagaimana untuk mengambil satu acak menggunakan Flickr API. Kami akan men-download gambar dengan Volley, sebagian besar karena sistem caching yang keren. Akhirnya, kita akan menambahkan beberapa rincian yang mewah untuk memberikan aplikasi yang cantik tampilan dan nuansa.

1. proyek Setup

Pertama, membuat proyek baru di Android Studio. Karena Volley backward compatible, Anda dapat memilih tingkat API apa pun yang Anda inginkan. Aku memilih untuk API 21, tetapi Anda harus halus selama sebagai tingkat API adalah 8 (Froyo) atau lebih tinggi.

Langkah 1: User Interface

Aplikasi kami memiliki acitivty, tunggal sederhana. Anda dapat menyebutnya MainActivity.java, seperti yang disarankan oleh Android Studio. Buka layout editor dan klik dua kali activity_main.xml.

Karena kami ingin memiliki sekitar 70% dari layar yang didedikasikan untuk gambar dan sisanya untuk informasi cuaca, kita perlu menggunakan XML atribut layout_weight. Tentu saja, kita dapat menggunakan nilai-nilai mutlak juga, tapi itu tidak akan sama. Sayangnya, fitur-fitur Android world menampilkan yang apa-apa tapi homogen, dan menentukan nilai mutlak untuk tinggi gambar dapat menyebabkan rasio 90-10 pada perangkat sangat kecil dan 70-30, atau bahkan relasi 60-40, pada perangkat yang lebih besar. layout_weight atribut adalah apa yang Anda butuhkan untuk memecahkan masalah inil

Di dalam first child Tambahkan ImageView:

Dalam RelativeLayout kedua, kami menambahkan daftar item TextView. Dua dari mereka yang dilihat di mana suhu rata-rata dan suasana opacity ditampilkan. Yang ketiga adalah label kesalahan.

Tata letak sekarang harusnya lengkap. Anda dapat menambahkan rincian lebih lanjut jika Anda inginkan, tapi user interface yang kompleks dan rinci yang tidak dalam cakupan tutorial ini.

Langkah 2: Tema dan Permission

Ada dua hal lagi yang kita perlu untuk mengurus sebelum memulai untuk menggali ke dalam inti aplikasi. Mengubah tema warisan aplikasi untuk android:Theme.Material.Light.NoActionBar. Ini berarti bahwa kita tidak perlu menyembunyikan action bar pada run time.

Akhirnya, tambahkan permission internet ke proyek manifest.

2. aplikasi inti

Langkah 1: Impor Volley

Seperti yang kita bahas di artikel sebelumnya, cara yang paling sederhana dan paling dapat diandalkan untuk menggunakan Volley adalah dengan mengimpor perpustakaan sebagai modul baru. Men-download kode sumber Perpustakaan, impor melalui File > New > Module, dan memberitahu kompilator di proyek build.gradle file untuk memasukkannya ke dalam proyek.

Langkah 2: Menerapkan Helper Class

Seperti saya sudah tunjukkan dalam artikel sebelumnya, jika Anda perlu untuk memanggil beberapa request, itu lebih baik untuk menggunakan shared request queue. Anda harus menghindari membuat suatu antrian permintaan setiap kali Anda menjadwalkan permintaan dengan menerapkan Volley.newRequestQueue, karena Anda tidak ingin berakhir dengan memory leak dan masalah lain yang tidak diinginkan.

Untuk melakukannya, pertama Anda harus membuat sebuah kelas yang menggunakan pola singleton. Kelas ini direferensikan menggunakan variabel statis, global terlihat, yang kemudian menangani objek RequestQueue. Dengan cara ini, Anda berakhir dengan satu RequestQueue untuk aplikasi. Kemudian, extend kelas Application, Anda harus memberitahu untuk sistem operasi untuk menghasilkan objek ini saat startup aplikasi, bahkan sebelum activity pertama dibuat.

Karena kita berada di Android environment, kami sedikit mengubah struktur singleton umum. Kelas perlu membuat sebuah instance baru dari dirinya sendiri dalam metode Application.onCreate — tidak dalam metode generik getInstance yang ketika itu null.

Untuk mencapai ini, membuat sebuah class baru dan nama itu MarsWeather.java. Selanjutnya, extend kelas Application Android, meng-override metode onCreate, dan menginisialisasi objek RequestQueue contoh statis.

Di kelas singleton, kami membangun objek kelas menggunakan getInstance fungsi public dan synchronized. Dalam metode ini, kita kembali mInstance variabel. Metode onCreate yang dipanggil saat aplikasi dimulai sehingga variabel mInstance akan sudah ditetapkan pertama kalinya metode getInstance yang dipanggil.

Selanjutnya, mengatakan dalam AndroidManifest.xml file yang Anda ingin MarsWeather akan dimuat pada startup aplikasi. Dalam <application> tag, menambahkan name atribut sebagai berikut:

Thats it. Instance kelas Application dibuat, bahkan sebelum MainActivity dibuat. Bersama dengan semua lain standar operasi, onCreate menghasilkan sebuah instance dari RequestQueue.

Kita perlu menerapkan tiga metode lain untuk menyelesaikan kelas helper. Metode pertama menggantikan Volley.newRequestQueue, yang aku akan dinamai getRequestQueue. Kami juga membutuhkan sebuah metode untuk menambahkan permintaan untuk antrian, add, dan metode yang bertanggung jawab untuk membatalkan permintaan, cancel. Blok kode berikut menunjukkan apa yang tampak seperti implementasi.

TAG adalah tanda generik yang Anda gunakan untuk mengidentifikasi permintaan. Dalam kasus khusus ini, dapat menjadi apa pun yang Anda inginkan:

Langkah 3: Menerapkan Custom Request

Seperti yang Anda sudah tahu, Volley menyediakan tiga jenis standar permintaan: StringRequest, ImageRequest dan JsonRequest. Aplikasi kita akan menggunakan yang kedua untuk mengambil data cuaca dan mengambil daftar gambar acak.

Secara default, Volley menetapkan prioritas dari permintaan ke NORMAL. Biasanya itu akan baik-baik saja, tapi dalam aplikasi kita, kita memiliki dua permintaan yang sangat berbeda dan oleh karena itu kita perlu memiliki prioritas berbeda dalam antrian. Pengambilan data cuaca harus memiliki prioritas yang lebih tinggi daripada mengambil URL gambar acak.

Untuk alasan itu, kita perlu menyesuaikan kelas JsonRequest. Membuat sebuah class baru yang bernama CustomJsonRequest.java, dan memastikan extend JsonObjectRequest. Selanjutnya, override metode getPriority seperti yang ditunjukkan di bawah ini.

Langkah 4: Pengambilan Data

Kami akhirnya tiba pada bagian yang paling menarik dari tutorial ini di mana kita menulis implementasi untuk mengambil data cuaca. Akhir dari permintaan adalah:

Api dapat ditelusuri jadi buka link untuk memeriksa JSON yang dihasilkan. JSON berisi sebuah objek yang sederhana, result, yang meliputi serangkaian string, mulai dari suhu untuk angin arah dan waktu matahari terbenam.

Mulai dengan mendeklarasikan variabel berikut dalam kelas MainActivity:

Anda dapat memanggil MarsWeather.getInstance di luar onCreate. Karena kelas akan sudah diinisialisasi, Anda tidak perlu menunggu untuk metode onStart memanggilnya. Tentu saja, Anda harus menetapkan referensi user interface dilihat dalam metode onCreate.

Setelah melakukan hal itu, saatnya untuk menerapkan metode loadWeatherData. Kami membuat custom Volley request dan menetapkan prioritas HIGH. Kita kemudian memanggil helper add metode untuk menambahkannya ke queue permintaan. Hal yang penting untuk dicatat adalah result listener, karena hal itu akan mempengaruhi user interface.

Seperti yang Anda lihat, metode membutuhkan suhu minimum dan maksimum, menghitung rata-rata suhu, dan memperbarui user interface. Saya juga menerapkan sebuah metode sederhana untuk menangani kesalahan.

Sekarang kita hanya perlu memanggil loadWeatherData di onCreate dan Anda sudah selesai. App sekarang siap untuk menunjukkan cuaca Mars.

3. mengambil Data gambar

Sekarang bahwa Anda memiliki core app siap dan bisa dipakai, kita dapat berfokus pada pembuatan aplikasi secara visual lebih menarik. Kami akan melakukan ini dengan mengambil gambar Mars secara acak dan menampilkannya kepada user.

Langkah 1: Mengambil gambar acak

Anda akan membutuhkan Flickr API key untuk mengambil daftar acak gambar kontekstual. endpoint gambar adalah sebagai berikut:

Seperti yang Anda lihat, request tersebut cukup sederhana. Anda mengatakan Flickr untuk memberikan hasil yang diformat sebagai JSON (format = json), tetapi kita tidak menentukan JSON callback (nojsoncallback = 1). Anda mencari gambar (method=flickr.photos.search) dan tag Anda tertarik terkait dengan Mars (tags = mars, planet, rover). Lihatlah dokumentasi untuk informasi lebih lanjut tentang format URL request.

Mulai dengan mendeklarasikan variabel berikut:

Selanjutnya, menerapkan metode yang searchRandomImage:

Seperti yang Anda lihat, Flickr mengirim kembali JSONArray yang berisi gambar. Metode yang saya tulis untuk mengambil gambar secara acak menghasilkan nomor acak antara nol dan dengan ukuran array. Dibutuhkan item sesuai index dari array hasil dan konstruksi URL untuk gambar dengan mengikuti panduan ini.

Seperti sebelumnya, kita membutuhkan sebuah metode untuk error handling:

Akhirnya, panggil searchRandomImage dalam metode onCreate dan jangan lupa untuk catch semua exception.

Langkah 2: Tampilkan gambar

Sekarang bahwa kita memiliki sebuah URL untuk memuat, kita dapat menampilkan gambar. Anda belajar bagaimana melakukan hal ini dalam artikel sebelumnya.

Dalam metode onResponse kita menulis di langkah sebelumnya, kami akhirnya mampu menangani result.

Langkah 3: Menampilkan gambar baru setiap hari

Mungkin Anda sudah menyadari bahwa kita melewati sistem caching Volley dengan mengambil gambar secara acak setiap kali aplikasi diluncurkan. Kita perlu menemukan cara untuk menunjukkan gambar yang sama pada hari tertentu.

Cara termudah untuk mencapai hal ini adalah dengan menggunakan Android SharedPreferences. Mulailah dengan mendeklarasikan variabel-variabel yang akan kita butuhkan untuk ini.

Selanjutnya, dalam metode onCreate, sebelum memanggil searchRandomImage, menginisialisasi mSharedPref.

Idenya adalah untuk menyimpan hari setiap kali kita mengambil gambar acak baru. Tentu saja, kami menyimpan URL gambar dan hari. Ketika meluncurkan aplikasi, kami memeriksa apakah kita sudah memiliki entri di SharedPreferences untuk hari ini. Jika kita ada, kami menggunakan URL disimpan. Jika kita mengambil gambar secara acak dan menyimpan URL-nya di SharedPreferences.

Dalam searchRandomImage, setelah definisi imageUrl, tambahkan baris berikut kode:

Metode onCreate, setelah definisi pada mSharedPref, sekarang menjadi:

Thats it. Aplikasi Anda sudah siap. Jangan ragu untuk men-download source file tutorial ini di GitHub untuk melihat proyek yang sudah selesai. Lihatlah proyek ini jika Anda menjalankan ke masalah.

Bonus Tip: Meningkatkan antarmuka pengguna

Langkah 1: Font

Font yang digunakan dalam antarmuka pengguna yang sering menentukan tampilan dan nuansa dari aplikasi. Mari kita mulai dengan mengubah font default Roboto dengan font yang lebih menarik, seperti Lato light.

Buat folder baru bernama fonts di folder assets. Jika Anda tidak dapat menemukan folder assets, Anda harus membuat ini pada tingkat yang sama sebagai folder java. Struktur folder harus melihat sesuatu seperti app\src\main\assets\fonts.

Menyalin file Lato-light.ttf dalam folder fonts. Dalam metode onCreate, Anda perlu mengganti huruf default view di mana Anda ingin menggunakan font baru.

Langkah 2: Transparan Status Bar

Mengikuti pedoman untuk Android Material Design, kami dapat membuat status bar transparan. Dengan cara ini, latar belakang akan terlihat sebagian melalui status bar.

Anda dapat mencapai ini dengan membuat perubahan kecil dalam aplikasi tema. Mengedit file v21\style.xml proyek seperti ini:

Pastikan bahwa AndroidManifest.xml telah diatur untuk menggunakan tema:

Kesimpulan

Kami membuat perjalanan panjang. Dalam artikel pertama, kami mulai berbicara tentang Volley dan aplikasinya. Dalam tutorial ini, kita melihat cara praktis untuk menerapkan konsep-konsep yang kita pelajari dengan membangun aplikasi cuaca Mars. Anda sekarang harus memiliki pemahaman yang baik tentang voli Perpustakaan, cara kerjanya, dan apa yang dapat Anda gunakan

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.