1. Sebelum memulai
Sebelum mulai membuat kode, ada beberapa prasyarat yang perlu 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 bisa mendapatkan Xcode di https://developer.apple.com/xcode/
CocoaPods
Places SDK for iOS tersedia sebagai pod CocoaPods. CocoaPods adalah alat pengelolaan dependensi open source untuk project Swift dan Objective-C. Jika belum memiliki alat ini, Anda harus menginstalnya sebelum melanjutkan. Aplikasi 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 'Create a new Xcode project'
Di layar berikutnya, Anda akan diminta memilih template untuk project baru. Pilih ‘Single View Application' untuk iOS, lalu tekan ‘Next'
Saat diminta untuk memasukkan Nama Produk, Anda dapat memilih apa pun yang Anda suka, tetapi pastikan untuk mencatat ID Paket yang dibuat untuk Anda. Anda akan memerlukannya nanti.
Tekan 'Berikutnya' dan project akan dibuat untuk Anda. Catat direktori tempat file dibuat. Tutup Xcode dan menggunakan Terminal, buka direktori tersebut.
Dengan menggunakan Terminal, masukkan perintah berikut:
pod init
File bernama Podfile akan dibuat untuk Anda. Edit untuk menambahkan pod GoogleMaps seperti ini:
target '{YOUR APP NAME}' do
pod 'GoogleMaps'
end
Simpan, lalu tutup Xcode. Pastikan untuk menutupnya, karena pada langkah berikutnya Anda akan mengedit project yang mendasarinya. Anda akan membuka file project yang berbeda setelah selesai, dan cukup umum bagi developer untuk bingung tentang lokasi semuanya jika mereka tidak menutup Xcode sebelumnya. 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 project ini mulai sekarang. Namun, sebelum melakukan coding, hal berikutnya yang Anda perlukan adalah kunci API.
2. Mendapatkan Kunci API Anda
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 membuat project konsol dan mengaktifkan Places API di project tersebut, serta mendapatkan kunci API, Anda siap memulai pengodean aplikasi Places API pertama.
Sebelumnya saat Anda menginstal file pod, file .xcworkspace baru dibuat untuk Anda. Buka dengan mengkliknya dua kali.
Anda akan melihat di Project Explorer bahwa Anda kini memiliki folder baru bernama'Pods'. Jika berhasil, Anda akan melihat folder GoogleMaps di dalamnya yang berisi framework.
4. Edit file Info.plist.
Saat Anda menjalankan aplikasi untuk pertama kalinya, iOS akan menampilkan dialog yang meminta pengguna memberikan izin untuk mengakses layanan lokasi. Dialog ini akan memberikan string yang Anda tentukan, dan Anda memasukkannya ke 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 di penjelajah project di sini:
Pilih, dan Anda akan melihat editor plist.
Arahkan kursor ke salah satu elemen, dan Anda akan melihat ikon'+' muncul. Tekan, dan Anda akan melihat entri baru 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. Mengedit App Delegate
Di penjelajah project, temukan dan buka AppDelegate.m. Anda akan menggunakannya untuk menambahkan Kunci API.
Di bagian atas file, tambahkan kode ini tepat di bawah baris #import:
@import GoogleMaps;
Kemudian, di fungsi didFinishLaunchingWithOptions:, tambahkan kode berikut tepat di atas baris ‘return YES':
[GMSServices provideAPIKey:@"<Add your API Key>"];
Pastikan untuk menggunakan Kunci API yang Anda buat sebelumnya.
6. Mengedit File Papan Cerita
Di penjelajah project, buka file Main.storyboard. Pastikan sidebar aktif dengan menekan tombol sidebar di sudut kanan atas.
Kemudian, di bagian bawah sidebar, temukan Kontrol Label dengan memastikan bahwa Library Objek dipilih.
Di View Controller Scene di sisi kiri, pastikan 'View' dipilih:
Kemudian, tarik lalu lepas 7 label ke tampilan. Susun seperti yang ditunjukkan di sini. Pastikan untuk menarik ukurannya agar sesuai dengan yang ditampilkan. Anda dapat mengedit teks dalam label dengan mengklik dua kali label dan mengetik nilai yang diperlukan:
Untuk label paling bawah (yang sangat besar), buka editor properti dan pastikan label tersebut disetel agar memiliki 0 baris (Secara default, label tersebut memiliki 1 baris). Hal ini akan memungkinkannya merender beberapa baris.
7. Buat Outlet untuk Nilai
Untuk 3 label'nilai', Anda harus membuat outlet. Hal ini akan memungkinkan Anda mengubah nilainya menggunakan kode. Untuk melakukannya, Anda harus mengaktifkan editor asisten terlebih dahulu. Untuk melakukannya, tutup sidebar properti terlebih dahulu dengan mengklik tombolnya untuk menghapusnya. (Tombol ini ditampilkan di langkah sebelumnya)
Kemudian, pilih tombol asisten – tombol ini adalah tombol lingkaran ganda yang ditampilkan di sini:
Pastikan file ViewController.h dirender. Jika tidak, Anda dapat mengubahnya menggunakan editor di bagian atas jendela asisten:
Kemudian, sambil menahan tombol CONTROL, tarik setiap label dan letakkan di bawah baris @interface dalam file ViewController.h di asisten. Dialog akan muncul dan menanyakan jenis koneksi yang ingin Anda buat:
Pastikan setelannya seperti yang ditunjukkan (Connection: Outlet; Type: UILabel; Storage: Weak), lalu beri nama masing-masing. Untuk tujuan codelab ini, saya memberi label Longitude, Latitude, dan Altitude dengan lblLongitude, lblLatitude, dan lblAltitude. Tarik juga label besar dari bawah ke atas, lalu 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 Location API dan Google Client API
Sebelum langkah terakhir – tempat Anda mem-build aplikasi untuk menggunakan Places API, Anda perlu menyiapkan beberapa variabel lagi dalam file header (ViewController.h). Berikut adalah Core Location Manager dan objek Core Location:
@property (strong, nonatomic) CLLocationManager *locationManager;
@property (strong, nonatomic) CLLocation *location;
Anda juga memerlukan Klien Google API:
@property GMSPlacesClient *placesClient;
Terakhir, Anda harus memperbarui file header agar class menerapkan 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
Langkah pertama adalah mengedit fungsi viewDidLoad untuk menginisialisasi Pengelola Lokasi, meminta otorisasi pengguna untuk mengakses lokasi, dan terakhir memulai pengelola lokasi sehingga 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 update lokasi dengan memanggil fungsi didUpdateLocations. Anda harus menambahkan ini ke ViewController.m. Fungsi ini akan terlihat seperti ini:
-(void)locationManager:(CLLocationManager *)manager didUpdateLocations:(NSArray<CLLocation *> *)locations{
// Enter code here
}
Fungsi ini perlu melakukan beberapa hal.
Pertama, lokasi akan di-cache dengan lokasi terakhir yang diterima:
self.location = locations.lastObject;
Selanjutnya, ketiga 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];
Selanjutnya, Anda akan memanggil Places API menggunakan klien Places. Anda dapat melakukannya dengan menentukan fungsi callback, yang akan mendapatkan daftar kemungkinan tempat. Places API menentukan kemungkinan Anda berada di suatu tempat tertentu berdasarkan lokasi Anda. API ini menampilkan nama tempat yang mungkin, beserta nilai antara 0 dan 1 yang berisi probabilitas bahwa Anda berada di tempat tersebut.
[self.placesClient currentPlaceWithCallback:^(GMSPlaceLikelihoodList *likelihoodList, NSError *error) {
Kemudian, Anda dapat menerapkan callback. Hal ini akan melakukan iterasi pada daftar probabilitas, menambahkan tempat dan probabilitas 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 Anda 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 menjalankan aplikasi dan mengujinya.
11. Menjalankan Aplikasi di Emulator
Anda menjalankan aplikasi menggunakan tombol jalankan di panel judul. Anda juga dapat memilih jenis eksekusi, dan seperti yang dapat Anda lihat di sini, saya sedang melakukan pengujian di iPhone 6, menggunakan emulator.
Saat Anda menekan tombol jalankan, aplikasi akan dibangun dan diluncurkan. Anda akan melihat permintaan untuk mengizinkan aplikasi mengakses lokasi, termasuk string kustom yang Anda tentukan sebelumnya.
Setelah melakukannya, Anda akan melihat pembaruan Latitude dan Longitude. Untuk mengubah lokasi, pilih menu Debug, lalu pilih lokasi. Misalnya, Anda dapat memilih 'Freeway Drive'
Saat melakukannya, Anda akan melihat lokasi dengan tempat-tempat yang mungkin ada di sekitarnya diperbarui, yang mensimulasikan perjalanan di jalan tol.
Selesai. Anda telah berhasil mengakses detail tempat saat ini menggunakan Google Places API di iOS.