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

Buat Aplikasi Cuaca dengan Forecast - Integrasi API

by
Read Time:15 minsLanguages:

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

Dalam artikel pertama dari seri ini, kita meletakkan fondasi proyek dengan menyiapkan proyek dan membuat struktur aplikasi. Dalam artikel ini, kita memanfaatkan perpustakaan AFNetworking untuk berinteraksi dengan API Prakiraan.


pengantar

Dalam first installment dari seri ini, kita meletakkan dasar dari aplikasi cuaca. Pengguna dapat menambahkan lokasi mereka saat ini dan beralih antar lokasi. Dalam tutorial ini, kita akan menggunakan pustaka AFNetworking untuk menanyakan API Prakiraan untuk data cuaca dari lokasi yang sedang dipilih.

Jika Anda ingin mengikuti, Anda akan membutuhkan kunci API Prakiraan. Anda dapat memperoleh kunci API dengan mendaftar sebagai pengembang di Forecast. Pendaftaran gratis, jadi saya mendorong Anda untuk mencoba layanan cuaca Prakiraan. Anda dapat menemukan kunci API Anda di bagian bawah dasbor Anda (gambar 1).

Create a Weather App with Forecast – Forecast Integration - Obtaining Your API Key Create a Weather App with Forecast – Forecast Integration - Obtaining Your API Key Create a Weather App with Forecast – Forecast Integration - Obtaining Your API Key
Gambar 1: Mendapatkan Kunci API Anda

1. Subclassing AFHTTPClient

Seperti yang saya tulis sebelumnya di artikel ini, kita akan menggunakan perpustakaan AFNetworking untuk berkomunikasi dengan API Forecast. Ada beberapa opsi ketika bekerja dengan AFNetworking, tetapi untuk membuat aplikasi kita menjadi bukti di masa mendatang, kita akan memilih kelas AFHTTPClient. Kelas ini dirancang untuk menggunakan layanan web, seperti API Forecast. Meskipun kita hanya akan mengakses satu titik akhir API, masih berguna untuk menggunakan AFHTTPClient seperti yang akan Anda pelajari dalam beberapa saat.

Disarankan untuk membuat subkelas AFHTTPClient untuk setiap layanan web. Karena kita telah menambahkan AFNetworking ke proyek kita di tutorial sebelumnya, kita dapat segera memulai subclassing AFHTTPClient.

Langkah 1: Buat Kelas

Buat kelas Objective-C baru, beri nama MTForecastClient, dan menjadikannya subkelas AFHTTPClient (gambar 2).

Create a Weather App with Forecast – Forecast Integration - Subclassing AFHTTPClient Create a Weather App with Forecast – Forecast Integration - Subclassing AFHTTPClient Create a Weather App with Forecast – Forecast Integration - Subclassing AFHTTPClient
Gambar 2: Subclassing AFHTTPClient

Langkah 2: Membuat Objek Singleton

Kita akan mengadopsi pola tunggal untuk membuatnya lebih mudah menggunakan kelas MTForecastClient dalam proyek kita. Ini berarti hanya satu contoh dari kelas yang hidup pada satu waktu untuk seumur hidup aplikasi. Kemungkinannya adalah bahwa Anda sudah akrab dengan pola tunggal karena merupakan pola umum dalam banyak bahasa pemrograman berorientasi objek. Pada pandangan pertama, pola tunggal tampaknya sangat nyaman, tetapi ada sejumlah peringatan yang harus diwaspadai. Anda dapat mempelajari lebih lanjut tentang lajang dengan membaca artikel yang sangat bagus ini oleh Matt Gallagher.

Membuat objek tunggal cukup mudah dalam Objective-C. Mulai dengan mendeklarasikan metode kelas di MTForecastClient.h untuk menyediakan akses publik ke objek tunggal (lihat di bawah).

Implementasi sharedClient mungkin terlihat menakutkan pada awalnya, tetapi tidak begitu sulit begitu Anda memahami apa yang sedang terjadi. Kita pertama menyatakan dua variabel statis, (1) predicate tipe dispatch_once_t dan (2) _sharedClient tipe MTForecastClient. Seperti namanya, predicate adalah predikat yang kita gunakan dalam kombinasi dengan fungsi dispatch_once. Ketika bekerja dengan variabel jenis dispatch_once_t, penting bahwa itu dinyatakan secara statis. Variabel kedua, _sharedClient, akan menyimpan referensi ke objek tunggal.

