BAB 7 POLA IoT: ON-DEMAND CLIENTS
7.7 Pengaturan Proyek
calibrateSensor();
}
void loop() {
// Read sensor data readSensorData();
delay(5000);
}
Kode Arduino Anda sekarang sudah lengkap
View Application menyelesaikannya. Jika Anda tertarik untuk membangun aplikasi yang lebih rumit, Anda dapat menggunakan salah satu template lain yang disediakan Xcode. Klik Next.
Gambar 7-10. Layar pemilihan template
Isi detail proyek Anda seperti yang ditunjukkan pada Gambar 7-11. Anda harus memberikan Nama Produk, Nama Organisasi, dan Pengenal Organisasi. Pengidentifikasi Organisasi dapat berupa nama domain perusahaan atau pribadi Anda, yang digunakan untuk membuat Pengidentifikasi Bundel. Proyek ini akan dikembangkan menggunakan Swift, jadi pilih opsi itu dari Languange top-down. Jika Anda ingin aplikasi Anda berjalan di semua jenis perangkat iOS, lalu pilih Universal. Hapus centang pada semua opsi lain karena tidak diperlukan untuk proyek ini. Klik next.
Pilih lokasi di mesin Anda di mana Anda ingin menyimpan proyek dan klik Buat.
Xcode akan membuat beberapa folder dan file, seperti yang ditunjukkan pada Gambar 7-12.
Berikut ini adalah yang paling penting:
Parkir Cerdas > Main.storyboard : File ini menyediakan titik masuk utama untuk aplikasi Anda dan digunakan untuk mendesain antarmuka visual.
Parkir Cerdas > ViewController.swift : File ini berisi semua kode Swift untuk membuat aplikasi Anda dinamis dan interaktif.
Parkir Cerdas > Assets.xcassets : File ini berisi semua aset yang akan digunakan oleh aplikasi (gambar).
Smart Parking > Info.plist : File ini berisi informasi penting tentang runtime aplikasi.
Gambar 7-11. Konfigurasi proyek c baru
Gambar 7-12. File default yang dihasilkan oleh kode X
Layout Screen
Untuk mulai merancang Layout Screen, klik Main.storyboard di bawah folder Smart Parking utama. Ini akan membuka storyboard default, seperti yang ditunjukkan pada Gambar 7-13. Storyboard adalah tempat Anda menarik dan melepas berbagai widget untuk membuat antarmuka pengguna aplikasi Anda. Semua widget tersedia di Object Library di sisi kanan bawah storyboard. Gambar 7-14 menunjukkan Object Library tempat Anda dapat menarik dan melepas widget di storyboard.
Gambar 7-13. Tampilan pengembangan default Xcode
Gambar 7-14. Library objek dengan widget antarmuka pengguna
Aplikasi ini membutuhkan tiga widget di layar—yang pertama adalah ImageView opsional untuk menampilkan gambar mobil, yang kedua adalah Label untuk menampilkan tempat parkir yang terbuka, dan yang ketiga adalah tombol yang dapat diklik pengguna untuk memeriksa ulang tempat parkir yang terbuka. Drag widget ini dari Object Library ke storyboard; jangan khawatir tentang keselarasan atau ukuran widget sekarang. Layar Anda akan terlihat seperti Gambar 7-15.
Gambar 7-15. Layar S dengan widget yang diperlukan
Karena widget pertama adalah ImageView, Anda perlu mengatur gambar di properti.
Anda perlu mengimpor gambar di Assets.xcassets. Seperti yang ditunjukkan pada Gambar 7-16, pilih Assets.xcassets dan klik kanan untuk melihat menu, lalu pilih Impor. Anda dapat memberikan gambar Anda sendiri atau menggunakan yang sama yang telah digunakan dalam contoh dari https://openclipart.org/detail/122965/car-pictogram. Pilih gambar dan Klik Open.
Gambar 7-16. Saya mengimpor aset gambar
Setelah diimpor, gambar akan tersedia di aplikasi, seperti yang ditunjukkan pada Gambar 7-17.
Gambar 7-17. Aset yang tersedia/diimpor
Sekarang gambar tersedia di aset, Anda perlu mengatur gambar ini di widget ImageView yang Anda tambahkan di storyboard. Beralih kembali ke Main.storyboard dan pilih ImageView dari storyboard. Seperti yang ditunjukkan pada Gambar 7-18, dari Attribute Inspector di sebelah kanan, pilih ParkedCar (atau nama gambar Anda) di menu tarik-turun Gambar dan Sorotan. Anda selalu dapat mengatur dua gambar berbeda saat gambar disorot versus skenario normal.
Gambar 7-18. Properti ImageView
Setelah properti ImageView disetel, gambar juga akan terlihat di storyboard.
ImageView Anda akan terlihat mirip dengan Gambar 7-19 (atau gambar yang Anda pilih).
Gambar 7-19. Image View dengan gambar yang baru diimpor
Sama seperti dengan ImageView, Anda juga perlu mengupdate properti Label dan Tombol. Pilih Label dan, dari Attribute Inspector, ubah properti Text menjadi Open Parking Spots: 0, seperti yang ditunjukkan pada Gambar 7-20.
Gambar 7-20. Label properti
Selanjutnya, pilih Button dan, dari Attribute Inspector, ubah properti Title menjadi Click to Refresh, seperti yang ditunjukkan pada Gambar 7-21.
Gambar 7-21. Properti tombol
Anda hampir selesai dengan Layout Screen. Langkah terakhir melibatkan menyelaraskan widget. Seperti yang ditunjukkan pada Gambar 7-22, pilih ketiga widget.
Gambar 7-22. Sejajarkan widget
Gambar 7-23 memberikan versi perataan yang diperbesar dan membatasi menu yang terlihat di sisi kanan bawah storyboard.
Gambar 7-23. Menu ligamen dan batasan
Saat ketiga widget dipilih, klik tombol Stack ( ). Ini akan menumpuk semua widget yang dipilih secara vertikal, seperti yang ditunjukkan pada Gambar 7-24.
Gambar 7-24. Widget yang ditumpuk secara vertikal
Untuk menyelesaikan penyelarasan layar, Anda perlu menambahkan beberapa batasan ke widget sehingga, meskipun berjalan di perangkat yang berbeda, perilakunya konsisten. Seperti yang ditunjukkan pada Gambar 7-24, pastikan Anda memilih Stack View di View Controller. Drag Stack View ke tengah layar sehingga panduan perataan horizontal dan vertikal terlihat, seperti yang ditunjukkan pada Gambar 7-25.
Gambar 7-25. Widget rata tengah
Saat Stack View dipilih dari menu perataan dan batasan yang ditunjukkan pada Gambar 7-24, klik tombol Resolve Auto Layout Issues ( ). Pilih Add Missing Constraints untuk Selected Views, seperti yang ditunjukkan pada Gambar 7-26.
Gambar 7-26. Add Missing Contrains Layout Screen Anda sudah siap dan akan terlihat seperti Gambar 7-27.
Gambar 7-27. Layout Screen akhir aplikasi
Logika Layar
Selanjutnya Anda akan menambahkan beberapa logika yang akan membuat layar menjadi interaktif. Setiap kali pengguna mengetuk tombol Klik untuk Refresh, aplikasi akan memeriksa server untuk informasi tempat parkir terbuka. Buka file ViewController.swift berdampingan dengan storyboard. Seperti yang ditunjukkan pada Listing 7-9, secara default akan ada dua fungsi, yang disebut viewDidLoad() dan didReceiveMemoryWarning(), yang dibuat secara otomatis oleh sistem. Anda tidak akan membuat perubahan apa pun pada fungsi-fungsi ini.
Listing 7-9. Kode default untuk ViewController.swift import UIKit
class ViewController: UIViewController { override func viewDidLoad()
{
super.viewDidLoad()
// Do any additional setup after loading the view, typically // from a nib.
}
override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
} }
Untuk mengupdate nilai tempat parkir terbuka di layar, Anda memerlukan referensi label Tempat Parkir Terbuka: 0 di file ViewController.swift Anda. Xcode menyediakan cara yang sangat mudah untuk melakukannya, seperti yang ditunjukkan pada Gambar 7-28. Anda cukup drag dan drop label dari storyboard pada file ViewController.swift. Pastikan Anda terus menekan tombol Ctrl pada keyboard.
Gambar 7-28. D rag and drop label dari storyboard
Saat Anda melepaskan label pada kode, Xcode akan menampilkan popup untuk memasukkan nama properti ini. Seperti yang ditunjukkan pada Gambar 7-29, masukkan nama dan pastikan Anda membiarkan Connection diatur ke Outlet. Klik Connect untuk menambahkan properti baru ke ViewController.swift.
Gambar 7-29. Properti outlet
Drag dan lepas tombol Click to Refresh dengan cara yang sama dari storyboard pada file ViewController.swift, seperti yang ditunjukkan pada Gambar 7-30.
Gambar 7-30. Drag and drop button dari s toryboard
Seperti yang ditunjukkan pada Gambar 7-31, dari popup properti, pilih Tindakan dari Sambungan karena Anda perlu menambahkan kode untuk merespons setiap kali pengguna mengetuk tombol. Di bidang Nama, masukkan refreshParkingSpotsCount dan klik Hubungkan.
Gambar 7-31. Properti tindakan
Pada titik ini, ViewController.swift Anda akan terlihat mirip dengan Listing 7-10.
Listing 7-10. Kode Tindakan di ViewController.swift import U]IKit
class ViewController: UIViewController {
@IBOutlet weak var parkingSpots: UILabel!
@IBAction func refreshParkingSpotsCount(sender: AnyObject) {
}
override func viewDidLoad() { super.viewDidLoad()
// Do any additional setup after loading the view, typically // from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
} }
Sekarang Anda akan menambahkan kode yang perlu dijalankan sebagai respons terhadap tindakan yang diklik Tombol. Tambahkan semua kode dalam fungsi refreshParkingSpotsCount(sender: AnyObject). Kode yang diberikan di Listing 7-11 pertama-tama mengirimkan permintaan ke URL
http://bookapps.codifythings.com/smartparking/getcount.php. Layanan respons PHP yang Anda tulis sebelumnya mengirimkan jumlah tempat parkir dalam format JSON kembali ke klien. Potongan kode berikutnya mem-parsing respons JSON ini dan mengekstrak nilai hitungan menggunakan kunci PARKING_SPOTS_COUNT. Terakhir, ia mengupdate label ParkingSpots dengan jumlah tempat parkir terbuka yang diUpdate.
Listing 7-11. Kode Lengkap untuk ViewController import UIKit
class ViewController: UIViewController {
@IBOutlet weak var parkingSpots: UILabel!
@IBAction func refreshParkingSpotsCount(sender: AnyObject) { let url = NSURL(string: "http://bookapps.codifythings.com/
smartparking/getcount.php")
let request = NSURLRequest(URL: url!)
NSURLConnection.sendAsynchronousRequest(request, queue:
NSOperationQueue.mainQueue()) {(response, data, error) in let jsonResponse: NSDictionary!=(try!
NSJSONSerialization. JSONObjectWithData(data!, options:
NSJSONReadingOptions.MutableContainers)) as! NSDictionary self.parkingSpots.text = "Open Parking Spots: " +
String(jsonResponse["PARKING_SPOTS_COUNT"]!) }
}
override func viewDidLoad() { super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
} }
Sebelum aplikasi iOS Anda dapat melakukan panggilan Internet, Anda perlu menambahkan properti di Info.plist. Seperti yang ditunjukkan pada Gambar 7-32, klik + pada Listing Properti Informasi induk tingkat atas.
Gambar 7-32. Info.plist Listing properti
Properti baru akan ditambahkan ke Listing. Seperti yang ditunjukkan pada Gambar 7-33, pilih App Transport Security Settings.
Gambar 7-33. Pilih properti Pengaturan Keamanan Transportasi Aplikasi
Klik + di properti App Transport Security Settings yang baru ditambahkan, seperti yang ditunjukkan pada Gambar 7-34. Ini akan menambahkan properti anak. Pilih properti Allow Arbitrary Loads dari Listing dan ubah nilainya dari NO menjadi YES.
Gambar 7-34. Pilih properti Allow Arbitrary Loads
Gambar 7-35. Catat pesan dari smarter parking system Ini menyelesaikan implementasi aplikasi iOS Anda.