1. Sebelum memulai
Sebelum memulai coding, ada beberapa prasyarat yang harus Anda siapkan.
Xcode
Tutorial ini menggunakan alat Xcode Apple, bersama dengan bahasa Objective-C untuk membuat aplikasi iOS sederhana yang berjalan di emulator. Anda tidak memerlukan perangkat fisik. Anda dapat memperoleh Xcode di https://developer.apple.com/xcode/
CocoaPods
Places SDK for iOS tersedia sebagai pod CocoaPods. CocoaPods merupakan alat pengelolaan dependensi open source untuk project Swift dan Objective-C. Jika Anda belum memiliki alat ini, Anda harus menginstalnya sebelum melanjutkan. Instance ini dapat diinstal dari terminal seperti ini:
sudo gem install cocoapods
Untuk mengetahui detail selengkapnya tentang CocoaPods, lihat panduan Memulai CocoaPods.
Menginstal SDK
Untuk menginstal SDK, Anda perlu membuat Podfile di direktori project yang akan digunakan CocoaPods untuk mendownload dan mengonfigurasi dependensi yang diperlukan. Cara termudah untuk melakukannya adalah dengan membuat Project baru di Xcode, menambahkan Podfile ke project tersebut, dan menginstal pod di sana.
Buka Xcode dan Anda akan melihat layar 'Welcome to Xcode' Di sini, pilih ‘Buat project Xcode baru'
Di layar berikutnya, Anda akan diminta untuk template project baru Anda. Pilih ‘Single View Application' untuk iOS, lalu tekan ‘Next'
Saat dimintai Nama Produk, Anda dapat memilih apa pun yang diinginkan, tetapi pastikan untuk mencantumkan Kode Paket yang dibuat untuk Anda. Anda akan memerlukannya nanti.
Tekan ‘Berikutnya' dan project akan dibuat untuk Anda. Catat direktori tempat direktori dibuat. Tutup Xcode dan gunakan Terminal, buka direktori tersebut.
Dengan menggunakan Terminal, masukkan perintah berikut:
pod init
File bernama Podfile akan dibuat untuk Anda. Edit untuk menambahkan pod bagi GoogleMaps seperti ini:
target '{YOUR APP NAME}' do
pod 'GoogleMaps'
end
Simpan, dan tutup Xcode. Pastikan untuk menutupnya karena pada langkah berikutnya, Anda akan mengedit project yang mendasarinya. Anda akan membuka file proyek yang berbeda setelah selesai, dan sangat umum bagi developer untuk menjadi bingung di mana semuanya jika sebelumnya mereka tidak menutup Xcode! Sekarang, di terminal, buka direktori project Anda dan jalankan ‘pod install' seperti ini:
Setelah selesai, pod akan diinstal dan file .xcworkspace baru akan dibuat. Gunakan ini untuk project mulai sekarang. Namun, sebelum melakukan coding, hal berikutnya yang Anda perlukan adalah kunci API.
2. Mendapatkan Kunci API
Untuk langkah pengaktifan berikut, aktifkan Maps SDK for iOS.
Menyiapkan Google Maps Platform
Jika Anda belum memiliki akun Google Cloud Platform dan project dengan penagihan diaktifkan, lihat panduan Memulai Google Maps Platform untuk membuat akun penagihan dan project.
- Di Cloud Console, klik menu drop-down project lalu pilih project yang ingin Anda gunakan untuk codelab ini.
- Aktifkan API dan SDK Google Maps Platform yang diperlukan untuk codelab ini di Google Cloud Marketplace. Untuk melakukannya, ikuti langkah-langkah dalam video ini atau dokumentasi ini.
- Buat kunci API di halaman Kredensial di Cloud Console. Anda dapat mengikuti langkah-langkah dalam video ini atau dokumentasi ini. Semua permintaan ke Google Maps Platform memerlukan kunci API.
3. Membuat Aplikasi Places API
Setelah Anda membuat project konsol, dan mengaktifkan Places API di dalamnya, mendapatkan kunci API, Anda siap untuk memulai coding aplikasi Places API pertama Anda.
Sebelumnya, saat Anda menginstal file pod, file .xcworkspace baru dibuat untuk Anda. Buka tab ini dengan mengkliknya dua kali.
Anda akan melihat di Project Explorer bahwa sekarang Anda memiliki folder baru bernama ‘Pods'. Jika ini berhasil, Anda akan melihat folder GoogleMaps di sana yang berisi kerangka kerja.
4. Edit file Info.plist.
Saat pertama kali menjalankan aplikasi, iOS akan memberi Anda dialog yang meminta pengguna memberikan izin untuk mengakses layanan lokasi. Dialog ini akan memberikan string yang Anda tentukan, dan Anda memasukkannya dalam file Info.plist. Jika string ini tidak ada, dialog tidak akan ditampilkan, dan aplikasi Anda tidak akan berfungsi.
Anda dapat menemukan file Info.plist pada penjelajah project di sini:
Pilih, dan Anda akan melihat editor plist.
Arahkan kursor ke elemen mana pun, dan Anda akan melihat ikon '+' muncul. Tekan tombol tersebut, dan Anda akan melihat entri baru yang muncul. Masukkan nilai ‘NSLocationAlwaysUsageDescription' di kotak ini.
Tekan Enter untuk menambahkan kunci baru. Kemudian, klik dua kali kolom Nilai untuk kunci ini, lalu tambahkan string:
Untuk mempelajari string ini lebih lanjut, lihat dokumentasi developer apple di sini.
5. Edit Delegasi Aplikasi Anda
Di penjelajah project, temukan dan buka AppDelegate.m. Anda akan menggunakannya untuk menambahkan Kunci API.
Di bagian atas file, tambahkan ini tepat di bawah baris #import:
@import GoogleMaps;
Kemudian, di fungsi didFinishLaunchingWithOptions: tambahkan hal berikut ini hanya tentang baris 'return YES'
[GMSServices provideAPIKey:@"<Add your API Key>"];
Pastikan untuk menggunakan Kunci API yang Anda buat sebelumnya.
6. Edit File Storyboard Anda
Di penjelajah project, buka file Main.storyboard. Pastikan sidebar samping aktif dengan menekan tombol sidebar di sudut kanan atas.
Kemudian, di bagian bawah sidebar, temukan Kontrol Label dengan memastikan Library Objek dipilih.
Pada Scene View Controller di sisi kiri, pastikan 'View' dipilih:
Kemudian, tarik lalu lepas 7 label ke tampilan. Atur seperti yang ditunjukkan di sini. Pastikan untuk menarik ukurannya agar sesuai dengan yang ditampilkan. Anda dapat mengedit teks dalam label dengan mengklik dua kali pada teks dan mengetikkan nilai yang diperlukan:
Untuk label paling bawah (label yang sangat besar), buka editor properti dan pastikan label tersebut disetel untuk memiliki 0 baris (Setelan defaultnya adalah 1). Tindakan ini akan memungkinkannya merender beberapa baris.
7. Membuat Outlet untuk Nilai
Untuk 3 ‘nilai' label, Anda harus membuat stopkontak. Ini akan memungkinkan Anda mengubah nilainya menggunakan kode. Untuk melakukannya, Anda harus mengaktifkan editor asisten terlebih dahulu. Untuk melakukannya, pertama tutup sidebar properti dengan mengklik tombol untuk menghapusnya. (Tombol ini ditampilkan pada langkah sebelumnya)
Kemudian, pilih tombol asisten – ini adalah lingkaran ganda yang ditampilkan di sini:
Pastikan aplikasi tersebut merender file ViewController.h. Jika tidak, Anda dapat mengubahnya untuk menggunakan editor di bagian atas jendela asisten:
Kemudian, saat menahan tombol Control, tarik setiap label dan lepaskan di bawah baris @interface dalam file ViewController.h di asisten. Dialog akan muncul dan menanyakan jenis koneksi yang ingin Anda buat:
Pastikan setelan menunjukkan (Connection: Outlet; Type: UILabel; Storage: Weak), lalu beri nama untuk masing-masing setelan. Untuk keperluan codelab ini, saya memanggil label Bujur, Lintang, dan Ketinggian lblBujur, lblLintang, dan lblAltidude. Juga tarik label besar dari bawah ke atas, dan beri nama lblPlaces.
Setelah selesai, file ViewController.h Anda akan terlihat seperti ini:
#import <UIKit/UIKit.h>
@import GoogleMaps;
@interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet UILabel *lblLatitude;
@property (weak, nonatomic) IBOutlet UILabel *lblLongitude;
@property (weak, nonatomic) IBOutlet UILabel *lblAltitude;
@property (weak, nonatomic) IBOutlet UILabel *lblPlaces;
@end
8 Mengedit File Header untuk Lokasi dan Google Client API
Sebelum langkah terakhir – di mana Anda mem-build aplikasi untuk menggunakan Places API, Anda perlu menyiapkan beberapa variabel lagi dalam file header (ViewController.h). Ini adalah Pengelola Lokasi Inti dan objek Lokasi Inti:
@property (strong, nonatomic) CLLocationManager *locationManager;
@property (strong, nonatomic) CLLocation *location;
Anda juga akan memerlukan Klien Google API:
@property GMSPlacesClient *placesClient;
Terakhir, Anda harus mengupdate file header sehingga class mengimplementasikan CLLocationManagerDelegate:
@interface ViewController : UIViewController<CLLocationManagerDelegate>
Setelah selesai, file header Anda akan terlihat seperti ini:
#import <UIKit/UIKit.h>
#import <CoreLocation/CoreLocation.h>
#import <GoogleMaps/GoogleMaps.h>
@interface ViewController : UIViewController<CLLocationManagerDelegate>
@property (strong, nonatomic) CLLocationManager *locationManager;
@property (strong, nonatomic) CLLocation *location;
@property (weak, nonatomic) IBOutlet UILabel *lblLongitude;
@property (weak, nonatomic) IBOutlet UILabel *lblLatitude;
@property (weak, nonatomic) IBOutlet UILabel *lblAltitude;
@property (weak, nonatomic) IBOutlet UILabel *lblPlaces;
@property GMSPlacesClient *placesClient;
@end
9. Mengedit Pengontrol Tampilan Anda
Langkah pertama adalah mengedit fungsi viewDidLoad untuk melakukan inisialisasi Pengelola Lokasi, meminta otorisasi pengguna untuk mengakses lokasi, dan akhirnya memulai location manager agar melacak lokasi saat ini. Anda juga akan melakukan inisialisasi klien Google Places API.
- (void)viewDidLoad {
[super viewDidLoad];
self.locationManager = [[CLLocationManager alloc]init];
self.locationManager.desiredAccuracy = kCLLocationAccuracyBest;
if([self.locationManager respondsToSelector:@selector(requestAlwaysAuthorization)]) {
[self.locationManager requestAlwaysAuthorization];
// Or [self.locationManager requestWhenInUseAuthorization];
}
[self.locationManager startUpdatingLocation];
self.locationManager.delegate = self;
self.location = [[CLLocation alloc] init];
self.placesClient = [GMSPlacesClient sharedClient];
}
10. Menangani Pembaruan Lokasi
Pengelola lokasi akan memanggil kembali Pengontrol Tampilan Anda dengan pembaruan lokasi dengan memanggil fungsi didUpdateLocations. Anda harus menambahkan ini ke ViewController.m. Fungsinya akan terlihat seperti ini:
-(void)locationManager:(CLLocationManager *)manager didUpdateLocations:(NSArray<CLLocation *> *)locations{
// Enter code here
}
Fungsi ini perlu melakukan beberapa hal.
Pertama, cache akan meng-cache lokasi dengan yang terakhir diterima:
self.location = locations.lastObject;
Selanjutnya, tiga label untuk Lintang, Bujur, dan Ketinggian harus diperbarui.
self.lblLatitude.text = [NSString stringWithFormat:@"%f", self.location.coordinate.latitude];
self.lblLongitude.text = [NSString stringWithFormat:@"%f", self.location.coordinate.longitude];
self.lblAltitude.text = [NSString stringWithFormat:@"%f", self.location.altitude];
Berikutnya Anda akan memanggil Places API menggunakan Tempat klien. Anda melakukannya dengan menentukan fungsi callback yang akan mendapatkan daftar kemungkinan tempat. Places API menentukan kemungkinan Anda berada di tempat tertentu berdasarkan lokasi Anda. Ini menampilkan nama kemungkinan tempat, bersama dengan nilai antara 0 dan 1 yang berisi probabilitas bahwa Anda berada di tempat itu.
[self.placesClient currentPlaceWithCallback:^(GMSPlaceLikelihoodList *likelihoodList, NSError *error) {
Kemudian, Anda dapat menerapkan callback. Ini akan melakukan iterasi melalui daftar kemungkinan, menambahkan tempat dan kemungkinan untuk tempat tersebut.
[self.placesClient currentPlaceWithCallback:^(GMSPlaceLikelihoodList *likelihoodList, NSError *error) {
if (error != nil) {
NSLog(@"Current Place error %@", [error localizedDescription]);
return;
}
NSMutableString *strPlaces = [NSMutableString stringWithString:@""];
for (GMSPlaceLikelihood *likelihood in likelihoodList.likelihoods) {
GMSPlace* place = likelihood.place;
NSLog(@"Current Place name %@ at likelihood %g", place.name,
likelihood.likelihood);
NSLog(@"Current Place address %@", place.formattedAddress);
NSLog(@"Current Place attributions %@", place.attributions);
NSLog(@"Current PlaceID %@", place.placeID);
[strPlaces appendString:place.name];
[strPlaces appendString:@" "];
[strPlaces appendFormat:@"%g",likelihood.likelihood];
[strPlaces appendString:@"\n"];
}
self.lblPlaces.text = strPlaces;
}];
Setelah selesai, fungsi didUpdateLocations akan terlihat seperti ini:
-(void)locationManager:(CLLocationManager *)manager didUpdateLocations:(NSArray<CLLocation *> *)locations{
self.location = locations.lastObject;
self.lblLatitude.text = [NSString stringWithFormat:@"%f", self.location.coordinate.latitude];
self.lblLongitude.text = [NSString stringWithFormat:@"%f", self.location.coordinate.longitude];
self.lblAltitude.text = [NSString stringWithFormat:@"%f", self.location.altitude];
NSLog(@"%@", self.location.description);
[self.placesClient currentPlaceWithCallback:^(GMSPlaceLikelihoodList *likelihoodList, NSError *error) {
if (error != nil) {
NSLog(@"Current Place error %@", [error localizedDescription]);
return;
}
NSMutableString *strPlaces = [NSMutableString stringWithString:@""];
for (GMSPlaceLikelihood *likelihood in likelihoodList.likelihoods)
{
GMSPlace* place = likelihood.place;
NSLog(@"Current Place name %@ at likelihood %g", place.name, likelihood.likelihood);
NSLog(@"Current Place address %@", place.formattedAddress);
NSLog(@"Current Place attributions %@", place.attributions);
NSLog(@"Current PlaceID %@", place.placeID);
[strPlaces appendString:place.name];
[strPlaces appendString:@" "];
[strPlaces appendFormat:@"%g",likelihood.likelihood];
[strPlaces appendString:@"\n"];
}
self.lblPlaces.text = strPlaces;
}];
}
Anda kini siap untuk menjalankan aplikasi dan mengujinya.
11. Menjalankan Aplikasi di Emulator
Anda menjalankan aplikasi menggunakan tombol jalankan di kolom judul. Ini juga memungkinkan Anda memilih jenis lari, dan seperti yang Anda lihat di sini, saya menguji pada iPhone 6, menggunakan emulator.
Saat Anda menekan tombol jalankan, aplikasi akan mem-build dan meluncurkan. Anda akan melihat permintaan untuk mengizinkan aplikasi mengakses lokasi, termasuk string kustom yang Anda tentukan sebelumnya.
Setelah melakukan ini, Anda akan melihat pembaruan Lintang dan Bujur. Untuk mengubah lokasi, pilih menu Debug, lalu pilih lokasi. Misalnya, Anda dapat memilih ‘Freeway Drive'
Saat melakukannya, Anda akan melihat lokasi dengan perkiraan tempat yang diperbarui, yang menyimulasikan perjalanan jalan bebas hambatan.
Dan selesai! Anda telah berhasil mengakses detail tempat saat ini menggunakan Google Places API di iOS.