Fungsi dispatch_once mengambil pointer ke struktur dispatch_once_t, predikat, dan blok. Keindahan dispatch_once adalah bahwa ia akan mengeksekusi blok sekali untuk seumur hidup aplikasi, yang persis seperti yang kita inginkan. Fungsi dispatch_once tidak memiliki banyak kegunaan, tetapi ini jelas salah satunya. Di blok yang kita lewati ke dispatch_once, kita membuat objek tunggal dan menyimpan referensi di _sharedClient. Lebih aman untuk meminta alloc dan init secara terpisah untuk menghindari kondisi balapan yang berpotensi menyebabkan kebuntuan. Euh ... apa? Anda dapat membaca lebih lanjut tentang detail sepele pada Stack Overflow.

Hal yang penting untuk dipahami tentang implementasi metode sharedClient class adalah bahwa initializer, initWithBaseURL:, hanya dipanggil sekali. Objek tunggal disimpan dalam variabel statis _sharedClient, yang dikembalikan oleh metode kelas sharedClient.

Langkah 3: Mengkonfigurasi Klien

Di sharedClient, kita memanggil initWithBaseURL:, yang pada gilirannya akan memanggil baseURL, metode kelas lain. Di initWithBaseURL:, kita menetapkan header default, yang berarti bahwa klien menambahkan header ini ke setiap permintaan yang dikirimkannya. Ini adalah salah satu keuntungan bekerja dengan kelas AFHTTPClient. Di initWithBaseURL:, kita juga mendaftarkan kelas operasi HTTP dengan menjalankan registerHTTPOperationClass:. Perpustakaan AFNetworking menyediakan sejumlah kelas operasi khusus. Salah satu kelas ini adalah kelas AFJSONRequestOperation, yang membuat berinteraksi dengan JSON API sangat mudah. Karena API Prakiraan mengembalikan respons JSON, kelas AFJSONRequestOperation adalah pilihan yang baik. Metode registerHTTPOperationClass: berfungsi mirip dengan bagaimana registerClass:forCellReuseIdentifier: dari kelas UITableView berfungsi. Dengan memberi tahu klien kelas operasi apa yang ingin kita gunakan untuk berinteraksi dengan layanan web, itu akan memberi contoh instance kelas itu untuk kita di bawah kap. Mengapa ini berguna akan menjadi jelas dalam beberapa saat.

Implementasi baseURL tidak lebih dari metode kenyamanan untuk membangun basis URL klien. URL dasar adalah URL yang digunakan klien untuk menjangkau layanan web. Ini adalah URL tanpa nama atau parameter metode apa pun. URL dasar untuk Forecast API adalah https://api.forecast.io/forecast//. Kunci API adalah bagian dari URL seperti yang Anda lihat. Ini mungkin tampak tidak aman dan sebenarnya. Tidak sulit bagi seseorang untuk mengambil kunci API sehingga disarankan untuk bekerja dengan proxy untuk menutupi kunci API. Karena pendekatan ini sedikit lebih terlibat, saya tidak akan membahas aspek ini dalam seri ini.

Anda mungkin telah memperhatikan dalam penerapan baseURL bahwa saya telah menggunakan string konstan lainnya untuk menyimpan kunci API. Ini mungkin tampak tidak perlu karena kami hanya menggunakan kunci API di satu lokasi. Namun, ini adalah praktik yang baik untuk menyimpan data aplikasi di satu lokasi atau di daftar properti.

Langkah 4: Menambahkan Metode Helper

Sebelum melanjutkan, saya ingin memperluas kelas MTForecastClient dengan menambahkan metode helper atau kenyamanan yang akan memudahkan untuk kueri API Perkiraan. Metode kenyamanan ini akan menerima lokasi dan blok penyelesaian. Blok penyelesaian dijalankan ketika permintaan selesai. Agar lebih mudah bekerja dengan balok, sebaiknya deklarasikan jenis blok khusus seperti yang ditunjukkan di bawah ini. Jika Anda masih merasa tidak nyaman menggunakan blok, maka saya sarankan membaca artikel bagus ini oleh Akiel Khan.

Blok membutuhkan dua argumen, (1) boolean yang menunjukkan apakah kueri berhasil dan (2) kamus dengan respons dari kueri. Metode kenyamanan, requestWeatherForCoordinate:completion:, mengambil koordinat lokasi (CLLocationCoordinate2D) dan blok penyelesaian. Dengan menggunakan blok penyelesaian, kita dapat menghindari membuat protokol delegasi khusus atau mundur menggunakan pemberitahuan. Blok sangat cocok untuk jenis skenario ini.

Dalam requestWeatherForCoordinate:completion:, kita memanggil getPath:success:failure:, metode yang dideklarasikan di AFHTTPClient. Argumen pertama adalah jalur yang ditambahkan ke URL dasar yang kita buat sebelumnya. Argumen kedua dan ketiga adalah blok yang dieksekusi ketika permintaan berhasil dan gagal, masing-masing. Blok keberhasilan dan kegagalan cukup sederhana. Jika blok penyelesaian dilewatkan ke requestWeatherForCoordinate:completion:, kita mengeksekusi blok dan meneruskan nilai boolean dan kamus respons (atau nil pada blok kegagalan). Di blok kegagalan,kita mencatat kesalahan dari blok kegagalan ke konsol untuk memfasilitasi debugging.

Anda mungkin bertanya-tanya apa objek response dalam blok keberhasilan atau referensi. Meskipun API Forecast mengembalikan respons JSON, objek response di blok sukses adalah instance NSDictionary. Manfaat bekerja dengan kelas AFJSONHTTPRequestOperation, yang kita daftarkan di initWithBaseURL:, adalah bahwa ia menerima respons JSON dan secara otomatis membuat objek dari data respons, kamus dalam contoh ini.


2. Meminta Perkiraan API

Langkah 1: Ubah setLocation:

Berbekal kelas MTForecastClient, sekarang waktunya untuk melakukan kueri API Prakiraan dan mengambil data cuaca untuk lokasi yang saat ini dipilih. Tempat yang paling cocok untuk melakukan ini adalah di setLocation: metode kelas MTWeatherViewController. Ubah metode setLocation: seperti yang ditunjukkan di bawah ini. Seperti yang Anda lihat, semua yang kita lakukan adalah memohon fetchWeatherData, metode pembantu lain.

Pernahkah Anda bertanya-tanya mengapa saya menggunakan begitu banyak metode helper dalam kode saya? Alasannya sederhana. Dengan membungkus fungsionalitas dalam metode pembantu, sangat mudah untuk menggunakan kembali kode di berbagai tempat proyek. Manfaat utama, bagaimanapun, adalah membantu memerangi duplikasi kode. Duplikasi kode adalah sesuatu yang harus selalu Anda hindari semaksimal mungkin. Keuntungan lain menggunakan metode helper adalah membuat kode Anda jauh lebih mudah dibaca. Dengan membuat metode yang melakukan satu hal dan memberikan nama metode yang dipilih dengan baik, lebih mudah untuk cepat membaca dan memproses kode Anda.

Langkah 2: Mengirim Permintaan

Saatnya menempatkan perpustakaan SVProgressHUD untuk digunakan. Saya sangat suka perpustakaan ini karena sangat mudah digunakan tanpa mengacaukan basis kode proyek. Lihatlah implementasi fetchWeatherData di bawah ini. Kita mulai dengan menunjukkan kemajuan HUD dan kemudian melewati sebuah struktur (CLLocationCoordinate2D) ke metode kenyamanan yang kami buat sebelumnya, requestWeatherForCoordinate:completion:. Di blok penyelesaian, kita menyembunyikan kemajuan HUD dan mencatat respons ke konsol.

Sebelum Anda membangun dan menjalankan aplikasi Anda, impor file header kelas MTForecastClient di MTWeatherViewController.m.

Apa yang terjadi ketika perangkat tidak terhubung ke web? Sudahkah Anda memikirkan skenario itu? Dalam hal pengalaman pengguna, itu adalah praktik yang baik untuk memberi tahu pengguna ketika aplikasi tidak dapat meminta data dari API Forecast. Mari saya tunjukkan bagaimana melakukan ini dengan perpustakaan AFNetworking.


3. Jangkauan

Ada sejumlah perpustakaan yang menyediakan fungsionalitas ini, tetapi kita akan tetap dengan AFNetworking. Apple juga menyediakan kode contoh, tetapi agak ketinggalan jaman dan tidak mendukung ARC.

AFNetworking benar-benar memeluk blok, yang jelas merupakan salah satu alasan mengapa perpustakaan ini menjadi sangat populer. Pemantauan untuk perubahan reachability adalah sesederhana melewati blok ke setReachabilityStatusChangeBlock:, metode lain dari kelas AFHTTPClient. Blok ini dijalankan setiap kali status reachability berubah dan menerima satu argumen jenis AFNetworkReachabilityStatus. Lihatlah initWithBaseURL; yang diperbarui metode kelas MTForecastClient.

Untuk menghindari siklus retensi, kita meneruskan referensi lemah ke objek tunggal di blok yang kita lewati ke setReachabilityStatusChangeBlock:. Bahkan jika Anda menggunakan ARC dalam proyek Anda, Anda masih perlu menyadari masalah memori yang halus seperti ini. Nama pemberitahuan yang kita posting adalah string lain yang dinyatakan konstan di MTConstants.h /.m.

Alasan untuk memposting pemberitahuan dalam blok perubahan status reachability adalah untuk mempermudah bagian lain dari aplikasi untuk memperbarui ketika reachability perangkat berubah. Untuk memastikan bahwa kelas MTWeatherViewController diberitahu tentang perubahan reachability, contoh kelas ditambahkan sebagai pengamat untuk pemberitahuan yang dikirim oleh klien Prakiraan seperti yang ditunjukkan di bawah ini.

Ini juga berarti bahwa kita perlu menghapus instance sebagai pengamat dalam metode dealloc. Ini adalah detail yang sering diabaikan.

Implementasi reachabilityStatusDidChange: cukup mendasar saat ini. Kita akan memperbarui implementasinya setelah kita membuat antarmuka pengguna aplikasi.


4. Refreshing Data

Sebelum kita menyelesaikan posting ini, saya ingin menambahkan dua fitur tambahan, (1) mengambil data cuaca setiap kali aplikasi menjadi aktif dan (2) menambahkan kemampuan untuk menyegarkan data cuaca secara manual. Kita bisa mengimplementasikan timer yang mengambil data baru setiap jam atau lebih, tetapi ini tidak diperlukan untuk aplikasi cuaca menurut saya. Sebagian besar pengguna akan meluncurkan aplikasi, lihat cuaca dan letakkan aplikasi di background. Oleh karena itu hanya diperlukan untuk mengambil data baru ketika pengguna meluncurkan aplikasi. Ini berarti bahwa kita perlu mendengarkan pemberitahuan UIApplicationDidBecomeActiveNotification di kelas MTWeatherViewController. Seperti yang kita lakukan untuk memantau perubahan reachability, kita menambahkan instance kelas sebagai pengamat notifikasi tipe UIApplicationDidBecomeActiveNotification.

Di applicationDidBecomeActive:, kita memverifikasi bahwa location sudah diatur (bukan nil) karena ini tidak akan selalu benar. Jika lokasi valid, kita mengambil data cuaca.

Saya juga telah mengubah fetchWeatherData hanya untuk kueri API Prakiraan jika perangkat terhubung ke web.

Mari tambahkan tombol ke pengontrol tampilan cuaca yang dapat disentuh pengguna untuk menyegarkan data cuaca secara manual. Buat outlet di MTWeatherViewController.h dan buat refresh: tindakan di MTWeatherViewController.m.

Buka MTWeatherViewController.xib, tambahkan tombol ke tampilan pengontrol tampilan dengan judul Refresh, dan hubungkan outlet dan tindakan dengan tombol (gambar 3). Alasan untuk membuat stopkontak untuk tombol ini adalah untuk dapat menonaktifkannya ketika tidak ada koneksi jaringan tersedia. Agar ini berfungsi, kita perlu memperbarui metode reachabilityStatusDidChange: seperti yang ditunjukkan di bawah ini.

Create a Weather App with Forecast – Forecast Integration - Adding a Refresh Button Create a Weather App with Forecast – Forecast Integration - Adding a Refresh Button Create a Weather App with Forecast – Forecast Integration - Adding a Refresh Button
Gambar 3: Menambahkan Tombol Segarkan

Tidak perlu untuk menonaktifkan sementara tombol refresh saat permintaan diproses di fetchWeatherData karena kemajuan HUD menambahkan lapisan di atas tampilan pengontrol tampilan yang mencegah pengguna mengetuk tombol lebih dari satu kali. Bangun dan jalankan aplikasi untuk menguji semuanya.


Bonus: Menghapus Lokasi

Seorang pembaca bertanya kepada saya bagaimana menghapus lokasi dari daftar sehingga saya memasukkannya di sini demi kelengkapan. Hal pertama yang perlu kita lakukan adalah memberi tahu tampilan tabel baris mana yang dapat diedit dengan mengimplementasikan tableView:canEditRowAtIndexPath: dari protokol UITableViewDataSource. Metode ini mengembalikan YES jika baris pada indexPath dapat diedit dan NO jika tidak. Implementasinya sederhana seperti yang Anda lihat di bawah ini. Setiap baris dapat diedit kecuali untuk baris pertama dan lokasi yang sedang dipilih.

Untuk memeriksa apakah location adalah lokasi saat ini, kita menggunakan metode pembantu lain, isCurrentLocation:, di mana kita mengambil lokasi saat ini dan membandingkan koordinat lokasi. Akan lebih baik (dan lebih mudah) jika kita telah menetapkan pengenal unik untuk setiap lokasi yang disimpan dalam basis data default pengguna. Tidak hanya memudahkan untuk membandingkan lokasi, tetapi juga memungkinkan kita menyimpan pengidentifikasi unik lokasi saat ini di basis data default pengguna dan mencarinya di berbagai lokasi. Masalah dengan implementasi saat ini adalah lokasi dengan koordinat yang sama tidak dapat dibedakan satu sama lain.

Ketika pengguna mengetuk tombol hapus dari baris tampilan tabel, sumber data tampilan tabel dikirim tabelView:commitEditingStyle:forRowAtIndexPath: pesan. Dalam metode ini, kita perlu (1) memperbarui sumber data, (2) menyimpan perubahan ke basis data default pengguna, dan (3) memperbarui tampilan tabel. Jika editingStyle sama dengan UITableViewCellEditingStyleDelete, kita menghapus lokasi dari larik location dan menyimpan larik yang diperbarui di basis data default pengguna. Kita juga menghapus baris dari tampilan tabel untuk mencerminkan perubahan dalam sumber data.

Untuk mengubah gaya pengeditan tabel tampilan, kita perlu menambahkan tombol edit ke antarmuka pengguna. Buat outlet untuk tombol di MTLocationsViewController.h dan tindakan bernama editLocations: di MTLocationsViewController.m. Di editLocation:, kita mengganti gaya pengeditan tabel tampilan.

Buka MTLocationsViewController.xib, tambahkan bilah navigasi ke tampilan pengontrol tampilan, dan tambahkan tombol edit ke bilah navigasi. Hubungkan tombol edit dengan outlet dan tindakan yang kami buat beberapa saat yang lalu.

Create a Weather App with Forecast – Forecast Integration - Adding an Edit Button Create a Weather App with Forecast – Forecast Integration - Adding an Edit Button Create a Weather App with Forecast – Forecast Integration - Adding an Edit Button
Gambar 4: Menambahkan Tombol Edit

Anda mungkin bertanya-tanya mengapa kita membuat outlet untuk tombol edit. Alasannya adalah bahwa kita harus dapat mengubah judul tombol edit dari Edit menjadi Done, dan sebaliknya, kapan saja gaya pengeditan dari tampilan tabel berubah. Selain itu, ketika pengguna menghapus lokasi terakhir (kecuali untuk lokasi saat ini) di tampilan tabel, alangkah baiknya untuk secara otomatis mengalihkan gaya pengeditan tabel tampilan. Fitur-fitur ini tidak sulit untuk diimplementasikan. Itulah mengapa saya membiarkannya sebagai latihan. Jika Anda mengalami masalah atau memiliki pertanyaan, jangan ragu untuk meninggalkan komentar di komentar di bawah artikel ini.

Kesimpulan

Kita telah berhasil mengintegrasikan API Prakiraan dalam aplikasi cuaca kita. Dalam tutorial berikutnya, kita akan menerapkan fokus pada antarmuka pengguna dan desain aplikasi.

Advertisement
Did you find this post useful?
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.